WebGL Water Simulation

Original code by @gtongue | Original version host location

Modified by @dkillough and @NateD247 for CS 354 Computer Graphics; hosted at https://dkillough.github.io/354-WebGLWaterSimulation/

Overview

WebGL Water Simulation is a visualization of waves. Rendered using WebGL and GLSL.

Features

• Control Wave Properties

  Use the available sliders to change how the wave displays
  • Amplitude
  • Frequency
  • Wavelength
  • Steepness
  • Color
  • Transparency

• Moving Camera

  Use the arrow keys to rotate the view or tilt the camera up and down

• Wireframe View

  Check the box at the top to enable wireframe mode.

Gerstner Waves

Gerstner waves are used to generate the waveforms. Gerstner waves are modified sine waves that have steeper peaks and smoother valleys, allowing us to more accurately simulate waveforms.

• S = Steepness
• A = Amplitude
• W = Wavelength
• F = Frequency
• D = Direction

Here's an excerpt from water_vs, the vertex shader for the water surface:

void gerstnerWave (float S, float A, float W, float F, vec2 D){
  float w = 2.0*3.141592/W;
  S = S * steepness;
  float Q = S / (w * A);
  float dotD = dot(position.xz, D);

  float cosine = cos(w * dotD + time * F);
  float sine = sin(w * dotD + time * F);

  vec3 wave = vec3(position.x + (Q * A * D.x * cosine) , A * sine, position.z + (Q * A* cosine * D.y));

  waves += wave;

  vec3 waveNormal = vec3((D.x * w * A * cosine), 1.0 - (Q * w * A * sine), -(D.y * w * A * cosine));

  waveNormals +=  waveNormal;
  numWaves++;
}

And here are examples of this function being used to generate multiple waves

• The amplitude, wavelength, and frequency here are the values from the sliders

gerstnerWave(1.0, amplitude*.3, wavelength, frequency, vec2(0.0,1.0));
gerstnerWave(1.0, amplitude*.2, wavelength, frequency, vec2(.3,.7));
gerstnerWave(1.0, amplitude*.3, wavelength, frequency*.7, vec2(.8,.2));

Updating the project for 2022

Housekeeping

Proposal.md notes @gtongue's original project reposal, including the technologies used.

Since this project was initially created in 2018, many of the dependencies needed to be modified; @dkillough has updated the following:

• .gitignore now includes package-lock.json
• typos in wireframeOn() method call and this file (readme.md)
• updated webpack config file for webpack 3.0+ (module.rules instead of module.loaders)
  • If a random person on the internet stumbles upon this who's getting the Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema error, check out our webpack.config.js file on line 14 and 15. If yours says module: and then loaders:, change "loaders" to "rules".

Cloning and running the repository

• git clone <link> as you would a normal repo
• install the npm cli if you don't have it already (should be bundled with node.js)
• npm i -g webpack webpack-cli: installs webpack, the bundling manager, if you don't already have it. (can omit -g flag and manually change PATH as well if you don't want to install globally, but if you want to do this in the first place you probably know how to do this already)
• npm i: install dependencies from package.json file

Making changes

• Edit code as necessary
• Run webpack in terminal from the root of the directory to bundle code into bundle.js
• Open /index.html in web browser of choice (tested working in Firefox 99.0.1)