Together with my colleague Johan Holwerda, I’ve created the RenderQueue, a platform where we’ll share a curated selection of WebGL and WebGPU demos we’ve developed over the past decade.
These demos are primarily technical in nature, focusing on proof of concepts and experiments rather than visual aesthetics. For the more recent WebGPU demonstrations, high-end graphics cards (Nvidia RTX 3070 or better) are required.
If you have any questions or comments about the demos, please don’t hesitate to reach out to us.
Available Demos
Lightmap
A scene containing multiple instanced meshes is rendered using a single pre-calculated lightmap. The lightmap is baked using Bakery. Phong-based lighting is used to add a specular term.
SDF LOD
Near objects (a Stanford dragon with 80k triangles each) are rendered with triangles and far objects are drawn by ray-marching signed distance fields. Object are sorted front to back for minimal overdraw. Drag the instance count slider to see how many instances your device can draw
BVH Ray Tracing
Experiment to build a Bounding Volume Hierarchy (BVH) to speed up raytracing. The code is based on the excellent tutorial: Coding Adventure: Optimizing a Ray Tracer (by building a BVH) by Sebastian Lague.
Turtletoy
This demo draws and animate Turtle (vector) graphics. It is used to render the header and screensaver of Turtletoy.
Particle Life
There are four types of particles and a 4 x 4 interaction matrix which holds numbers between -1 (fully attract) and 1 ( fully repel). In most random configurations, the particles will form some patterns.
Gaussian splatting
based on the 3D Gaussian Splatting for Real-Time Radiance Field Rendering paper. This demo uses the hardware rasterizer and not a tile based renderer for the point rendering. Points are sorted fully every frame with counting sort instead of using radix sort like in the paper. https://arxiv.org/abs/2308.04079
Metaballs
Metaballs are rendered using ray marching in a fragment shader on a surface that is slightly larger than the radius of the metaball itself. You can enable _ShowPadding in the UI top right to see all the pixels that are ray marched. Metaballs that don't interact with each other are rendered using a sphere mesh for optimization.
The rendering loop is running in a separate worker using an OffscreenCanvas.
Jellyfish
Mysterious creatures of the deep sea, procedurally generated with particles.
Townscaper
I reverse-engineered Townscaper’s rendering style in WebGL.
You can drag and drop an exported .obj file from the game onto the WebGL canvas to display it.
Wolfenstein RTX
Ray tracing is used to add diffuse global illumination to the first level of the Wolfenstein 3D game. You can also enable ray traced reflections on the spheres.
Particle Dance
Partiles are spawned at the surface of a animated skinned mesh.
Similar posts
If you like this post, you may also like one of my other posts:
- Contemporary Relief
- Niño, a puzzle game for iOS
- WebGPU Ray Tracer: Accelerating the Stanford Dragon
- E-Ink Family Calendar: a Raspberry Pi project
- Five years of Turtletoy: a minimalistic, generative art platform