From 86d6da33d2f54f38bdb8481f0c94e2457d12ac98 Mon Sep 17 00:00:00 2001
From: Gulum <gulum@rismer.de>
Date: Wed, 4 Feb 2026 22:34:59 +0100
Subject: [PATCH] Add skybox

---
 index.html    | 96 +++++++++++++++++++++++++++++++++++++--------------
 src/Skybox.ts | 80 ++++++++++++++++++++++++++++++++++++++++++
 src/main.ts   | 33 ++++++++++++++++++
 3 files changed, 184 insertions(+), 25 deletions(-)
 create mode 100644 src/Skybox.ts
diff --git a/index.html b/index.html
index 0fb8b9c..63b4095 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,20 +11,20 @@
             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;
@@ -37,23 +38,23 @@
             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);
@@ -63,7 +64,7 @@
             font-size: 12px;
             margin: 0 2px;
         }
-        
+
         #toggle-controls {
             position: absolute;
             top: 20px;
@@ -78,11 +79,11 @@
             backdrop-filter: blur(10px);
             transition: background 0.3s;
         }
-        
+
         #toggle-controls:hover {
             background: rgba(0, 0, 0, 0.85);
         }
-        
+
         #fps-counter {
             position: absolute;
             bottom: 20px;
@@ -285,10 +286,51 @@
     <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">
@@ -296,30 +338,34 @@
 
             uniform mat4 projection;
             uniform mat4 view;
-            uniform mat4 testModel;
 
-            varying vec3 fragPos;
+            varying vec3 v_rayDir;
 
             void main(void) {
-                gl_PointSize = 10.;
-                gl_Position = projection * mat4(mat3(view)) * vec4(positionAttr, 1.0);
-                fragPos = (view * vec4(positionAttr,1.0)).xyz; //This is wrong probably
+                v_rayDir = positionAttr;
+                // Remove translation from view matrix for skybox
+                mat4 rotView = mat4(mat3(view));
+                vec4 pos = projection * rotView * vec4(positionAttr, 1.0);
+                gl_Position = pos;
             }
     </script>
+
 </head>
 
 <body>
     <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
+            <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>
+            <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
@@ -331,21 +377,21 @@
             <strong>Toggle Help:</strong> <span class="key">H</span>
         </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');
diff --git a/src/Skybox.ts b/src/Skybox.ts
new file mode 100644
index 0000000..825d07a
--- /dev/null
+++ b/src/Skybox.ts
@@ -0,0 +1,80 @@
+/** 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;
+        
+        gl.bindVertexArray(this.vao);
+        gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_SHORT, 0);
+        gl.bindVertexArray(null);
+    }
+}
diff --git a/src/main.ts b/src/main.ts
index 7fe2c34..da61d66 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import { vec3, mat4 } from 'gl-matrix';
 import { Camera } from './Camera';
 import { Grid } from './Grid';
+import { Skybox } from './Skybox';
 import { createProgram } from './Shader';
 import * as Config from './constants';
 
@@ -89,10 +90,12 @@ function initGeometry() {
 var perlinNoiseProgram: WebGLProgram | null;
 var defaultProgram: WebGLProgram | null;
 var textureProgram: WebGLProgram | null;
+var skyProgram: WebGLProgram | null;
 function initShaders() {
     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");
+    skyProgram = createProgram(gl, "sky-vs", "sky-fs", "Sky");
 }
 
 /** Init an FBO used for the first render pass / perlin noise */
@@ -141,6 +144,7 @@ var keysPressed: Set<string> = new Set();
 /** Objects and states*/
 var camera: Camera;
 var oceanGrid: Grid;
+var skybox: Skybox;
 var curRotX = Config.CAMERA_DEFAULT_ROT_X;
 var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
 function drawScene() {
@@ -168,6 +172,9 @@ function drawScene() {
         //Clear buffer content
         gl.clearColor(1.0, 1.0, 1.0, 1);
         gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
+        
+        // Disable face culling for fullscreen quad
+        gl.disable(gl.CULL_FACE);
 
         //draw a fullscreen quad
         gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
@@ -205,6 +212,29 @@ function drawScene() {
         camera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
         camera.setRotationY((curRotY += mouseXVel * Config.MOUSE_SENSITIVITY + keyboardRotationY));
         var view = camera.getViewMatrix();
+        
+        // Sun direction (matches the one in ocean shader)
+        const sunDirection = vec3.fromValues(0.3, 0.5, 0.8);
+        vec3.normalize(sunDirection, sunDirection);
+
+        // Draw skybox first with depth test disabled (always behind everything)
+        gl.depthMask(false);
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.CULL_FACE); // Disable face culling for skybox (we're inside)
+        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);
+        gl.enable(gl.CULL_FACE); // Re-enable face culling for ocean
+        gl.cullFace(gl.BACK); // Cull back faces for ocean
 
         var model = mat4.create();
         mat4.identity(model);
@@ -324,6 +354,9 @@ function main() {
     
     oceanGrid = new Grid(Config.GRID_SIZE);
     oceanGrid.initVAO(gl);
+    
+    skybox = new Skybox();
+    skybox.initVAO(gl);
 
     camera = new Camera();
     //Check if any errors apeared during init.
