Refactor OceanLOD LOD levels and patch management; implement grid recentering based on camera movement

Refactor Camera and OceanLOD for improved movement and LOD management; enhance shader effects for better visual fidelity
Add Skybox class for rendering sky and update shaders for sky rendering
2026-01-31 23:21:19 +01:00 · 2026-01-31 23:16:31 +01:00 · 2026-01-31 23:00:40 +01:00 · 2026-01-31 22:52:30 +01:00 · 2026-01-31 22:50:05 +01:00 · 2026-01-31 22:47:20 +01:00
15 changed files with 2656 additions and 1695 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,6 @@
 build/
 dist/
 node_modules/
 .vscode/
 *.log
 .DS_Store
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,6 +1,6 @@
 stages:
-    - build         #first build
+    - build
-    - deploy        #then deploy
+    - deploy
 build:
    stage: build
@@ -9,19 +9,17 @@ build:
        - npm run build
    artifacts:
        paths:
-            - build
+            - dist
    only:
-        - master
+        - main
 deploy_to_projects:
  stage: deploy
  script:
    - mkdir -p /var/www/projects.rismer.de/$CI_PROJECT_NAME
-    - cp index.html /var/www/projects.rismer.de/$CI_PROJECT_NAME
+    - cp -r dist/* /var/www/projects.rismer.de/$CI_PROJECT_NAME/
    - mkdir -p /var/www/projects.rismer.de/$CI_PROJECT_NAME/build
    - cp build/app.js /var/www/projects.rismer.de/$CI_PROJECT_NAME/build
  environment:
    name: deploy
    url: https://projects.rismer.de/$CI_PROJECT_NAME
  only:
-       - master
+       - main
--- a/index.html
+++ b/index.html
@@ -1,7 +1,151 @@
 <!DOCTYPE html>
 <html>
-<header>
+<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Ocean</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            background: #000;
        }
        #window {
            display: block;
            width: 100vw;
            height: 100vh;
            cursor: move;
        }
        #controls {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            font-size: 14px;
            max-width: 300px;
            backdrop-filter: blur(10px);
            transition: opacity 0.3s;
        }
        #controls.hidden {
            opacity: 0;
            pointer-events: none;
        }
        #controls h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            font-weight: 600;
        }
        #controls .control-group {
            margin-bottom: 8px;
            line-height: 1.6;
        }
        #controls .key {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            padding: 2px 8px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            margin: 0 2px;
        }
        #toggle-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            backdrop-filter: blur(10px);
            transition: background 0.3s;
        }
        #toggle-controls:hover {
            background: rgba(0, 0, 0, 0.85);
        }
        #fps-counter {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: #0f0;
            padding: 8px 12px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            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;
@@ -96,105 +240,355 @@
        precision mediump float;
        varying vec3 v_fragPos;
-        varying vec2 v_uv;
+        varying vec3 v_normal;
        varying float v_waveHeight;
        varying float v_foamFactor;
        varying float v_distanceFade;
        uniform vec3 eyePos;
-        uniform sampler2D displace_map;
+        uniform float uFoamIntensity;
        uniform float uGlitterIntensity;
-        vec3 lightPos = vec3(0.,0.,10.); //not used in diffuse. diffuse uses a directional light. It is only used for specular glittering.
+        // Simple hash function for noise
-        vec3 lightColor = vec3(1.0,1.0,1.0);
+        float hash(vec2 p) {
-        
+            return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
        //using forward difference
        //Normal vectors are compute as: https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/perlin-noise-part-2/perlin-noise-computing-derivatives
        void main(void) {
            vec4 displace = texture2D(displace_map, v_uv);
            //calculate normal
            float gridPointDelta = (1. / 256.);
            vec3 currPoint = vec3(0.0,0.0,displace.x);
            vec3 right = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x + gridPointDelta,v_uv.y)).x*(1./1.));
            vec3 left = vec3(-gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x - gridPointDelta,v_uv.y)).x*(1./1.));
            vec3 up = vec3(0.,gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y + gridPointDelta)).x*(1./1.));
            vec3 down = vec3(0.,-gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y - gridPointDelta)).x*(1./1.));
            //vec3 tangent = normalize(right - currPoint);
            //vec3 biTangent = normalize(up - currPoint);
            vec3 tangent = normalize(vec3(gridPointDelta,0.,right.z-left.z));
            vec3 biTangent = normalize(vec3(0.,gridPointDelta,down.z-up.z));
            //vec3 normal = biTangent;
            vec3 normal = cross(tangent, biTangent);
            vec3 norm = normalize(normal);
            norm.y *= -1.; //Normal y direction is somehow inverted
            //vec3 lightDir = normalize(lightPos - v_fragPos);
            vec3 lightDir = normalize(-vec3(0.0,.0,-1.)); //sun shines in drection of -z
            float diff = max(dot(norm,lightDir),0.0);
            vec3 diffuse = diff * lightColor;
            vec3 result = (diffuse) * vec3(0.0,0.0,1.0);
            //Old lightning
            vec3 toCameraVector = normalize(v_fragPos - eyePos);
            vec3 reflec = normalize(reflect(toCameraVector, norm));
            //Schlicks approximation to Fresnelfactor
 	        float n1 = 1., n2 = 1.33333;
 	        float R0 = pow((n1-n2)/(n1+n2), 2.);
        	float fresnel = R0 + (1. - R0)*pow((1.-dot(norm,reflec)),5.) ;
            //vec3 waterColor = vec3(34./255.,154./255.,211./255.);
            vec3 oceanColor = vec3(0,.4,.4); // under-sea colour
            vec3 skyColor = vec3(1.,1.,1.);
            //Subsurface scattering
            vec3 sssSun = vec3(0.,-5.,-7.0);
            vec3 tosssSunVec = normalize(sssSun - v_fragPos);
            vec3 tosssSun = normalize(vec3(0.0,-100.,1.));
            float ssDistortion = 0.1;
            float sssIntensity = 1.;
            vec3 halfWay = normalize(tosssSun+norm*ssDistortion);
            float ssScateringCoef = pow(clamp(dot(toCameraVector,-halfWay),0.0,1.0),5.) * sssIntensity;
            //Sun glittering
            float glitterFactor = max(0.0,dot(tosssSunVec,reflect(-toCameraVector,norm)));
            if(!(glitterFactor > 0.98)) {
                glitterFactor = 0.0;
        }
-            //gl_FragColor = vec4(oceanColor + lightColor * glitterFactor,1.0);
+        // Value noise for foam texture
-            //gl_FragColor=vec4(clamp(oceanColor + (oceanColor*ssScateringCoef),0.,1.0),1.0); //Display subsurfacecatterting component
+        float noise(vec2 p) {
-            //gl_FragColor = vec4((mix(oceanColor,skyColor,fresnel).xyz), 1.); //Just display reflection component
+            vec2 i = floor(p);
-            //gl_FragColor = vec4(diffuse * oceanColor,1.0); //Render only diffuse component
+            vec2 f = fract(p);
-            //gl_FragColor = vec4(normal,1.0); //show Normal map
+            f = f * f * (3.0 - 2.0 * f); // smoothstep
-            //gl_FragColor = vec4(displace.x,displace.x,displace.x,1.0); //Show Perlin Noise texture deactivate vertex distrotion before
+            
-            gl_FragColor = vec4((clamp(diffuse,0.97,1.0) * (mix(oceanColor + (oceanColor*ssScateringCoef),skyColor*0.8,fresnel).xyz))+ lightColor * glitterFactor, 1.0); //All combined
+            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;
        }
        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;
            // Schlick's approximation to Fresnel factor
            float R0 = 0.02;
            float fresnel = R0 + (1.0 - R0) * pow(1.0 - max(dot(norm, viewDir), 0.0), 5.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.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
            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;
            // 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 and fade out at distance
            foam = pow(foam, 0.7) * uFoamIntensity * v_distanceFade;
            // 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);
            // Atmospheric fog for distant water - blends to horizon
            float dist = length(eyePos - v_fragPos);
            // 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;
            uniform mat4 model;
            uniform mat4 projection;
-            uniform sampler2D displace_map;
+            uniform float uTime;
            uniform float uWaveHeight;
            uniform float uWaveSpeed;
            uniform vec3 eyePos;
            varying vec2 v_uv;
            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) {
                float k = 2.0 * 3.14159 / wavelength;
                float c = sqrt(9.8 / k);
                vec2 d = normalize(direction);
                float f = k * (dot(d, pos) - c * time);
                float a = steepness / k;
                tangent = vec3(
                    1.0 - steepness * d.x * d.x * sin(f),
                    steepness * d.x * cos(f),
                    -steepness * d.x * d.y * sin(f)
                );
                binormal = vec3(
                    -steepness * d.x * d.y * sin(f),
                    steepness * d.y * cos(f),
                    1.0 - steepness * d.y * d.y * sin(f)
                );
                return vec3(
                    d.x * a * cos(f),
                    a * sin(f),
                    d.y * a * cos(f)
                );
            }
            void main(void) {
-                vec4 displace = texture2D(displace_map, vec2(positionAttr.x,positionAttr.y));
+                vec4 worldPos = model * vec4(positionAttr.xyz, 1.0);
-                vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
+                // Grid is on XY plane, Z is up
                vec2 pos = worldPos.xy;
                float time = uTime * 0.0004 * uWaveSpeed;
                // 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);
                vec3 binormal = vec3(0.0, 0.0, 1.0);
                vec3 t, b;
                // === 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);
                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);
                // === 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);
                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);
                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 * 3.0, vec2(-0.8, 0.6), 0.025 * 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.5, vec2(0.5, -0.9), 0.02 * heightMod, 0.08, 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 - Z is up, XY is horizontal plane
                worldPos.x += displacement.x;
                worldPos.y += displacement.z;
                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);
                // 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;
-                v_uv = positionAttr.xy;
+            }
    </script>
            }
    </script>
    <script id="sky-fs" type="x-shader/x-fragment">
        precision mediump float;
-        varying vec3 fragPos;
+        varying vec3 v_rayDir;
        uniform vec3 uSunDirection;
        void main(void) {
-            gl_FragColor = vec4(fragPos,1.0);
+            vec3 rayDir = normalize(v_rayDir);
            // Use Z as up (matches world space where ocean is on XY plane)
            float upAmount = rayDir.z;
            // Sky gradient - from horizon to zenith
            float horizonBlend = pow(1.0 - max(upAmount, 0.0), 2.0);
            vec3 zenithColor = vec3(0.15, 0.35, 0.75);   // Deep blue at top
            vec3 horizonColor = vec3(0.55, 0.7, 0.9);    // Light blue at horizon
            vec3 skyColor = mix(zenithColor, horizonColor, horizonBlend);
            // Add warm glow near horizon
            float horizonGlow = pow(max(1.0 - abs(upAmount), 0.0), 6.0);
            skyColor += vec3(0.4, 0.25, 0.1) * horizonGlow * 0.4;
            // Sun direction already in correct coordinate system
            vec3 sunDir = normalize(uSunDirection);
            float sunAngle = max(dot(rayDir, sunDir), 0.0);
            // Sun disk
            float sunDisk = smoothstep(0.9993, 0.9998, sunAngle);
            vec3 sunColor = vec3(1.0, 0.95, 0.85);
            // Sun glow
            float sunGlow = pow(sunAngle, 48.0) * 0.6;
            float sunHalo = pow(sunAngle, 6.0) * 0.25;
            // Combine sun effects
            skyColor += sunColor * sunDisk * 3.0;
            skyColor += vec3(1.0, 0.85, 0.5) * sunGlow;
            skyColor += vec3(1.0, 0.9, 0.7) * sunHalo;
            // Below horizon - fade to darker color
            if (upAmount < 0.0) {
                float depth = -upAmount;
                vec3 deepColor = vec3(0.02, 0.08, 0.15);
                skyColor = mix(horizonColor * 0.7, deepColor, smoothstep(0.0, 0.5, depth));
            }
            gl_FragColor = vec4(skyColor, 1.0);
        }
    </script>
    <script id="sky-vs" type="x-shader/x-vertex">
@@ -202,22 +596,110 @@
            uniform mat4 projection;
            uniform mat4 view;
            uniform mat4 testModel;
-            varying vec3 fragPos;
+            varying vec3 v_rayDir;
            void main(void) {
-                gl_PointSize = 10.;
+                v_rayDir = positionAttr;
-                gl_Position = projection * mat4(mat3(view)) * vec4(positionAttr, 1.0);
+                // Remove translation from view matrix for skybox
-                fragPos = (view * vec4(positionAttr,1.0)).xyz; //This is wrong probably
+                mat4 rotView = mat4(mat3(view));
                vec4 pos = projection * rotView * vec4(positionAttr, 1.0);
                gl_Position = pos;
            }
    </script>
-</header>
+</head>
 <body>
-    <canvas id="window" width="800" height="600"
+    <canvas id="window"></canvas>
-        style="margin:0 auto; border: solid #000000 1px; display:block; cursor:move;"></canvas>
+    
-    <script src="build/app.js"></script>
+    <div id="controls">
        <h3>🌊 Ocean Controls</h3>
        <div class="control-group">
            <strong>Camera Rotation:</strong><br>
            <span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> or Arrow Keys
        </div>
        <div class="control-group">
            <strong>Zoom:</strong><br>
            <span class="key">Q</span> / <span class="key">E</span> or <span class="key">+</span> / <span class="key">-</span>
        </div>
        <div class="control-group">
            <strong>Mouse:</strong> Click and drag to rotate
        </div>
        <div class="control-group">
            <strong>Reset:</strong> <span class="key">R</span>
        </div>
        <div class="control-group">
            <strong>Toggle Help:</strong> <span class="key">H</span>
        </div>
        <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>
    <div id="fps-counter">FPS: 0</div>
    <script type="module" src="/src/main.ts"></script>
    <script>
        // Toggle controls visibility
        const controls = document.getElementById('controls');
        const toggleBtn = document.getElementById('toggle-controls');
        toggleBtn.addEventListener('click', () => {
            controls.classList.toggle('hidden');
        });
        window.addEventListener('keydown', (evt) => {
            if (evt.key === 'h' || evt.key === 'H') {
                controls.classList.toggle('hidden');
            }
        });
        // Wireframe toggle
        const wireframeBtn = document.getElementById('wireframe-toggle');
        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>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,13 +2,12 @@
  "name": "web-ocean",
  "version": "0.0.1",
  "description": "Simulating a ocean with typescript and webgl.",
-  "main": "index.html",
+  "type": "module",
  "scripts": {
-    "livedev": "concurrently --kill-others \"npm-watch\"",
+    "dev": "vite",
-    "build:release": "tsc && browserify ./build/main.js | uglifyjs > ./build/app.js",
+    "build": "tsc && vite build",
-    "build:debug": "tsc && browserify --debug ./build/main.js -o ./build/app.js",
+    "preview": "vite preview",
-    "build:tsc": "tsc",
+    "build:legacy": "tsc && browserify ./build/main.js | uglifyjs > ./build/app.js"
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webgl",
@@ -21,13 +20,10 @@
  "author": "Julian Niessner",
  "license": "ISC",
  "devDependencies": {
-    "@types/gl-matrix": "^2.4.5",
+    "typescript": "^5.9.3",
-    "browserify": "^16.5.0",
+    "vite": "^6.0.7"
    "concurrently": "^5.1.0",
    "typescript": "^3.7.5",
    "uglifyjs": "^2.4.11"
  },
  "dependencies": {
-    "gl-matrix": "^3.1.0"
+    "gl-matrix": "^3.4.4"
  }
 }
--- a/readme.md
+++ b/readme.md
@@ -1,7 +1,141 @@
-Projekt bauen:
+# 🌊 WebOcean
-```npm run build```
+An interactive 3D ocean simulation using WebGL2, TypeScript, and Perlin noise for realistic water wave generation.
-und ausführen
+![WebGL](https://img.shields.io/badge/WebGL-2.0-990000?style=flat-square)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?style=flat-square)
 ![Vite](https://img.shields.io/badge/Vite-6.0-646CFF?style=flat-square)
-```index.html```
+## ✨ Features
 - **Real-time Ocean Simulation** - Dynamic water surface with Perlin noise-based displacement
 - **Advanced Rendering Techniques**:
  - Fresnel reflection for realistic water appearance
  - Subsurface scattering for light penetration
  - Specular highlights for sun glitter effect
  - Dynamic normal mapping from displacement
 - **Interactive Camera Controls** - Mouse and keyboard navigation
 - **Responsive Design** - Automatically adapts to window size
 - **Performance Monitoring** - Real-time FPS counter
 ## 🎮 Controls
 | Action | Keys |
 |--------|------|
 | **Rotate Camera** | `W` `A` `S` `D` or Arrow Keys |
 | **Zoom In/Out** | `Q` / `E` or `+` / `-` |
 | **Mouse Drag** | Click and drag to rotate |
 | **Reset Camera** | `R` |
 | **Toggle Help** | `H` |
 ## 🚀 Getting Started
 ### Prerequisites
 - Node.js (v16 or higher)
 - npm or yarn
 ### Installation
 ```bash
 # Clone the repository
 git clone <repository-url>
 cd WebOcean
 # Install dependencies
 npm install
 ```
 ### Development
 ```bash
 # Start development server with hot reload
 npm run dev
 ```
 Open your browser at `http://localhost:3000`
 ### Build for Production
 ```bash
 # Build optimized production bundle
 npm run build
 # Preview production build
 npm run preview
 ```
 The built files will be in the `dist/` directory.
 ## 🛠️ Technical Details
 ### Architecture
 - **WebGL 2.0** - Hardware-accelerated 3D graphics
 - **TypeScript** - Type-safe development
 - **Vite** - Fast build tool and dev server
 - **gl-matrix** - High-performance matrix and vector operations
 ### Rendering Pipeline
 1. **First Pass**: Generate Perlin noise texture for displacement
 2. **Second Pass**: Render ocean grid with:
   - Vertex displacement using noise texture
   - Dynamic normal calculation
   - Advanced lighting (Fresnel + subsurface scattering)
   - Specular highlights
 ### Project Structure
 ```
 WebOcean/
 ├── src/
 │   └── main.ts          # Main application code
 ├── index.html           # HTML entry point
 ├── vite.config.ts       # Vite configuration
 ├── tsconfig.json        # TypeScript configuration
 └── package.json         # Project dependencies
 ```
 ## 📝 Configuration
 Water and rendering parameters can be modified in `src/main.ts`:
 - `GRID_SIZE` - Resolution of water mesh (default: 128)
 - `NOISE_TEXTURE_WIDTH/HEIGHT` - Perlin noise resolution (default: 256x256)
 - `FOV` - Field of view
 - `OCEAN_COLOR` - Base water color
 - `MOUSE_SENSITIVITY` - Camera rotation sensitivity
 ## 🔧 Development Notes
 ### Browser Compatibility
 Requires a browser with WebGL 2.0 support:
 - Chrome 56+
 - Firefox 51+
 - Edge 79+
 - Safari 15+
 ### Performance
 - Target: 60 FPS on modern hardware
 - Grid complexity affects performance linearly
 - Noise texture resolution affects memory usage
 ## 📄 License
 ISC License - see LICENSE file for details
 ## 👤 Author
 Julian Niessner
 ## 🙏 Acknowledgments
 - Perlin noise implementation based on [WebGL Perlin Noise tutorial](https://medium.com/neosavvy-labs/webgl-with-perlin-noise-part-1-a87b56bbc9fb)
 - Fresnel and lighting techniques from various WebGL resources
 ---
 **Enjoy exploring the digital ocean! 🌊**
--- a/src/Camera.ts
+++ b/src/Camera.ts
@@ -0,0 +1,97 @@
 import { vec3, mat4, vec4 } from 'gl-matrix';
 /** FPS-style flight camera with free movement */
 export class Camera {
    pos: vec3;
    target: vec3;
    up: vec3;
    // FPS camera angles (in radians)
    pitch: number; // Up/down rotation
    yaw: number;   // Left/right rotation
    // Direction vectors
    forward: vec3;
    right: vec3;
    constructor() {
        this.pos = vec3.create();
        vec3.set(this.pos, 0.0, -3.0, 2.0); // Start above and behind origin
        this.target = vec3.create();
        this.up = vec3.create();
        vec3.set(this.up, 0.0, 0.0, 1.0); // Z is up
        this.forward = vec3.create();
        this.right = vec3.create();
        this.pitch = -0.3; // Looking slightly down
        this.yaw = Math.PI / 2; // Looking toward +Y
        this.updateVectors();
    }
    /** Rotate camera by mouse delta */
    rotate(deltaX: number, deltaY: number, sensitivity: number = 0.003): void {
        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();
    }
    /** Move camera in the direction it's looking */
    moveForward(amount: number): void {
        vec3.scaleAndAdd(this.pos, this.pos, this.forward, amount);
        this.updateVectors();
    }
    moveRight(amount: number): void {
        vec3.scaleAndAdd(this.pos, this.pos, this.right, amount);
        this.updateVectors();
    }
    moveUp(amount: number): void {
        // Move along world Z axis
        this.pos[2] += amount;
        this.updateVectors();
    }
    /** Move in the actual look direction (including vertical) */
    moveInLookDirection(amount: number): void {
        vec3.scaleAndAdd(this.pos, this.pos, this.forward, amount);
        this.updateVectors();
    }
    /** Update direction vectors from pitch/yaw */
    private updateVectors(): void {
        // Calculate forward vector from pitch and yaw
        // Z is up, so we use different axis mapping
        this.forward[0] = Math.cos(this.pitch) * Math.cos(this.yaw);
        this.forward[1] = Math.cos(this.pitch) * Math.sin(this.yaw);
        this.forward[2] = Math.sin(this.pitch);
        vec3.normalize(this.forward, this.forward);
        // 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 {
        const ret: mat4 = mat4.create();
        mat4.lookAt(ret, this.pos, this.target, this.up);
        return ret;
    }
    /** Get view direction for LOD calculations */
    getViewDirection(): vec3 {
        return vec3.clone(this.forward);
    }
 }
--- a/src/Grid.ts
+++ b/src/Grid.ts
@@ -0,0 +1,113 @@
 /** Grid for the water surface */
 export class Grid {
    private indices: number[] = [];
    private lineIndices: number[] = [];
    private vertices: number[] = [];
    private vao: WebGLVertexArrayObject | null = null;
    private lineVao: WebGLVertexArrayObject | null = null;
    private size: number;
    private offsetX: number;
    private offsetY: number;
    private scale: number;
    constructor(size: number = 128, offsetX: number = 0, offsetY: number = 0, scale: number = 1) {
        this.size = size;
        this.offsetX = offsetX;
        this.offsetY = offsetY;
        this.scale = scale;
    }
    generate(): void {
        this.indices = [];
        this.lineIndices = [];
        this.vertices = [];
        for (let j = 0; j <= this.size; ++j) {
            for (let i = 0; i <= this.size; ++i) {
                // Generate Vertices normalized to 0-1, then scale and offset
                // Grid is on XY plane (horizontal), Z is up
                const u = i / this.size;
                const v = j / this.size;
                const x = (u - 0.5) * this.scale + this.offsetX;
                const y = (v - 0.5) * this.scale + this.offsetY;
                const z = 0;
                this.vertices.push(x, y, z);
                if (i < this.size && j < this.size) { // Skip edges
                    const row1 = j * (this.size + 1);
                    const row2 = (j + 1) * (this.size + 1);
                    // triangle 1
                    this.indices.push(row1 + i);
                    this.indices.push(row1 + i + 1);
                    this.indices.push(row2 + i + 1);
                    // triangle 2
                    this.indices.push(row1 + i);
                    this.indices.push(row2 + i + 1);
                    this.indices.push(row2 + i);
                }
                // Generate line indices for wireframe
                if (i < this.size) {
                    const currentVertex = j * (this.size + 1) + i;
                    this.lineIndices.push(currentVertex, currentVertex + 1);
                }
                if (j < this.size) {
                    const currentVertex = j * (this.size + 1) + i;
                    this.lineIndices.push(currentVertex, currentVertex + (this.size + 1));
                }
            }
        }
    }
    initVAO(gl: WebGL2RenderingContext): void {
        this.generate();
        // Create VAO for filled triangles
        this.vao = gl.createVertexArray();
        gl.bindVertexArray(this.vao);
        const vboGrid: WebGLBuffer | null = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.vertices), gl.STATIC_DRAW);
        const iboGrid: WebGLBuffer | null = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboGrid);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(this.indices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
        gl.enableVertexAttribArray(0);
        gl.bindVertexArray(null);
        // Create VAO for wireframe lines
        this.lineVao = gl.createVertexArray();
        gl.bindVertexArray(this.lineVao);
        gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
        const iboLine: WebGLBuffer | null = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboLine);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(this.lineIndices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
        gl.enableVertexAttribArray(0);
        gl.bindVertexArray(null);
    }
    draw(gl: WebGL2RenderingContext, wireframe: boolean = false): void {
        if (wireframe && this.lineVao) {
            gl.bindVertexArray(this.lineVao);
            gl.drawElements(gl.LINES, this.lineIndices.length, gl.UNSIGNED_INT, 0);
            gl.bindVertexArray(null);
        } else if (this.vao) {
            gl.bindVertexArray(this.vao);
            gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_INT, 0);
            gl.bindVertexArray(null);
        }
    }
    getIndexCount(): number {
        return this.indices.length;
    }
 }
--- a/src/OceanLOD.ts
+++ b/src/OceanLOD.ts
@@ -0,0 +1,200 @@
 import { Grid } from './Grid';
 import { vec3 } from 'gl-matrix';
 /** Manages multiple ocean grid patches with LOD based on camera distance and view cone */
 export class OceanLOD {
    private grids: Array<{ 
        grid: Grid; 
        centerX: number; 
        centerY: number;
        size: number;
        lodLevel: number;
        visible: boolean;
    }> = [];
    private readonly LOD_LEVELS = [
        { distance: 3.0, gridSize: 256 },   // Very close - ultra detail
        { distance: 8.0, gridSize: 128 },   // Close - high detail
        { distance: 20.0, gridSize: 64 },   // Medium distance
        { distance: 40.0, gridSize: 16 },   // Far - low detail
        { distance: 80.0, gridSize: 8 },    // Very far - minimal
        { distance: Infinity, gridSize: 4 },// Horizon - lowest (will be stretched anyway)
    ];
    private readonly PATCH_SIZE = 10.0; // Larger patches = fewer needed
    private readonly PATCHES_PER_SIDE = 21; // 21x21 = 441 patches (covers ~200 units)
    private readonly VIEW_CONE_COS = Math.cos(Math.PI * 0.45); // ~81 degree half-angle (wider than typical FOV)
    // Track the grid origin to re-center when camera moves
    private gridOriginX: number = 0;
    private gridOriginY: number = 0;
    constructor() {
        this.createGridPatches();
    }
    private createGridPatches(): void {
        const halfPatches = Math.floor(this.PATCHES_PER_SIDE / 2);
        for (let y = -halfPatches; y <= halfPatches; y++) {
            for (let x = -halfPatches; x <= halfPatches; x++) {
                const centerX = x * this.PATCH_SIZE + this.gridOriginX;
                const centerY = y * this.PATCH_SIZE + this.gridOriginY;
                // Start with lowest detail - will be updated based on camera
                const grid = new Grid(
                    this.LOD_LEVELS[5].gridSize,
                    centerX,
                    centerY,
                    this.PATCH_SIZE
                );
                this.grids.push({
                    grid,
                    centerX,
                    centerY,
                    size: this.PATCH_SIZE,
                    lodLevel: 5,
                    visible: true
                });
            }
        }
    }
    /** Re-center the grid around a new origin */
    private recenterGrid(gl: WebGL2RenderingContext, newOriginX: number, newOriginY: number): void {
        this.gridOriginX = newOriginX;
        this.gridOriginY = newOriginY;
        const halfPatches = Math.floor(this.PATCHES_PER_SIDE / 2);
        let i = 0;
        for (let y = -halfPatches; y <= halfPatches; y++) {
            for (let x = -halfPatches; x <= halfPatches; x++) {
                const patch = this.grids[i];
                const newCenterX = x * this.PATCH_SIZE + this.gridOriginX;
                const newCenterY = y * this.PATCH_SIZE + this.gridOriginY;
                // Only update if patch position changed
                if (patch.centerX !== newCenterX || patch.centerY !== newCenterY) {
                    patch.centerX = newCenterX;
                    patch.centerY = newCenterY;
                    // Force LOD recalculation
                    patch.lodLevel = -1;
                }
                i++;
            }
        }
    }
    /** Update LOD based on camera position and view direction */
    updateLOD(gl: WebGL2RenderingContext, cameraPos: vec3, cameraTarget: vec3): void {
        // Calculate view direction (normalized)
        const viewDir = vec3.create();
        vec3.subtract(viewDir, cameraTarget, cameraPos);
        vec3.normalize(viewDir, viewDir);
        // Check if we need to recenter the grid (camera moved more than one patch size from origin)
        const cameraGridX = Math.floor(cameraPos[0] / this.PATCH_SIZE) * this.PATCH_SIZE;
        const cameraGridY = Math.floor(cameraPos[1] / this.PATCH_SIZE) * this.PATCH_SIZE;
        if (cameraGridX !== this.gridOriginX || cameraGridY !== this.gridOriginY) {
            this.recenterGrid(gl, cameraGridX, cameraGridY);
        }
        for (const patch of this.grids) {
            // Calculate vector from camera to patch center (on XY plane, Z=0 for ocean surface)
            const toPatch = vec3.fromValues(
                patch.centerX - cameraPos[0],
                patch.centerY - cameraPos[1],
                0 - cameraPos[2]  // Ocean is at Z=0
            );
            const distance = vec3.length(toPatch);
            // Normalize direction to patch
            const toPatchDir = vec3.create();
            vec3.normalize(toPatchDir, toPatch);
            // Calculate dot product with view direction (how aligned is patch with where we're looking)
            const dotProduct = vec3.dot(viewDir, toPatchDir);
            // Determine if patch is in front of camera and within view cone
            const isInFront = dotProduct > -0.3; // Slightly behind is ok for edge cases
            const isInViewCone = dotProduct > this.VIEW_CONE_COS;
            // Frustum culling - don't draw patches behind camera
            patch.visible = isInFront;
            // Calculate LOD level
            let newLodLevel = 5; // Default to lowest detail
            if (!isInFront) {
                // Behind camera - skip (will not be drawn)
                newLodLevel = 5;
            } else if (isInViewCone) {
                // In view cone - use distance-based LOD
                for (let i = 0; i < this.LOD_LEVELS.length; i++) {
                    if (distance < this.LOD_LEVELS[i].distance) {
                        newLodLevel = i;
                        break;
                    }
                }
            } else {
                // 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, 5); // Reduce detail
                        break;
                    }
                }
            }
            // Only recreate grid if LOD level changed
            if (newLodLevel !== patch.lodLevel) {
                patch.lodLevel = newLodLevel;
                patch.grid = new Grid(
                    this.LOD_LEVELS[newLodLevel].gridSize,
                    patch.centerX,
                    patch.centerY,
                    patch.size
                );
                patch.grid.initVAO(gl);
            }
        }
    }
    initVAO(gl: WebGL2RenderingContext): void {
        for (const { grid } of this.grids) {
            grid.initVAO(gl);
        }
    }
    draw(gl: WebGL2RenderingContext, wireframe: boolean = false): void {
        for (const patch of this.grids) {
            if (patch.visible) {
                patch.grid.draw(gl, wireframe);
            }
        }
    }
    getGridCount(): number {
        return this.grids.length;
    }
    getTotalVertexCount(): number {
        let total = 0;
        for (const { grid } of this.grids) {
            total += grid.getIndexCount() / 3;
        }
        return total;
    }
    /** Get statistics about current LOD distribution */
    getLODStats(): { [key: number]: number } {
        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]++;
        }
        return stats;
    }
 }
--- a/src/Shader.ts
+++ b/src/Shader.ts
@@ -0,0 +1,65 @@
 /**  Get shader source by HTML-Element<id> */
 export function getShader(gl: WebGL2RenderingContext, id: string): WebGLShader | null {
    const script: any = document.getElementById(id);
    if (!script) {
        console.error(`Couldn't get shader source from HTML for id: ${id}`);
        return null;
    }
    let shader: WebGLShader | null;
    if (script.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (script.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        console.error(`Script type is wrong for id: ${id}`);
        return null;
    }
    if (shader == null) {
        console.error("Cannot create Shaders!");
        return null;
    }
    gl.shaderSource(shader, script.text);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error(`Shader compilation failed for ${id}:`, gl.getShaderInfoLog(shader));
        return null;
    }
    return shader;
 }
 export function createProgram(
    gl: WebGL2RenderingContext,
    vertexShaderId: string,
    fragmentShaderId: string,
    programName: string
 ): WebGLProgram | null {
    const vertexShader = getShader(gl, vertexShaderId);
    const fragmentShader = getShader(gl, fragmentShaderId);
    if (vertexShader == null || fragmentShader == null) {
        console.error(`Didn't find ${programName} shader sources!`);
        return null;
    }
    const program = gl.createProgram();
    if (program == null) {
        console.error(`${programName} program not created!`);
        return null;
    }
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error(`Could not initialize ${programName} shaders:`, gl.getProgramInfoLog(program));
        return null;
    }
    return program;
 }
--- a/src/Skybox.ts
+++ b/src/Skybox.ts
@@ -0,0 +1,85 @@
 /** Skybox cube for rendering the sky */
 export class Skybox {
    private vao: WebGLVertexArrayObject | null = null;
    private vbo: WebGLBuffer | null = null;
    private indexCount: number = 0;
    constructor() {}
    initVAO(gl: WebGL2RenderingContext): void {
        // Cube vertices - positions only
        const vertices = new Float32Array([
            // Front face
            -1, -1,  1,
             1, -1,  1,
             1,  1,  1,
            -1,  1,  1,
            // Back face
            -1, -1, -1,
            -1,  1, -1,
             1,  1, -1,
             1, -1, -1,
            // Top face
            -1,  1, -1,
            -1,  1,  1,
             1,  1,  1,
             1,  1, -1,
            // Bottom face
            -1, -1, -1,
             1, -1, -1,
             1, -1,  1,
            -1, -1,  1,
            // Right face
             1, -1, -1,
             1,  1, -1,
             1,  1,  1,
             1, -1,  1,
            // Left face
            -1, -1, -1,
            -1, -1,  1,
            -1,  1,  1,
            -1,  1, -1,
        ]);
        const indices = new Uint16Array([
            0,  2,  1,    0,  3,  2,   // front
            4,  6,  5,    4,  7,  6,   // back
            8,  10, 9,    8,  11, 10,  // top
            12, 14, 13,   12, 15, 14,  // bottom
            16, 18, 17,   16, 19, 18,  // right
            20, 22, 21,   20, 23, 22,  // left
        ]);
        this.indexCount = indices.length;
        this.vao = gl.createVertexArray();
        gl.bindVertexArray(this.vao);
        this.vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        const ibo = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
        // Position attribute
        gl.enableVertexAttribArray(0);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
        gl.bindVertexArray(null);
    }
    draw(gl: WebGL2RenderingContext): void {
        if (!this.vao) return;
        // Disable face culling for skybox (we're inside the cube)
        gl.disable(gl.CULL_FACE);
        gl.bindVertexArray(this.vao);
        gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_SHORT, 0);
        gl.bindVertexArray(null);
        gl.enable(gl.CULL_FACE);
    }
 }
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -0,0 +1,24 @@
 // Configuration Constants
 export const GRID_SIZE = 128;
 export const NOISE_TEXTURE_WIDTH = 1024;
 export const NOISE_TEXTURE_HEIGHT = 1024;
 export const CANVAS_WIDTH = 800;
 export const CANVAS_HEIGHT = 600;
 export const FOV = 1.0;
 export const NEAR_PLANE = 0.1;
 export const FAR_PLANE = 1000.0;
 export const CAMERA_DEFAULT_OFFSET = 1.2;
 export const CAMERA_DEFAULT_ROT_X = 1.1;
 export const CAMERA_DEFAULT_ROT_Y = 0;
 export const MOUSE_SENSITIVITY = 0.001;
 export const KEYBOARD_ROTATION_SPEED = 0.02;
 export const KEYBOARD_ZOOM_SPEED = 0.05;
 export const FPS_UPDATE_INTERVAL = 1000;
 // Ocean shader constants
 export const OCEAN_COLOR_R = 0.0;
 export const OCEAN_COLOR_G = 0.4;
 export const OCEAN_COLOR_B = 0.4;
 export const SKY_COLOR_R = 1.0;
 export const SKY_COLOR_G = 1.0;
 export const SKY_COLOR_B = 1.0;
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,86 +1,43 @@
-import { vec3, mat4, vec4 } from 'gl-matrix'
+import { vec3, mat4 } from 'gl-matrix';
 import { Camera } from './Camera';
 import { OceanLOD } from './OceanLOD';
 import { Skybox } from './Skybox';
 import { createProgram } from './Shader';
 import * as Config from './constants';
 var gl: WebGL2RenderingContext;
 var viewportWidth = 0;
 var viewportHeight = 0;
 /** A camera that always looks at the world origin. Can have an offset and be rotated. */
-class Camera {
+// Moved to Camera.ts
    pos: vec3;
    target: vec3;
    up: vec3;
    xRot: number;
    yRot: number;
    offset: number;
    constructor() {
        this.pos = vec3.create();
        vec3.set(this.pos, 0.0, 0.0, 0.0);
        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);
        this.xRot = 0.0;
        this.yRot = 0.0;
        this.offset = 0.0;
    }
    setRotationX(rotX: number): void {
        this.xRot = rotX;
        this.updatePos();
    }
    setRotationY(rotY: number): void {
        this.yRot = rotY;
        this.updatePos();
    }
    /** Sets the offset to world origin. */
    setOffset(off: number): void {
        this.offset = off;
        this.updatePos();
    }
    /** Reculcates the position according to xy-rotation and offset. */
    private updatePos(): void {
        var transformation: mat4 = mat4.create();
        mat4.identity(transformation);
        //2. xy-Rotation
        mat4.rotateX(transformation, transformation, this.xRot);
        mat4.rotateY(transformation, transformation, this.yRot);
        //1. Translation
        var translation = vec3.create();
        vec3.set(translation, 0.0, 0.0, this.offset);
        mat4.translate(transformation, transformation, translation);
        var temp: vec4 = vec4.create();
        vec4.set(temp, 0.0, 0.0, 0.0, 1.0);
        vec4.transformMat4(temp, temp, transformation);
        vec3.set(this.pos, temp[0], temp[1], temp[2]);
    }
    getViewMatrix(): mat4 {
        var ret: mat4;
        ret = mat4.create();
        mat4.lookAt(ret, this.pos, this.target, this.up);
        return ret;
    }
 }
 /** Init OpenGL and gets the viewport/canvas sizes */
 function initGL(canvas: HTMLCanvasElement) {
    // Helper function for canvas resize
    const updateCanvasSize = (canvas: HTMLCanvasElement) => {
        const displayWidth = window.innerWidth;
        const displayHeight = window.innerHeight;
        if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
            canvas.width = displayWidth;
            canvas.height = displayHeight;
            viewportWidth = displayWidth;
            viewportHeight = displayHeight;
            if (gl) {
                gl.viewport(0, 0, viewportWidth, viewportHeight);
            }
        }
    };
    var gltemp;
    try {
        gltemp = canvas.getContext("webgl2");
        if (!gltemp)
            gltemp = canvas.getContext("experimental-webgl2");
        if (gltemp != null) {
-            viewportWidth = canvas.width;
+            updateCanvasSize(canvas);
            viewportHeight = canvas.height;
        }
    } catch (e) {
@@ -88,70 +45,27 @@ function initGL(canvas: HTMLCanvasElement) {
    // Not the best error detection logic.
    // Redirect to http://get.webgl.org in failure case.
    if (gltemp == null) {
-        alert("Unable to initialize WebGL2. Your browser or machine may not support it.");
+        console.error("Unable to initialize WebGL2. Your browser or machine may not support it.");
        return;
    }
    gl = <WebGL2RenderingContext>gltemp;
    //WebGL2 supports floating point textures by default but it does not support filtering them or rendering to them by default. Note: 16bit filtering is included 32bit not
    if (!gl.getExtension('EXT_color_buffer_float')) {
-        alert("32Bit/16Bit single Color render Buffers not available.");
+        console.error("32Bit/16Bit single Color render Buffers not available.");
    } //allow 16bit texture as framebuffer target
    gl.enable(gl.DEPTH_TEST);
    return updateCanvasSize;
 }
 /** Update canvas size to fill window */
 // Moved inline below
 /** Grid for the watersurface */
-var gridIndices: number[] = [];
+// Moved to Grid.ts
 var gridVertices: number[] = [];
 function generateGrid(N: number) {
    for (let j = 0; j <= N; ++j) {
        for (let i = 0; i <= N; ++i) {
            //Generate Vertices
            let x = i / N;
            let y = j / N;
            let z = 0;
            gridVertices.push(x);
            gridVertices.push(y);
            gridVertices.push(z);
-            if (i < N && j < N) //Skip edges
+/** Init Geometry for a Triangle */
            {
                let row1 = j * (N + 1);
                let row2 = (j + 1) * (N + 1);
                // triangle 1
                gridIndices.push(row1 + i);
                gridIndices.push(row1 + i + 1);
                gridIndices.push(row2 + i + 1);
                // triangle 2
                gridIndices.push(row1 + i);
                gridIndices.push(row2 + i + 1);
                gridIndices.push(row2 + i);
            }
        }
    }
 }
 var gridVAO: WebGLVertexArrayObject | null = null;
 function initGridVAO() {
    generateGrid(128);
    gridVAO = gl.createVertexArray();
    gl.bindVertexArray(gridVAO);
    let vboGrid: WebGLBuffer | null = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(gridVertices), gl.STATIC_DRAW);
    let iboGrid: WebGLBuffer | null = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboGrid);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(gridIndices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
    gl.enableVertexAttribArray(0);
    gl.bindVertexArray(null);
 }
 /** Init Geomtry for an Triangle */
 var VBO: WebGLBuffer | null = null;
 function initGeometry() {
    VBO = gl.createBuffer();
@@ -170,117 +84,25 @@ function initGeometry() {
 }
 /**  Get shader source by HTML-Element<id> */
-function getShader(id: string) {
+// Moved to Shader.ts
    var script: any = document.getElementById(id);
    if (!script) {
        console.log("Coudln't get shader source from HTML!");
        return null;
    }
    var shader: WebGLShader | null;
    if (script.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (script.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        console.log("Script type is wrong!");
        return null;
    }
    if (shader == null) {
        console.log("Cannot create Shaders!")
        return null;
    }
    gl.shaderSource(shader, script.text);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }
    return shader;
 }
 /** Init all Shaders that are needed */
 var perlinNoiseProgram: WebGLProgram | null;
 var defaultProgram: WebGLProgram | null;
 var textureProgram: WebGLProgram | null;
 var skyProgram: WebGLProgram | null;
 function initShaders() {
-    { //Get perlinNoiseProgram
+    perlinNoiseProgram = createProgram(gl, "ndc-vs", "noise-fs", "Perlin Noise");
-        let vertexShader = getShader("ndc-vs");
+    defaultProgram = createProgram(gl, "default-vs", "default-fs", "Default");
-        let fragmentShader = getShader("noise-fs");
+    textureProgram = createProgram(gl, "texture-vs", "texture-fs", "Texture");
-
+    skyProgram = createProgram(gl, "sky-vs", "sky-fs", "Sky");
        if (vertexShader == null || fragmentShader == null) {
            console.log("Didn't find shader sources!")
            return null;
        }
        perlinNoiseProgram = gl.createProgram();
        if (perlinNoiseProgram == null) {
            console.log("Program not created!")
            return null
        }
        gl.attachShader(perlinNoiseProgram, vertexShader);
        gl.attachShader(perlinNoiseProgram, fragmentShader);
        gl.linkProgram(perlinNoiseProgram);
        if (!gl.getProgramParameter(perlinNoiseProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }
    }
    { //Get defaultShaders
        let vertexShader = getShader("default-vs");
        let fragmentShader = getShader("default-fs");
        if (vertexShader == null || fragmentShader == null) {
            console.log("Didn't find shader sources!")
            return null;
        }
        defaultProgram = gl.createProgram();
        if (defaultProgram == null) {
            console.log("Program not created!")
            return null
        }
        gl.attachShader(defaultProgram, vertexShader);
        gl.attachShader(defaultProgram, fragmentShader);
        gl.linkProgram(defaultProgram);
        if (!gl.getProgramParameter(defaultProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }
    }
    { //Get textureShader
        let vertexShader = getShader("texture-vs");
        let fragmentShader = getShader("texture-fs");
        if (vertexShader == null || fragmentShader == null) {
            console.log("Didn't find shader sources!")
            return null;
        }
        textureProgram = gl.createProgram();
        if (textureProgram == null) {
            console.log("Program not created!")
            return null
        }
        gl.attachShader(textureProgram, vertexShader);
        gl.attachShader(textureProgram, fragmentShader);
        gl.linkProgram(textureProgram);
        if (!gl.getProgramParameter(textureProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }
    }
 }
 /** Init an FBO used for the first render pass / perlin noise */
 var perlinNoiseFBO: WebGLFramebuffer | null = null;
 var textureFBO: WebGLTexture | null = null;
-var perlinNoiseFBOWidth = 256;
+var perlinNoiseFBOWidth = Config.NOISE_TEXTURE_WIDTH;
-var ferlinNoiseFBOHeight = 256;
+var perlinNoiseFBOHeight = Config.NOISE_TEXTURE_HEIGHT;
 function initFBO() {
    perlinNoiseFBO = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
@@ -288,13 +110,13 @@ function initFBO() {
    // Add attachments
    textureFBO = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, textureFBO);                                            //last 3 parameter not intertesting becuase we are not supplying data
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RED, gl.HALF_FLOAT, null);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, perlinNoiseFBOWidth, perlinNoiseFBOHeight, 0, gl.RED, gl.HALF_FLOAT, null);
    // set the filtering so we don't need mips
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureFBO, 0);
@@ -311,79 +133,95 @@ var timeSpent = 0.0;
 var lastTime = new Date().getTime();
 var counter = 0.0;
 var fps = 0;
 var fpsDisplay: HTMLElement | null = null;
 var lodStatsTimer = 0;
 /** Input states*/
 var mouseXVel = 0;
 var mouseYVel = 0;
 var keysPressed: Set<string> = new Set();
 /** Objects and states*/
 var camera: Camera;
-var curRotX = 1.1;
+var oceanLOD: OceanLOD;
-var curRotY = 0;
+var skybox: Skybox;
 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;
 var foamIntensity = 1.0;
 var glitterIntensity = 1.0;
 function drawScene() {
    fps++;
    let now = new Date();
    let delta = now.getTime() - lastTime;
    timeSpent += delta;
-    if ((counter += delta) >= 1000.) {
+    lodStatsTimer += delta;
    if ((counter += delta) >= Config.FPS_UPDATE_INTERVAL) {
        counter = 0;
-        console.log("FPS: " + fps);
+        if (fpsDisplay) {
            fpsDisplay.textContent = `FPS: ${fps}`;
        }
        fps = 0;
    }
    lastTime = now.getTime();
    // Two Rendering passes. The first one generates a perlin noise 
    // texture. Second one uses the textur for vertex displacement 
    // of a grid representing the water surface.
-    //--- First render pass -> Perlin Noise (it updates the perlin noise texture)
+    // Log LOD stats every 5 seconds
-    {
+    if (lodStatsTimer >= 5000) {
-        gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
+        lodStatsTimer = 0;
-        gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
+        const stats = oceanLOD.getLODStats();
-
+        console.log(`LOD Stats - High:${stats[0]} Med:${stats[1]} Low:${stats[2]} VeryLow:${stats[3]}`);
        //Clear buffer content
        gl.clearColor(1.0, 1.0, 1.0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
        //draw a fullscreen quad
        gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
        // There are 7 floating-point values per vertex
        let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
        // Set up position stream
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
        gl.enableVertexAttribArray(0);
        gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 3 * Float32Array.BYTES_PER_ELEMENT);
        gl.enableVertexAttribArray(1);
        gl.useProgram(perlinNoiseProgram);
        let uTime = gl.getUniformLocation(<WebGLProgram>perlinNoiseProgram, "uTime");
        gl.uniform1f(uTime, timeSpent);
        gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw fullscreen quad
    }
    lastTime = now.getTime();
-    //--- Second render pass -> Geomtry with displacement by perlin noise texture ---
+    // Sun direction (matches the one in ocean shader)
    const sunDirection = vec3.fromValues(0.3, 0.5, 0.8);
    vec3.normalize(sunDirection, sunDirection);
    //--- Render pass -> Skybox first (no depth write) ---
    {
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        gl.viewport(0, 0, viewportWidth, viewportHeight);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.activeTexture(gl.TEXTURE0); //Binds the texture to 0
        gl.bindTexture(gl.TEXTURE_2D, textureFBO);
        var projection = mat4.create();
-        mat4.identity(projection);
+        mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE);
-        mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.); //projection mode should actually be camera specific
+
        // Handle FPS camera movement
        handleCameraMovement();
        // Apply mouse rotation
        if (mouseXVel !== 0 || mouseYVel !== 0) {
            camera.rotate(mouseXVel, mouseYVel);
            mouseXVel = 0;
            mouseYVel = 0;
        }
        camera.setOffset(1.2);
        camera.setRotationX((curRotX += mouseYVel * 0.001));
        camera.setRotationY((curRotY += mouseXVel * 0.001));
        var view = camera.getViewMatrix();
        // Draw skybox first with depth test disabled (always behind everything)
        gl.depthMask(false);
        gl.disable(gl.DEPTH_TEST);
        gl.useProgram(skyProgram);
        let sky_view_loc = gl.getUniformLocation(<WebGLProgram>skyProgram, "view");
        gl.uniformMatrix4fv(sky_view_loc, false, view);
        let sky_projection_loc = gl.getUniformLocation(<WebGLProgram>skyProgram, "projection");
        gl.uniformMatrix4fv(sky_projection_loc, false, projection);
        let sky_sun_loc = gl.getUniformLocation(<WebGLProgram>skyProgram, "uSunDirection");
        gl.uniform3fv(sky_sun_loc, sunDirection);
        skybox.draw(gl);
        gl.enable(gl.DEPTH_TEST);
        gl.depthMask(true);
        // Update LOD based on camera position and view direction
        oceanLOD.updateLOD(gl, camera.pos, camera.target);
        var model = mat4.create();
        mat4.identity(model);
-        let translationCentering = vec3.create();
+        // No centering needed - grids are already positioned correctly in world space
        vec3.set(translationCentering, -0.5, -0.5, 0.0);
        mat4.translate(model, model, translationCentering); //1. First Center the Surface in the origin.
        gl.useProgram(defaultProgram);
        let view_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "view");
@@ -394,20 +232,68 @@ function drawScene() {
        gl.uniformMatrix4fv(projection_loc, false, projection);
        let eye_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "eyePos");
        gl.uniform3fv(eye_loc, camera.pos);
-        //let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
+        let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
-        //gl.uniform1f(uTime_loc, timeSpent);
+        gl.uniform1f(uTime_loc, timeSpent);
-        let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "displace_map");
+        
-        gl.uniform1i(displacementMap_loc, 0); //Get texture from slot 0
+        // Ocean shader settings
-        gl.bindVertexArray(gridVAO);
+        let uWaveHeight_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uWaveHeight");
-        gl.drawElements(gl.TRIANGLES, gridIndices.length, gl.UNSIGNED_INT, 0);
+        gl.uniform1f(uWaveHeight_loc, waveHeight);
-        gl.bindVertexArray(null);
+        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);
 }
 /** Handle FPS camera movement */
 function handleCameraMovement() {
    const speed = keysPressed.has('Shift') ? fastMoveSpeed : moveSpeed;
    // WASD for horizontal movement
    if (keysPressed.has('w') || keysPressed.has('W')) {
        camera.moveForward(speed);
    }
    if (keysPressed.has('s') || keysPressed.has('S')) {
        camera.moveForward(-speed);
    }
    if (keysPressed.has('a') || keysPressed.has('A')) {
        camera.moveRight(-speed);
    }
    if (keysPressed.has('d') || keysPressed.has('D')) {
        camera.moveRight(speed);
    }
    // Q/E for vertical movement
    if (keysPressed.has('q') || keysPressed.has('Q')) {
        camera.moveUp(-speed);
    }
    if (keysPressed.has('e') || keysPressed.has('E')) {
        camera.moveUp(speed);
    }
    // Space to go up, Ctrl to go down
    if (keysPressed.has(' ')) {
        camera.moveUp(speed);
    }
    if (keysPressed.has('Control')) {
        camera.moveUp(-speed);
    }
 }
 function main() {
    const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
-    initGL(canvas);
+    fpsDisplay = document.getElementById("fps-counter");
    const updateCanvasSize = initGL(canvas);
    if (!updateCanvasSize) {
        console.error("Failed to initialize WebGL");
        return;
    }
    var drag = false;
    var previousPosX: number | null;
@@ -439,10 +325,68 @@ function main() {
    canvas.addEventListener('mouseup', deactivateMouseMovement, false);
    canvas.addEventListener('mouseleave', deactivateMouseMovement, false);
    // Keyboard controls
    window.addEventListener('keydown', (evt) => {
        keysPressed.add(evt.key);
        // Reset camera on 'R' key
        if (evt.key === 'r' || evt.key === 'R') {
            camera = new Camera(); // Reset to initial position
        }
        // Prevent default for space to avoid page scroll
        if (evt.key === ' ') {
            evt.preventDefault();
        }
    });
    window.addEventListener('keyup', (evt) => {
        keysPressed.delete(evt.key);
    });
    // Window resize handler
    window.addEventListener('resize', () => {
        updateCanvasSize(canvas);
    });
    // Wireframe toggle handler
    window.addEventListener('toggleWireframe', () => {
        wireframeMode = !wireframeMode;
        const wireframeBtn = document.getElementById('wireframe-toggle');
        if (wireframeBtn) {
            wireframeBtn.textContent = `Wireframe: ${wireframeMode ? 'ON' : 'OFF'}`;
        }
        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();
    initFBO();
-    initGridVAO();
+    
    oceanLOD = new OceanLOD();
    oceanLOD.initVAO(gl);
    console.log(`Ocean LOD initialized with ${oceanLOD.getGridCount()} patches`);
    skybox = new Skybox();
    skybox.initVAO(gl);
    console.log('Skybox initialized');
    camera = new Camera();
    //Check if any errors apeared during init.
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,63 +1,18 @@
 {
  "compilerOptions": {
-    /* Basic Options */
+    "target": "ES2020",
-    // "incremental": true,                   /* Enable incremental compilation */
+    "module": "ESNext",
-    "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "sourceMap": true,
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "outDir": "./build/",
-    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    "strict": true,
-    // "checkJs": true,                       /* Report errors in .js files. */
+    "moduleResolution": "bundler",
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "resolveJsonModule": true,
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    "esModuleInterop": true,
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,                        /* Generates corresponding '.map' file. */
+    "forceConsistentCasingInFileNames": true,
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "skipLibCheck": true
    "outDir": "./build/", /* Redirect output structure to the directory. */
    // "rootDir": "./src/",                      /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
    /* Strict Type-Checking Options */
    "strict": true, /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
    /* Advanced Options */
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  },
-  "files": [
+  "include": ["src/**/*"],
-    "src/main.ts"
+  "exclude": ["node_modules", "dist", "build"]
  ]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,15 @@
 import { defineConfig } from 'vite';
 export default defineConfig({
  base: './',
  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: 'esbuild',
    target: 'es2020',
  },
  server: {
    port: 3000,
    open: true,
  },
 });
Author	SHA1	Message	Date
Gulum	503435bdf7	Refactor OceanLOD LOD levels and patch management; implement grid recentering based on camera movement	2026-01-31 23:21:19 +01:00
Gulum	5677f03dc2	Refactor Camera and OceanLOD for improved movement and LOD management; enhance shader effects for better visual fidelity	2026-01-31 23:16:31 +01:00
Gulum	b576d6a8cf	Add Skybox class for rendering sky and update shaders for sky rendering	2026-01-31 23:00:40 +01:00
Gulum	109eafa90a	Refactor OceanLOD and constants for improved LOD management and grid size adjustments	2026-01-31 22:52:30 +01:00
Gulum	c19854aefc	Enhance OceanLOD to consider view direction in LOD updates and adjust grid size parameters	2026-01-31 22:50:05 +01:00
Gulum	e9512fb88a	Add ocean shader settings and control sliders for wave properties	2026-01-31 22:47:20 +01:00
Gulum	d61c91a267	Implement Ocean LOD management and enhance grid generation with wireframe support	2026-01-31 22:22:00 +01:00
Gulum	dedcec547d	adjustments	2026-01-31 21:25:25 +01:00
Gulum	0a7dc2f25f	Update dependencies and enhance installation instructions in README - Updated devDependencies in package.json: - Upgraded browserify to version 17.0.1 - Upgraded concurrently to version 9.2.1 - Upgraded typescript to version 5.9.3 - Upgraded uglify-js to version 3.19.3 - Updated gl-matrix dependency to version 3.4.4 - Added installation instructions to README	2026-01-31 21:00:12 +01:00