Gulum/WebOcean
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add ocean shader settings and control sliders for wave properties

Browse Source
This commit is contained in:
Gulum
2026-01-31 22:47:20 +01:00
parent d61c91a267
commit e9512fb88a
3 changed files with 299 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
index.html
View File

@@ -95,6 +95,56 @@
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;
@@ -191,40 +241,122 @@
varying vec3 v_fragPos;
varying vec3 v_normal;
varying float v_waveHeight;
varying float v_foamFactor;
uniform vec3 eyePos;
vec3 lightColor = vec3(1.0, 1.0, 1.0);
uniform float uFoamIntensity;
uniform float uGlitterIntensity;
void main(void) {
vec3 norm = normalize(v_normal);
vec3 lightDir = normalize(vec3(0.3, 0.5, 1.0)); // Sun direction
// 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;
}
float diff = max(dot(norm, lightDir), 0.0);
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;
// View direction
vec3 toCameraVector = normalize(eyePos - v_fragPos);
vec3 reflec = normalize(reflect(-toCameraVector, norm));
// Schlick's approximation to Fresnel factor
float n1 = 1.0, n2 = 1.33333;
float R0 = pow((n1 - n2) / (n1 + n2), 2.0);
float fresnel = R0 + (1.0 - R0) * pow(1.0 - max(dot(norm, toCameraVector), 0.0), 5.0);
float R0 = 0.02;
float fresnel = R0 + (1.0 - R0) * pow(1.0 - max(dot(norm, viewDir), 0.0), 5.0);
vec3 oceanColor = vec3(0.0, 0.3, 0.4);
vec3 skyColor = vec3(0.6, 0.8, 1.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.5, 0.7, 0.9);
vec3 foamColor = vec3(0.95, 0.98, 1.0);
// Specular highlights
vec3 halfwayDir = normalize(lightDir + toCameraVector);
float spec = pow(max(dot(norm, halfwayDir), 0.0), 256.0);
vec3 specular = spec * lightColor * 0.8;
// 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;
// Subsurface scattering approximation
float sss = pow(max(dot(toCameraVector, -lightDir), 0.0), 4.0) * 0.3;
vec3 sssColor = vec3(0.0, 0.5, 0.5) * sss;
vec3 finalColor = mix(oceanColor, skyColor, fresnel) * clamp(diffuse, 0.4, 1.0) + specular + sssColor;
// 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
foam = pow(foam, 0.7) * uFoamIntensity;
// 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);
// Slight fog for distant water
float dist = length(eyePos - v_fragPos);
float fog = 1.0 - clamp(dist * 0.015, 0.0, 0.6);
finalColor = mix(skyColor * 0.85, finalColor, fog);
gl_FragColor = vec4(finalColor, 1.0);
}
@@ -236,12 +368,15 @@
uniform mat4 model;
uniform mat4 projection;
uniform float uTime;
uniform float uWaveHeight;
uniform float uWaveSpeed;
varying vec3 v_fragPos;
varying vec3 v_normal;
varying float v_waveHeight;
varying float v_foamFactor;
// Gerstner wave function
// Returns displacement (xyz) and partial derivatives for normal calculation
// 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);
@@ -271,46 +406,93 @@
void main(void) {
vec4 worldPos = model * vec4(positionAttr.xyz, 1.0);
vec2 pos = worldPos.xy;
float time = uTime * 0.001;
float time = uTime * 0.0004 * uWaveSpeed;
float heightMod = uWaveHeight;
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;
// Wave 1 - Primary large wave
displacement += gerstnerWave(pos, time, vec2(1.0, 0.3), 0.25, 4.0, t, b);
tangent += t - vec3(1.0, 0.0, 0.0);
binormal += b - vec3(0.0, 0.0, 1.0);
// === 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);
// Wave 2 - Secondary wave at different angle
displacement += gerstnerWave(pos, time, vec2(0.5, 1.0), 0.15, 2.5, 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);
// Wave 3 - Smaller detail wave
displacement += gerstnerWave(pos, time, vec2(-0.3, 0.7), 0.1, 1.5, 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);
// Wave 4 - Tiny ripples
displacement += gerstnerWave(pos, time, vec2(0.8, -0.4), 0.08, 0.8, 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);
// Apply displacement - Gerstner displaces horizontally (x,z) and vertically (y)
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 * 2.8, vec2(-0.8, 0.6), 0.025 * heightMod, 0.15, 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.5, 0.85), 0.02 * 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.2, vec2(-0.95, -0.3), 0.018 * heightMod, 0.10, 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.3, -0.95), 0.015 * heightMod, 0.08, 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.8, vec2(-0.6, 0.8), 0.012 * heightMod, 0.06, 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
worldPos.x += displacement.x;
worldPos.y += displacement.z;
worldPos.z += displacement.y;
// Calculate normal from tangent and binormal
vec3 normal = normalize(cross(binormal, tangent));
// Swap components to match our coordinate system (z is up)
v_normal = vec3(normal.x, normal.z, normal.y);
gl_Position = projection * view * worldPos;
v_fragPos = worldPos.xyz;
}
</script>
}
</script>
<script id="sky-fs" type="x-shader/x-fragment">
precision mediump float;
@@ -363,6 +545,28 @@
<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>
@@ -390,6 +594,22 @@
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>