url - https://gnikoloff.github.io/webgpu-compute-metaballs/

code - https://github.com/gnikoloff/webgpu-compute-metaballs

Technologies Used:

Typescript, WebGPU, WGLSL

Role:

Development

I wrote this demo to get better at WebGPU as well as learning different graphics techniques. Here is a bunch of things I implemented:

• Metaballs isosurface via marching cubes calculated entirely on the GPU with compute shaders via a GPUComputePipeline
• Deferred rendering using 2 rgba16float textures. I encoded the normals to only two channels as seen here. My GBuffer layout looks like this:

1. Texture 1: RG: Normal, B: Metallic, A: Mesh ID (ID is used in the deferred pass to apply conditional shading to different meshes)
2. Texture 2: RGB: Albedo, A: Roughness

• Physically based shading with a Cook-Torrance BRDF taken from LearnOpenGL, albeit copy-pasted most of the GLSL and rewrote it to WGLSL
• Shadow mapping
• HDR and tone mapping
• Bloom postprocessing done with compute shader, again via GPUComputePipeline. I composited the bloom on top of the scene with additive blending.