Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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. Basic indexed triangle
vertexattributes Renders the same indexed mesh through interleaved and separate vertex attribute buffers using matching shader locations for position, normal, UV, and tangent data. Vertex attributes
particlesystem Updates flame and smoke particles on the CPU, streams them into an instance buffer, and renders billboard sprites over a normal-mapped scene. CPU particle system
computeparticles Updates particle positions and velocities in a compute pass using ping-ponged storage buffers, then renders the GPU-written buffer as textured billboards. Compute particles
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. Compute cloth
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. Compute cull and LOD
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. Nanite-style Jax meshlet rendering
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. Metropolis GPU-driven renderer
computenbody Simulates particle attraction in compute shaders using tiled workgroup memory, then renders the particles as textured billboards with runtime egui controls. N-body simulation
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. Compute shader ray tracing
raytracingshadows Casts primary and secondary shadow rays in a compute shader, shading a procedural scene into a storage texture and dimming occluded hits. Ray traced shadows
raytracingreflections Traces recursive reflection bounces in a compute shader, treating bright objects as reflectors and falling back to a sky-gradient miss color. Ray tracing reflections
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. Ray tracing glTF
restirdi Resamples direct-light candidates across time and neighboring pixels, tracing visibility through compact static Sponza and dynamic skinned Jax SAH BVHs. ReSTIR direct illumination
restirgi Reuses one-bounce indirect-light path reservoirs across time and space over the same Crytek Sponza scene and animated Jax character. ReSTIR global illumination
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. HTML mesh
texture Renders a textured indexed quad using a runtime-loaded PNG texture, a sampler, uniform buffer transforms, and fragment shader lighting. Textured indexed quad
texturemipmapgen Generates a full mip chain from a high-frequency texture using offscreen render passes, then samples the result on a textured tunnel. Texture mipmap generation
texturecubemap Renders a skybox and reflective sphere from a runtime-loaded cubemap using six JPEG faces, a cube texture view, and a cube sampler. Runtime-loaded cubemap reflection
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. Runtime-built texture array
textoverlay Renders glyph atlas text over a 3D scene using an overlay render pass, Unicode shaping, and RTL text. Text overlay
textmesh Converts shaped LTR and RTL font outlines into extruded indexed mesh geometry with vertex colors and lighting. 3D text mesh
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. glTF textured box
gltfskinning Loads a textured animated glTF 2.0 character, uploads joints and weights, and skins vertices in the WGSL vertex shader. glTF vertex skinning
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. Instanced asteroid field
indirectdraw Renders many instanced plant submeshes from indexed indirect command buffers, with a skysphere, ground mesh, and per-instance transforms. Indirect draw jungle scene
pipelines Renders the original treasure glTF scene through Phong, toon, and wireframe render pipelines in separate viewports. Multiple render pipelines
gears Renders animated procedural toothed gears using indexed mesh buffers, per-gear uniform transforms, depth testing, and fragment shader lighting. Animated procedural gears
stencilbuffer Renders a toon-shaded Venus mesh, writes stencil during the first draw, then draws a normal-expanded outline where stencil differs. Stencil buffer outline
occlusionquery Tests teapot and sphere visibility; native builds resolve occlusion-query samples, while WASM uses a browser-safe fallback and shades hidden meshes dark. Occlusion query visibility test
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. Radial blur glow sphere
bloom Renders glowing UFO parts to an offscreen target, runs separable Gaussian blur passes, and additively composites the bloom over the lit scene. Bloom offscreen rendering
deferred Fills position, normal, and albedo G-buffer attachments in an MRT pass, then lights the scene in a fullscreen composition pass. Deferred shading G-buffer composition
deferredmultisampling Fills 4x MSAA G-buffer attachments, then manually resolves each sample in the fullscreen deferred lighting pass. Multi sampled deferred shading
deferredshadows Renders three shadow-map layers with vertex-only depth passes, then samples them in the fullscreen deferred lighting pass. Deferred shadows
ssao Generates screen-space ambient occlusion from deferred depth and normals, blurs it, and applies it during shadowed composition. Screen space ambient occlusion
parallaxmapping Renders a textured plane with normal mapping and parallax occlusion mapping, sampling height from the alpha channel of a combined normal-height map. Parallax occlusion mapping
multisampling Renders the Voyager glTF model into 4x MSAA color and depth attachments, then resolves the color target into the swapchain. Multisampled Voyager glTF model
multisamplingalphatocoverage Renders instanced alpha-masked oak trees with 4x MSAA and alpha-to-coverage enabled for smoother foliage edges. Multisampling alpha-to-coverage oak trees
pbr Renders a 7x7 grid of procedural spheres with GGX/Schlick PBR shading, varying metallic and roughness per instance. PBR material grid
pbribl Samples irradiance, prefiltered environment mips, and a BRDF integration LUT for image-based PBR lighting. PBR image based lighting
pbrtexture Renders the Cerberus glTF mesh with albedo, normal, AO, metallic, and roughness maps under image-based PBR lighting. Textured PBR Cerberus model
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. Projected shadow mapping
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. Cascade shadow mapping
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. Omni-directional shadow mapping

ReSTIR acceleration

The ReSTIR examples use bvh for the shared native and WASM acceleration structure. A native asset tool builds Sponza's SAH BVH in parallel, serializes compact 32-byte GPU nodes, and commits the versioned result so both platforms load the same hierarchy without rebuilding it at startup. Jax builds its topology once and refits the animated bounds at runtime.

Running

Native:

cargo run --example triangle

WASM:

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

Then open http://127.0.0.1:8080.

About

Rust examples for learning WebGPU

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages