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

@@ -122,10 +122,10 @@ function hex(rgb) {
 }
 
 var WEATHER_DENSITY = {
-    sunny: 0.65,
+    sunny: 0.20,
-    cloudy: 0.90,
+    cloudy: 0.70,
     stormy: 1.00,
-    night: 0.75
+    night: 0.45
 };
 
 // Load the noise image and upload it as a REPEAT-wrapped texture.

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
+    // Density at a point in the cloud layer. Multi-layer fBm: base for
-    // base one at low frequency gives the large puffs, the mid
+    // the large puffs, mid layer for secondary structure, two fine
-    // detail layer breaks up the silhouette, the fine layer adds
+    // layers for wispy edges. Combined gives richly textured clouds
-    // wispy edges. Combined the result has more visual interest than
+    // even at low weather density.
-    // a single fBm.
     '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));',
+        'float f1 = fbm3(p * 3.2 + vec3(2.1, uTime * 0.02, 5.7));',
-        'n = n + d * 0.30 + f * 0.12;',
+        '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.20, n) * profile;',
-        'return smoothstep(baseThresh, baseThresh + 0.16, 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
+// Cloud density per weather (0 = clear, 1 = overcast).
-// structure, not just clear sky. Same mapping as clouds2d.
+// Names mirror the weather themes defined in background.html.
 var WEATHER_DENSITY = {
-    sunny: 0.65,
+    sunny: 0.20,
-    cloudy: 0.90,
+    cloudy: 0.70,
     stormy: 1.00,
-    night: 0.75
+    night: 0.45
 };
 
 window.clouds3dRender = function(target) {