From 595b22aac1b96cade7ccd235434f7c6ee2b34cf8 Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Wed, 7 Oct 2026 20:07:20 +0200 Subject: [PATCH] More cloud structure: 4 fBm layers, 4 octaves each Density reverted to original 0.20/0.70/1.00/0.45 but structure denser than ever: - fbm3: 3 -> 4 octaves (more detail at fine scales) - cloudDensity: 4 layers (base + mid 35% + fine1 18% + fine2 10%) - smoothstep 0.24 -> 0.20 for tighter cloud edges Cost: 4 fbm * 4 octaves = 16 noise3 samples per step * 18 steps = 288 samples per pixel. Watch FPS on low-end GPUs. --- vendor/clouds2d.js | 6 +++--- vendor/clouds3d.js | 29 ++++++++++++++--------------- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/vendor/clouds2d.js b/vendor/clouds2d.js index c55cd8e..f562f1d 100644 --- a/vendor/clouds2d.js +++ b/vendor/clouds2d.js @@ -122,10 +122,10 @@ function hex(rgb) { } var WEATHER_DENSITY = { - sunny: 0.65, - cloudy: 0.90, + sunny: 0.20, + cloudy: 0.70, stormy: 1.00, - night: 0.75 + night: 0.45 }; // Load the noise image and upload it as a REPEAT-wrapped texture. diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index eb640fc..595eb14 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -90,30 +90,29 @@ var FRAG_SRC = [ 'float fbm3(vec3 p) {', 'float v = 0.0;', 'float a = 0.5;', - 'for (int i = 0; i < 3; i++) {', + 'for (int i = 0; i < 4; i++) {', 'v += a * noise3(p);', 'p = p * 2.03 + vec3(13.7, 7.1, 19.3);', 'a *= 0.5;', '}', 'return v;', '}', - // Density at a point in the cloud layer. Three fBm layers: the - // base one at low frequency gives the large puffs, the mid - // detail layer breaks up the silhouette, the fine layer adds - // wispy edges. Combined the result has more visual interest than - // a single fBm. + // Density at a point in the cloud layer. Multi-layer fBm: base for + // the large puffs, mid layer for secondary structure, two fine + // layers for wispy edges. Combined gives richly textured clouds + // even at low weather density. 'float cloudDensity(vec3 p, float baseThresh) {', 'float n = fbm3(p * 0.35 + vec3(0.0, 0.0, uTime * 0.06));', 'float d = fbm3(p * 1.4 + vec3(uTime * 0.04, 7.3, uTime * 0.03));', - 'float f = fbm3(p * 3.2 + vec3(2.1, uTime * 0.02, 5.7));', - 'n = n + d * 0.30 + f * 0.12;', + 'float f1 = fbm3(p * 3.2 + vec3(2.1, uTime * 0.02, 5.7));', + 'float f2 = fbm3(p * 6.5 + vec3(11.3, 4.7, uTime * 0.05));', + 'n = n + d * 0.35 + f1 * 0.18 + f2 * 0.10;', // Cloud layer thickness: between y=-0.3 (deck bottom) // and y=1.5 (top), densest in the middle. 'float h = clamp((p.y + 0.3) / 1.8, 0.0, 1.0);', 'float profile = 4.0 * h * (1.0 - h); // bell curve', 'profile = max(profile, 0.0);', - // Tighter smoothstep so the cloud edges have more detail. - 'return smoothstep(baseThresh, baseThresh + 0.16, n) * profile;', + 'return smoothstep(baseThresh, baseThresh + 0.20, n) * profile;', '}', // Star field: project ray onto a far sphere, hash-grid for // positions. Visible above the horizon at night with a small @@ -233,13 +232,13 @@ function hex(rgb) { (rgb & 255) / 255]; } -// Higher density across the board so even 'sunny' shows some cloud -// structure, not just clear sky. Same mapping as clouds2d. +// Cloud density per weather (0 = clear, 1 = overcast). +// Names mirror the weather themes defined in background.html. var WEATHER_DENSITY = { - sunny: 0.65, - cloudy: 0.90, + sunny: 0.20, + cloudy: 0.70, stormy: 1.00, - night: 0.75 + night: 0.45 }; window.clouds3dRender = function(target) {