My site https://james.darpinian.com/satellites/ uses WebGL, Web Workers, WASM, Service Workers, Notifications API, Geolocation API, probably some other web platform features I'm forgetting.

The use of workers and WASM is not obvious, but on page load it takes the current orbit parameters for every orbiting satellite that is potentially visible anywhere on Earth and calculates the future position of each satellite every few minutes for the next 5 days, and then checks each future position for visibility from your location (accounting for sun angle, earth occlusion, sky brightness etc), all client side before page load finishes. WASM allows me to use the canonical satellite propagation tools (SGP4, written in ancient C translated from Fortran) and workers let me use multiple cores and not block the UI too much.

I had a mild jaw-drop moment when it showed my house on a starry night with the satellite passing overhead! Very cool website

Too bad it doesnt work with Facebook blocked

It works for me (with FB blocked). I use privacy badger[1] and tried reloading the website after blocking facebook and twitter (by default it blocked cookies)

[1]: https://privacybadger.org/

Holy cow, this is amazing. Absolutely fantastic!

Amazing, minor nitpick it shows the ISS as visible over Ireland at approx 9pm tonight, pretty bright in Ireland at that time at this time of year, will check and report back if it was visible. Great work, you have amazing talent!

Thanks! ISS is very bright; bright enough that it is sometimes even visible before sunset if you know exactly where to look! It's fun to try to spot it in a bright sky although it can be difficult. Let me know if you find it!

Cloudy night, will try again soon.

Got a great view of the ISS last night just after sunset, thanks!

Cool! Glad it worked for you!

It seems there is a bug. I see ISS passing by, then I rotate the view a bit, and suddenly ISS passes again, all within a few seconds.

That isn't a bug, the ISS isn't passing by at that moment, the time it will pass over you is at the top. The looped video is showing you how the ISS will pass over you. It isn't a live feed.

Not sure why it's happening, but ISS passes overhead for me multiple times every few seconds. I'm in India. Firefox 100.

I'm not quite clear on what the issue is. By design the site shows the next satellite to pass over, and it loops every 20 seconds like a looping video as suggested by the seek bar and play/pause button at the bottom. Are you saying that it is looping faster than once every 20 seconds?

This is spendid. I've used other tools to spot the ISS previously, but this one makes it so intuitive. Great job.

Fantastic, 3 minutes after clicking on your website, i was watching the ISS passing by at my window.

when I grow up, I want to be a dev like you lol

Wow this is incredible. Can you add geostationary satellites too?

That seems out of scope for a site dedicated to visible satellite passes. Geostationary satellites are way too far away to be visible, and don't move relative to the observer.

how about google earth

Do you have WASM enabled? A cursory search indicates it's not on by default

I know its off, I have lots of things switched off, my point was the message wasnt that useful and one way you could improve the message to guide potential visitors to help them switch it on, if they wanted to, was to use the bug detection to really test if the browser is what it say is before giving the guidance to switch on stuff in a browser. Over engineered perhaps, but still valid.

I suppose technically it's imprecise, but erring towards cautionary rather than suggesting they switch stuff on. Someone comfortable with switching stuff on might go looking for it if they know what's up.

I used to do more precise messages like you're suggesting, but such a make or break feature I'd probably just be vague about it. MS edge incidentally is fine. It does what it does.

I feel like this isn't exactly what you're asking for, but the storytelling in: https://www.sbnation.com/a/17776-football feels like it opened up new my thoughts on how something could be communicated via the medium of the Internet and just made me think to some extent how woefully underutilized the browser/internet has been used as a story telling medium (at least to my limited experiences of these things)

Many thanks for the link, I think that's the most interesting and original thing I've read (or experienced?) this year ! :D

Holy cow. That was awesome. Thank you for sharing.

Makes one think what the internet could be like in an alternate reality or something.

That was fun :) thanks for sharing!

This falling sand game runs a particle simulation in rust compiled to web assembly and WebGL for fluid simulation calculated on the GPU (hope I remembered those technical details right I read it ages ago) https://sandspiel.club/

Plus it’s strangely addictive.

The creator even wrote a blog post describing how he made it. Press info on the top right to get an awesome breakdown of his approach.

Immediately thought of Powder Game, and it turns out that it's one of the main inspirations indeed (according to the info box)!

https://dan-ball.jp/en/javagame/dust/

I spent so many hours in that game. It also had ways to publish your creations, and people created anything from multiplayer coop games to entire ALUs in it. Good times, and thanks for linking the remake!

https://webwormhole.io and https://file.pizza both use WebRTC for p2p file transfer. They differ quite a lot in UX but both are really useful: it's 2022 and sending files to one another still seems to be a pain without tools like these.

For the average user, file sharing is already solved. If it’s a small file, you just send it via an IM app. If it’s a large file, you upload it to cloud storage and share a link

When the file is very large and time if of the essence there’s value in the p2p share as I imagine the combined time of sender and recipient is less than the purely sequential steps of party A uploads THEN party B downloads. But for most use case I agree it’s a solved problem

Solved problem? Most free-tier cloud storages won't even hold a half-hour long 4k video.

Uploading Gigabytes of media via p2p takes minutes nowadays, but you have to either pay or use p2p software to actually send it to another person.

1. Your assumption is wrong. I use my Q2n-4k, my friend uses his GoPro, we want to share our recordings once in a while.

2. Your assessment of P2P being "unworkable" is just mistaken (besides the obvious fact that two machines have to be online at the same time). Syncthing works great, wormhole worked fine, filepizza worked fine. I remember long time ago I simply used a magnet with a bunch of open trackers attached and it worked wonderful.

These common ways could see a lot of improvement. Everything but tiniest files would require a paid subscription from IM app provider. And sharing via cloud is awkward and slow.

> average user > you upload it to cloud storage and share a link

I'd wager a miniscule amount of people know how to do this.

What does the average user do to share a video?

They took the video on their phone, so they share it on WhatsApp.

But if they don’t have the video on their phone, they film it with their phone and then share it on WhatsApp.

That’s what the average user does.

Figma is written in C++ and compiled to web assembly. All the UX designers I know are using it because it's pretty powerful for a webapp.

Figma is cool, but every time I open a Figma link, my beefy laptop turns into a jet engine on takoff thrust.

I have figma open all day, never noticed it have any effect (M1 MBP)

Also M1 MBP, but I only use Figma when consulting a design, not creating one. It's definitely beefy (higher ram usage), but I assume it's electron based and has all of chromium running underneath it. I don't think that's a big deal for things like Figma that are usually someone's primary (or a close second) application. Hasn't been a serious issue for me, but I definitely close it when not in use instead of letting it hang around.

Is it an “Intel Inside” laptop?

Are you saying its an electron app running web assembly?

I think Figma being a browser web app is one of the core reasons why it’s outpacing alternatives both in terms of features and UX. It’s a remarkable feat.

https://penpot.app/about.html is an open source competitor to figma. I'm not a designer so I cannot speak to how good it is.

It was built to scratch the itch of the company Kaleidos.

Yes. I found it weird too. They put so much effort into making their app performant and then for the desktop app, wrapped it into an electron shell which is weird :)

I guess except the designing canvas, all the UI controls are built over DOM/Javascript and they needed a quick way to take them all into desktop. But I did expect more from Figma :)

Having access to the chrome dev tools during designing is very useful!

We are building https://studio.foxglove.dev/ which is a visualization tool for robotics. Click “Explore sample data” to see a demo.

Uses WebGL and some WebAssembly.

The left nav and menu is reminiscent of VSCode. I'm not accusing the project of plagiarism. I think more standardization, especially with menus, instead of reinventing the UX wheel for every project is a good thing. Is the code for the left nav widget open source? I want to use it, too.

VS Code is derived from the open source codebase (but note the official binaries and some other extensions are closed! Notably the remote extensions and some of the debugger stuff needed for the C# and python extensions), but I don't believe individual components of it are published in a consumable format anywhere

Wow - this looks great.

What's the tech-stack for this?

Other than WebGL - what do you use for the UI?

React + Typescript. Forgot to mention it’s open source so you can see for yourself:

https://github.com/foxglove/studio

It’s particularly cool that this works on mobile

WebGL: Google Maps is arguably the #1 application. It's used to draw the line drawing based maps and to re-draw them with different things emphasized depending on your needs (as well as rotate, scale, zoom, smoothly)

But also, of course the fact that it goes 3D. It feels like they've de-emphasized this feature because I suspect few people use or or even know it exists but demo

https://www.youtube.com/watch?v=mbxYG5Sb5RQ

You can also go to https://earth.google.com

AFAIK it's the same tech (not sure) but a UI for various kinds of exploration instead of directions

WebRTC, Google Meet uses WebGL/WebAssembly to provide the filter effects where your background is blurred out or replaced. AFAIK that doesn't happen on the server. It happens locally and then the video with the effects applied are sent over the net via WebRTC.

3D Buildings in Google Map like that was announced a few days ago at Google IO, it's called immersive view. https://blog.google/products/maps/three-maps-updates-io-2022...

I don't think we can actually use it yet though.

Edit: that video might be of a different 3D feature I have no idea of

The 3D view has been available since at least 2016

https://www.youtube.com/watch?v=YHe3ag3i8v8

AFAICT the announcement is saying they made it even more detailed than it already was

We built https://cleanfeed.net/ which is an online studio for pro audio.

Chances are if you enjoy radio, podcasts or movies, especially during the pandemic, that you've listened to something produced using Cleanfeed. In many cases you wouldn't even realise that co-host or guest is remote.

Just dropped zencastr, looks like you’re comparable.

Kind of

What made you drop zencastr?

This is a nice example

https://www.3dorderbook.com/

Thanks for sharing it! I made this a few weeks ago as part of a blog article and was really impressed how easy three.js was to use. Overall much easier to get into than using C++ and OpenGL where the window setup required several hours to set up back in the day.

That's awesome!

That is an awesome visualization. Hats off.

Photopea.com a browser based photoshop "clone".

This has to be my favorite webapp ever. I don't use it super often, but every time I do, I can't notice how amazing it is. I used Photoshop in the past so I'm familiar with the available tools and the menus and the hotkeys and this webapp emulates that so closely, it's astounding.

It's somehow more true to the older photoshop designs than photoshop itself. I love it.

https://noclip.website/ (doesn't tend to work well on mobile)

WebContainers: https://blog.stackblitz.com/posts/introducing-webcontainers/

https://www.shadertoy.com/ is a community / sharing model that couldn't really exist without WebGL.

shadertoy is awesome

ESP Web Tools uses WebSerial to allow users to install, update and manage firmware running on ESP microcontrollers: https://esphome.github.io/esp-web-tools/

On a similar note, you can flash your pixel devices from the Google website: https://old.reddit.com/r/GooglePixel/comments/raxrjg/til_you...

You connect your phone to the desktop via USB, then navigate to the specific website. Then it uses a Web API to talk to the phone. I'm not sure whether it uses privileged access though.

Something feels wrong to me that that only works in Chrome and Edge.

I've seen a trend in popular open source hobby electronics projects in the last year developing progressive web apps to replace their native apps, enabled by the addition of WebSerial in Chrome/Firefox. For example, ESC-Configurator in the drone world and ESPHome and Tasmota in the home automation world. Arduino even has a web IDE that you can program your Arduino from now.

For some reason though, Google decided WebSerial was too insecure for Android and disabled it, and Apple never implemented it in Safari. WebBluetooth is a thing as well but I think Bluetooth is too much of a pain, I haven't seen anyone use it yet.

Shoutout to WLED[0]. When I was able to flash my ESP with the latest version just from the browser I was kind of blown away. I was blindsided by it even though I have a lot of ESP projects myself and consider myself 'into the space'.

[0] https://kno.wled.ge/

The WebAudioModules (WAM) have some very cool demos if you're into music: https://www.webaudiomodules.org/wamsynths/

I've been learning tone.js as of late

I'm doing a ShowHN right now for a webapp to learn music sight reading: www.babeloop.com

It currently uses Tone.js for timing accuracy. Tone.js is pleasant to work with, but directly interacting with web audio context isn't too hard either, so IDK if the tradeoffs are really worth it.

Do you know if there's similar to a VST standard for WAM?

Would be interested in the possibility of online DAWs that can import plugins and open up for marketplaces where developers can build and publish these.

I've been thinking about this too, and it would be cool. I'm pretty sure no such standard exists though.

Do you have any ideas on what such an api could look like?

If I understand correctly, WebAudioModules is itself such an API, a proposed standard.

https://www.webaudiomodules.org/developers/

8th Wall https://8w.8thwall.app/welcome runs WASM on the web to perform SLAM (Simultaneous Localization and Mapping) and add Augmented Reality to your space without installing an app.

Everything runs on your device. Works in phone's browser and VR headsets' browser. Even has extra Computer Vision features like Image Target and face tracking as well.

This is really cool. Is the SLAM engine open source?

https://www.figma.com/ Is becoming the dominant design tool in the last couple companies I’ve worked for. I heard it used web assembly and canvas for a large portion of its app.

It's no longer becoming. It is the dominant design tool.

https://uxtools.co/survey-2021/#toolkit

The first time I saw someone share a 3D game from this website, I was confused: https://now.gg/games.html

The graphics were good, so I though what a nice use of WebGL. But then I noticed them being blocky,.. in a video compressiony way. Could it be? Yes, server-side rendered web games, streamed to you in real time without requiring account creation.

(The game I originally saw was https://now.gg/apps/paradyme-games/4102/solar-smash.html but seems to be down at the moment)

I work at https://PaperlessPost.com which isn't trying to melt anyones face with bleeding edge tech, it is blending these new features into a product to provide utility for normal people. For us this advanced stuff comes in based on the design you choose. Most of the "Flyer" designs have layers of animation, some examples that would use custom encoders and decoders implemented with WebWorkers, WebGL, WebAssembly along with some use of WebCodecs which is only available in Chrome now. https://paperlesspost.com/flyer/grill-time https://paperlesspost.com/flyer/roll-the-dice.

But other designs without animation would use 2d canvas in the editor and static images when they are sent out. In my mind the most advances stuff you will find out there is really about the "engines" that have been made in JS that might use some of these new APIs but without a sizable abstraction layer on top of them are likely not much more than a tech demo. Something like Google Maps or any of the web audio or graphics editors usually has way more "engine" type code with very carefully thought out performance considerations within it and the code that actually calls these APIs is often wrapped up and abstracted away as much as possible so that these APIs are called as little as possible.

We are building Construct, an entire game development IDE in the browser: https://editor.construct.net

Blind Upload uses crypto.subtle to encrypt files in the browser, before uploading them to the cloud and displaying the key only in the browser.

https://www.blindupload.org https://developer.mozilla.org/en-US/docs/Web/API/Crypto/subt...

We built a virtual escape room experience as part of our final year project: https://interactive.calgaryconnecteen.com/youth-in-crisis.

It was a fun project, built using A-Frame on the frontend. Feel free to check it out :)

Thank you for giving me the opportunity to showcase my JS canvas library, Scrawl-canvas[0], the aim of which is to help developers build responsive, interactive and more accessible canvas-based demos, infographics, art etc for their websites.

While the library is entirely 2D-canvas oriented and doesn't use any ultra-new tech like WebGL (or even less-new tech like web workers), it does play nicely with WebAssembly-ported tech such as ML models from MediaPipe[1] and TensorFlow...

[0] - https://scrawl-v8.rikweb.org.uk/

[1] - https://codepen.io/kaliedarik/pen/PopBxBM (Warning: demo will request to use your device's camera)

https://hal9.com helps data scientists build faster web applications.

It uses WebGL and WebAssembly to process larger datasets, perform inference in the browser with TensorFlow.js, and enables running Python code with Pyodide.

We're building a small game that runs on the web: https://supercilex.github.io/grocery_bagger_9000/

The Telegram web client uses all sorts of features and a reimplementation of React.

> The project incorporates lots of technologically advanced features, modern Web APIs and techniques: WebSockets, Web Workers and WebAssembly, multi-level caching and PWA, voice recording and media streaming, cryptography and raw binary data operations, optimistic and progressive interfaces, complicated CSS/Canvas/SVG animations, reactive data streams, and so much more.

https://github.com/Ajaxy/telegram-tt

The dev is pretty much a genius.

I hate to even ask, but for a security-focused product, is that a good thing?

I think there is a valid argument “there is no good video experience on web otherwise” but that’s still a long list of less-than-fully-mature dependencies.

What makes telegram security focused?

Uh, I guess they claim this?

any idea why they reimplemented react? to reduce bundle size?

Oooops, OT (not what you thought (really) but once there were a time...)

> https://freezine.xyz/0/frustration/index.html

(-;

Damn you, I just wasted like 20 minutes on this! :)

IO game https://krunker.io. Fun game that you can start playing immediately as a guest, but also has some depth to it.

Oh, wow, this is really cool. Looks like a blocky classic counter strike. I think I played de_aztec for a few rounds.

I'm not sure what the technology behind this one[0] is, but it's basically counter strike 1.6 in a browser.

[0] https://play-cs.com/

Coffeehouse[1], one-on-one voicechat with random HN users, uses WebRTC.

[1]: https://coffeehouse.chat/hn

If you're looking to build custom web apps, I highly suggest this Frontlyapp, a no-code front-end development software. I’ve been using it for a long while now and it helps me to be more efficient and save a lot of my time. Check the demo apps here: https://www.frontlyapp.com/?r=hn

Polygonjs [1] uses WebGL (via threejs [2]) pretty heavily. It allows you to create interactive WebGL experiences, without coding, only by connecting nodes. So you can set up geometry processing, particle systems, custom shaders or object behaviors.

[1] https://polygonjs.com

[2] https://threejs.org/

https://webvm.io is our public demo of CheerpX, an x86 virtualization technology made with WebAssembly.

At Leaning Technologies we have been using WebAssembly pretty much from day 1 as part of our C++ and Java compilers. CheerpX is our latest product, and we think it really pushes the boundaries of what is possible in the modern browser.

Will there ever be a public demo of CheerpX Flash?

For me as a student tinkering with whatever comes to hands (employment wasn't one of such things yet haha), I was pleased that it was very simple to make a web app work fully offline after initial load (including images and everything). You just go to the URL in your browser, without internet connection, and it loads. Not sure if the users are ready for this though

Pixlr.com uses webgl, wasm, file API, workers etc to push most performance out of the browser. We just piggybacked the new video API to encode a steam that we then use rust/wasm to put in a MP4 container. With that we get client side super performant video encoding, never seen anyone else do something similar yet.

I don't understand. It's Turing complete. You can do whatever you want. A browser is an Os. Sandboxed, sure.

Is this a fashion thing? Going past 5,000+ years of text?

Lots of colors, making sounds, motion. What else do you want? We're not getting smell. Haptics are kinky and nobody cares.

> We're not getting smell.

why not? https://www.sciencedaily.com/releases/2018/11/181127092549.h...

haha cool!

but seriously, smell is too low of bandwidth, too easy to get wrong, too expensive, and the chemistry is too hard

Don’t most of the newer browser versions of video conferencing products (Zoom, Teams etc) use WebRTC?

I made Packet Loss Test using WebRTC for a rather unconventional reason to do something previously impossible in the browser: https://packetlosstest.com/

My startup, Infurnia ( www.design.infurnia.com) is a web-based architecture design software written in C++ and compiled in WebAssembly. We are also using ThreeJS for rendering, but migrating to WebGL next month.

I'm curious, why are you migrating from ThreeJS to WebGL?

https://github.com/expenses/mateversum uses all 4 of WebXR, WebGL, WebAssembly and WebRTC.

Check out WebGPU https://web.dev/gpu/

Can someone also share the opposite of this for those of us tired of this?

take a look at https://3dit.de/

GrapheneOS.org

WebUSB-based phone-flash OS installer!

Utility of browsers and the web is delivering good content, and ability to link between unrelated content on unrelated sites. I'll nominate Wikipedia.

You are being downvoted but I think this a shame, because I think you are right. Change isn't always progressive, and I do believe, as a previous HN post discussed, in the utility of separate "document" webs (as our current web is designed) and "application" webs. (Which has been hacked on top of our current document model, and not without problems.)

This post isn't for sharing opinions on new web technologies, it's for sharing examples of them.

They are being downvoted because their post is wildy off-topic.