Refactor OceanLOD and constants for improved LOD management and grid size adjustments

Enhance OceanLOD to consider view direction in LOD updates and adjust grid size parameters
Add ocean shader settings and control sliders for wave properties
2026-01-31 22:52:30 +01:00 · 2026-01-31 22:50:05 +01:00 · 2026-01-31 22:47:20 +01:00 · 2026-01-31 22:22:00 +01:00 · 2026-01-31 21:25:25 +01:00 · 2026-01-31 21:00:12 +01:00
14 changed files with 2350 additions and 1684 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
-    - deploy        #then deploy
+    - build
+    - 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
-    - mkdir -p /var/www/projects.rismer.de/$CI_PROJECT_NAME/build
-    - cp build/app.js /var/www/projects.rismer.de/$CI_PROJECT_NAME/build
+    - cp -r dist/* /var/www/projects.rismer.de/$CI_PROJECT_NAME/
  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,77 +240,125 @@
        precision mediump float;

        varying vec3 v_fragPos;
-        varying vec2 v_uv;
+        varying vec3 v_normal;
+        varying float v_waveHeight;
+        varying float v_foamFactor;

        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.
-        vec3 lightColor = vec3(1.0,1.0,1.0);
+        // Simple hash function for noise
+        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
+        // Value noise for foam texture
+        float noise(vec2 p) {
+            vec2 i = floor(p);
+            vec2 f = fract(p);
+            f = f * f * (3.0 - 2.0 * f); // smoothstep
+            
+            float a = hash(i);
+            float b = hash(i + vec2(1.0, 0.0));
+            float c = hash(i + vec2(0.0, 1.0));
+            float d = hash(i + vec2(1.0, 1.0));
+            
+            return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+        }
+        
+        // Fractal noise for more detailed foam
+        float foamNoise(vec2 p) {
+            float n = 0.0;
+            n += 0.5 * noise(p * 8.0);
+            n += 0.25 * noise(p * 16.0);
+            n += 0.125 * noise(p * 32.0);
+            n += 0.0625 * noise(p * 64.0);
+            return n;
+        }

        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 lightColor = vec3(1.0, 1.0, 0.95);
+            vec3 sunDirection = normalize(vec3(0.3, 0.5, 0.8));
            
-            //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(v_normal);
            
-            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
+            // View direction
+            vec3 viewDir = normalize(eyePos - v_fragPos);
            
-            float diff = max(dot(norm,lightDir),0.0);
+            // Diffuse lighting
+            float diff = max(dot(norm, sunDirection), 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));
+            // 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);

-            //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.) ;
+            // Deep and shallow water colors
+            vec3 deepColor = vec3(0.0, 0.08, 0.15);
+            vec3 shallowColor = vec3(0.0, 0.35, 0.45);
+            vec3 skyColor = vec3(0.5, 0.7, 0.9);
+            vec3 foamColor = vec3(0.95, 0.98, 1.0);
            
-            //vec3 waterColor = vec3(34./255.,154./255.,211./255.);
-            vec3 oceanColor = vec3(0,.4,.4); // under-sea colour
-            vec3 skyColor = vec3(1.,1.,1.);
+            // 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);
            
-            //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;
-            }
+            // 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);
            
-            //gl_FragColor = vec4(oceanColor + lightColor * glitterFactor,1.0);
-            //gl_FragColor=vec4(clamp(oceanColor + (oceanColor*ssScateringCoef),0.,1.0),1.0); //Display subsurfacecatterting component
-            //gl_FragColor = vec4((mix(oceanColor,skyColor,fresnel).xyz), 1.); //Just display reflection component
-            //gl_FragColor = vec4(diffuse * oceanColor,1.0); //Render only diffuse component
-            //gl_FragColor = vec4(normal,1.0); //show Normal map
-            //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
+            // 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
+            foam = pow(foam, 0.7) * uFoamIntensity;
+            
+            // Combine all lighting
+            vec3 reflectedColor = mix(oceanColor, skyColor, fresnel);
+            vec3 waterColor = reflectedColor * clamp(diffuse, 0.3, 1.0) + specular + sssColor + rimColor;
+            
+            // Blend foam on top with slight transparency variation
+            vec3 finalColor = mix(waterColor, foamColor * clamp(diffuse + 0.4, 0.0, 1.0), foam * 0.85);
+            
+            // Slight fog for distant water
+            float dist = length(eyePos - v_fragPos);
+            float fog = 1.0 - clamp(dist * 0.015, 0.0, 0.6);
+            finalColor = mix(skyColor * 0.85, finalColor, fog);
+            
+            gl_FragColor = vec4(finalColor, 1.0);
        }
    </script>
    <script id="default-vs" type="x-shader/x-vertex">
@@ -175,17 +367,122 @@
            uniform mat4 view;
            uniform mat4 model;
            uniform mat4 projection;
-            uniform sampler2D displace_map;
+            uniform float uTime;
+            uniform float uWaveHeight;
+            uniform float uWaveSpeed;

-            varying vec2 v_uv;
            varying vec3 v_fragPos;
+            varying vec3 v_normal;
+            varying float v_waveHeight;
+            varying float v_foamFactor;
+            
+            // 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.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
+                vec4 worldPos = model * vec4(positionAttr.xyz, 1.0);
+                vec2 pos = worldPos.xy;
+                float time = uTime * 0.0004 * uWaveSpeed;
+                float heightMod = uWaveHeight;
+                
+                vec3 displacement = vec3(0.0);
+                vec3 tangent = vec3(1.0, 0.0, 0.0);
+                vec3 binormal = vec3(0.0, 0.0, 1.0);
+                vec3 t, b;
+                
+                // === 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
+                worldPos.x += displacement.x;
+                worldPos.y += displacement.z;
+                worldPos.z += displacement.y;
+                
+                // Calculate normal from tangent and binormal
+                vec3 normal = normalize(cross(binormal, tangent));
+                v_normal = vec3(normal.x, normal.z, normal.y);
+                
                gl_Position = projection * view * worldPos;
                v_fragPos = worldPos.xyz;
-                v_uv = positionAttr.xy;
+            }
+    </script>
            }
    </script>
    <script id="sky-fs" type="x-shader/x-fragment">
@@ -212,12 +509,99 @@
                fragPos = (view * vec4(positionAttr,1.0)).xyz; //This is wrong probably
            }
    </script>
-</header>
+</head>

 <body>
-    <canvas id="window" width="800" height="600"
-        style="margin:0 auto; border: solid #000000 1px; display:block; cursor:move;"></canvas>
-    <script src="build/app.js"></script>
+    <canvas id="window"></canvas>
+    
+    <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\"",
-    "build:release": "tsc && browserify ./build/main.js | uglifyjs > ./build/app.js",
-    "build:debug": "tsc && browserify --debug ./build/main.js -o ./build/app.js",
-    "build:tsc": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "build:legacy": "tsc && browserify ./build/main.js | uglifyjs > ./build/app.js"
  },
  "keywords": [
    "webgl",
@@ -21,13 +20,10 @@
  "author": "Julian Niessner",
  "license": "ISC",
  "devDependencies": {
-    "@types/gl-matrix": "^2.4.5",
-    "browserify": "^16.5.0",
-    "concurrently": "^5.1.0",
-    "typescript": "^3.7.5",
-    "uglifyjs": "^2.4.11"
+    "typescript": "^5.9.3",
+    "vite": "^6.0.7"
  },
  "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,67 @@
+import { vec3, mat4, vec4 } from 'gl-matrix';
+
+/** A camera that always looks at the world origin. Can have an offset and be rotated. */
+export class Camera {
+    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();
+    }
+
+    /** Recalculates the position according to xy-rotation and offset. */
+    private updatePos(): void {
+        const transformation: mat4 = mat4.create();
+        mat4.identity(transformation);
+
+        //2. xy-Rotation
+        mat4.rotateX(transformation, transformation, this.xRot);
+        mat4.rotateY(transformation, transformation, this.yRot);
+
+        //1. Translation
+        const translation = vec3.create();
+        vec3.set(translation, 0.0, 0.0, this.offset);
+        mat4.translate(transformation, transformation, translation);
+
+        const 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 {
+        const ret: mat4 = mat4.create();
+        mat4.lookAt(ret, this.pos, this.target, this.up);
+        return ret;
+    }
+}
--- a/src/Grid.ts
+++ b/src/Grid.ts
@@ -0,0 +1,112 @@
+/** 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
+                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,160 @@
+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: 2.0, gridSize: 128 },   // Closest - highest detail
+        { distance: 5.0, gridSize: 64 },    // Medium distance
+        { distance: 10.0, gridSize: 32 },   // Far distance
+        { distance: 20.0, gridSize: 16 },   // Very far - lowest detail
+    ];
+    
+    private readonly PATCH_SIZE = 2.0; // World size of each patch
+    private readonly PATCHES_PER_SIDE = 7; // 7x7 = 49 patches total
+    private readonly VIEW_CONE_COS = Math.cos(Math.PI * 0.45); // ~81 degree half-angle (wider than typical FOV)
+    
+    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;
+                const centerY = y * this.PATCH_SIZE;
+                
+                // Start with lowest detail - will be updated based on camera
+                const grid = new Grid(
+                    this.LOD_LEVELS[3].gridSize,
+                    centerX,
+                    centerY,
+                    this.PATCH_SIZE
+                );
+                
+                this.grids.push({
+                    grid,
+                    centerX,
+                    centerY,
+                    size: this.PATCH_SIZE,
+                    lodLevel: 3,
+                    visible: true
+                });
+            }
+        }
+    }
+    
+    /** 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);
+        
+        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 = 3; // Default to lowest detail
+            
+            if (!isInFront) {
+                // Behind camera - skip (will not be drawn)
+                newLodLevel = 3;
+            } 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, 3); // 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 };
+        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/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,42 @@
-import { vec3, mat4, vec4 } from 'gl-matrix'
+import { vec3, mat4 } from 'gl-matrix';
+import { Camera } from './Camera';
+import { OceanLOD } from './OceanLOD';
+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 {
-    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;
-    }
-}
+// Moved to Camera.ts

 /** 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;
-            viewportHeight = canvas.height;
+            updateCanvasSize(canvas);
        }

    } catch (e) {
@@ -88,70 +44,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[] = [];
-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);
+// Moved to Grid.ts

-            if (i < N && j < N) //Skip edges
-            {
-                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 */
+/** Init Geometry for a Triangle */
 var VBO: WebGLBuffer | null = null;
 function initGeometry() {
    VBO = gl.createBuffer();
@@ -170,117 +83,23 @@ function initGeometry() {
 }

 /**  Get shader source by HTML-Element<id> */
-function getShader(id: string) {
-    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;
-}
+// Moved to Shader.ts

 /** Init all Shaders that are needed */
 var perlinNoiseProgram: WebGLProgram | null;
 var defaultProgram: WebGLProgram | null;
 var textureProgram: WebGLProgram | null;
 function initShaders() {
-    { //Get perlinNoiseProgram
-        let vertexShader = getShader("ndc-vs");
-        let fragmentShader = getShader("noise-fs");
-
-        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");
-        }
-    }
+    perlinNoiseProgram = createProgram(gl, "ndc-vs", "noise-fs", "Perlin Noise");
+    defaultProgram = createProgram(gl, "default-vs", "default-fs", "Default");
+    textureProgram = createProgram(gl, "texture-vs", "texture-fs", "Texture");
 }

 /** 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 ferlinNoiseFBOHeight = 256;
+var perlinNoiseFBOWidth = Config.NOISE_TEXTURE_WIDTH;
+var perlinNoiseFBOHeight = Config.NOISE_TEXTURE_HEIGHT;
 function initFBO() {
    perlinNoiseFBO = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
@@ -288,13 +107,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_T, 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.REPEAT);

    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureFBO, 0);

@@ -311,79 +130,72 @@ 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 keyboardRotationX = 0;
+var keyboardRotationY = 0;
+var keyboardZoom = 0;
+var keysPressed: Set<string> = new Set();
 /** Objects and states*/
 var camera: Camera;
-var curRotX = 1.1;
-var curRotY = 0;
+var oceanLOD: OceanLOD;
+var curRotX = Config.CAMERA_DEFAULT_ROT_X;
+var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
+var wireframeMode = false;
+/** Ocean shader settings */
+var waveHeight = 1.0;
+var waveSpeed = 1.0;
+var foamIntensity = 1.0;
+var glitterIntensity = 1.0;
 function drawScene() {
    fps++;
    let now = new Date();
    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)
-    {
-        gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
-        gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
-
-        //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
+    // Log LOD stats every 5 seconds
+    if (lodStatsTimer >= 5000) {
+        lodStatsTimer = 0;
+        const stats = oceanLOD.getLODStats();
+        console.log(`LOD Stats - High:${stats[0]} Med:${stats[1]} Low:${stats[2]} VeryLow:${stats[3]}`);
    }
+    lastTime = now.getTime();
+    // Single render pass with Gerstner waves computed in vertex shader

-    //--- Second render pass -> Geomtry with displacement by perlin noise texture ---
+    //--- Render pass -> Ocean with Gerstner wave displacement ---
    {
        gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer
        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, 1.0, viewportWidth / viewportHeight, 0.1, 1000.); //projection mode should actually be camera specific
+        mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE);

-        camera.setOffset(1.2);
-        camera.setRotationX((curRotX += mouseYVel * 0.001));
-        camera.setRotationY((curRotY += mouseXVel * 0.001));
+        camera.setOffset(Config.CAMERA_DEFAULT_OFFSET + keyboardZoom);
+        camera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
+        camera.setRotationY((curRotY += mouseXVel * Config.MOUSE_SENSITIVITY + keyboardRotationY));
        var view = camera.getViewMatrix();

+        // 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();
-        vec3.set(translationCentering, -0.5, -0.5, 0.0);
-        mat4.translate(model, model, translationCentering); //1. First Center the Surface in the origin.
+        // No centering needed - grids are already positioned correctly in world space

        gl.useProgram(defaultProgram);
        let view_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "view");
@@ -394,20 +206,58 @@ 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");
-        //gl.uniform1f(uTime_loc, timeSpent);
-        let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "displace_map");
-        gl.uniform1i(displacementMap_loc, 0); //Get texture from slot 0
-        gl.bindVertexArray(gridVAO);
-        gl.drawElements(gl.TRIANGLES, gridIndices.length, gl.UNSIGNED_INT, 0);
-        gl.bindVertexArray(null);
+        let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
+        gl.uniform1f(uTime_loc, timeSpent);
+        
+        // Ocean shader settings
+        let uWaveHeight_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uWaveHeight");
+        gl.uniform1f(uWaveHeight_loc, waveHeight);
+        let uWaveSpeed_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uWaveSpeed");
+        gl.uniform1f(uWaveSpeed_loc, waveSpeed);
+        let uFoamIntensity_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uFoamIntensity");
+        gl.uniform1f(uFoamIntensity_loc, foamIntensity);
+        let uGlitterIntensity_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uGlitterIntensity");
+        gl.uniform1f(uGlitterIntensity_loc, glitterIntensity);
+        
+        oceanLOD.draw(gl, wireframeMode);
    }
    requestAnimationFrame(drawScene);
 }

+/** Handle keyboard input for camera controls */
+function handleKeyboardInput() {
+    keyboardRotationX = 0;
+    keyboardRotationY = 0;
+    
+    if (keysPressed.has('w') || keysPressed.has('W') || keysPressed.has('ArrowUp')) {
+        keyboardRotationX = Config.KEYBOARD_ROTATION_SPEED;
+    }
+    if (keysPressed.has('s') || keysPressed.has('S') || keysPressed.has('ArrowDown')) {
+        keyboardRotationX = -Config.KEYBOARD_ROTATION_SPEED;
+    }
+    if (keysPressed.has('a') || keysPressed.has('A') || keysPressed.has('ArrowLeft')) {
+        keyboardRotationY = Config.KEYBOARD_ROTATION_SPEED;
+    }
+    if (keysPressed.has('d') || keysPressed.has('D') || keysPressed.has('ArrowRight')) {
+        keyboardRotationY = -Config.KEYBOARD_ROTATION_SPEED;
+    }
+    if (keysPressed.has('q') || keysPressed.has('Q') || keysPressed.has('+')) {
+        keyboardZoom -= Config.KEYBOARD_ZOOM_SPEED;
+    }
+    if (keysPressed.has('e') || keysPressed.has('E') || keysPressed.has('-')) {
+        keyboardZoom += Config.KEYBOARD_ZOOM_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 +289,63 @@ function main() {
    canvas.addEventListener('mouseup', deactivateMouseMovement, false);
    canvas.addEventListener('mouseleave', deactivateMouseMovement, false);

+    // 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;
+            curRotY = Config.CAMERA_DEFAULT_ROT_Y;
+            keyboardZoom = 0;
+        }
+    });
+    
+    window.addEventListener('keyup', (evt) => {
+        keysPressed.delete(evt.key);
+        handleKeyboardInput();
+    });
+
+    // 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`);

    camera = new Camera();
    //Check if any errors apeared during init.
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,63 +1,18 @@
 {
  "compilerOptions": {
-    /* Basic Options */
-    // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
-    // "allowJs": true,                       /* Allow javascript files to be compiled. */
-    // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    "sourceMap": true,                        /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    "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. */
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "sourceMap": true,
+    "outDir": "./build/",
+    "strict": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
  },
-  "files": [
-    "src/main.ts"
-  ]
+  "include": ["src/**/*"],
+  "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	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