webgpu

Rust WebGPU examples porting Sascha Willems' Vulkan samples, with WASM and native support, based on the Sib render module.

Demo

Try the WASM demos here

Examples

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.

Running

Native:

cargo run --example triangle

WASM:

scripts/build-wasm.sh --release
cargo run --bin serve

Then open http://127.0.0.1:8080.