Rust examples for learning WebGPU
See the codeRust WebGPU examples porting Sascha Willems' Vulkan samples, with WASM and native support, based on the Sib render module.
Try the WASM demos here
| Example | Description | Screenshot |
|---|---|---|
triangle | Renders a colored indexed triangle using vertex and index buffers, WGSL vertex/fragment shaders, a render pipeline, and a depth attachment. |  |
vertexattributes | Renders the same indexed mesh through interleaved and separate vertex attribute buffers using matching shader locations for position, normal, UV, and tangent data. |  |
particlesystem | Updates flame and smoke particles on the CPU, streams them into an instance buffer, and renders billboard sprites over a normal-mapped scene. |  |
computeparticles | Updates 262,144 particle records in 1,024 compute workgroups using ping-ponged storage buffers, then renders the GPU-written state as additive textured billboards. |  |
computecloth | Simulates a spring-connected cloth grid in compute shaders, ping-pongs storage buffers, collides with a sphere, and renders the GPU-written cloth mesh. |  |
computecullandlod | Culls a dense object grid in a compute shader, buckets visible instances by LOD, writes indirect draw commands, and renders the compacted GPU instance buffers. |  |
nanite | Scales its Jax population to the detected GPU, streams requested geometry pages into a physical cache, selects projected-error meshlet LODs, and performs two-pass HZB occlusion with indirect draws. |  |
metropolis | Renders Sponza with GPU-skinned Jax crowds using clustered Forward+ lighting, compute frustum culling, indirect draws, physics, dynamic shadows, reflections, probe GI, particles, and temporal post-processing. |  |
computenbody | Evaluates 150,994,944 ordered particle interactions per frame with tiled workgroup memory, integrates one in-place storage buffer, and renders 12,288 additive billboards with runtime egui controls. |  |
computeraytracing | Ray traces spheres and planes in a compute shader, writing the result to a storage texture that is sampled by a fullscreen present pass. |  |
raytracingshadows | Casts primary and secondary shadow rays in a compute shader, shading a procedural scene into a storage texture and dimming occluded hits. |  |
raytracingreflections | Traces recursive reflection bounces in a compute shader, treating bright objects as reflectors and falling back to a sky-gradient miss color. |  |
raytracinggltf | Ray traces a textured skinned glTF character by flattening animated mesh data into compute-friendly geometry buffers with egui skinning controls and joystick camera movement. |  |
restirdi | Resamples direct-light candidates across time and neighboring pixels, tracing visibility through compact static Sponza and dynamic skinned Jax SAH BVHs. |  |
restirgi | Reuses one-bounce indirect-light path reservoirs across time and space over the same Crytek Sponza scene and animated Jax character. |  |
htmlmesh | Renders a simple inline HTML button page to an RGBA texture, uploads it to WebGPU, maps it onto a plane, and ray-maps pointer input back to the button. |  |
texture | Renders a textured indexed quad using a runtime-loaded PNG texture, a sampler, uniform buffer transforms, and fragment shader lighting. |  |
texturemipmapgen | Generates a full mip chain from a high-frequency texture using offscreen render passes, then samples the result on a textured tunnel. |  |
texturecubemap | Renders a skybox and reflective sphere from six bundled KTX1 faces loaded at runtime, a cube texture view, and a filtering sampler. |  |
texturearray | Renders seven stacked squares sampling separate layers from a runtime-built 2D texture array with two async-loaded images, RGB layers, and procedural layers. |  |
textoverlay | Renders glyph atlas text over a 3D scene using an overlay render pass, Unicode shaping, and RTL text. |  |
textmesh | Converts shaped LTR and RTL font outlines into extruded indexed mesh geometry with vertex colors and lighting. |  |
gltf | Loads an official glTF 2.0 textured box from URL, converts buffers and material data to render meshes, and samples its base color texture. |  |
gltfskinning | Loads a textured animated glTF 2.0 character, uploads joints and weights, and skins vertices in the WGSL vertex shader. |  |
instancing | Renders thousands of asteroid instances from one indexed mesh, using a per-instance vertex buffer for transform data and a 2D texture array for material variation. |  |
indirectdraw | Renders many instanced plant submeshes from indexed indirect command buffers, with a skysphere, ground mesh, and per-instance transforms. |  |
pipelines | Renders the original treasure glTF scene through Phong, toon, and wireframe render pipelines in separate viewports. |  |
gears | Renders animated procedural toothed gears using indexed mesh buffers, per-gear uniform transforms, depth testing, and fragment shader lighting. |  |
stencilbuffer | Renders a toon-shaded Venus mesh, writes stencil during the first draw, then draws a normal-expanded outline where stencil differs. |  |
occlusionquery | Tests teapot and sphere visibility; native builds resolve occlusion-query samples, while WASM uses a browser-safe fallback and shades hidden meshes dark. |  |
radialblur | Renders a glow sphere to an offscreen target, samples it in a fullscreen radial blur pass, and blends the result over the lit scene. |  |
bloom | Renders glowing UFO parts to an offscreen target, runs separable Gaussian blur passes, and additively composites the bloom over the lit scene. |  |
deferred | Fills world-position, normal, and albedo G-buffer attachments with an animated skinned Jax character and checkerboard floor, then evaluates six lights in one fullscreen composition draw. |  |
deferredmultisampling | Stores four samples per position, normal, albedo, and depth G-buffer pixel, then shades each sample under six lights and averages the result in a single-sample fullscreen pass. |  |
deferredshadows | Renders animated Jax into three 1024×1024 Depth32Float maps, then evaluates eight spotlights and up to 27 comparison samples in the fullscreen deferred pass. |  |
ssao | Uses up to 32 screen-space spiral samples from the position, normal, and depth G-buffer, blurs the full-resolution AO mask with a weighted 5×5 kernel, and combines it with deferred shadows. |  |
parallaxmapping | Ray-marches 48 height layers from a combined normal-height map on a flat two-triangle plane, then refines the UV intersection for parallax occlusion mapping. |  |
multisampling | Renders the textured Voyager in three indexed draws into 4x multisampled color and depth attachments, then resolves once into the surface. |  |
multisamplingalphatocoverage | Renders instanced alpha-masked oak trees with 4x MSAA and alpha-to-coverage enabled for smoother foliage edges. |  |
pbr | Renders a 7x7 grid of procedural spheres with GGX/Schlick PBR shading, varying metallic and roughness per instance. |  |
pbribl | Samples irradiance, prefiltered environment mips, and a BRDF integration LUT for image-based PBR lighting. |  |
pbrtexture | Renders the Cerberus glTF mesh with albedo, normal, AO, metallic, and roughness maps under image-based PBR lighting. |  |
shadowmapping | Renders a depth-only light pass into a shadow map, then samples that depth texture in the scene pass for projected shadows with PCF filtering. |  |
shadowmappingcascade | Splits the camera frustum into four cascades, renders each split into a depth texture array layer, and samples the selected layer for directional shadows. |  |
shadowmappingomni | Renders the scene into the six faces of a floating-point cube map, stores point-light distance, and samples it for omni-directional shadows. |  |
geometrydash | Runs an original one-button rhythm platformer with fixed-step physics, procedural GPU geometry, obstacle collisions, jump pads, progress tracking, and responsive mouse, keyboard, and touch controls. This game was created at the request of my son, Ryan, who designed the concept and gameplay inspired by the original Geometry Dash game. |  |
residentevil2 | Runs Claire outside the R.P.D. with GPU skinning, imported glTF idle, forward-running, and backward-walking animations, persistent tank controls, projected contact shadows, and three classic fixed-camera zones. |  |
The residentevil2 example uses Claire Redfield - The Darkside Chronicles by many-bees under CC BY 4.0.
Native:
cargo run --example triangle
WASM:
scripts/build-wasm.sh --release
cargo run --bin serve
Then open http://127.0.0.1:8080.
Rust examples for learning WebGPU
See the codeRust WebGPU examples porting Sascha Willems' Vulkan samples, with WASM and native support, based on the Sib render module.
Try the WASM demos here
| Example | Description | Screenshot |
|---|---|---|
triangle | Renders a colored indexed triangle using vertex and index buffers, WGSL vertex/fragment shaders, a render pipeline, and a depth attachment. | |
vertexattributes | Renders the same indexed mesh through interleaved and separate vertex attribute buffers using matching shader locations for position, normal, UV, and tangent data. | |
particlesystem | Updates flame and smoke particles on the CPU, streams them into an instance buffer, and renders billboard sprites over a normal-mapped scene. | |
computeparticles | Updates 262,144 particle records in 1,024 compute workgroups using ping-ponged storage buffers, then renders the GPU-written state as additive textured billboards. | |
computecloth | Simulates a spring-connected cloth grid in compute shaders, ping-pongs storage buffers, collides with a sphere, and renders the GPU-written cloth mesh. | |
computecullandlod | Culls a dense object grid in a compute shader, buckets visible instances by LOD, writes indirect draw commands, and renders the compacted GPU instance buffers. | |
nanite | Scales its Jax population to the detected GPU, streams requested geometry pages into a physical cache, selects projected-error meshlet LODs, and performs two-pass HZB occlusion with indirect draws. | |
metropolis | Renders Sponza with GPU-skinned Jax crowds using clustered Forward+ lighting, compute frustum culling, indirect draws, physics, dynamic shadows, reflections, probe GI, particles, and temporal post-processing. | |
computenbody | Evaluates 150,994,944 ordered particle interactions per frame with tiled workgroup memory, integrates one in-place storage buffer, and renders 12,288 additive billboards with runtime egui controls. | |
computeraytracing | Ray traces spheres and planes in a compute shader, writing the result to a storage texture that is sampled by a fullscreen present pass. | |
raytracingshadows | Casts primary and secondary shadow rays in a compute shader, shading a procedural scene into a storage texture and dimming occluded hits. | |
raytracingreflections | Traces recursive reflection bounces in a compute shader, treating bright objects as reflectors and falling back to a sky-gradient miss color. | |
raytracinggltf | Ray traces a textured skinned glTF character by flattening animated mesh data into compute-friendly geometry buffers with egui skinning controls and joystick camera movement. | |
restirdi | Resamples direct-light candidates across time and neighboring pixels, tracing visibility through compact static Sponza and dynamic skinned Jax SAH BVHs. | |
restirgi | Reuses one-bounce indirect-light path reservoirs across time and space over the same Crytek Sponza scene and animated Jax character. | |
htmlmesh | Renders a simple inline HTML button page to an RGBA texture, uploads it to WebGPU, maps it onto a plane, and ray-maps pointer input back to the button. | |
texture | Renders a textured indexed quad using a runtime-loaded PNG texture, a sampler, uniform buffer transforms, and fragment shader lighting. | |
texturemipmapgen | Generates a full mip chain from a high-frequency texture using offscreen render passes, then samples the result on a textured tunnel. | |
texturecubemap | Renders a skybox and reflective sphere from six bundled KTX1 faces loaded at runtime, a cube texture view, and a filtering sampler. | |
texturearray | Renders seven stacked squares sampling separate layers from a runtime-built 2D texture array with two async-loaded images, RGB layers, and procedural layers. | |
textoverlay | Renders glyph atlas text over a 3D scene using an overlay render pass, Unicode shaping, and RTL text. | |
textmesh | Converts shaped LTR and RTL font outlines into extruded indexed mesh geometry with vertex colors and lighting. | |
gltf | Loads an official glTF 2.0 textured box from URL, converts buffers and material data to render meshes, and samples its base color texture. | |
gltfskinning | Loads a textured animated glTF 2.0 character, uploads joints and weights, and skins vertices in the WGSL vertex shader. | |
instancing | Renders thousands of asteroid instances from one indexed mesh, using a per-instance vertex buffer for transform data and a 2D texture array for material variation. | |
indirectdraw | Renders many instanced plant submeshes from indexed indirect command buffers, with a skysphere, ground mesh, and per-instance transforms. | |
pipelines | Renders the original treasure glTF scene through Phong, toon, and wireframe render pipelines in separate viewports. | |
gears | Renders animated procedural toothed gears using indexed mesh buffers, per-gear uniform transforms, depth testing, and fragment shader lighting. | |
stencilbuffer | Renders a toon-shaded Venus mesh, writes stencil during the first draw, then draws a normal-expanded outline where stencil differs. | |
occlusionquery | Tests teapot and sphere visibility; native builds resolve occlusion-query samples, while WASM uses a browser-safe fallback and shades hidden meshes dark. | |
radialblur | Renders a glow sphere to an offscreen target, samples it in a fullscreen radial blur pass, and blends the result over the lit scene. | |
bloom | Renders glowing UFO parts to an offscreen target, runs separable Gaussian blur passes, and additively composites the bloom over the lit scene. | |
deferred | Fills world-position, normal, and albedo G-buffer attachments with an animated skinned Jax character and checkerboard floor, then evaluates six lights in one fullscreen composition draw. | |
deferredmultisampling | Stores four samples per position, normal, albedo, and depth G-buffer pixel, then shades each sample under six lights and averages the result in a single-sample fullscreen pass. | |
deferredshadows | Renders animated Jax into three 1024×1024 Depth32Float maps, then evaluates eight spotlights and up to 27 comparison samples in the fullscreen deferred pass. | |
ssao | Uses up to 32 screen-space spiral samples from the position, normal, and depth G-buffer, blurs the full-resolution AO mask with a weighted 5×5 kernel, and combines it with deferred shadows. | |
parallaxmapping | Ray-marches 48 height layers from a combined normal-height map on a flat two-triangle plane, then refines the UV intersection for parallax occlusion mapping. | |
multisampling | Renders the textured Voyager in three indexed draws into 4x multisampled color and depth attachments, then resolves once into the surface. | |
multisamplingalphatocoverage | Renders instanced alpha-masked oak trees with 4x MSAA and alpha-to-coverage enabled for smoother foliage edges. | |
pbr | Renders a 7x7 grid of procedural spheres with GGX/Schlick PBR shading, varying metallic and roughness per instance. | |
pbribl | Samples irradiance, prefiltered environment mips, and a BRDF integration LUT for image-based PBR lighting. | |
pbrtexture | Renders the Cerberus glTF mesh with albedo, normal, AO, metallic, and roughness maps under image-based PBR lighting. | |
shadowmapping | Renders a depth-only light pass into a shadow map, then samples that depth texture in the scene pass for projected shadows with PCF filtering. | |
shadowmappingcascade | Splits the camera frustum into four cascades, renders each split into a depth texture array layer, and samples the selected layer for directional shadows. | |
shadowmappingomni | Renders the scene into the six faces of a floating-point cube map, stores point-light distance, and samples it for omni-directional shadows. | |
geometrydash | Runs an original one-button rhythm platformer with fixed-step physics, procedural GPU geometry, obstacle collisions, jump pads, progress tracking, and responsive mouse, keyboard, and touch controls. This game was created at the request of my son, Ryan, who designed the concept and gameplay inspired by the original Geometry Dash game. | |
residentevil2 | Runs Claire outside the R.P.D. with GPU skinning, imported glTF idle, forward-running, and backward-walking animations, persistent tank controls, projected contact shadows, and three classic fixed-camera zones. | |
The residentevil2 example uses Claire Redfield - The Darkside Chronicles by many-bees under CC BY 4.0.
Native:
cargo run --example triangle
WASM:
scripts/build-wasm.sh --release
cargo run --bin serve
Then open http://127.0.0.1:8080.