Can you share websites that are pushing the utility of browsers forward?

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 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)

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.

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.

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.

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.

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.

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.

This is a nice example

https://www.3dorderbook.com/

Photopea.com a browser based photoshop "clone".

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.

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/

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.

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

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.

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.

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.

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

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

(-;

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

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.

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.

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.

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.

https://utcc.utoronto.ca/~cks/space/blog/web/PlainHTMLAppeal