snowflow_demo
A real-time procedural snow rendering demo built with WebGPU, Babylon.js and hand-written WGSL. Features GPU-generated terrain, snow deformation, procedural characters, cloth, surf wakes, water spells, atmosphere and post-processing—without textures, meshes, HDRIs or animation assets.
What is it?
What it is
A real-time snow rendering technical demonstration built with WebGPU, Babylon.js, and hand-written WGSL.
Why it exists
To demonstrate advanced GPU-driven procedural techniques including geometry clipmaps, persistent terrain deformation, procedural character animation, and complex snow shading without the use of external textures or meshes.
Who should use it
Graphics programmers, game developers, and WebGPU enthusiasts interested in advanced real-time rendering techniques, procedural terrain, and shader programming.
Who should avoid it
Beginners with little or no experience in GPU programming, WebGL/WebGPU, or shader development; users without WebGPU-capable hardware; those seeking simple or high-level projects.
How it works
A quick walkthrough in plain English
How snowflow_demo works
Step 1 of 3
You interact with it
Open snowflow_demo, send a request, or connect it to your stack.
Features
Advantages
- High performance due to GPU-driven generation (no textures/meshes/animation data)
- No CPU-to-GPU geometry uploads during runtime
- Physically-derived lighting and refraction
- Highly customizable via live performance overlay
- Consistent visual fidelity through shared shader includes
- Decoupled simulation and tessellation costs
Disadvantages
- Requires WebGPU-capable hardware and modern browsers
- No WebGL fallback provided by design
- High VRAM usage (~350 MB) for high-resolution buffers
- Requires discrete or recent integrated GPU for optimal performance
Installation
native
npm install npm run dev # vite dev server on :5173 npm run build # production build into dist/ npm run preview # serve the production build
FAQ
What browser and hardware do I need to run Snowflow?
Snowflow requires a WebGPU‑capable desktop browser (Chrome/Edge 113+, Firefox 141+, Safari 26+) and a discrete or recent integrated GPU. There is no WebGL fallback – if navigator.gpu is missing the page shows a message and stops.
How do I control the demo and open the settings overlay?
Click to capture the pointer, WASD to move, mouse to look, wheel to zoom, Shift to sprint, right‑mouse hold to snow‑surf, keys 1‑5 for the five spells, and F1 or the backtick (`) key to open the settings and performance overlay.
How is the terrain and snow rendered without any textures or meshes?
The terrain uses a nested‑ring geometry clipmap (8 rings, 8.5 cm spacing, ~870 m radius) with a single draw call; vertex shaders handle world placement, CDLOD morphing and displacement. The heightfield is layered gradient noise baked into a 4096² RG32F texture. Snow shading combines multi‑scale normals, analytic derivatives, subsurface scattering, GGX specular, SH ambient and procedural glints – all computed in shaders.
Can you explain the deformation system and its performance impact?
Deformation uses a persistent additive state buffer (two 2048² RGBA16F targets) updated each frame by a full‑screen pass that scrolls, relaxes and splats. Addressing is toroidal so the window follows the player without copying buffers. About 71% of trail depth survives a minute, spreading via anisotropic diffusion, berm‑into‑depression slump, wind‑driven infill and slow exponential decay.
What are the steps to run Snowflow locally?
Clone the repository, run npm install, then npm run dev to start the Vite dev server on port 5173. For a production build use npm run build, and npm run preview to serve the built version.
Featured in Videos
YouTube tutorials and walkthroughs for snowflow_demo
Alternatives
Similar projects ranked by category, topics, and text overlap.
