829 lines
36 KiB
HTML
829 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<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;
|
|
|
|
uniform float uTime;
|
|
|
|
// Noise
|
|
// Source: https://medium.com/neosavvy-labs/webgl-with-perlin-noise-part-1-a87b56bbc9fb function
|
|
// Description: https://flafla2.github.io/2014/08/09/perlinnoise.html with octaves
|
|
// https://mzucker.github.io/html/perlin-noise-math-faq mathematics
|
|
// http://www.huttar.net/lars-kathy/graphics/perlin-noise/perlin-noise.html deeper look
|
|
// https://thebookofshaders.com/11/
|
|
//ordered by importance
|
|
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
|
|
vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
|
|
vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
|
|
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
|
|
vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); }
|
|
float noise(vec3 P) {
|
|
vec3 i0 = mod289(floor(P)), i1 = mod289(i0 + vec3(1.0));
|
|
vec3 f0 = fract(P), f1 = f0 - vec3(1.0), f = fade(f0);
|
|
vec4 ix = vec4(i0.x, i1.x, i0.x, i1.x), iy = vec4(i0.yy, i1.yy);
|
|
vec4 iz0 = i0.zzzz, iz1 = i1.zzzz;
|
|
vec4 ixy = permute(permute(ix) + iy), ixy0 = permute(ixy + iz0), ixy1 = permute(ixy + iz1);
|
|
vec4 gx0 = ixy0 * (1.0 / 7.0), gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
|
|
vec4 gx1 = ixy1 * (1.0 / 7.0), gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
|
|
gx0 = fract(gx0); gx1 = fract(gx1);
|
|
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0), sz0 = step(gz0, vec4(0.0));
|
|
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1), sz1 = step(gz1, vec4(0.0));
|
|
gx0 -= sz0 * (step(0.0, gx0) - 0.5); gy0 -= sz0 * (step(0.0, gy0) - 0.5);
|
|
gx1 -= sz1 * (step(0.0, gx1) - 0.5); gy1 -= sz1 * (step(0.0, gy1) - 0.5);
|
|
vec3 g0 = vec3(gx0.x,gy0.x,gz0.x), g1 = vec3(gx0.y,gy0.y,gz0.y),
|
|
g2 = vec3(gx0.z,gy0.z,gz0.z), g3 = vec3(gx0.w,gy0.w,gz0.w),
|
|
g4 = vec3(gx1.x,gy1.x,gz1.x), g5 = vec3(gx1.y,gy1.y,gz1.y),
|
|
g6 = vec3(gx1.z,gy1.z,gz1.z), g7 = vec3(gx1.w,gy1.w,gz1.w);
|
|
vec4 norm0 = taylorInvSqrt(vec4(dot(g0,g0), dot(g2,g2), dot(g1,g1), dot(g3,g3)));
|
|
vec4 norm1 = taylorInvSqrt(vec4(dot(g4,g4), dot(g6,g6), dot(g5,g5), dot(g7,g7)));
|
|
g0 *= norm0.x; g2 *= norm0.y; g1 *= norm0.z; g3 *= norm0.w;
|
|
g4 *= norm1.x; g6 *= norm1.y; g5 *= norm1.z; g7 *= norm1.w;
|
|
vec4 nz = mix(vec4(dot(g0, vec3(f0.x, f0.y, f0.z)), dot(g1, vec3(f1.x, f0.y, f0.z)),
|
|
dot(g2, vec3(f0.x, f1.y, f0.z)), dot(g3, vec3(f1.x, f1.y, f0.z))),
|
|
vec4(dot(g4, vec3(f0.x, f0.y, f1.z)), dot(g5, vec3(f1.x, f0.y, f1.z)),
|
|
dot(g6, vec3(f0.x, f1.y, f1.z)), dot(g7, vec3(f1.x, f1.y, f1.z))), f.z);
|
|
return 2.2 * mix(mix(nz.x,nz.z,f.y), mix(nz.y,nz.w,f.y), f.x);
|
|
}
|
|
|
|
float octavedPerlinNoise(vec3 P,int octaves,float persistence) {
|
|
float total = 0.0;
|
|
float frequency = 128.0;
|
|
float amplitude = 1.0;
|
|
float maxValue = 0.0;
|
|
for(int i = 0; i < 6; i++) {
|
|
total += noise((P*frequency)) * amplitude;
|
|
|
|
maxValue += amplitude;
|
|
amplitude *= persistence;
|
|
frequency /= 2.;
|
|
}
|
|
return total/maxValue;
|
|
}
|
|
|
|
float turbulence(vec3 P) {
|
|
float f = 0., s = 1.;
|
|
for (int i = 0 ; i < 9 ; i++) {
|
|
f += abs(noise(s * P)) / s;
|
|
s *= 2.;
|
|
P = vec3(.866 * P.x + .5 * P.z, P.y + 100., -.5 * P.x + .866 * P.z);
|
|
}
|
|
return f;
|
|
}
|
|
|
|
vec3 clouds(float x, float y) {
|
|
float L = turbulence(vec3(x, y, 1. * .1));
|
|
return vec3(noise(vec3(.5, .5, L) * .7));
|
|
}
|
|
|
|
void main(void) {
|
|
float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.003+uTime*0.00005,uTime*0.00005),8,2.6); //Should be scaled along arbitary axis
|
|
//float n = noise(vec3(gl_FragCoord.xy*0.01,uTime));
|
|
//vec3 cloudEffect = clouds(gl_FragCoord.x*0.005, gl_FragCoord.y*0.005);
|
|
vec3 color = vec3(n) * 0.3;
|
|
gl_FragColor = vec4(color,1.0);
|
|
}
|
|
</script>
|
|
<script id="ndc-vs" type="x-shader/x-vertex">
|
|
attribute vec3 positionAttr;
|
|
|
|
void main(void) {
|
|
gl_Position = vec4(positionAttr, 1.0);
|
|
}
|
|
</script>
|
|
<script id="default-fs" type="x-shader/x-fragment">
|
|
precision mediump float;
|
|
|
|
varying vec3 v_fragPos;
|
|
varying vec3 v_normal;
|
|
varying float v_waveHeight;
|
|
varying float v_foamFactor;
|
|
varying float v_distanceFade;
|
|
|
|
uniform vec3 eyePos;
|
|
uniform float uFoamIntensity;
|
|
uniform float uGlitterIntensity;
|
|
|
|
// 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;
|
|
}
|
|
|
|
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);
|
|
vec3 diffuse = diff * lightColor;
|
|
|
|
// 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);
|
|
|
|
// 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;
|
|
|
|
// 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 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);
|
|
}
|
|
</script>
|
|
<script id="default-vs" type="x-shader/x-vertex">
|
|
precision mediump float;
|
|
|
|
attribute vec2 positionAttr; // Grid position in [0,1] range
|
|
|
|
uniform mat4 view;
|
|
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]
|
|
|
|
varying vec3 v_fragPos;
|
|
varying vec3 v_normal;
|
|
varying float v_waveHeight;
|
|
varying float v_foamFactor;
|
|
varying float v_distanceFade;
|
|
|
|
// ============ Simplex Noise Functions ============
|
|
// Permutation polynomial: (34x^2 + x) mod 289
|
|
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
|
|
|
|
// 2D Simplex noise
|
|
float snoise(vec2 v) {
|
|
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
|
|
-0.577350269189626, 0.024390243902439);
|
|
vec2 i = floor(v + dot(v, C.yy));
|
|
vec2 x0 = v - i + dot(i, C.xx);
|
|
vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
|
|
vec4 x12 = x0.xyxy + C.xxzz;
|
|
x12.xy -= i1;
|
|
i = mod(i, 289.0);
|
|
vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
|
|
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
|
|
m = m*m; m = m*m;
|
|
vec3 x = 2.0 * fract(p * C.www) - 1.0;
|
|
vec3 h = abs(x) - 0.5;
|
|
vec3 ox = floor(x + 0.5);
|
|
vec3 a0 = x - ox;
|
|
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
|
|
vec3 g;
|
|
g.x = a0.x * x0.x + h.x * x0.y;
|
|
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
|
|
return 130.0 * dot(m, g);
|
|
}
|
|
|
|
// Fractal Brownian Motion (FBM) using simplex noise
|
|
float fbm(vec2 p, float time, int octaves, float lacunarity, float gain) {
|
|
float sum = 0.0;
|
|
float amp = 1.0;
|
|
float freq = 1.0;
|
|
float maxAmp = 0.0;
|
|
|
|
for (int i = 0; i < 6; i++) {
|
|
if (i >= octaves) break;
|
|
// Add subtle animation
|
|
vec2 animatedP = p * freq + vec2(time * 0.5 * float(i + 1), time * 0.3);
|
|
sum += snoise(animatedP) * amp;
|
|
maxAmp += amp;
|
|
amp *= gain;
|
|
freq *= lacunarity;
|
|
}
|
|
|
|
return sum / maxAmp;
|
|
}
|
|
|
|
// Get noise-based displacement and normal contribution
|
|
vec3 noiseWave(vec2 pos, float time, float scale, float amplitude, out vec3 normalContrib) {
|
|
vec2 p = pos * scale;
|
|
|
|
// Sample noise at offset positions for gradient/normal calculation
|
|
float eps = 0.1;
|
|
float h = fbm(p, time, 4, 2.0, 0.5) * amplitude;
|
|
float hx = fbm(p + vec2(eps, 0.0), time, 4, 2.0, 0.5) * amplitude;
|
|
float hy = fbm(p + vec2(0.0, eps), time, 4, 2.0, 0.5) * amplitude;
|
|
|
|
// Calculate normal from height differences
|
|
vec3 tangent = normalize(vec3(eps, 0.0, hx - h));
|
|
vec3 binormal = normalize(vec3(0.0, eps, hy - h));
|
|
normalContrib = normalize(cross(binormal, tangent));
|
|
|
|
return vec3(0.0, h, 0.0); // Only vertical displacement for noise
|
|
}
|
|
|
|
// ============ Gerstner Wave Function ============
|
|
// 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;
|
|
|
|
// ============ GERSTNER WAVES - Large Scale Motion ============
|
|
// Primary ocean swells
|
|
displacement += gerstnerWave(pos, time, vec2(1.0, 0.2), 0.45 * heightMod, 8.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.38 * heightMod, 6.0, t, b);
|
|
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
|
|
|
// Secondary waves
|
|
displacement += gerstnerWave(pos, time * 0.9, vec2(-0.6, 0.8), 0.28 * heightMod, 4.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.15, vec2(0.8, -0.5), 0.22 * heightMod, 3.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, vec2(-0.3, -0.9), 0.18 * heightMod, 2.0, t, b);
|
|
tangent += t - vec3(1.0, 0.0, 0.0); binormal += b - vec3(0.0, 0.0, 1.0);
|
|
|
|
// ============ PERLIN/SIMPLEX NOISE - Small Scale Detail ============
|
|
// Only apply noise detail when close enough to see it
|
|
float detailFade = smoothstep(200.0, 50.0, distToCamera);
|
|
|
|
if (detailFade > 0.01) {
|
|
vec3 noiseNormal;
|
|
|
|
// Medium frequency noise ripples
|
|
vec3 noise1 = noiseWave(pos, time * 0.8, 0.3, 0.15 * heightMod * detailFade, noiseNormal);
|
|
displacement += noise1;
|
|
tangent += (noiseNormal - vec3(0.0, 0.0, 1.0)) * 0.3 * detailFade;
|
|
|
|
// High frequency noise for fine detail
|
|
vec3 noise2 = noiseWave(pos, time * 1.2, 0.8, 0.08 * heightMod * detailFade, noiseNormal);
|
|
displacement += noise2;
|
|
tangent += (noiseNormal - vec3(0.0, 0.0, 1.0)) * 0.2 * detailFade;
|
|
|
|
// Very fine ripples
|
|
vec3 noise3 = noiseWave(pos, time * 1.5, 2.0, 0.04 * heightMod * detailFade, noiseNormal);
|
|
displacement += noise3;
|
|
tangent += (noiseNormal - vec3(0.0, 0.0, 1.0)) * 0.1 * detailFade;
|
|
}
|
|
|
|
// 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
|
|
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;
|
|
}
|
|
</script>
|
|
<script id="sky-fs" type="x-shader/x-fragment">
|
|
precision mediump float;
|
|
|
|
varying vec3 v_rayDir;
|
|
|
|
uniform vec3 uSunDirection;
|
|
|
|
void main(void) {
|
|
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">
|
|
attribute vec3 positionAttr;
|
|
|
|
uniform mat4 projection;
|
|
uniform mat4 view;
|
|
|
|
varying vec3 v_rayDir;
|
|
|
|
void main(void) {
|
|
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
|
|
</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> |