403 lines
16 KiB
HTML
403 lines
16 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);
|
|
}
|
|
</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 vec2 v_uv;
|
|
|
|
uniform vec3 eyePos;
|
|
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);
|
|
|
|
//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) {
|
|
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);
|
|
|
|
//Old lightning
|
|
vec3 toCameraVector = normalize(v_fragPos - eyePos);
|
|
vec3 reflec = normalize(reflect(toCameraVector, norm));
|
|
|
|
//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.) ;
|
|
|
|
//vec3 waterColor = vec3(34./255.,154./255.,211./255.);
|
|
vec3 oceanColor = vec3(0,.4,.4); // under-sea colour
|
|
vec3 skyColor = vec3(1.,1.,1.);
|
|
|
|
//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">
|
|
attribute vec3 positionAttr;
|
|
|
|
uniform mat4 view;
|
|
uniform mat4 model;
|
|
uniform mat4 projection;
|
|
uniform sampler2D displace_map;
|
|
|
|
varying vec2 v_uv;
|
|
varying vec3 v_fragPos;
|
|
|
|
void main(void) {
|
|
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;
|
|
v_fragPos = worldPos.xyz;
|
|
v_uv = positionAttr.xy;
|
|
}
|
|
</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>
|
|
|
|
<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');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |