Infinite Procedural Terrain & Optical Simulation (WebGPU)

Project Title: Infinite Procedural Terrain & Optical Simulation (WebGPU) Role: Graphics Engineer Core Stack: TypeScript, WebGPU, WGSL, Procedural Rendering

This work encompasses the research and development of procedural generation using the next-generation WebGPU rendering API. To test the absolute limits of this API, I built a standalone engine capable of generating infinite topology, real-time lighting, and PBR-based water physics maintaining a stable 60 FPS.

To maintain optimal performance at scale, the project follows a strict separation of concerns paradigm. TypeScript (operating on the CPU) doesn't calculate a single mountain or wave. Its only responsibility is to initialize the state, manage memory buffers, and feed the graphics card. All mathematical heavy lifting is offloaded entirely to the GPU via WGSL compute and render pipelines.

The terrain starts as a perfectly flat mathematical plane where y = 0. To transform this primitive plane into organic mountains and valleys, I implemented spatial noise functions evaluated directly in the Vertex Shader.

For the generated terrain to have accurate volume and react to dynamic lighting, the system calculates the surface Normal (the vector perpendicular to the mountain's face) programmatically on the fly, rather than relying on pre-baked texture maps.

Instead of using a static, flat texture, the water is rendered as an independent mesh driven by a real-time optical simulation. To achieve cinematic realism, the WGSL water shader implements fundamental physical light phenomena, specifically the Fresnel Effect using Schlick's Approximation.

In the compute pipeline, this physics principle is translated into highly optimized WGSL logic:

This ensures that the reflection coefficient dynamically shifts based on the camera's viewing angle, rendering highly realistic water surfaces without the computational cost of pure raytracing.