Repository files navigation

WebTide is an ocean simulation based onJerry Tessendorf's paper, implemented on WebGPU with BabylonJS.

This was my final project for the INF585 "Computer Animation" course at École Polytechnique. The report is onlineon my blog.

An online demo is availablehere, and the spherical version is availablehere.

• GPU-based FFT
• Phillips spectrum
• JONSWAP spectrum
• Wave vertices vertical displacement
• Choppy waves (waves vertices horizontal displacement)
• Physically based ocean shading
• Wrapping on a sphere with triplanar mapping
• Jacobian-based foam

Using the ocean in your own project is straightforward:

// This is the resolution of the wave spectrum. Bigger is better but slower.consttextureSize=512;// This is the size of the water plane in meters.consttileSize=10;// Define your base spectrumconstinitialSpectrum=newPhillipsSpectrum(textureSize,tileSize,engine);// Create the water materialconstwaterMaterial=newWaterMaterial("waterMaterial",initialSpectrum,scene);// Create a subdivided planeconstwater=MeshBuilder.CreateGround("water",{width:tileSize,height:tileSize,subdivisions:textureSize},scene);// Assign the water material to the planewater.material=waterMaterial;// The method to update the material every framefunctionupdateScene(){constdeltaSeconds=engine.getDeltaTime()/1000;waterMaterial.update(deltaSeconds,light.direction);}// Register the update method to the scenescene.executeWhenReady(()=>{scene.registerBeforeRender(()=>updateScene());engine.runRenderLoop(()=>scene.render());});

You can have a look at the code insrc/ts/minimal.ts for the simplest example possible.

You might want to use a custom spectrum for your ocean. No worries, I got you covered.

TheWaterMaterial class takes any object that implements theInitialSpectrum interface for theinitialSpectrum parameter.

You can copy and paste the code for the Phillips Spectrum (the typescript class and the wgsl shader code) and start from there.

I made this simulation using many different resources found online:

• Simulating Ocean Water by Jerry Tessendorf

• GPU-based FFT fromBabylonJS Ocean Demo by Popov72

• Nice specular coefficients fromShadertoy by afl_ext

• Acerola's excellentvideo breakdown of Tessendorf's paper

• Tangent calculations by Rikard Olajos

• Tropical sunny day skybox from theBabylonJS Asset Library

• Sand texture fromEngin Akyurt

To run the project locally, you need to have Node.js installed. Then, run the following commands:

pnpm installpnpm run serve

If you don't havepnpm installed, you can install it withnpm install -g pnpm.