• Editor's Note and Browser Support: Hector Arellano, a web graphics developer, shares his 13-year journey from early WebGL hacks to WebGPU-enabled fluid simulations. The demo relies on WebGPU which isn't supported in all browsers. Use WebGPU-compatible browsers like the latest versions of Google Chrome or Microsoft Edge.
• 13 Years Ago: Hector was inspired by a new demo from the Gathering Party with fluid simulations. WebGL was new but lacked features like "Atomics," "Indirect Draw Calls," etc. Hector faced challenges as he didn't know where to start and Felix bet against him doing similar in the browser.
• 10 Years Ago: Another amazing demo with real-time ray tracing was released. Hector spent 3 years understanding and hacking WebGL to replicate some features. He could simulate particles using SPH and create a mesh with marching cubes but the implementation was not as beautiful and had performance limitations.
• 7 Years Ago: Hector implemented a hybrid ray tracer. Results were nice but required a good GPU. He spent a lot of time but the work couldn't be used in a real project. He stopped and Felix won the bet.
• WebGPU Enters the Scene: WebGPU is based on modern API standards, allowing Hector to use compute shaders, atomics, etc. He made a small demo to learn WebGPU features. The demo has 4 steps: fluid simulation, geometry generation, geometry rendering, and composition.
• Fluid Simulations: SPH was used initially but later switched to Position Based Dynamics (PBF) for stability and ease of tweaking. PBF requires iterative methods but is faster than SPH. A single pass is used to apply forces and generate a grid acceleration structure.
• Marching Cubes (Geometry Generation): Different methods to generate surfaces from particles were discussed. Marching Cubes generates a mesh from a potential field and can be rasterized. Potential generation can be done using a 3D blur or jump flood algorithm. Voxels are checked and triangles are generated using compute shaders.
• Rendering: Visual aesthetics are important. Point splatting is best for real-time rendering of liquids. For non-transparent liquids, marching cubes with PBR material is good. Voxel Cone Tracing (VCT) is used for ambient occlusion and subsurface scattering. Materials are implemented using shaders and bindings.
• Composition: Composition is crucial. Paul-guilhem Repaux helped with composition issues like roughness on floor reflection, background lighting, and color correction. Different transitions were explored for the letters.
• Some Final Words: Optimization and performance are not discussed as the demo is for good GPUs. Felix's letters simulation using SPH is also shown. Overall, Hector is still working to change the outcome of the bet. The complete code base is available on GitHub.