The RenderQueue

Trails along SDF

Particles are attracted to an iso-surface of a signed distance field (SDF). The SDF is generated from a 3D model. The particles also repel and attract each other to ensure an equal spread over the surface

View Trails along SDF at the RenderQueue.

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.

View Lightmap at the RenderQueue. (blog post)

Per Triangle Sorting

A single triangle mesh is rendered from back to front by sorting individual triangles to achieve near-perfect transparency. A full sort is performed each frame on 800k triangles using counting sort.

View Triangle Sorting at the RenderQueue.

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

View SDF LOD at the RenderQueue.

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.

View BVH Ray Tracing at the RenderQueue. (blog post)

Turtletoy

This demo draws and animate Turtle (vector) graphics. It is used to render the header and screensaver of Turtletoy.

View Turtletoy at the RenderQueue.

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.

View Particle Life at the RenderQueue.

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

View Gaussian Splats at the RenderQueue.

Disco Ball

A disco ball composed of individual discs is rendered. Based on the brightness of the reflected light, flares are added to the scene for each disc.

View Disco Ball at the RenderQueue.

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.

View Metaballs at the RenderQueue.

Jellyfish

Mysterious creatures of the deep sea, procedurally generated with particles.

View Jellyfish at the RenderQueue.

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.

View Townscaper at the RenderQueue. (blog post)

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.

View Wolfenstein RTX at the RenderQueue. (blog post)

Particle Dance

Partiles are spawned at the surface of a animated skinned mesh.

View Particle Dance at the RenderQueue.