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
+            // Additional soft fade at foam edges and fade out at distance
-            foam = pow(foam, 0.7) * uFoamIntensity;
+            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>

src/Camera.ts

@@ -1,62 +1,87 @@
 import { vec3, mat4, vec4 } from 'gl-matrix';
 
-/** A camera that always looks at the world origin. Can have an offset and be rotated. */
+/** FPS-style flight camera with free movement */
 export class Camera {
     pos: vec3;
     target: vec3;
     up: vec3;
-
+    
-    xRot: number;
+    // FPS camera angles (in radians)
-    yRot: number;
+    pitch: number; // Up/down rotation
-    offset: number;
+    yaw: number;   // Left/right rotation
+    
+    // Direction vectors
+    forward: vec3;
+    right: vec3;
 
     constructor() {
         this.pos = vec3.create();
-        vec3.set(this.pos, 0.0, 0.0, 0.0);
+        vec3.set(this.pos, 0.0, -3.0, 2.0); // Start above and behind origin
         this.target = vec3.create();
-        vec3.set(this.target, 0.0, 0.0, 0.0);
         this.up = vec3.create();
-        vec3.set(this.up, 0.0, 1.0, 0.0);
+        vec3.set(this.up, 0.0, 0.0, 1.0); // Z is up
-        this.xRot = 0.0;
+        this.forward = vec3.create();
-        this.yRot = 0.0;
+        this.right = vec3.create();
-        this.offset = 0.0;
+        this.pitch = -0.3; // Looking slightly down
+        this.yaw = Math.PI / 2; // Looking toward +Y
+        this.updateVectors();
     }
 
-    setRotationX(rotX: number): void {
+    /** Rotate camera by mouse delta */
-        this.xRot = rotX;
+    rotate(deltaX: number, deltaY: number, sensitivity: number = 0.003): void {
-        this.updatePos();
+        this.yaw -= deltaX * sensitivity;
+        this.pitch -= deltaY * sensitivity;
+        
+        // Clamp pitch to avoid flipping
+        const maxPitch = Math.PI / 2 - 0.01;
+        this.pitch = Math.max(-maxPitch, Math.min(maxPitch, this.pitch));
+        
+        this.updateVectors();
     }
 
-    setRotationY(rotY: number): void {
+    /** Move camera in the direction it's looking */
-        this.yRot = rotY;
+    moveForward(amount: number): void {
-        this.updatePos();
+        vec3.scaleAndAdd(this.pos, this.pos, this.forward, amount);
+        this.updateVectors();
     }
 
-    /** Sets the offset to world origin. */
+    moveRight(amount: number): void {
-    setOffset(off: number): void {
+        vec3.scaleAndAdd(this.pos, this.pos, this.right, amount);
-        this.offset = off;
+        this.updateVectors();
-        this.updatePos();
     }
 
-    /** Recalculates the position according to xy-rotation and offset. */
+    moveUp(amount: number): void {
-    private updatePos(): void {
+        // Move along world Z axis
-        const transformation: mat4 = mat4.create();
+        this.pos[2] += amount;
-        mat4.identity(transformation);
+        this.updateVectors();
+    }
 
-        //2. xy-Rotation
+    /** Move in the actual look direction (including vertical) */
-        mat4.rotateX(transformation, transformation, this.xRot);
+    moveInLookDirection(amount: number): void {
-        mat4.rotateY(transformation, transformation, this.yRot);
+        vec3.scaleAndAdd(this.pos, this.pos, this.forward, amount);
+        this.updateVectors();
+    }
 
-        //1. Translation
+    /** Update direction vectors from pitch/yaw */
-        const translation = vec3.create();
+    private updateVectors(): void {
-        vec3.set(translation, 0.0, 0.0, this.offset);
+        // Calculate forward vector from pitch and yaw
-        mat4.translate(transformation, transformation, translation);
+        // Z is up, so we use different axis mapping
-
+        this.forward[0] = Math.cos(this.pitch) * Math.cos(this.yaw);
-        const temp: vec4 = vec4.create();
+        this.forward[1] = Math.cos(this.pitch) * Math.sin(this.yaw);
-        vec4.set(temp, 0.0, 0.0, 0.0, 1.0);
+        this.forward[2] = Math.sin(this.pitch);
-        vec4.transformMat4(temp, temp, transformation);
+        vec3.normalize(this.forward, this.forward);
-
+        
-        vec3.set(this.pos, temp[0], temp[1], temp[2]);
+        // Right vector is perpendicular to forward and world up
+        const worldUp = vec3.fromValues(0, 0, 1);
+        vec3.cross(this.right, this.forward, worldUp);
+        vec3.normalize(this.right, this.right);
+        
+        // Camera up is perpendicular to forward and right
+        vec3.cross(this.up, this.right, this.forward);
+        vec3.normalize(this.up, this.up);
+        
+        // Update target
+        vec3.add(this.target, this.pos, this.forward);
     }
 
     getViewMatrix(): mat4 {
@@ -64,4 +89,9 @@ export class Camera {
         mat4.lookAt(ret, this.pos, this.target, this.up);
         return ret;
     }
+    
+    /** Get view direction for LOD calculations */
+    getViewDirection(): vec3 {
+        return vec3.clone(this.forward);
+    }
 }

src/OceanLOD.ts

@@ -13,14 +13,16 @@ export class OceanLOD {
     }> = [];
     
     private readonly LOD_LEVELS = [
-        { distance: 2.0, gridSize: 128 },   // Closest - highest detail
+        { distance: 5.0, gridSize: 128 },   // Closest - highest detail
-        { distance: 5.0, gridSize: 64 },    // Medium distance
+        { distance: 15.0, gridSize: 64 },   // Medium distance
-        { distance: 10.0, gridSize: 32 },   // Far distance
+        { distance: 40.0, gridSize: 32 },   // Far distance
-        { distance: 20.0, gridSize: 16 },   // Very far - lowest detail
+        { distance: 80.0, gridSize: 16 },   // Very far
+        { distance: 150.0, gridSize: 8 },   // Horizon - minimal detail
+        { distance: Infinity, gridSize: 4 },// Beyond horizon - lowest detail
     ];
     
-    private readonly PATCH_SIZE = 2.0; // World size of each patch
+    private readonly PATCH_SIZE = 8.0; // World size of each patch (larger for horizon coverage)
-    private readonly PATCHES_PER_SIDE = 7; // 7x7 = 49 patches total
+    private readonly PATCHES_PER_SIDE = 51; // 51x51 = 2601 patches (covers ~200 units in each direction)
     private readonly VIEW_CONE_COS = Math.cos(Math.PI * 0.45); // ~81 degree half-angle (wider than typical FOV)
     
     constructor() {
@@ -37,7 +39,7 @@ export class OceanLOD {
                 
                 // Start with lowest detail - will be updated based on camera
                 const grid = new Grid(
-                    this.LOD_LEVELS[3].gridSize,
+                    this.LOD_LEVELS[5].gridSize,
                     centerX,
                     centerY,
                     this.PATCH_SIZE
@@ -48,7 +50,7 @@ export class OceanLOD {
                     centerX,
                     centerY,
                     size: this.PATCH_SIZE,
-                    lodLevel: 3,
+                    lodLevel: 5,
                     visible: true
                 });
             }
@@ -86,11 +88,11 @@ export class OceanLOD {
             patch.visible = isInFront;
             
             // Calculate LOD level
-            let newLodLevel = 3; // Default to lowest detail
+            let newLodLevel = 5; // Default to lowest detail
             
             if (!isInFront) {
                 // Behind camera - skip (will not be drawn)
-                newLodLevel = 3;
+                newLodLevel = 5;
             } else if (isInViewCone) {
                 // In view cone - use distance-based LOD
                 for (let i = 0; i < this.LOD_LEVELS.length; i++) {
@@ -103,7 +105,7 @@ export class OceanLOD {
                 // In front but outside view cone - reduce detail by 1-2 levels
                 for (let i = 0; i < this.LOD_LEVELS.length; i++) {
                     if (distance < this.LOD_LEVELS[i].distance) {
-                        newLodLevel = Math.min(i + 2, 3); // Reduce detail
+                        newLodLevel = Math.min(i + 2, 5); // Reduce detail
                         break;
                     }
                 }
@@ -151,7 +153,7 @@ export class OceanLOD {
     
     /** Get statistics about current LOD distribution */
     getLODStats(): { [key: number]: number } {
-        const stats: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 };
+        const stats: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
         for (const patch of this.grids) {
             stats[patch.lodLevel]++;
         }

src/main.ts

@@ -138,17 +138,15 @@ var lodStatsTimer = 0;
 /** Input states*/
 var mouseXVel = 0;
 var mouseYVel = 0;
-var keyboardRotationX = 0;
-var keyboardRotationY = 0;
-var keyboardZoom = 0;
 var keysPressed: Set<string> = new Set();
 /** Objects and states*/
 var camera: Camera;
 var oceanLOD: OceanLOD;
 var skybox: Skybox;
-var curRotX = Config.CAMERA_DEFAULT_ROT_X;
-var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
 var wireframeMode = false;
+/** Camera movement speed */
+var moveSpeed = 0.15;
+var fastMoveSpeed = 0.4;
 /** Ocean shader settings */
 var waveHeight = 1.0;
 var waveSpeed = 1.0;
@@ -190,9 +188,16 @@ function drawScene() {
         var projection = mat4.create();
         mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE);
 
-        camera.setOffset(Config.CAMERA_DEFAULT_OFFSET + keyboardZoom);
+        // Handle FPS camera movement
-        camera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
+        handleCameraMovement();
-        camera.setRotationY((curRotY += mouseXVel * Config.MOUSE_SENSITIVITY + keyboardRotationY));
+        
+        // Apply mouse rotation
+        if (mouseXVel !== 0 || mouseYVel !== 0) {
+            camera.rotate(mouseXVel, mouseYVel);
+            mouseXVel = 0;
+            mouseYVel = 0;
+        }
+        
         var view = camera.getViewMatrix();
 
         // Draw skybox first with depth test disabled (always behind everything)
@@ -245,28 +250,38 @@ function drawScene() {
     requestAnimationFrame(drawScene);
 }
 
-/** Handle keyboard input for camera controls */
+/** Handle FPS camera movement */
-function handleKeyboardInput() {
+function handleCameraMovement() {
-    keyboardRotationX = 0;
+    const speed = keysPressed.has('Shift') ? fastMoveSpeed : moveSpeed;
-    keyboardRotationY = 0;
     
-    if (keysPressed.has('w') || keysPressed.has('W') || keysPressed.has('ArrowUp')) {
+    // WASD for horizontal movement
-        keyboardRotationX = Config.KEYBOARD_ROTATION_SPEED;
+    if (keysPressed.has('w') || keysPressed.has('W')) {
+        camera.moveForward(speed);
     }
-    if (keysPressed.has('s') || keysPressed.has('S') || keysPressed.has('ArrowDown')) {
+    if (keysPressed.has('s') || keysPressed.has('S')) {
-        keyboardRotationX = -Config.KEYBOARD_ROTATION_SPEED;
+        camera.moveForward(-speed);
     }
-    if (keysPressed.has('a') || keysPressed.has('A') || keysPressed.has('ArrowLeft')) {
+    if (keysPressed.has('a') || keysPressed.has('A')) {
-        keyboardRotationY = Config.KEYBOARD_ROTATION_SPEED;
+        camera.moveRight(-speed);
     }
-    if (keysPressed.has('d') || keysPressed.has('D') || keysPressed.has('ArrowRight')) {
+    if (keysPressed.has('d') || keysPressed.has('D')) {
-        keyboardRotationY = -Config.KEYBOARD_ROTATION_SPEED;
+        camera.moveRight(speed);
     }
-    if (keysPressed.has('q') || keysPressed.has('Q') || keysPressed.has('+')) {
+    
-        keyboardZoom -= Config.KEYBOARD_ZOOM_SPEED;
+    // Q/E for vertical movement
+    if (keysPressed.has('q') || keysPressed.has('Q')) {
+        camera.moveUp(-speed);
     }
-    if (keysPressed.has('e') || keysPressed.has('E') || keysPressed.has('-')) {
+    if (keysPressed.has('e') || keysPressed.has('E')) {
-        keyboardZoom += Config.KEYBOARD_ZOOM_SPEED;
+        camera.moveUp(speed);
+    }
+    
+    // Space to go up, Ctrl to go down
+    if (keysPressed.has(' ')) {
+        camera.moveUp(speed);
+    }
+    if (keysPressed.has('Control')) {
+        camera.moveUp(-speed);
     }
 }
 
@@ -313,19 +328,20 @@ function main() {
     // Keyboard controls
     window.addEventListener('keydown', (evt) => {
         keysPressed.add(evt.key);
-        handleKeyboardInput();
         
         // Reset camera on 'R' key
         if (evt.key === 'r' || evt.key === 'R') {
-            curRotX = Config.CAMERA_DEFAULT_ROT_X;
+            camera = new Camera(); // Reset to initial position
-            curRotY = Config.CAMERA_DEFAULT_ROT_Y;
+        }
-            keyboardZoom = 0;
+        
+        // Prevent default for space to avoid page scroll
+        if (evt.key === ' ') {
+            evt.preventDefault();
         }
     });
     
     window.addEventListener('keyup', (evt) => {
         keysPressed.delete(evt.key);
-        handleKeyboardInput();
     });
 
     // Window resize handler