Add skybox
This commit is contained in:
96
index.html
96
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');
|
||||
|
||||
Reference in New Issue
Block a user