Simulating The Ocean with Three.js and JavaScript. This project is an implementation of the first chapter of the GPU Gems book, focusing on effective water simulation.

You can try out the project here. The data takes a little bit time to load, so be patient until everything is loaded (few seconds).

• index.html: Contains the basic HTML structure.

• main.js: Contains the logic of the animation. Be careful, the code is very unorganized. Things to keep in mind:

  • main(): Application entry point function.
  • First Pass: Initializes the first pass (renders wave positions and normals into two textures).
  • Second Pass: Initializes the second pass (final render. Uses the textures from the first pass to draw the scene). Option Main in the UI corresponds to this pass.
  • Third Pass: The third pass handles visualization of the normal and position maps. Normal and Position options in the UI correspond to this pass.

• shaders.js: Contains the necessary shader codes for the three passes.

This project was made possible with the following resources:

• GPU Gems Chapter 1: Effective Water Simulation from Physical Models
• PolyHaven: Syferfontein 1d Clear (Pure Sky)
• Three.js Documentation: Three.js
• WebGL Shaders and GLSL: WebGL Fundamentals