More clouds + finer structure, switch default back to clouds3d

- WEATHER_DENSITY bumped: sunny 0.20->0.55, cloudy 0.70->0.85,
  night 0.45->0.65. Stormy stays at 1.0 (already maxed).
  Even 'sunny' now has visible cloud structure, not just clear sky.
- clouds3d: add a second fBm layer at 4x frequency for fine detail,
  blended at 18% into the base. Combined with the tighter smoothstep
  (0.24 -> 0.18) the cloud silhouettes have more interesting edges
  instead of soft blob shapes.
- Same density bump applied to clouds2d so swapping renderers
  doesn't change the visual weather.
- config.renderer: clouds2d -> clouds3d (user request)
This commit is contained in:
Richard Zink committed 2026-10-07 20:01:52 +02:00
1 parent 5ff67cd1b4
commit 9a933b3dc4
3 files changed
+17 -11

No files matched your search

+1 -1
View File
@@ -46,7 +46,7 @@ window.CONFIG = {
units: { units: {
temperature: 'C' temperature: 'C'
}, },
renderer: 'clouds2d', // 'vanta', 'clouds2d', or 'clouds3d' renderer: 'clouds3d', // 'vanta', 'clouds2d', or 'clouds3d'
location: { location: {
// Latitude and longitude for sun/moon calculations // Latitude and longitude for sun/moon calculations
// Default: Passau, Germany // Default: Passau, Germany
+3 -3
View File
@@ -122,10 +122,10 @@ function hex(rgb) {
} }
var WEATHER_DENSITY = { var WEATHER_DENSITY = {
sunny: 0.20, sunny: 0.55,
cloudy: 0.70, cloudy: 0.85,
stormy: 1.00, stormy: 1.00,
night: 0.45 night: 0.65
}; };
// Load the noise image and upload it as a REPEAT-wrapped texture. // Load the noise image and upload it as a REPEAT-wrapped texture.
+13 -7
View File
@@ -97,15 +97,21 @@ var FRAG_SRC = [
'}', '}',
'return v;', 'return v;',
'}', '}',
// Density at a point in the cloud layer. // Density at a point in the cloud layer. Two fBm layers: the
// base one at low frequency gives the large puffs, the detail
// layer at higher frequency breaks up the silhouette so clouds
// don't look like soft blobs.
'float cloudDensity(vec3 p, float baseThresh) {', 'float cloudDensity(vec3 p, float baseThresh) {',
'float n = fbm3(p * 0.35 + vec3(0.0, 0.0, uTime * 0.06));', '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));',
'n = n + d * 0.18;',
// Cloud layer thickness: between y=-0.3 (deck bottom) // Cloud layer thickness: between y=-0.3 (deck bottom)
// and y=1.5 (top), densest in the middle. // and y=1.5 (top), densest in the middle.
'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.24, n) * profile;', // Tighter smoothstep so the cloud edges have more detail.
'return smoothstep(baseThresh, baseThresh + 0.18, 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
@@ -229,13 +235,13 @@ function hex(rgb) {
(rgb & 255) / 255]; (rgb & 255) / 255];
} }
// Same density mapping as clouds2d so swapping renderers doesn't // Higher density across the board so even 'sunny' shows some cloud
// change the visual weather. // structure, not just clear sky. Same mapping as clouds2d.
var WEATHER_DENSITY = { var WEATHER_DENSITY = {
sunny: 0.20, sunny: 0.55,
cloudy: 0.70, cloudy: 0.85,
stormy: 1.00, stormy: 1.00,
night: 0.45 night: 0.65
}; };
window.clouds3dRender = function(target) { window.clouds3dRender = function(target) {