Refactor Camera and OceanLOD for improved movement and LOD management; enhance shader effects for better visual fidelity

index.html

@@ -243,6 +243,7 @@
         varying vec3 v_normal;
         varying float v_waveHeight;
         varying float v_foamFactor;
+        varying float v_distanceFade;
 
         uniform vec3 eyePos;
         uniform float uFoamIntensity;
@@ -297,7 +298,7 @@
             // 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 skyColor = vec3(0.55, 0.7, 0.9); // Match skybox horizon color
             vec3 foamColor = vec3(0.95, 0.98, 1.0);
             
             // Blend between deep and shallow based on wave height
@@ -343,8 +344,8 @@
             // 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;
+            // Additional soft fade at foam edges and fade out at distance
+            foam = pow(foam, 0.7) * uFoamIntensity * v_distanceFade;
             
             // Combine all lighting
             vec3 reflectedColor = mix(oceanColor, skyColor, fresnel);
@@ -353,15 +354,26 @@
             // 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
+            // Atmospheric fog for distant water - blends to horizon
             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);
+            
+            // Exponential fog with aggressive horizon fade
+            float fogFactor = exp(-dist * 0.04);
+            // Fully fade at stretched horizon vertices
+            float horizonFade = smoothstep(40.0, 80.0, dist);
+            fogFactor *= (1.0 - horizonFade);
+            fogFactor = clamp(fogFactor, 0.0, 1.0);
+            
+            // Horizon color must exactly match skybox horizon
+            vec3 horizonColor = vec3(0.55, 0.7, 0.9);
+            finalColor = mix(horizonColor, finalColor, fogFactor);
             
             gl_FragColor = vec4(finalColor, 1.0);
         }
     </script>
     <script id="default-vs" type="x-shader/x-vertex">
+            precision mediump float;
+            
             attribute vec3 positionAttr;
 
             uniform mat4 view;
@@ -370,11 +382,13 @@
             uniform float uTime;
             uniform float uWaveHeight;
             uniform float uWaveSpeed;
+            uniform vec3 eyePos;
 
             varying vec3 v_fragPos;
             varying vec3 v_normal;
             varying float v_waveHeight;
             varying float v_foamFactor;
+            varying float v_distanceFade;
             
             // 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) {
@@ -408,7 +422,14 @@
                 // Grid is on XY plane, Z is up
                 vec2 pos = worldPos.xy;
                 float time = uTime * 0.0004 * uWaveSpeed;
-                float heightMod = uWaveHeight;
+                
+                // Calculate distance from camera for wave fading
+                float distToCamera = length(worldPos.xyz - eyePos);
+                float waveFade = exp(-distToCamera * 0.015); // Gradual fade over distance
+                waveFade = clamp(waveFade, 0.0, 1.0);
+                v_distanceFade = waveFade;
+                
+                float heightMod = uWaveHeight * waveFade;
                 
                 vec3 displacement = vec3(0.0);
                 vec3 tangent = vec3(1.0, 0.0, 0.0);
@@ -477,10 +498,44 @@
                 worldPos.z += displacement.y;  // Height displacement
                 
                 // Calculate normal from tangent and binormal
+                // Blend normal towards flat (0, 0, 1) based on distance
                 vec3 normal = normalize(cross(binormal, tangent));
+                vec3 flatNormal = vec3(0.0, 0.0, 1.0);
+                normal = mix(flatNormal, normal, waveFade);
                 v_normal = vec3(normal.x, normal.z, normal.y);
                 
-                gl_Position = projection * view * worldPos;
+                // Horizon projection: calculate where the world horizon would be in clip space
+                // The horizon is where z=0 plane meets the sky (at eye height)
+                // Project a point at the horizon in the same XY direction as this vertex
+                float horizonStretch = smoothstep(40.0, 100.0, distToCamera);
+                
+                if (horizonStretch > 0.0) {
+                    // Get direction from camera to vertex (XY only, on ocean plane)
+                    vec2 toVertex = normalize(worldPos.xy - eyePos.xy);
+                    
+                    // Create a horizon point far away in that direction at z=0
+                    vec3 horizonPoint = vec3(
+                        eyePos.xy + toVertex * 10000.0,
+                        0.0
+                    );
+                    
+                    // Project horizon point to get true horizon clip position
+                    vec4 horizonClip = projection * view * vec4(horizonPoint, 1.0);
+                    
+                    // Get actual clip position
+                    vec4 clipPos = projection * view * worldPos;
+                    
+                    // Blend vertex toward the horizon point's clip position (normalized)
+                    // Overshoot slightly past horizon to ensure no gap
+                    float horizonY = horizonClip.y / horizonClip.w * clipPos.w;
+                    float overshoot = 1.0 + horizonStretch * 0.1; // Push slightly past horizon
+                    clipPos.y = mix(clipPos.y, horizonY * overshoot, horizonStretch);
+                    
+                    gl_Position = clipPos;
+                } else {
+                    gl_Position = projection * view * worldPos;
+                }
+                
                 v_fragPos = worldPos.xyz;
             }
     </script>