WebGPU & Graphics
WebGPU and WGSL in Practice: Ten Million Particles of Real-Time Fluid, Ray Tracing and Neural Rendering in the Browser
Build a complete modern WebGPU graphics pipeline from scratch, dig into parallel compute-shader algorithms in WGSL (WebGPU Shading Language), and hold a steady 60 FPS in the browser while simulating 10,000,000 particles of SPH fluid dynamics.
#Compute Shader
#Fluid Dynamics
#Ray Tracing
sph_particle_compute.wgslwgsl
// WGSL Compute Shader for 10M Fluid Particles SPH Simulation
struct Particle {
pos: vec3<f32>,
density: f32,
vel: vec3<f32>,
pressure: f32,
};
@group(0) @binding(0) var<storage, read_write> particles: array<Particle>;
@group(0) @binding(1) var<uniform> simParams: SimParameters;
// One workgroup is 256 threads
@compute @workgroup_size(256, 1, 1)
fn main(@builtin(global_invocation
Seraphina Lin
2025-02-08