clouds3d: anti-flicker dither + softer smoothstep

The cloud horizon flickered when the camera was far from the
deck because the regular raymarch steps aligned with the cloud
boundary. Two cheap fixes:
- Per-pixel jitter (hash21 of gl_FragCoord + uTime) shifts each
  ray's start by up to one stepSize; the brain averages the
  random offsets into a smooth edge
- Wider smoothstep (0.18 -> 0.24) softens the binary cloud/no-cloud
  boundary the jitter is now dithering across
This commit is contained in:
Richard Zink committed 2026-10-07 19:16:54 +02:00
1 parent 5e66cdfa2b
commit 65af0bf2f0
1 file changed
+13 -1
+13 -1
View File
@@ -68,6 +68,14 @@ var FRAG_SRC = [
'p += dot(p, p.yxz + 33.33);', 'p += dot(p, p.yxz + 33.33);',
'return fract((p.x + p.y) * p.z);', 'return fract((p.x + p.y) * p.z);',
'}', '}',
// 2D hash for per-pixel dithering. Adding uTime to the input
// means the dither pattern changes each frame so noise doesn't
// crawl on slow camera motion.
'float hash21(vec2 p) {',
'p = fract(p * vec2(123.34, 456.21));',
'p += dot(p, p + 45.32);',
'return fract(p.x * p.y);',
'}',
'float noise3(vec3 p) {', 'float noise3(vec3 p) {',
'vec3 i = floor(p);', 'vec3 i = floor(p);',
'vec3 f = fract(p);', 'vec3 f = fract(p);',
@@ -97,7 +105,7 @@ var FRAG_SRC = [
'float h = clamp((p.y + 0.3) / 1.8, 0.0, 1.0);', 'float h = clamp((p.y + 0.3) / 1.8, 0.0, 1.0);',
'float profile = 4.0 * h * (1.0 - h); // bell curve', 'float profile = 4.0 * h * (1.0 - h); // bell curve',
'profile = max(profile, 0.0);', 'profile = max(profile, 0.0);',
'return smoothstep(baseThresh, baseThresh + 0.18, n) * profile;', 'return smoothstep(baseThresh, baseThresh + 0.24, n) * profile;',
'}', '}',
// Star field: project ray onto a far sphere, hash-grid for // Star field: project ray onto a far sphere, hash-grid for
// positions. Visible above the horizon at night with a small // positions. Visible above the horizon at night with a small
@@ -146,6 +154,10 @@ var FRAG_SRC = [
// Skip the gap between camera and cloud top so we don't waste // Skip the gap between camera and cloud top so we don't waste
// steps marching through clear sky. ray-Y = 1.5 = cloud ceiling. // steps marching through clear sky. ray-Y = 1.5 = cloud ceiling.
'float t = (ro.y > 1.5 && rd.y < -0.001) ? (ro.y - 1.5) / -rd.y : 0.0;', 'float t = (ro.y > 1.5 && rd.y < -0.001) ? (ro.y - 1.5) / -rd.y : 0.0;',
// Per-pixel jitter (up to one stepSize) breaks the regular
// marching pattern that causes flickering at the cloud horizon.
// Re-keyed each frame so the noise does not crawl.
't += hash21(gl_FragCoord.xy + uTime) * 0.85;',
'float stepSize = 0.85;', 'float stepSize = 0.85;',
'float trans = 1.0;', 'float trans = 1.0;',
'for (int i = 0; i < 18; i++) {', 'for (int i = 0; i < 18; i++) {',