Explore examples
Browse runnable TinyFX programs by topic.
Fundamentals
Buffers
A storage-buffer primer that updates and visualizes data on the GPU.
Cube
A rotating cube that introduces meshes, shaders, and orbit controls.
Gradient
A fullscreen color gradient for the smallest useful TinyFX program.
Instancing
Draw a large field of cubes efficiently with GPU instancing.
Modules
A multi-file shader example with reusable palette helpers.Procedural
Aurora
Animated northern lights rendered with layered procedural noise.
Nebula Feedback
A feedback-driven procedural nebula with evolving color and detail.
Protean Clouds
A stylized volume raymarch with animated density and color grading.
Singularity Engine
A procedural sci-fi singularity effect with layered animated shading.
Volume Perlin
A GPU-generated 3D Perlin texture rendered as a colorful first-hit isosurface inside a raymarched box. The 128 cubed density field is initialized once with texture-domain compute. Each frame intersects camera rays with the volume, advances by a user-controlled step count, and shades the first sample above the density threshold from its local gradient and position.
Volumetric Clouds
A daylight atmosphere and curved cloud layer rendered with volume marching.Rendering
Caustics
Realtime colored caustics, ported from the three.js WebGPU example. A transmissive duck renders into an HDR light-space map using a refracted repeating pattern, surface-facing occlusion, and chromatic splitting. The floor then receives that map as a colored shadow beneath a soft spotlight. Switch to the glass pane to see the same reusable projection pass applied to a different mesh and texture.
Feedback
A minimal texture feedback loop that evolves its previous frame.
Hybrid Depth
A hybrid rendering example that combines depth-aware passes.
Mip Filtering
Compare texture mip levels and filtering behavior in a 3D scene.
Post Pixel
A low-resolution scene pass with depth- and normal-aware pixel outlines, ported from the three.js WebGPU pixelation example. The checkerboard scene renders into color, normal, and depth targets at a fraction of the window resolution. A nearest-neighbor fullscreen pass enlarges those texels and uses four neighboring samples to darken depth silhouettes and brighten creases between differently oriented surfaces.
Raymarch
A signed-distance-field scene rendered with fragment raymarching.
Shadow Map
Cast real-time shadows with a depth map and a lit 3D scene.Scenery
Scenes
Crystal City
A procedural cityscape of crystalline towers beneath shifting light.
Cube World
A blocky voxel-style landscape built from instanced cubes.
Kinetic Sculpture
An animated sculptural scene with tunable geometry and light.
Sponza
Render the Sponza glTF scene with TinyFX camera and lighting controls.
Terrain
An interactive procedural terrain scene with an orbit camera.
Toy Car
Load and display a glTF toy car with material-aware lighting.Simulation
Cloth
A Verlet cloth simulation ported from the three.js WebGPU compute example. The 31 by 31 particle sheet is held by seven fixed pins and connected by 3,660 structural and shear springs. Two ordered compute passes evaluate spring forces and update vertices at a fixed 360 Hz, including gravity, procedural wind, and collision with a moving sphere.
Flood Fill Stack
A GPU flood fill that uses an explicit work stack.
Fluid
A grid fluid solver with feedback passes, dye, and pointer stirring.
Galactic Collision
Two fully live disc galaxies merge through particle-mesh self-gravity. Seventy thousand mass elements represent stars, dissipative gas, bulges, and extended dark haloes. Their shared gravitational potential is solved on a three-level 3D multigrid hierarchy; local gas pressure and shocks rebuild a thick, irregular rotating remnant without imposing a disc plane.
GPU Life
Particle Life, ported from SilverSpace's GPU Life reference. This multi-file TinyFX version uses the reference's atomic linked-list engine: particles exchange into spatial hash buckets, then inspect only nearby bucket chains. It runs 50,000 particles with 200 directed species, clustered swarms, mouse forces, vortex mode, and instanced soft discs.
Gravity
A many-body gravity simulation rendered as moving particles.
Light Propagation
A 2D global illumination simulation using circular-harmonic light fields.
Particle Field
A dense animated particle field updated on the GPU.
Particles
A compact particle simulation with GPU-driven movement and drawing.
Splash
An interactive MLS-MPM fluid simulation ported from matsuoka-601/Splash. One GPU substep scatters fixed-point mass and momentum through integer atomics, updates a retained grid, and gathers back into 40,000 or 70,000 particles. The surface renderer uses sphere depth impostors, the newer Narrow-Range Filter, additive thickness, and cubemap reflection and refraction. Move the pointer through the water to stir it; drag to orbit, scroll to zoom, and compress the box from the controls.
WebGPU Marching Cubes
Dynamic marching-cubes mesh generation, ported from Thibault Coppex's WebGPU reference as a multi-file TinyFX example. A GPU append list classifies a 48-cubed volume from TinyFX sdf:: primitives, then its GPU-owned triangle count drives an indirect draw. The vertex stage reconstructs interpolated surface vertices and normals; Poly Haven rock, ground, and mud assets provide triplanar color, normal, and height detail.UI & Input
Oscilloscope
An interactive oscilloscope-style visualization with live controls.
Paint 2D
A direct-manipulation 2D paint surface driven by pointer input.
UI Color Mixer
Mix a scene color through immediate-mode sliders and color controls.
UI Draggables
Explore draggable immediate-mode controls in a TinyFX scene.
UI Gallery
A gallery of TinyFX immediate-mode widgets and their states.
UI Scene Controls
Use immediate-mode controls to adjust a live 3D scene.