From e9512fb88a128522b553172dc0d9ddc500535a4d Mon Sep 17 00:00:00 2001
From: Gulum <gulum@rismer.de>
Date: Sat, 31 Jan 2026 22:47:20 +0100
Subject: [PATCH] Add ocean shader settings and control sliders for wave
 properties

---
 index.html       | 310 ++++++++++++++++++++++++++++++++++++++++-------
 src/constants.ts |   2 +-
 src/main.ts      |  33 +++++
 3 files changed, 299 insertions(+), 46 deletions(-)

diff --git a/index.html b/index.html
index f2bcd52..fe44ef3 100644
--- a/index.html
+++ b/index.html
@@ -95,6 +95,56 @@
             font-size: 14px;
             backdrop-filter: blur(10px);
         }
+        
+        .slider-group {
+            margin: 8px 0;
+        }
+        
+        .slider-group label {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 4px;
+            font-size: 13px;
+        }
+        
+        .slider-group input[type="range"] {
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: rgba(255, 255, 255, 0.2);
+            outline: none;
+            -webkit-appearance: none;
+            appearance: none;
+        }
+        
+        .slider-group input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #4a9eff;
+            cursor: pointer;
+        }
+        
+        .slider-group input[type="range"]::-moz-range-thumb {
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #4a9eff;
+            cursor: pointer;
+            border: none;
+        }
+        
+        .slider-value {
+            background: rgba(255, 255, 255, 0.15);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 11px;
+            min-width: 35px;
+            text-align: center;
+        }
     </style>
     <script id="noise-fs" type="x-shader/x-fragment">
             precision mediump float;
@@ -191,40 +241,122 @@
 
         varying vec3 v_fragPos;
         varying vec3 v_normal;
+        varying float v_waveHeight;
+        varying float v_foamFactor;
 
         uniform vec3 eyePos;
-
-        vec3 lightColor = vec3(1.0, 1.0, 1.0);
+        uniform float uFoamIntensity;
+        uniform float uGlitterIntensity;
         
-        void main(void) {
-            vec3 norm = normalize(v_normal);
-            vec3 lightDir = normalize(vec3(0.3, 0.5, 1.0)); // Sun direction
+        // Simple hash function for noise
+        float hash(vec2 p) {
+            return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+        }
+        
+        // Value noise for foam texture
+        float noise(vec2 p) {
+            vec2 i = floor(p);
+            vec2 f = fract(p);
+            f = f * f * (3.0 - 2.0 * f); // smoothstep
+            
+            float a = hash(i);
+            float b = hash(i + vec2(1.0, 0.0));
+            float c = hash(i + vec2(0.0, 1.0));
+            float d = hash(i + vec2(1.0, 1.0));
+            
+            return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+        }
+        
+        // Fractal noise for more detailed foam
+        float foamNoise(vec2 p) {
+            float n = 0.0;
+            n += 0.5 * noise(p * 8.0);
+            n += 0.25 * noise(p * 16.0);
+            n += 0.125 * noise(p * 32.0);
+            n += 0.0625 * noise(p * 64.0);
+            return n;
+        }
 
-            float diff = max(dot(norm, lightDir), 0.0);
+        void main(void) {
+            vec3 lightColor = vec3(1.0, 1.0, 0.95);
+            vec3 sunDirection = normalize(vec3(0.3, 0.5, 0.8));
+            
+            vec3 norm = normalize(v_normal);
+            
+            // View direction
+            vec3 viewDir = normalize(eyePos - v_fragPos);
+            
+            // Diffuse lighting
+            float diff = max(dot(norm, sunDirection), 0.0);
             vec3 diffuse = diff * lightColor;
 
-            // View direction
-            vec3 toCameraVector = normalize(eyePos - v_fragPos);
-            vec3 reflec = normalize(reflect(-toCameraVector, norm));
-
             // Schlick's approximation to Fresnel factor
-            float n1 = 1.0, n2 = 1.33333;
-            float R0 = pow((n1 - n2) / (n1 + n2), 2.0);
-            float fresnel = R0 + (1.0 - R0) * pow(1.0 - max(dot(norm, toCameraVector), 0.0), 5.0);
+            float R0 = 0.02;
+            float fresnel = R0 + (1.0 - R0) * pow(1.0 - max(dot(norm, viewDir), 0.0), 5.0);
 
-            vec3 oceanColor = vec3(0.0, 0.3, 0.4);
-            vec3 skyColor = vec3(0.6, 0.8, 1.0);
+            // Deep and shallow water colors
+            vec3 deepColor = vec3(0.0, 0.08, 0.15);
+            vec3 shallowColor = vec3(0.0, 0.35, 0.45);
+            vec3 skyColor = vec3(0.5, 0.7, 0.9);
+            vec3 foamColor = vec3(0.95, 0.98, 1.0);
             
-            // Specular highlights
-            vec3 halfwayDir = normalize(lightDir + toCameraVector);
-            float spec = pow(max(dot(norm, halfwayDir), 0.0), 256.0);
-            vec3 specular = spec * lightColor * 0.8;
+            // Blend between deep and shallow based on wave height
+            float heightFactor = clamp(v_waveHeight * 2.0 + 0.5, 0.0, 1.0);
+            vec3 oceanColor = mix(deepColor, shallowColor, heightFactor);
+            
+            // Sun glitter - uses wave normals for natural sparkle from fine surface detail
+            vec3 reflectDir = reflect(-sunDirection, norm);
+            float specAngle = max(dot(viewDir, reflectDir), 0.0);
+            
+            // Smooth base specular
+            float specBase = pow(specAngle, 64.0) * 0.4;
+            // Medium highlights
+            float specMid = pow(specAngle, 256.0) * 1.2;
+            // Sharp glitter peaks
+            float specSharp = pow(specAngle, 1024.0) * 3.0;
+            
+            vec3 specular = (specBase + specMid + specSharp) * lightColor * uGlitterIntensity;
+            
+            // Subsurface scattering
+            float sssDot = max(dot(viewDir, -sunDirection), 0.0);
+            float sssWaveContribution = clamp(v_waveHeight + 0.3, 0.0, 1.0);
+            float sssNormalContribution = pow(1.0 - max(dot(norm, sunDirection), 0.0), 2.0);
+            float sss = pow(sssDot, 3.0) * sssWaveContribution * sssNormalContribution * 1.5;
+            vec3 sssColor = vec3(0.1, 0.6, 0.5) * sss;
+            
+            // Rim SSS effect
+            float rimSSS = pow(1.0 - max(dot(norm, viewDir), 0.0), 3.0) * 0.3;
+            vec3 rimColor = vec3(0.0, 0.4, 0.4) * rimSSS * heightFactor;
 
-            // Subsurface scattering approximation
-            float sss = pow(max(dot(toCameraVector, -lightDir), 0.0), 4.0) * 0.3;
-            vec3 sssColor = vec3(0.0, 0.5, 0.5) * sss;
-
-            vec3 finalColor = mix(oceanColor, skyColor, fresnel) * clamp(diffuse, 0.4, 1.0) + specular + sssColor;
+            // Foam with texture - foam persists longer
+            vec2 foamUV = v_fragPos.xy * 1.5;
+            float foamPattern = foamNoise(foamUV);
+            
+            // Create foam patches with softer edges
+            float foamThreshold = 1.0 - v_foamFactor * 1.2 * uFoamIntensity;
+            float foam = smoothstep(foamThreshold, foamThreshold + 0.35, foamPattern);
+            
+            // Add some bubble-like spots with softer transition
+            float bubbles = smoothstep(0.65, 0.85, noise(foamUV * 15.0)) * v_foamFactor;
+            foam = clamp(foam + bubbles * 0.3, 0.0, 1.0);
+            
+            // Softer edge fade based on foam factor
+            foam *= smoothstep(0.0, 0.25, v_foamFactor);
+            
+            // Additional soft fade at foam edges
+            foam = pow(foam, 0.7) * uFoamIntensity;
+            
+            // Combine all lighting
+            vec3 reflectedColor = mix(oceanColor, skyColor, fresnel);
+            vec3 waterColor = reflectedColor * clamp(diffuse, 0.3, 1.0) + specular + sssColor + rimColor;
+            
+            // Blend foam on top with slight transparency variation
+            vec3 finalColor = mix(waterColor, foamColor * clamp(diffuse + 0.4, 0.0, 1.0), foam * 0.85);
+            
+            // Slight fog for distant water
+            float dist = length(eyePos - v_fragPos);
+            float fog = 1.0 - clamp(dist * 0.015, 0.0, 0.6);
+            finalColor = mix(skyColor * 0.85, finalColor, fog);
             
             gl_FragColor = vec4(finalColor, 1.0);
         }
@@ -236,12 +368,15 @@
             uniform mat4 model;
             uniform mat4 projection;
             uniform float uTime;
+            uniform float uWaveHeight;
+            uniform float uWaveSpeed;
 
             varying vec3 v_fragPos;
             varying vec3 v_normal;
+            varying float v_waveHeight;
+            varying float v_foamFactor;
             
-            // Gerstner wave function
-            // Returns displacement (xyz) and partial derivatives for normal calculation
+            // Gerstner wave function - higher steepness = spikier waves
             vec3 gerstnerWave(vec2 pos, float time, vec2 direction, float steepness, float wavelength, out vec3 tangent, out vec3 binormal) {
                 float k = 2.0 * 3.14159 / wavelength;
                 float c = sqrt(9.8 / k);
@@ -271,46 +406,93 @@
             void main(void) {
                 vec4 worldPos = model * vec4(positionAttr.xyz, 1.0);
                 vec2 pos = worldPos.xy;
-                float time = uTime * 0.001;
+                float time = uTime * 0.0004 * uWaveSpeed;
+                float heightMod = uWaveHeight;
                 
                 vec3 displacement = vec3(0.0);
                 vec3 tangent = vec3(1.0, 0.0, 0.0);
                 vec3 binormal = vec3(0.0, 0.0, 1.0);
                 vec3 t, b;
                 
-                // Wave 1 - Primary large wave
-                displacement += gerstnerWave(pos, time, vec2(1.0, 0.3), 0.25, 4.0, t, b);
-                tangent += t - vec3(1.0, 0.0, 0.0);
-                binormal += b - vec3(0.0, 0.0, 1.0);
+                // === Large primary waves ===
+                displacement += gerstnerWave(pos, time, vec2(1.0, 0.2), 0.42 * heightMod, 6.0, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
                 
-                // Wave 2 - Secondary wave at different angle
-                displacement += gerstnerWave(pos, time, vec2(0.5, 1.0), 0.15, 2.5, t, b);
-                tangent += t - vec3(1.0, 0.0, 0.0);
-                binormal += b - vec3(0.0, 0.0, 1.0);
+                displacement += gerstnerWave(pos, time * 1.1, vec2(0.4, 1.0), 0.35 * heightMod, 5.0, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
                 
-                // Wave 3 - Smaller detail wave
-                displacement += gerstnerWave(pos, time, vec2(-0.3, 0.7), 0.1, 1.5, t, b);
-                tangent += t - vec3(1.0, 0.0, 0.0);
-                binormal += b - vec3(0.0, 0.0, 1.0);
+                // === Medium waves ===
+                displacement += gerstnerWave(pos, time * 0.9, vec2(-0.6, 0.8), 0.25 * heightMod, 3.0, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
                 
-                // Wave 4 - Tiny ripples
-                displacement += gerstnerWave(pos, time, vec2(0.8, -0.4), 0.08, 0.8, t, b);
-                tangent += t - vec3(1.0, 0.0, 0.0);
-                binormal += b - vec3(0.0, 0.0, 1.0);
+                displacement += gerstnerWave(pos, time * 1.2, vec2(0.8, -0.5), 0.2 * heightMod, 2.2, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
                 
-                // Apply displacement - Gerstner displaces horizontally (x,z) and vertically (y)
+                displacement += gerstnerWave(pos, time, vec2(-0.3, -0.9), 0.18 * heightMod, 1.8, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                // === Small detail waves ===
+                displacement += gerstnerWave(pos, time * 1.2, vec2(0.9, -0.4), 0.12 * heightMod, 1.2, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                displacement += gerstnerWave(pos, time * 0.9, vec2(-0.5, -0.7), 0.10 * heightMod, 1.0, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                displacement += gerstnerWave(pos, time * 1.3, vec2(0.3, 0.95), 0.08 * heightMod, 0.8, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                // === Tiny ripples ===
+                displacement += gerstnerWave(pos, time * 2.0, vec2(0.9, 0.1), 0.05 * heightMod, 0.35, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                displacement += gerstnerWave(pos, time * 2.2, vec2(-0.2, 0.95), 0.04 * heightMod, 0.25, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                // === Micro ripples for fine surface detail ===
+                displacement += gerstnerWave(pos, time * 2.5, vec2(0.7, -0.7), 0.03 * heightMod, 0.18, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                displacement += gerstnerWave(pos, time * 2.8, vec2(-0.8, 0.6), 0.025 * heightMod, 0.15, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                displacement += gerstnerWave(pos, time * 3.0, vec2(0.5, 0.85), 0.02 * heightMod, 0.12, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                displacement += gerstnerWave(pos, time * 3.2, vec2(-0.95, -0.3), 0.018 * heightMod, 0.10, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                displacement += gerstnerWave(pos, time * 3.5, vec2(0.3, -0.95), 0.015 * heightMod, 0.08, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                displacement += gerstnerWave(pos, time * 3.8, vec2(-0.6, 0.8), 0.012 * heightMod, 0.06, t, b);
+                tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
+                
+                // Store wave height for fragment shader
+                v_waveHeight = displacement.y;
+                
+                // Calculate foam factor - foam appears on the FRONT/leading edge of waves
+                // When wave is rising (tangent.y > 0), that's where foam should appear
+                float waveRising = smoothstep(0.0, 0.3, tangent.y + binormal.y);
+                float foamFromHeight = smoothstep(0.0, 0.25, displacement.y);
+                float waveSlope = length(vec2(tangent.y, binormal.y));
+                float foamFromSlope = smoothstep(0.2, 0.6, waveSlope);
+                // Foam appears where wave is high AND rising (leading edge / crest)
+                v_foamFactor = clamp((foamFromHeight * waveRising * 1.2 + foamFromSlope * 0.3), 0.0, 1.0);
+                
+                // Apply displacement
                 worldPos.x += displacement.x;
                 worldPos.y += displacement.z;
                 worldPos.z += displacement.y;
                 
                 // Calculate normal from tangent and binormal
                 vec3 normal = normalize(cross(binormal, tangent));
-                // Swap components to match our coordinate system (z is up)
                 v_normal = vec3(normal.x, normal.z, normal.y);
                 
                 gl_Position = projection * view * worldPos;
                 v_fragPos = worldPos.xyz;
             }
+    </script>
+            }
     </script>
     <script id="sky-fs" type="x-shader/x-fragment">
         precision mediump float;
@@ -363,6 +545,28 @@
         <div class="control-group" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.2);">
             <button id="wireframe-toggle" style="background: rgba(255, 255, 255, 0.2); color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; width: 100%; font-size: 13px;">Wireframe: OFF</button>
         </div>
+        <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2);">
+            <strong>Wave Settings</strong>
+            <div class="slider-group">
+                <label>Wave Height <span class="slider-value" id="wave-height-val">1.0</span></label>
+                <input type="range" id="wave-height" min="0" max="2" step="0.1" value="1">
+            </div>
+            <div class="slider-group">
+                <label>Wave Speed <span class="slider-value" id="wave-speed-val">1.0</span></label>
+                <input type="range" id="wave-speed" min="0.1" max="3" step="0.1" value="1">
+            </div>
+        </div>
+        <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2);">
+            <strong>Foam & Glitter</strong>
+            <div class="slider-group">
+                <label>Foam Intensity <span class="slider-value" id="foam-intensity-val">1.0</span></label>
+                <input type="range" id="foam-intensity" min="0" max="2" step="0.1" value="1">
+            </div>
+            <div class="slider-group">
+                <label>Glitter Intensity <span class="slider-value" id="glitter-intensity-val">1.0</span></label>
+                <input type="range" id="glitter-intensity" min="0" max="3" step="0.1" value="1">
+            </div>
+        </div>
     </div>
     
     <button id="toggle-controls">Toggle Controls (H)</button>
@@ -390,6 +594,22 @@
         wireframeBtn.addEventListener('click', () => {
             window.dispatchEvent(new CustomEvent('toggleWireframe'));
         });
+        
+        // Slider controls
+        function setupSlider(id, eventName) {
+            const slider = document.getElementById(id);
+            const valueDisplay = document.getElementById(id + '-val');
+            slider.addEventListener('input', (e) => {
+                const value = parseFloat(e.target.value);
+                valueDisplay.textContent = value.toFixed(1);
+                window.dispatchEvent(new CustomEvent(eventName, { detail: value }));
+            });
+        }
+        
+        setupSlider('wave-height', 'waveHeightChange');
+        setupSlider('wave-speed', 'waveSpeedChange');
+        setupSlider('foam-intensity', 'foamIntensityChange');
+        setupSlider('glitter-intensity', 'glitterIntensityChange');
     </script>
 </body>
 
diff --git a/src/constants.ts b/src/constants.ts
index 089ccd9..6c54303 100644
--- a/src/constants.ts
+++ b/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;
diff --git a/src/main.ts b/src/main.ts
index ab276e8..2e29cf0 100644
--- a/src/main.ts
+++ b/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();