Add ocean shader settings and control sliders for wave properties

src/constants.ts

@@ -1,5 +1,5 @@
 // Configuration Constants
-export const GRID_SIZE = 128;
+export const GRID_SIZE = 256;
 export const NOISE_TEXTURE_WIDTH = 1024;
 export const NOISE_TEXTURE_HEIGHT = 1024;
 export const CANVAS_WIDTH = 800;

src/main.ts

@@ -145,6 +145,11 @@ var oceanLOD: OceanLOD;
 var curRotX = Config.CAMERA_DEFAULT_ROT_X;
 var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
 var wireframeMode = false;
+/** Ocean shader settings */
+var waveHeight = 1.0;
+var waveSpeed = 1.0;
+var foamIntensity = 1.0;
+var glitterIntensity = 1.0;
 function drawScene() {
     fps++;
     let now = new Date();
@@ -203,6 +208,17 @@ function drawScene() {
         gl.uniform3fv(eye_loc, camera.pos);
         let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
         gl.uniform1f(uTime_loc, timeSpent);
+        
+        // Ocean shader settings
+        let uWaveHeight_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uWaveHeight");
+        gl.uniform1f(uWaveHeight_loc, waveHeight);
+        let uWaveSpeed_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uWaveSpeed");
+        gl.uniform1f(uWaveSpeed_loc, waveSpeed);
+        let uFoamIntensity_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uFoamIntensity");
+        gl.uniform1f(uFoamIntensity_loc, foamIntensity);
+        let uGlitterIntensity_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uGlitterIntensity");
+        gl.uniform1f(uGlitterIntensity_loc, glitterIntensity);
+        
         oceanLOD.draw(gl, wireframeMode);
     }
     requestAnimationFrame(drawScene);
@@ -305,6 +321,23 @@ function main() {
         }
         console.log(`Wireframe mode: ${wireframeMode ? 'ON' : 'OFF'}`);
     });
+    
+    // Ocean settings sliders
+    window.addEventListener('waveHeightChange', ((evt: CustomEvent) => {
+        waveHeight = evt.detail;
+    }) as EventListener);
+    
+    window.addEventListener('waveSpeedChange', ((evt: CustomEvent) => {
+        waveSpeed = evt.detail;
+    }) as EventListener);
+    
+    window.addEventListener('foamIntensityChange', ((evt: CustomEvent) => {
+        foamIntensity = evt.detail;
+    }) as EventListener);
+    
+    window.addEventListener('glitterIntensityChange', ((evt: CustomEvent) => {
+        glitterIntensity = evt.detail;
+    }) as EventListener);
 
     initShaders();
     initGeometry();