Add Skybox class for rendering sky and update shaders for sky rendering

index.html

@@ -405,6 +405,7 @@
          
             void main(void) {
                 vec4 worldPos = model * vec4(positionAttr.xyz, 1.0);
+                // Grid is on XY plane, Z is up
                 vec2 pos = worldPos.xy;
                 float time = uTime * 0.0004 * uWaveSpeed;
                 float heightMod = uWaveHeight;
@@ -470,10 +471,10 @@
                 // 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
+                // Apply displacement - Z is up, XY is horizontal plane
                 worldPos.x += displacement.x;
                 worldPos.y += displacement.z;
-                worldPos.z += displacement.y;
+                worldPos.z += displacement.y;  // Height displacement
                 
                 // Calculate normal from tangent and binormal
                 vec3 normal = normalize(cross(binormal, tangent));
@@ -488,10 +489,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">
@@ -499,14 +541,15 @@
 
             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>