r/webgl

It's got tons of easter eggs and things to discover and things to learn!

This is a web-based live black hole rendering simulator I've worked on for a while now. I'm excited to share it with you!

I always wanted an intuitioin for how black holes operated visually, aggressively warping the fabric of spacetime to reproject photons, but I only ever saw them rendered against a starfield. I wanted a simulation where I could see better how the actual geometry deformed as a result, so I built my own from scratch!

Hope you like it!

dave :)

Hi all, I just created this Marimo moss ball interaction I'd like to share with you guys.

https://imoss.bio

500,000 hair particles. Reacts to physics. Sub-surface lighting. Aberration, blur, and edge distort post-processing on top. 60+ fps across devices. Achieved by estimating the clumping pattern in relation to momentum and torque, and baking lighting calculations into the shader itself.

Hey everyone.

This demo is a new in-browser interactive real-estate experience that is nearing completion. It's 100% customizable depending on the project and is currently integrated in a Wordpress site. These experiences best go with a fresh website re-design for maximum brand impact but can also be simply deployed on an existing site as well.

I am looking to collaborate with real-estate / architecture professionals here who'd like to give their work an actual "feel" before sharing with clients. Merely brochure pdfs/static images/videos do not cut it anymore. These effects "actually" take your property to the end-user.

Some technical facts, about this particular demo project:

1. Extremely efficient and lightweight experience, built upon low-level WebGL which completely gets rid of redundant code left-over by mainstream libraries (like Three JS, Spline etc.). The complete minimized JS file for this project is a mere 170kBs gzipped to just 55kB. Three JS/Spline would have lead this to be beyond 1MB.
2. The 3d model used is heavily optimized for web usage without affecting the look on any device. Total file size: 1.7MB only!
3. Efficient use of shaders which puts the target device's GPU (graphics card) to use rather than overburdening the CPU and causing lag.
4. Distracting UI elements are ignored on mobile devices to focus more on the model on small screens.

So, yeah. That's about it in a gist. I'm open to answering related questions and discussing any potential collaborations.

Finally, in my future posts, I will be posting about some more enhancements and the responsive nature of this demo for smaller screens.

Follow me on social media for these updates and other useful content.✌

Check the working demo video at my IG: https://www.instagram.com/ux_by_khan/

Noisemaker is an open source (MIT) browser-based system for making shader art. It's designed for artists as well as developers writing creative tools. This is a ground-up rewrite of an engine we originally released as closed source in our shader art creation tool, Noisedeck. We undertook this effort because we ran into a hard performance wall with texture management in the original design. The bottleneck was CPU-to-GPU texture copying, and fixing it meant redesigning for fully GPU-resident textures. We also wanted a more flexible pipeline.

We researched several well-known libraries, but couldn't find a pre-existing solution fitting our use case. Our requirements were WebGL2 support (modern features like MRT and multi-pass), WebGPU support (for future compatibility), a pipeline-centric API surface (not a scene graph), and a permissive license.

The new engine encapsulates three layers:

1. Effects, which are JS or JSON objects defining the shader passes, parameters, and textures.
2. High-level composition DSL with program state abstraction. The running program can be represented as text which can be round-tripped to/from the UI controls. The program state binds the editable params to a GPU-resident graph.
3. Canvas renderer (demo: https://noisemaker.app/demo/shaders/) designed for arbitrarily chaining effects. Noisemaker's effects collection covers noise, particles, distortions, patterns, color, blending, lighting, stateful simulations. The renderer supports WebGL2 or WebGPU, and the effects target pixel-level parity across each backend. The engine supports WebGPU compute, but our own shaders follow GPGPU patterns for consistency with WebGL2.

It takes minimal code to integrate the rendering pipeline. Assuming a canvas element somewhere on the page, this example runs an animated noise effect:

const SHADER_CDN = 'https://shaders.noisedeck.app/1'

const { CanvasRenderer } = await import(\${SHADER_CDN}/noisemaker-shaders-core.esm.min.js`)`

const renderer = new CanvasRenderer({
canvas: document.getElementById('canvas'),
width: 1024, height: 1024,
basePath: SHADER_CDN,
useBundles: true,
bundlePath: \${SHADER_CDN}/effects`})`

await renderer.loadManifest()
await renderer.loadEffect('synth/noise')

// DSL program to create a shader graph. "search" is an effect namespace directive.
await renderer.compile(\\`search synthnoise().write(o0)render(o0)\)`

renderer.start()

I'll do my best to address any feedback or questions you have about the project. I'd love to discuss where it fits in the creative coding landscape relative to other libraries.

I turned all of the planes and satellites data off b/c its too much for my computer. But I want to upgrade computers and continue this project until it becomes a hologram or AR map. When the ships and planes are tracked they are moving at realistic speeds and it shows on the map.

Quick video showing updates to my latest real-estate experience for the web.

Some nice new additions in the form of animated traffic and support for a complete 360° "rendered" tour.

This whole experience is 100% customizable according to the client's project and isn't limited to real-estate but can very effectively be applied to other heavy industrial design segments where a complex product/project needs to be broken down into smaller, interactive chunks to better share and convey to the end clients.

Follow me for more crazier projects that actually solve business problems.✌

Link to the full video: https://www.instagram.com/reel/DX7ktwBN0l6