Compare commits
2 Commits
screenspac
...
52c2e1dacd
| Author | SHA1 | Date | |
|---|---|---|---|
| 52c2e1dacd | |||
| 86d6da33d2 |
569
index.html
569
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;
|
||||
@@ -95,56 +96,6 @@
|
||||
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;
|
||||
@@ -240,364 +191,96 @@
|
||||
precision mediump float;
|
||||
|
||||
varying vec3 v_fragPos;
|
||||
varying vec3 v_normal;
|
||||
varying float v_waveHeight;
|
||||
varying float v_foamFactor;
|
||||
varying float v_distanceFade;
|
||||
varying vec2 v_uv;
|
||||
|
||||
uniform vec3 eyePos;
|
||||
uniform float uFoamIntensity;
|
||||
uniform float uGlitterIntensity;
|
||||
uniform sampler2D displace_map;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
//using forward difference
|
||||
//Normal vectors are compute as: https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/perlin-noise-part-2/perlin-noise-computing-derivatives
|
||||
|
||||
void main(void) {
|
||||
vec3 lightColor = vec3(1.0, 1.0, 0.95);
|
||||
vec3 sunDirection = normalize(vec3(0.3, 0.5, 0.8));
|
||||
|
||||
vec3 norm = normalize(v_normal);
|
||||
|
||||
// View direction
|
||||
vec3 viewDir = normalize(eyePos - v_fragPos);
|
||||
|
||||
// Diffuse lighting
|
||||
float diff = max(dot(norm, sunDirection), 0.0);
|
||||
vec4 displace = texture2D(displace_map, v_uv);
|
||||
//calculate normal
|
||||
float gridPointDelta = (1. / 256.);
|
||||
vec3 currPoint = vec3(0.0,0.0,displace.x);
|
||||
vec3 right = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x + gridPointDelta,v_uv.y)).x*(1./1.));
|
||||
vec3 left = vec3(-gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x - gridPointDelta,v_uv.y)).x*(1./1.));
|
||||
vec3 up = vec3(0.,gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y + gridPointDelta)).x*(1./1.));
|
||||
vec3 down = vec3(0.,-gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y - gridPointDelta)).x*(1./1.));
|
||||
|
||||
//vec3 tangent = normalize(right - currPoint);
|
||||
//vec3 biTangent = normalize(up - currPoint);
|
||||
vec3 tangent = normalize(vec3(gridPointDelta,0.,right.z-left.z));
|
||||
vec3 biTangent = normalize(vec3(0.,gridPointDelta,down.z-up.z));
|
||||
//vec3 normal = biTangent;
|
||||
vec3 normal = cross(tangent, biTangent);
|
||||
|
||||
vec3 norm = normalize(normal);
|
||||
norm.y *= -1.; //Normal y direction is somehow inverted
|
||||
//vec3 lightDir = normalize(lightPos - v_fragPos);
|
||||
vec3 lightDir = normalize(-vec3(0.0,.0,-1.)); //sun shines in drection of -z
|
||||
|
||||
float diff = max(dot(norm,lightDir),0.0);
|
||||
vec3 diffuse = diff * lightColor;
|
||||
vec3 result = (diffuse) * vec3(0.0,0.0,1.0);
|
||||
|
||||
// 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);
|
||||
//Old lightning
|
||||
vec3 toCameraVector = normalize(v_fragPos - eyePos);
|
||||
vec3 reflec = normalize(reflect(toCameraVector, norm));
|
||||
|
||||
// Deep and shallow water colors
|
||||
vec3 deepColor = vec3(0.0, 0.08, 0.15);
|
||||
vec3 shallowColor = vec3(0.0, 0.35, 0.45);
|
||||
vec3 skyColor = vec3(0.55, 0.7, 0.9); // Match skybox horizon color
|
||||
vec3 foamColor = vec3(0.95, 0.98, 1.0);
|
||||
|
||||
// Blend between deep and shallow based on wave height
|
||||
float heightFactor = clamp(v_waveHeight * 2.0 + 0.5, 0.0, 1.0);
|
||||
vec3 oceanColor = mix(deepColor, shallowColor, heightFactor);
|
||||
|
||||
// Sun glitter - uses wave normals for natural sparkle from fine surface detail
|
||||
vec3 reflectDir = reflect(-sunDirection, norm);
|
||||
float specAngle = max(dot(viewDir, reflectDir), 0.0);
|
||||
|
||||
// Smooth base specular
|
||||
float specBase = pow(specAngle, 64.0) * 0.4;
|
||||
// Medium highlights
|
||||
float specMid = pow(specAngle, 256.0) * 1.2;
|
||||
// Sharp glitter peaks
|
||||
float specSharp = pow(specAngle, 1024.0) * 3.0;
|
||||
|
||||
vec3 specular = (specBase + specMid + specSharp) * lightColor * uGlitterIntensity;
|
||||
|
||||
// Subsurface scattering
|
||||
float sssDot = max(dot(viewDir, -sunDirection), 0.0);
|
||||
float sssWaveContribution = clamp(v_waveHeight + 0.3, 0.0, 1.0);
|
||||
float sssNormalContribution = pow(1.0 - max(dot(norm, sunDirection), 0.0), 2.0);
|
||||
float sss = pow(sssDot, 3.0) * sssWaveContribution * sssNormalContribution * 1.5;
|
||||
vec3 sssColor = vec3(0.1, 0.6, 0.5) * sss;
|
||||
|
||||
// Rim SSS effect
|
||||
float rimSSS = pow(1.0 - max(dot(norm, viewDir), 0.0), 3.0) * 0.3;
|
||||
vec3 rimColor = vec3(0.0, 0.4, 0.4) * rimSSS * heightFactor;
|
||||
//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.) ;
|
||||
|
||||
// Foam with texture - foam persists longer
|
||||
vec2 foamUV = v_fragPos.xy * 1.5;
|
||||
float foamPattern = foamNoise(foamUV);
|
||||
//vec3 waterColor = vec3(34./255.,154./255.,211./255.);
|
||||
vec3 oceanColor = vec3(0,.4,.4); // under-sea colour
|
||||
vec3 skyColor = vec3(1.,1.,1.);
|
||||
|
||||
// Create foam patches with softer edges
|
||||
float foamThreshold = 1.0 - v_foamFactor * 1.2 * uFoamIntensity;
|
||||
float foam = smoothstep(foamThreshold, foamThreshold + 0.35, foamPattern);
|
||||
|
||||
// Add some bubble-like spots with softer transition
|
||||
float bubbles = smoothstep(0.65, 0.85, noise(foamUV * 15.0)) * v_foamFactor;
|
||||
foam = clamp(foam + bubbles * 0.3, 0.0, 1.0);
|
||||
|
||||
// Softer edge fade based on foam factor
|
||||
foam *= smoothstep(0.0, 0.25, v_foamFactor);
|
||||
|
||||
// Additional soft fade at foam edges and fade out at distance
|
||||
foam = pow(foam, 0.7) * uFoamIntensity * v_distanceFade;
|
||||
|
||||
// Combine all lighting
|
||||
vec3 reflectedColor = mix(oceanColor, skyColor, fresnel);
|
||||
vec3 waterColor = reflectedColor * clamp(diffuse, 0.3, 1.0) + specular + sssColor + rimColor;
|
||||
|
||||
// Blend foam on top with slight transparency variation
|
||||
vec3 finalColor = mix(waterColor, foamColor * clamp(diffuse + 0.4, 0.0, 1.0), foam * 0.85);
|
||||
|
||||
// Atmospheric fog for distant water - blends to horizon
|
||||
float dist = length(eyePos - v_fragPos);
|
||||
|
||||
// Exponential fog with aggressive horizon fade
|
||||
float fogFactor = exp(-dist * 0.04);
|
||||
// Fully fade at stretched horizon vertices
|
||||
float horizonFade = smoothstep(40.0, 80.0, dist);
|
||||
fogFactor *= (1.0 - horizonFade);
|
||||
fogFactor = clamp(fogFactor, 0.0, 1.0);
|
||||
|
||||
// Horizon color must exactly match skybox horizon
|
||||
vec3 horizonColor = vec3(0.55, 0.7, 0.9);
|
||||
finalColor = mix(horizonColor, finalColor, fogFactor);
|
||||
|
||||
gl_FragColor = vec4(finalColor, 1.0);
|
||||
//Subsurface scattering
|
||||
vec3 sssSun = vec3(0.,-5.,-7.0);
|
||||
vec3 tosssSunVec = normalize(sssSun - v_fragPos);
|
||||
vec3 tosssSun = normalize(vec3(0.0,-100.,1.));
|
||||
float ssDistortion = 0.1;
|
||||
float sssIntensity = 1.;
|
||||
vec3 halfWay = normalize(tosssSun+norm*ssDistortion);
|
||||
float ssScateringCoef = pow(clamp(dot(toCameraVector,-halfWay),0.0,1.0),5.) * sssIntensity;
|
||||
//Sun glittering
|
||||
float glitterFactor = max(0.0,dot(tosssSunVec,reflect(-toCameraVector,norm)));
|
||||
if(!(glitterFactor > 0.98)) {
|
||||
glitterFactor = 0.0;
|
||||
}
|
||||
|
||||
//gl_FragColor = vec4(oceanColor + lightColor * glitterFactor,1.0);
|
||||
//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
|
||||
}
|
||||
</script>
|
||||
<script id="default-vs" type="x-shader/x-vertex">
|
||||
precision mediump float;
|
||||
|
||||
attribute vec2 positionAttr; // Grid position in [0,1] range
|
||||
attribute vec3 positionAttr;
|
||||
|
||||
uniform mat4 view;
|
||||
uniform mat4 model;
|
||||
uniform mat4 projection;
|
||||
uniform mat4 uProjectorMatrix; // Inverse projector view-proj
|
||||
uniform mat4 uRangeMatrix; // Range conversion matrix
|
||||
uniform float uTime;
|
||||
uniform float uWaveHeight;
|
||||
uniform float uWaveSpeed;
|
||||
uniform vec3 eyePos;
|
||||
uniform float uHorizonClipY; // Y position of horizon in clip space [-1,1]
|
||||
uniform sampler2D displace_map;
|
||||
|
||||
varying vec2 v_uv;
|
||||
varying vec3 v_fragPos;
|
||||
varying vec3 v_normal;
|
||||
varying float v_waveHeight;
|
||||
varying float v_foamFactor;
|
||||
varying float v_distanceFade;
|
||||
|
||||
// Gerstner wave function - higher steepness = spikier waves
|
||||
vec3 gerstnerWave(vec2 pos, float time, vec2 direction, float steepness, float wavelength, out vec3 tangent, out vec3 binormal) {
|
||||
float k = 2.0 * 3.14159 / wavelength;
|
||||
float c = sqrt(9.8 / k);
|
||||
vec2 d = normalize(direction);
|
||||
float f = k * (dot(d, pos) - c * time);
|
||||
float a = steepness / k;
|
||||
|
||||
tangent = vec3(
|
||||
1.0 - steepness * d.x * d.x * sin(f),
|
||||
steepness * d.x * cos(f),
|
||||
-steepness * d.x * d.y * sin(f)
|
||||
);
|
||||
|
||||
binormal = vec3(
|
||||
-steepness * d.x * d.y * sin(f),
|
||||
steepness * d.y * cos(f),
|
||||
1.0 - steepness * d.y * d.y * sin(f)
|
||||
);
|
||||
|
||||
return vec3(
|
||||
d.x * a * cos(f),
|
||||
a * sin(f),
|
||||
d.y * a * cos(f)
|
||||
);
|
||||
}
|
||||
|
||||
// Project grid point onto ocean plane using projector
|
||||
vec3 projectToOcean(vec2 gridPos, out float horizonBlend, out vec3 rayDirection) {
|
||||
// Transform grid position [0,1] through range matrix to projector space [-1,1]
|
||||
vec4 clipPos = uRangeMatrix * vec4(gridPos, 0.0, 1.0);
|
||||
|
||||
// Get two points along the projection ray (near and far planes)
|
||||
vec4 nearPoint = uProjectorMatrix * vec4(clipPos.xy, -1.0, 1.0);
|
||||
vec4 farPoint = uProjectorMatrix * vec4(clipPos.xy, 1.0, 1.0);
|
||||
|
||||
// Perspective divide to get world positions
|
||||
nearPoint /= nearPoint.w;
|
||||
farPoint /= farPoint.w;
|
||||
|
||||
vec3 rayOrigin = nearPoint.xyz;
|
||||
vec3 rayDir = normalize(farPoint.xyz - nearPoint.xyz);
|
||||
rayDirection = rayDir;
|
||||
|
||||
// The skybox horizon is where rayDir.z = 0 (looking horizontally)
|
||||
float angleToHorizon = -rayDir.z; // 0 at horizon, negative = looking up, positive = looking down
|
||||
|
||||
// If ray is pointing up or nearly horizontal, this vertex approaches horizon
|
||||
if (angleToHorizon <= 0.001) {
|
||||
horizonBlend = 1.0;
|
||||
// Project in horizontal direction at ocean level
|
||||
vec2 hDir = length(rayDir.xy) > 0.001 ? normalize(rayDir.xy) : vec2(1.0, 0.0);
|
||||
return vec3(rayOrigin.xy + hDir * 5000.0, 0.0);
|
||||
}
|
||||
|
||||
// Ray is pointing down - intersect with ocean plane (Z = 0)
|
||||
float t = -rayOrigin.z / rayDir.z;
|
||||
|
||||
if (t < 0.0) {
|
||||
horizonBlend = 1.0;
|
||||
vec2 hDir = length(rayDir.xy) > 0.001 ? normalize(rayDir.xy) : vec2(1.0, 0.0);
|
||||
return vec3(rayOrigin.xy + hDir * 5000.0, 0.0);
|
||||
}
|
||||
|
||||
// Camera height affects max render distance
|
||||
// Higher camera = need to limit distance more to avoid precision issues
|
||||
float cameraHeight = max(eyePos.z, 0.5);
|
||||
|
||||
// Base max distance scales with camera height, but with diminishing returns
|
||||
// At height 2: maxBase = ~200
|
||||
// At height 10: maxBase = ~450
|
||||
// At height 100: maxBase = ~1400
|
||||
// At height 500: maxBase = ~3100
|
||||
float maxBase = 100.0 * sqrt(cameraHeight);
|
||||
|
||||
// Also limit based on angle - shallow angles get much shorter max distance
|
||||
float angleScale = smoothstep(0.001, 0.3, angleToHorizon); // 0 at horizon, 1 at ~17 degrees down
|
||||
float maxT = maxBase * (0.1 + 0.9 * angleScale);
|
||||
maxT = max(maxT, 50.0); // Minimum distance
|
||||
|
||||
// Smooth horizon blend based on angle AND distance
|
||||
horizonBlend = 1.0 - smoothstep(0.001, 0.05, angleToHorizon);
|
||||
|
||||
// If t exceeds limit, increase horizon blend
|
||||
if (t > maxT * 0.8) {
|
||||
float distBlend = smoothstep(maxT * 0.8, maxT, t);
|
||||
horizonBlend = max(horizonBlend, distBlend);
|
||||
}
|
||||
|
||||
t = min(t, maxT);
|
||||
|
||||
// Compute world position
|
||||
vec3 worldPos = rayOrigin + rayDir * t;
|
||||
|
||||
return worldPos;
|
||||
}
|
||||
|
||||
void main(void) {
|
||||
// Project grid point onto ocean plane
|
||||
float horizonBlend;
|
||||
vec3 rayDir;
|
||||
vec3 worldPos3 = projectToOcean(positionAttr, horizonBlend, rayDir);
|
||||
vec4 worldPos = vec4(worldPos3, 1.0);
|
||||
|
||||
// Grid is on XY plane, Z is up
|
||||
vec2 pos = worldPos.xy;
|
||||
float time = uTime * 0.0004 * uWaveSpeed;
|
||||
|
||||
// Calculate distance from camera for wave fading
|
||||
float distToCamera = length(worldPos.xyz - eyePos);
|
||||
float waveFade = exp(-distToCamera * 0.015); // Gradual fade over distance
|
||||
waveFade = clamp(waveFade, 0.0, 1.0);
|
||||
// Fade out waves at horizon to prevent edge breakup
|
||||
waveFade *= (1.0 - horizonBlend);
|
||||
v_distanceFade = waveFade;
|
||||
|
||||
float heightMod = uWaveHeight * waveFade;
|
||||
|
||||
vec3 displacement = vec3(0.0);
|
||||
vec3 tangent = vec3(1.0, 0.0, 0.0);
|
||||
vec3 binormal = vec3(0.0, 0.0, 1.0);
|
||||
vec3 t, b;
|
||||
|
||||
// === Large primary waves ===
|
||||
displacement += gerstnerWave(pos, time, vec2(1.0, 0.2), 0.42 * heightMod, 6.0, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
displacement += gerstnerWave(pos, time * 1.1, vec2(0.4, 1.0), 0.35 * heightMod, 5.0, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// === Medium waves ===
|
||||
displacement += gerstnerWave(pos, time * 0.9, vec2(-0.6, 0.8), 0.25 * heightMod, 3.0, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
displacement += gerstnerWave(pos, time * 1.2, vec2(0.8, -0.5), 0.2 * heightMod, 2.2, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
displacement += gerstnerWave(pos, time, vec2(-0.3, -0.9), 0.18 * heightMod, 1.8, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// === Small detail waves ===
|
||||
displacement += gerstnerWave(pos, time * 1.2, vec2(0.9, -0.4), 0.12 * heightMod, 1.2, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
displacement += gerstnerWave(pos, time * 0.9, vec2(-0.5, -0.7), 0.10 * heightMod, 1.0, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
displacement += gerstnerWave(pos, time * 1.3, vec2(0.3, 0.95), 0.08 * heightMod, 0.8, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// === Tiny ripples ===
|
||||
displacement += gerstnerWave(pos, time * 2.0, vec2(0.9, 0.1), 0.05 * heightMod, 0.35, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
displacement += gerstnerWave(pos, time * 2.2, vec2(-0.2, 0.95), 0.04 * heightMod, 0.25, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// === Micro ripples for fine surface detail ===
|
||||
displacement += gerstnerWave(pos, time * 2.5, vec2(0.7, -0.7), 0.03 * heightMod, 0.18, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
displacement += gerstnerWave(pos, time * 3.0, vec2(-0.8, 0.6), 0.025 * heightMod, 0.12, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
displacement += gerstnerWave(pos, time * 3.5, vec2(0.5, -0.9), 0.02 * heightMod, 0.08, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// Store wave height for fragment shader
|
||||
v_waveHeight = displacement.y;
|
||||
|
||||
// Calculate foam factor - foam appears on the FRONT/leading edge of waves
|
||||
// When wave is rising (tangent.y > 0), that's where foam should appear
|
||||
float waveRising = smoothstep(0.0, 0.3, tangent.y + binormal.y);
|
||||
float foamFromHeight = smoothstep(0.0, 0.25, displacement.y);
|
||||
float waveSlope = length(vec2(tangent.y, binormal.y));
|
||||
float foamFromSlope = smoothstep(0.2, 0.6, waveSlope);
|
||||
// Foam appears where wave is high AND rising (leading edge / crest)
|
||||
v_foamFactor = clamp((foamFromHeight * waveRising * 1.2 + foamFromSlope * 0.3), 0.0, 1.0);
|
||||
|
||||
// Apply displacement - Z is up, XY is horizontal plane
|
||||
worldPos.x += displacement.x;
|
||||
worldPos.y += displacement.z;
|
||||
worldPos.z += displacement.y; // Height displacement
|
||||
|
||||
// Calculate normal from tangent and binormal
|
||||
// Blend normal towards flat (0, 0, 1) based on distance
|
||||
vec3 normal = normalize(cross(binormal, tangent));
|
||||
vec3 flatNormal = vec3(0.0, 0.0, 1.0);
|
||||
normal = mix(flatNormal, normal, waveFade);
|
||||
v_normal = vec3(normal.x, normal.z, normal.y);
|
||||
|
||||
// Project back to clip space
|
||||
vec4 displace = texture2D(displace_map, vec2(positionAttr.x,positionAttr.y));
|
||||
vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
|
||||
gl_Position = projection * view * worldPos;
|
||||
|
||||
// For vertices near the horizon, smoothly blend Y towards the horizon line
|
||||
// This ensures ocean meets skybox without gaps or discontinuities
|
||||
if (horizonBlend > 0.0) {
|
||||
float targetY = uHorizonClipY * gl_Position.w;
|
||||
// Use squared blend for smoother transition
|
||||
float smoothBlend = horizonBlend * horizonBlend;
|
||||
gl_Position.y = mix(gl_Position.y, targetY, smoothBlend);
|
||||
// Push depth towards far plane for horizon vertices
|
||||
gl_Position.z = mix(gl_Position.z, gl_Position.w * 0.9999, smoothBlend);
|
||||
}
|
||||
|
||||
v_fragPos = worldPos.xyz;
|
||||
v_uv = positionAttr.xy;
|
||||
}
|
||||
</script>
|
||||
<script id="sky-fs" type="x-shader/x-fragment">
|
||||
@@ -666,23 +349,30 @@
|
||||
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
|
||||
<strong>Camera Mode:</strong> <span class="key">C</span> (FPS/Orbital)<br>
|
||||
<span id="current-camera-mode" style="font-size: 12px; color: #aaa;">Current: FPS</span>
|
||||
</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>
|
||||
<strong>FPS Camera:</strong><br>
|
||||
<span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> Move<br>
|
||||
<span class="key">Q</span><span class="key">E</span> or <span class="key">Space</span><span class="key">Ctrl</span> Up/Down<br>
|
||||
<span class="key">Shift</span> Sprint<br>
|
||||
Mouse: Look around
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<strong>Mouse:</strong> Click and drag to rotate
|
||||
<strong>Orbital Camera:</strong><br>
|
||||
<span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> or Arrows Rotate<br>
|
||||
<span class="key">Q</span><span class="key">E</span> or <span class="key">+</span><span class="key">-</span> Zoom<br>
|
||||
Mouse: Click and drag to rotate
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<strong>Reset:</strong> <span class="key">R</span>
|
||||
@@ -690,74 +380,49 @@
|
||||
<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');
|
||||
|
||||
const cameraModeDisplay = document.getElementById('current-camera-mode');
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
controls.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
|
||||
window.addEventListener('keydown', (evt) => {
|
||||
if (evt.key === 'h' || evt.key === 'H') {
|
||||
controls.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
// Update camera mode display when C is pressed
|
||||
if (evt.key === 'c' || evt.key === 'C') {
|
||||
setTimeout(() => {
|
||||
// Get camera mode from any displayed element
|
||||
const cameraMode = document.getElementById('camera-mode');
|
||||
if (cameraMode && cameraModeDisplay) {
|
||||
const mode = cameraMode.textContent.replace('Camera: ', '');
|
||||
cameraModeDisplay.textContent = `Current: ${mode}`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
// Wireframe toggle
|
||||
const wireframeBtn = document.getElementById('wireframe-toggle');
|
||||
wireframeBtn.addEventListener('click', () => {
|
||||
window.dispatchEvent(new CustomEvent('toggleWireframe'));
|
||||
// Listen for custom camera mode toggle events from UI
|
||||
window.addEventListener('toggleCameraMode', () => {
|
||||
const cameraMode = document.getElementById('camera-mode');
|
||||
if (cameraMode && cameraModeDisplay) {
|
||||
const mode = cameraMode.textContent.replace('Camera: ', '');
|
||||
cameraModeDisplay.textContent = `Current: ${mode}`;
|
||||
}
|
||||
});
|
||||
|
||||
// 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>
|
||||
|
||||
|
||||
109
src/Camera.ts
109
src/Camera.ts
@@ -1,87 +1,63 @@
|
||||
import { vec3, mat4, vec4 } from 'gl-matrix';
|
||||
import { ICamera } from './ICamera';
|
||||
|
||||
/** FPS-style flight camera with free movement */
|
||||
export class Camera {
|
||||
/** Orbital camera that rotates around the world origin. */
|
||||
export class OrbitalCamera implements ICamera {
|
||||
pos: vec3;
|
||||
target: vec3;
|
||||
up: vec3;
|
||||
|
||||
// FPS camera angles (in radians)
|
||||
pitch: number; // Up/down rotation
|
||||
yaw: number; // Left/right rotation
|
||||
|
||||
// Direction vectors
|
||||
forward: vec3;
|
||||
right: vec3;
|
||||
|
||||
xRot: number;
|
||||
yRot: number;
|
||||
offset: number;
|
||||
|
||||
constructor() {
|
||||
this.pos = vec3.create();
|
||||
vec3.set(this.pos, 0.0, -3.0, 2.0); // Start above and behind origin
|
||||
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, 0.0, 1.0); // Z is up
|
||||
this.forward = vec3.create();
|
||||
this.right = vec3.create();
|
||||
this.pitch = -0.3; // Looking slightly down
|
||||
this.yaw = Math.PI / 2; // Looking toward +Y
|
||||
this.updateVectors();
|
||||
vec3.set(this.up, 0.0, 1.0, 0.0);
|
||||
this.xRot = 0.0;
|
||||
this.yRot = 0.0;
|
||||
this.offset = 0.0;
|
||||
}
|
||||
|
||||
/** Rotate camera by mouse delta */
|
||||
rotate(deltaX: number, deltaY: number, sensitivity: number = 0.003): void {
|
||||
this.yaw -= deltaX * sensitivity;
|
||||
this.pitch -= deltaY * sensitivity;
|
||||
|
||||
// Clamp pitch to avoid flipping
|
||||
const maxPitch = Math.PI / 2 - 0.01;
|
||||
this.pitch = Math.max(-maxPitch, Math.min(maxPitch, this.pitch));
|
||||
|
||||
this.updateVectors();
|
||||
setRotationX(rotX: number): void {
|
||||
this.xRot = rotX;
|
||||
this.updatePos();
|
||||
}
|
||||
|
||||
/** Move camera in the direction it's looking */
|
||||
moveForward(amount: number): void {
|
||||
vec3.scaleAndAdd(this.pos, this.pos, this.forward, amount);
|
||||
this.updateVectors();
|
||||
setRotationY(rotY: number): void {
|
||||
this.yRot = rotY;
|
||||
this.updatePos();
|
||||
}
|
||||
|
||||
moveRight(amount: number): void {
|
||||
vec3.scaleAndAdd(this.pos, this.pos, this.right, amount);
|
||||
this.updateVectors();
|
||||
/** Sets the offset to world origin. */
|
||||
setOffset(off: number): void {
|
||||
this.offset = off;
|
||||
this.updatePos();
|
||||
}
|
||||
|
||||
moveUp(amount: number): void {
|
||||
// Move along world Z axis
|
||||
this.pos[2] += amount;
|
||||
this.updateVectors();
|
||||
}
|
||||
/** Recalculates the position according to xy-rotation and offset. */
|
||||
private updatePos(): void {
|
||||
const transformation: mat4 = mat4.create();
|
||||
mat4.identity(transformation);
|
||||
|
||||
/** Move in the actual look direction (including vertical) */
|
||||
moveInLookDirection(amount: number): void {
|
||||
vec3.scaleAndAdd(this.pos, this.pos, this.forward, amount);
|
||||
this.updateVectors();
|
||||
}
|
||||
//2. xy-Rotation
|
||||
mat4.rotateX(transformation, transformation, this.xRot);
|
||||
mat4.rotateY(transformation, transformation, this.yRot);
|
||||
|
||||
/** Update direction vectors from pitch/yaw */
|
||||
private updateVectors(): void {
|
||||
// Calculate forward vector from pitch and yaw
|
||||
// Z is up, so we use different axis mapping
|
||||
this.forward[0] = Math.cos(this.pitch) * Math.cos(this.yaw);
|
||||
this.forward[1] = Math.cos(this.pitch) * Math.sin(this.yaw);
|
||||
this.forward[2] = Math.sin(this.pitch);
|
||||
vec3.normalize(this.forward, this.forward);
|
||||
|
||||
// Right vector is perpendicular to forward and world up
|
||||
const worldUp = vec3.fromValues(0, 0, 1);
|
||||
vec3.cross(this.right, this.forward, worldUp);
|
||||
vec3.normalize(this.right, this.right);
|
||||
|
||||
// Camera up is perpendicular to forward and right
|
||||
vec3.cross(this.up, this.right, this.forward);
|
||||
vec3.normalize(this.up, this.up);
|
||||
|
||||
// Update target
|
||||
vec3.add(this.target, this.pos, this.forward);
|
||||
//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 {
|
||||
@@ -92,6 +68,9 @@ export class Camera {
|
||||
|
||||
/** Get view direction for LOD calculations */
|
||||
getViewDirection(): vec3 {
|
||||
return vec3.clone(this.forward);
|
||||
const dir = vec3.create();
|
||||
vec3.subtract(dir, this.target, this.pos);
|
||||
vec3.normalize(dir, dir);
|
||||
return dir;
|
||||
}
|
||||
}
|
||||
|
||||
98
src/FPSCamera.ts
Normal file
98
src/FPSCamera.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import { vec3, mat4 } from 'gl-matrix';
|
||||
import { ICamera } from './ICamera';
|
||||
|
||||
/** FPS-style flight camera with free movement */
|
||||
export class FPSCamera implements ICamera {
|
||||
pos: vec3;
|
||||
target: vec3;
|
||||
up: vec3;
|
||||
|
||||
// FPS camera angles (in radians)
|
||||
pitch: number; // Up/down rotation
|
||||
yaw: number; // Left/right rotation
|
||||
|
||||
// Direction vectors
|
||||
forward: vec3;
|
||||
right: vec3;
|
||||
|
||||
constructor() {
|
||||
this.pos = vec3.create();
|
||||
vec3.set(this.pos, 0.0, -3.0, 2.0); // Start above and behind origin
|
||||
this.target = vec3.create();
|
||||
this.up = vec3.create();
|
||||
vec3.set(this.up, 0.0, 0.0, 1.0); // Z is up
|
||||
this.forward = vec3.create();
|
||||
this.right = vec3.create();
|
||||
this.pitch = -0.3; // Looking slightly down
|
||||
this.yaw = Math.PI / 2; // Looking toward +Y
|
||||
this.updateVectors();
|
||||
}
|
||||
|
||||
/** Rotate camera by mouse delta */
|
||||
rotate(deltaX: number, deltaY: number, sensitivity: number = 0.003): void {
|
||||
this.yaw -= deltaX * sensitivity;
|
||||
this.pitch -= deltaY * sensitivity;
|
||||
|
||||
// Clamp pitch to avoid flipping
|
||||
const maxPitch = Math.PI / 2 - 0.01;
|
||||
this.pitch = Math.max(-maxPitch, Math.min(maxPitch, this.pitch));
|
||||
|
||||
this.updateVectors();
|
||||
}
|
||||
|
||||
/** Move camera in the direction it's looking */
|
||||
moveForward(amount: number): void {
|
||||
vec3.scaleAndAdd(this.pos, this.pos, this.forward, amount);
|
||||
this.updateVectors();
|
||||
}
|
||||
|
||||
moveRight(amount: number): void {
|
||||
vec3.scaleAndAdd(this.pos, this.pos, this.right, amount);
|
||||
this.updateVectors();
|
||||
}
|
||||
|
||||
moveUp(amount: number): void {
|
||||
// Move along world Z axis
|
||||
this.pos[2] += amount;
|
||||
this.updateVectors();
|
||||
}
|
||||
|
||||
/** Move in the actual look direction (including vertical) */
|
||||
moveInLookDirection(amount: number): void {
|
||||
vec3.scaleAndAdd(this.pos, this.pos, this.forward, amount);
|
||||
this.updateVectors();
|
||||
}
|
||||
|
||||
/** Update direction vectors from pitch/yaw */
|
||||
private updateVectors(): void {
|
||||
// Calculate forward vector from pitch and yaw
|
||||
// Z is up, so we use different axis mapping
|
||||
this.forward[0] = Math.cos(this.pitch) * Math.cos(this.yaw);
|
||||
this.forward[1] = Math.cos(this.pitch) * Math.sin(this.yaw);
|
||||
this.forward[2] = Math.sin(this.pitch);
|
||||
vec3.normalize(this.forward, this.forward);
|
||||
|
||||
// Right vector is perpendicular to forward and world up
|
||||
const worldUp = vec3.fromValues(0, 0, 1);
|
||||
vec3.cross(this.right, this.forward, worldUp);
|
||||
vec3.normalize(this.right, this.right);
|
||||
|
||||
// Camera up is perpendicular to forward and right
|
||||
vec3.cross(this.up, this.right, this.forward);
|
||||
vec3.normalize(this.up, this.up);
|
||||
|
||||
// Update target
|
||||
vec3.add(this.target, this.pos, this.forward);
|
||||
}
|
||||
|
||||
getViewMatrix(): mat4 {
|
||||
const ret: mat4 = mat4.create();
|
||||
mat4.lookAt(ret, this.pos, this.target, this.up);
|
||||
return ret;
|
||||
}
|
||||
|
||||
/** Get view direction for LOD calculations */
|
||||
getViewDirection(): vec3 {
|
||||
return vec3.clone(this.forward);
|
||||
}
|
||||
}
|
||||
53
src/Grid.ts
53
src/Grid.ts
@@ -1,35 +1,23 @@
|
||||
/** 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) {
|
||||
constructor(size: number = 128) {
|
||||
this.size = size;
|
||||
this.offsetX = offsetX;
|
||||
this.offsetY = offsetY;
|
||||
this.scale = scale;
|
||||
}
|
||||
|
||||
generate(): void {
|
||||
this.indices = [];
|
||||
this.lineIndices = [];
|
||||
this.vertices = [];
|
||||
|
||||
for (let j = 0; j <= this.size; ++j) {
|
||||
for (let i = 0; i <= this.size; ++i) {
|
||||
// Generate Vertices normalized to 0-1, then scale and offset
|
||||
// Grid is on XY plane (horizontal), Z is up
|
||||
const u = i / this.size;
|
||||
const v = j / this.size;
|
||||
const x = (u - 0.5) * this.scale + this.offsetX;
|
||||
const y = (v - 0.5) * this.scale + this.offsetY;
|
||||
// Generate Vertices
|
||||
const x = i / this.size;
|
||||
const y = j / this.size;
|
||||
const z = 0;
|
||||
this.vertices.push(x, y, z);
|
||||
|
||||
@@ -47,16 +35,6 @@ export class Grid {
|
||||
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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -64,7 +42,6 @@ export class Grid {
|
||||
initVAO(gl: WebGL2RenderingContext): void {
|
||||
this.generate();
|
||||
|
||||
// Create VAO for filled triangles
|
||||
this.vao = gl.createVertexArray();
|
||||
gl.bindVertexArray(this.vao);
|
||||
|
||||
@@ -79,28 +56,10 @@ export class Grid {
|
||||
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) {
|
||||
draw(gl: WebGL2RenderingContext): void {
|
||||
if (this.vao) {
|
||||
gl.bindVertexArray(this.vao);
|
||||
gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_INT, 0);
|
||||
gl.bindVertexArray(null);
|
||||
|
||||
11
src/ICamera.ts
Normal file
11
src/ICamera.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { vec3, mat4 } from 'gl-matrix';
|
||||
|
||||
/** Camera interface that both camera types implement */
|
||||
export interface ICamera {
|
||||
pos: vec3;
|
||||
target: vec3;
|
||||
up: vec3;
|
||||
|
||||
getViewMatrix(): mat4;
|
||||
getViewDirection(): vec3;
|
||||
}
|
||||
167
src/OceanLOD.ts
167
src/OceanLOD.ts
@@ -1,167 +0,0 @@
|
||||
import { vec3, vec4, mat4 } from 'gl-matrix';
|
||||
|
||||
/**
|
||||
* Projected Grid Ocean - Based on the projected grid algorithm.
|
||||
* Uses a separate projector that can be adjusted to avoid backfiring.
|
||||
* The grid is created in projector space and projected onto the ocean plane.
|
||||
*/
|
||||
export class ProjectedOcean {
|
||||
private vao: WebGLVertexArrayObject | null = null;
|
||||
private lineVao: WebGLVertexArrayObject | null = null;
|
||||
private indexBuffer: WebGLBuffer | null = null;
|
||||
private vertexBuffer: WebGLBuffer | null = null;
|
||||
private indexCount: number = 0;
|
||||
private lineIndexCount: number = 0;
|
||||
|
||||
// Grid resolution
|
||||
private readonly GRID_SIZE_X = 400;
|
||||
private readonly GRID_SIZE_Y = 400;
|
||||
|
||||
// Ocean plane parameters (Z = 0 plane, normal pointing up)
|
||||
private readonly OCEAN_LEVEL = 0.0;
|
||||
private readonly MAX_WAVE_HEIGHT = 1.5; // Maximum displacement above ocean level
|
||||
private readonly MIN_WAVE_HEIGHT = -0.5; // Maximum displacement below ocean level
|
||||
|
||||
// Projector parameters
|
||||
private readonly MIN_PROJECTOR_HEIGHT = 5.0; // Minimum height above upper bound
|
||||
|
||||
// Matrices for the shader
|
||||
public projectorMatrix: mat4 = mat4.create();
|
||||
public rangeMatrix: mat4 = mat4.create();
|
||||
|
||||
constructor() {}
|
||||
|
||||
/** Generate the grid vertices (in [0,1] range) */
|
||||
initVAO(gl: WebGL2RenderingContext): void {
|
||||
const vertices: number[] = [];
|
||||
const indices: number[] = [];
|
||||
|
||||
// Create grid in [0,1] range - will be transformed by projector matrix
|
||||
for (let y = 0; y <= this.GRID_SIZE_Y; y++) {
|
||||
for (let x = 0; x <= this.GRID_SIZE_X; x++) {
|
||||
const u = x / this.GRID_SIZE_X;
|
||||
const v = y / this.GRID_SIZE_Y;
|
||||
vertices.push(u, v);
|
||||
}
|
||||
}
|
||||
|
||||
// Create indices (counter-clockwise winding when viewed from above, Z up)
|
||||
for (let y = 0; y < this.GRID_SIZE_Y; y++) {
|
||||
for (let x = 0; x < this.GRID_SIZE_X; x++) {
|
||||
const topLeft = y * (this.GRID_SIZE_X + 1) + x;
|
||||
const topRight = topLeft + 1;
|
||||
const bottomLeft = (y + 1) * (this.GRID_SIZE_X + 1) + x;
|
||||
const bottomRight = bottomLeft + 1;
|
||||
|
||||
// CCW winding for front face visible from +Z (above)
|
||||
indices.push(topLeft, topRight, bottomLeft);
|
||||
indices.push(topRight, bottomRight, bottomLeft);
|
||||
}
|
||||
}
|
||||
|
||||
this.indexCount = indices.length;
|
||||
|
||||
// Create line indices for wireframe
|
||||
const lineIndices: number[] = [];
|
||||
for (let y = 0; y <= this.GRID_SIZE_Y; y++) {
|
||||
for (let x = 0; x <= this.GRID_SIZE_X; x++) {
|
||||
const currentVertex = y * (this.GRID_SIZE_X + 1) + x;
|
||||
// Horizontal line
|
||||
if (x < this.GRID_SIZE_X) {
|
||||
lineIndices.push(currentVertex, currentVertex + 1);
|
||||
}
|
||||
// Vertical line
|
||||
if (y < this.GRID_SIZE_Y) {
|
||||
lineIndices.push(currentVertex, currentVertex + (this.GRID_SIZE_X + 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
this.lineIndexCount = lineIndices.length;
|
||||
|
||||
// Create vertex buffer (shared between both VAOs)
|
||||
this.vertexBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
|
||||
|
||||
// Create VAO for filled triangles
|
||||
this.vao = gl.createVertexArray();
|
||||
gl.bindVertexArray(this.vao);
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||
gl.enableVertexAttribArray(0);
|
||||
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
this.indexBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);
|
||||
|
||||
gl.bindVertexArray(null);
|
||||
|
||||
// Create VAO for wireframe lines
|
||||
this.lineVao = gl.createVertexArray();
|
||||
gl.bindVertexArray(this.lineVao);
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||
gl.enableVertexAttribArray(0);
|
||||
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
const lineIndexBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, lineIndexBuffer);
|
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(lineIndices), gl.STATIC_DRAW);
|
||||
|
||||
gl.bindVertexArray(null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the projector matrices based on camera position.
|
||||
* We use the camera's own view-projection to ensure screen coverage.
|
||||
*/
|
||||
updateProjector(cameraPos: vec3, cameraForward: vec3, viewMatrix: mat4, projMatrix: mat4): void {
|
||||
// Use camera's view-projection directly
|
||||
const viewProj = mat4.create();
|
||||
mat4.multiply(viewProj, projMatrix, viewMatrix);
|
||||
|
||||
// Invert to get unprojection matrix
|
||||
mat4.invert(this.projectorMatrix, viewProj);
|
||||
|
||||
// Range matrix maps [0,1] grid to [-1,1] clip space
|
||||
this.calculateRangeMatrix(cameraPos, viewMatrix, projMatrix, viewProj);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the range conversion matrix to focus geometry on visible area
|
||||
* For simplicity and to ensure horizon coverage, we use the full clip space range
|
||||
*/
|
||||
private calculateRangeMatrix(
|
||||
cameraPos: vec3,
|
||||
viewMatrix: mat4,
|
||||
projMatrix: mat4,
|
||||
projectorViewProj: mat4
|
||||
): void {
|
||||
// Use full clip space [-1, 1] to ensure complete coverage including horizon
|
||||
// The grid [0,1] maps to [-1,1] in projector clip space
|
||||
mat4.identity(this.rangeMatrix);
|
||||
this.rangeMatrix[0] = 2.0; // Scale X: [0,1] -> [0,2]
|
||||
this.rangeMatrix[5] = 2.0; // Scale Y: [0,1] -> [0,2]
|
||||
this.rangeMatrix[10] = 2.0; // Scale Z
|
||||
this.rangeMatrix[12] = -1.0; // Translate X: [0,2] -> [-1,1]
|
||||
this.rangeMatrix[13] = -1.0; // Translate Y: [0,2] -> [-1,1]
|
||||
this.rangeMatrix[14] = -1.0; // Translate Z
|
||||
}
|
||||
|
||||
draw(gl: WebGL2RenderingContext, wireframe: boolean = false): void {
|
||||
if (wireframe && this.lineVao) {
|
||||
gl.bindVertexArray(this.lineVao);
|
||||
gl.drawElements(gl.LINES, this.lineIndexCount, gl.UNSIGNED_INT, 0);
|
||||
gl.bindVertexArray(null);
|
||||
} else if (this.vao) {
|
||||
gl.bindVertexArray(this.vao);
|
||||
gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_INT, 0);
|
||||
gl.bindVertexArray(null);
|
||||
}
|
||||
}
|
||||
|
||||
getIndexCount(): number {
|
||||
return this.indexCount;
|
||||
}
|
||||
}
|
||||
@@ -73,13 +73,8 @@ export class Skybox {
|
||||
draw(gl: WebGL2RenderingContext): void {
|
||||
if (!this.vao) return;
|
||||
|
||||
// Disable face culling for skybox (we're inside the cube)
|
||||
gl.disable(gl.CULL_FACE);
|
||||
|
||||
gl.bindVertexArray(this.vao);
|
||||
gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_SHORT, 0);
|
||||
gl.bindVertexArray(null);
|
||||
|
||||
gl.enable(gl.CULL_FACE);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Configuration Constants
|
||||
export const GRID_SIZE = 128;
|
||||
export const NOISE_TEXTURE_WIDTH = 1024;
|
||||
export const NOISE_TEXTURE_HEIGHT = 1024;
|
||||
export const NOISE_TEXTURE_WIDTH = 256;
|
||||
export const NOISE_TEXTURE_HEIGHT = 256;
|
||||
export const CANVAS_WIDTH = 800;
|
||||
export const CANVAS_HEIGHT = 600;
|
||||
export const FOV = 1.0;
|
||||
|
||||
342
src/main.ts
342
src/main.ts
@@ -1,6 +1,8 @@
|
||||
import { vec3, vec4, mat4 } from 'gl-matrix';
|
||||
import { Camera } from './Camera';
|
||||
import { ProjectedOcean } from './OceanLOD';
|
||||
import { vec3, mat4 } from 'gl-matrix';
|
||||
import { ICamera } from './ICamera';
|
||||
import { OrbitalCamera } from './Camera';
|
||||
import { FPSCamera } from './FPSCamera';
|
||||
import { Grid } from './Grid';
|
||||
import { Skybox } from './Skybox';
|
||||
import { createProgram } from './Shader';
|
||||
import * as Config from './constants';
|
||||
@@ -115,8 +117,8 @@ function initFBO() {
|
||||
// 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.REPEAT);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
|
||||
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.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureFBO, 0);
|
||||
|
||||
@@ -137,26 +139,27 @@ var fpsDisplay: HTMLElement | null = null;
|
||||
/** 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 projectedOcean: ProjectedOcean;
|
||||
var camera: ICamera;
|
||||
var orbitalCamera: OrbitalCamera;
|
||||
var fpsCamera: FPSCamera;
|
||||
var oceanGrid: Grid;
|
||||
var skybox: Skybox;
|
||||
var wireframeMode = false;
|
||||
/** Camera movement speed */
|
||||
var curRotX = Config.CAMERA_DEFAULT_ROT_X;
|
||||
var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
|
||||
/** Camera modes */
|
||||
var cameraMode: 'orbital' | 'fps' = 'fps';
|
||||
var moveSpeed = 0.15;
|
||||
var fastMoveSpeed = 0.4;
|
||||
/** Ocean shader settings */
|
||||
var waveHeight = 1.0;
|
||||
var waveSpeed = 1.0;
|
||||
var foamIntensity = 1.0;
|
||||
var glitterIntensity = 1.0;
|
||||
function drawScene() {
|
||||
fps++;
|
||||
let now = new Date();
|
||||
let delta = now.getTime() - lastTime;
|
||||
timeSpent += delta;
|
||||
|
||||
if ((counter += delta) >= Config.FPS_UPDATE_INTERVAL) {
|
||||
counter = 0;
|
||||
if (fpsDisplay) {
|
||||
@@ -165,35 +168,84 @@ function drawScene() {
|
||||
fps = 0;
|
||||
}
|
||||
lastTime = now.getTime();
|
||||
|
||||
// Sun direction (matches the one in ocean shader)
|
||||
const sunDirection = vec3.fromValues(0.3, 0.5, 0.8);
|
||||
vec3.normalize(sunDirection, sunDirection);
|
||||
// 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.
|
||||
|
||||
//--- Render pass -> Skybox first (no depth write) ---
|
||||
//--- First render pass -> Perlin Noise (it updates the perlin noise texture)
|
||||
{
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
|
||||
gl.viewport(0, 0, perlinNoiseFBOWidth, perlinNoiseFBOHeight);
|
||||
|
||||
//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);
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
//--- Second render pass -> Geomtry with displacement by perlin noise texture ---
|
||||
{
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer
|
||||
gl.viewport(0, 0, viewportWidth, viewportHeight);
|
||||
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
var projection = mat4.create();
|
||||
mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE);
|
||||
gl.activeTexture(gl.TEXTURE0); //Binds the texture to 0
|
||||
gl.bindTexture(gl.TEXTURE_2D, textureFBO);
|
||||
|
||||
// Handle FPS camera movement
|
||||
handleCameraMovement();
|
||||
|
||||
// Apply mouse rotation
|
||||
if (mouseXVel !== 0 || mouseYVel !== 0) {
|
||||
camera.rotate(mouseXVel, mouseYVel);
|
||||
mouseXVel = 0;
|
||||
mouseYVel = 0;
|
||||
var projection = mat4.create();
|
||||
mat4.identity(projection);
|
||||
mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE); //projection mode should actually be camera specific
|
||||
|
||||
// Handle camera movement and rotation based on mode
|
||||
if (cameraMode === 'fps') {
|
||||
// FPS camera - direct movement
|
||||
camera = fpsCamera;
|
||||
handleFPSCameraMovement();
|
||||
|
||||
// Apply mouse rotation for FPS mode
|
||||
if (mouseXVel !== 0 || mouseYVel !== 0) {
|
||||
fpsCamera.rotate(mouseXVel, mouseYVel);
|
||||
mouseXVel = 0;
|
||||
mouseYVel = 0;
|
||||
}
|
||||
} else {
|
||||
// Orbital camera - original behavior
|
||||
camera = orbitalCamera;
|
||||
orbitalCamera.setOffset(Config.CAMERA_DEFAULT_OFFSET + keyboardZoom);
|
||||
orbitalCamera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
|
||||
orbitalCamera.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");
|
||||
@@ -206,124 +258,90 @@ function drawScene() {
|
||||
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
|
||||
|
||||
// Update projected ocean's projector matrices
|
||||
projectedOcean.updateProjector(camera.pos, camera.forward, view, projection);
|
||||
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.
|
||||
|
||||
gl.useProgram(defaultProgram);
|
||||
let view_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "view");
|
||||
gl.uniformMatrix4fv(view_loc, false, view);
|
||||
let model_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "model");
|
||||
gl.uniformMatrix4fv(model_loc, false, model);
|
||||
let projection_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "projection");
|
||||
gl.uniformMatrix4fv(projection_loc, false, projection);
|
||||
let projectorMatrix_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uProjectorMatrix");
|
||||
gl.uniformMatrix4fv(projectorMatrix_loc, false, projectedOcean.projectorMatrix);
|
||||
let rangeMatrix_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uRangeMatrix");
|
||||
gl.uniformMatrix4fv(rangeMatrix_loc, false, projectedOcean.rangeMatrix);
|
||||
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);
|
||||
|
||||
// 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);
|
||||
|
||||
// Calculate horizon Y in clip space
|
||||
// The skybox horizon is where rayDir.z = 0 (horizontal ray from camera)
|
||||
// This is a point at infinity in a horizontal direction from the camera
|
||||
// We need to find where this projects to in clip space
|
||||
|
||||
// Get a horizontal direction (camera forward projected onto XY plane)
|
||||
const horizonDir = vec3.fromValues(camera.forward[0], camera.forward[1], 0);
|
||||
if (vec3.length(horizonDir) > 0.001) {
|
||||
vec3.normalize(horizonDir, horizonDir);
|
||||
} else {
|
||||
vec3.set(horizonDir, 1, 0, 0);
|
||||
}
|
||||
|
||||
// Transform a direction vector (not a point) to clip space
|
||||
// For a point at infinity in direction D, its clip space position is:
|
||||
// lim(t->inf) ViewProj * (eye + t*D) / w
|
||||
// Which equals ViewProj * D (as a vec4 with w=0), then we look at x/w, y/w
|
||||
// But since w would be 0 for a direction, we use the view matrix only
|
||||
|
||||
// The horizon is where view-space Y = 0 for an infinite point
|
||||
// In our Z-up system, the horizon is where the ray is horizontal (z=0 in world)
|
||||
// Transform a horizontal direction through view matrix
|
||||
const horizonDirView = vec4.fromValues(horizonDir[0], horizonDir[1], 0, 0);
|
||||
vec4.transformMat4(horizonDirView, horizonDirView, view);
|
||||
|
||||
// The Y in clip space where this direction points is based on the view-space direction
|
||||
// projected through the projection matrix
|
||||
// For perspective: clipY/clipW = viewY/(-viewZ) * projectionScaleY
|
||||
// For a horizontal ray at infinity, we can compute where it ends up
|
||||
|
||||
// Simpler approach: transform a point very far away in horizon direction
|
||||
const farDist = 1000000.0;
|
||||
const horizonPoint = vec4.fromValues(
|
||||
camera.pos[0] + horizonDir[0] * farDist,
|
||||
camera.pos[1] + horizonDir[1] * farDist,
|
||||
camera.pos[2], // Same height as camera - this is the horizon!
|
||||
1
|
||||
);
|
||||
const viewProj = mat4.create();
|
||||
mat4.multiply(viewProj, projection, view);
|
||||
vec4.transformMat4(horizonPoint, horizonPoint, viewProj);
|
||||
const horizonClipY = horizonPoint[3] !== 0 ? horizonPoint[1] / horizonPoint[3] : 0;
|
||||
|
||||
let uHorizonClipY_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uHorizonClipY");
|
||||
gl.uniform1f(uHorizonClipY_loc, horizonClipY);
|
||||
|
||||
// Enable backface culling so ocean isn't visible from below
|
||||
gl.enable(gl.CULL_FACE);
|
||||
gl.cullFace(gl.BACK);
|
||||
gl.frontFace(gl.CCW);
|
||||
|
||||
projectedOcean.draw(gl, wireframeMode);
|
||||
|
||||
gl.disable(gl.CULL_FACE);
|
||||
//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
|
||||
oceanGrid.draw(gl);
|
||||
}
|
||||
requestAnimationFrame(drawScene);
|
||||
}
|
||||
|
||||
/** Handle FPS camera movement */
|
||||
function handleCameraMovement() {
|
||||
function handleFPSCameraMovement() {
|
||||
const speed = keysPressed.has('Shift') ? fastMoveSpeed : moveSpeed;
|
||||
|
||||
// WASD for horizontal movement
|
||||
if (keysPressed.has('w') || keysPressed.has('W')) {
|
||||
camera.moveForward(speed);
|
||||
fpsCamera.moveForward(speed);
|
||||
}
|
||||
if (keysPressed.has('s') || keysPressed.has('S')) {
|
||||
camera.moveForward(-speed);
|
||||
fpsCamera.moveForward(-speed);
|
||||
}
|
||||
if (keysPressed.has('a') || keysPressed.has('A')) {
|
||||
camera.moveRight(-speed);
|
||||
fpsCamera.moveRight(-speed);
|
||||
}
|
||||
if (keysPressed.has('d') || keysPressed.has('D')) {
|
||||
camera.moveRight(speed);
|
||||
fpsCamera.moveRight(speed);
|
||||
}
|
||||
|
||||
// Q/E for vertical movement
|
||||
if (keysPressed.has('q') || keysPressed.has('Q')) {
|
||||
camera.moveUp(-speed);
|
||||
fpsCamera.moveUp(-speed);
|
||||
}
|
||||
if (keysPressed.has('e') || keysPressed.has('E')) {
|
||||
camera.moveUp(speed);
|
||||
fpsCamera.moveUp(speed);
|
||||
}
|
||||
|
||||
// Space to go up, Ctrl to go down
|
||||
if (keysPressed.has(' ')) {
|
||||
camera.moveUp(speed);
|
||||
fpsCamera.moveUp(speed);
|
||||
}
|
||||
if (keysPressed.has('Control')) {
|
||||
camera.moveUp(-speed);
|
||||
fpsCamera.moveUp(-speed);
|
||||
}
|
||||
}
|
||||
|
||||
/** 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -371,19 +389,58 @@ function main() {
|
||||
window.addEventListener('keydown', (evt) => {
|
||||
keysPressed.add(evt.key);
|
||||
|
||||
// Toggle camera mode with 'C' key
|
||||
if (evt.key === 'c' || evt.key === 'C') {
|
||||
cameraMode = cameraMode === 'fps' ? 'orbital' : 'fps';
|
||||
console.log(`Camera mode: ${cameraMode.toUpperCase()}`);
|
||||
|
||||
// Update FPS display to show camera mode
|
||||
if (fpsDisplay) {
|
||||
const modeText = document.createElement('div');
|
||||
modeText.id = 'camera-mode';
|
||||
modeText.style.cssText = 'position: absolute; top: 40px; left: 10px; color: white; font-family: monospace;';
|
||||
modeText.textContent = `Camera: ${cameraMode.toUpperCase()}`;
|
||||
|
||||
const existingMode = document.getElementById('camera-mode');
|
||||
if (existingMode) {
|
||||
existingMode.textContent = `Camera: ${cameraMode.toUpperCase()}`;
|
||||
} else {
|
||||
document.body.appendChild(modeText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset camera on 'R' key
|
||||
if (evt.key === 'r' || evt.key === 'R') {
|
||||
camera = new Camera(); // Reset to initial position
|
||||
if (cameraMode === 'fps') {
|
||||
fpsCamera = new FPSCamera(); // Reset to initial FPS position
|
||||
camera = fpsCamera;
|
||||
console.log('Camera reset to FPS default position');
|
||||
} else {
|
||||
curRotX = Config.CAMERA_DEFAULT_ROT_X;
|
||||
curRotY = Config.CAMERA_DEFAULT_ROT_Y;
|
||||
keyboardZoom = 0;
|
||||
console.log('Camera reset to orbital default position');
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent default for space to avoid page scroll
|
||||
if (evt.key === ' ') {
|
||||
if (evt.key === ' ' && cameraMode === 'fps') {
|
||||
evt.preventDefault();
|
||||
}
|
||||
|
||||
// Handle orbital camera keyboard input
|
||||
if (cameraMode === 'orbital') {
|
||||
handleKeyboardInput();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('keyup', (evt) => {
|
||||
keysPressed.delete(evt.key);
|
||||
|
||||
if (cameraMode === 'orbital') {
|
||||
handleKeyboardInput();
|
||||
}
|
||||
});
|
||||
|
||||
// Window resize handler
|
||||
@@ -391,46 +448,43 @@ function main() {
|
||||
updateCanvasSize(canvas);
|
||||
});
|
||||
|
||||
// Wireframe toggle handler
|
||||
window.addEventListener('toggleWireframe', () => {
|
||||
wireframeMode = !wireframeMode;
|
||||
const wireframeBtn = document.getElementById('wireframe-toggle');
|
||||
if (wireframeBtn) {
|
||||
wireframeBtn.textContent = `Wireframe: ${wireframeMode ? 'ON' : 'OFF'}`;
|
||||
// Camera mode toggle from UI controls
|
||||
window.addEventListener('toggleCameraMode', () => {
|
||||
cameraMode = cameraMode === 'fps' ? 'orbital' : 'fps';
|
||||
camera = cameraMode === 'fps' ? fpsCamera : orbitalCamera;
|
||||
console.log(`Camera mode switched to: ${cameraMode.toUpperCase()}`);
|
||||
|
||||
// Update display
|
||||
const modeText = document.createElement('div');
|
||||
modeText.id = 'camera-mode';
|
||||
modeText.style.cssText = 'position: absolute; top: 40px; left: 10px; color: white; font-family: monospace;';
|
||||
modeText.textContent = `Camera: ${cameraMode.toUpperCase()}`;
|
||||
|
||||
const existingMode = document.getElementById('camera-mode');
|
||||
if (existingMode) {
|
||||
existingMode.textContent = `Camera: ${cameraMode.toUpperCase()}`;
|
||||
} else {
|
||||
document.body.appendChild(modeText);
|
||||
}
|
||||
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();
|
||||
|
||||
projectedOcean = new ProjectedOcean();
|
||||
projectedOcean.initVAO(gl);
|
||||
console.log(`Projected ocean initialized with ${projectedOcean.getIndexCount()} indices`);
|
||||
oceanGrid = new Grid(Config.GRID_SIZE);
|
||||
oceanGrid.initVAO(gl);
|
||||
|
||||
skybox = new Skybox();
|
||||
skybox.initVAO(gl);
|
||||
console.log('Skybox initialized');
|
||||
|
||||
camera = new Camera();
|
||||
// Initialize both cameras
|
||||
orbitalCamera = new OrbitalCamera();
|
||||
fpsCamera = new FPSCamera();
|
||||
camera = fpsCamera; // Start with FPS camera
|
||||
|
||||
console.log('Cameras initialized - Press C to toggle between FPS and Orbital modes');
|
||||
|
||||
//Check if any errors apeared during init.
|
||||
if (gl.getError() != gl.NO_ERROR) {
|
||||
console.log("OpenGL Error!: ");
|
||||
|
||||
Reference in New Issue
Block a user