'use strict'; // --------------------------------------------------------------------------- // Weather presets. Every state is a point in the same parameter space, so // switching weather is just a smooth interpolation of uniforms. // coverage : cloud amount (0 none → 1 full overcast) // gloom : how dark / gray the whole sky becomes // rain : rain streak intensity // haze : horizon haze / atmospheric moisture // --------------------------------------------------------------------------- const WEATHERS = [ { id: 'clear', name: '快晴', coverage: 0.00, gloom: 0.00, rain: 0.0, haze: 0.12 }, { id: 'sunny', name: '晴れ', coverage: 0.32, gloom: 0.04, rain: 0.0, haze: 0.20 }, { id: 'cloudy', name: '曇り', coverage: 0.96, gloom: 0.55, rain: 0.0, haze: 0.45 }, { id: 'rain', name: '雨', coverage: 1.00, gloom: 0.78, rain: 1.0, haze: 0.70 }, ]; const TRANSITION_SPEED = 0.9; // 1/sec — higher is snappier // --------------------------------------------------------------------------- // Shaders // --------------------------------------------------------------------------- const VERT = ` attribute vec2 aPos; void main() { gl_Position = vec4(aPos, 0.0, 1.0); } `; const FRAG = ` precision highp float; uniform vec2 uRes; uniform float uTime; uniform vec3 uSun; // sun direction (normalized) uniform vec4 uW; // x: coverage, y: gloom, z: rain, w: haze uniform float uSeg[4]; // 7-segment masks for H H M M uniform float uColon; // colon brightness (blinks with the seconds) const float FLOOR_Y = 0.34; // horizon line of the interior floor const float BASE_Y = 0.17; // where the monolith meets the floor // --- noise ------------------------------------------------------------------ float hash12(vec2 p) { p = fract(p * vec2(123.34, 345.45)); p += dot(p, p + 34.345); return fract(p.x * p.y); } float vnoise(vec2 p) { vec2 i = floor(p), f = fract(p); f = f * f * (3.0 - 2.0 * f); float a = hash12(i); float b = hash12(i + vec2(1.0, 0.0)); float c = hash12(i + vec2(0.0, 1.0)); float d = hash12(i + vec2(1.0, 1.0)); return mix(mix(a, b, f.x), mix(c, d, f.x), f.y); } float fbm(vec2 p) { float v = 0.0, a = 0.5; for (int i = 0; i < 5; i++) { v += a * vnoise(p); p = p * 2.03 + vec2(17.3, 9.1); a *= 0.5; } return v; } // --- one cloud deck ---------------------------------------------------------- vec4 cloudDeck(vec3 rd, vec3 sd, float scale, vec2 wind, float extraCov) { if (rd.y < 0.02) return vec4(0.0); vec2 p = rd.xz / rd.y * scale + wind * uTime; vec2 w = vec2(fbm(p * 0.9 + vec2(0.0, uTime * 0.006)), fbm(p * 0.9 + vec2(5.2, 1.3))); float d = fbm(p + (w - 0.5) * 1.7); float cov = clamp(uW.x + extraCov, 0.0, 1.0); float thr = 0.70 - cov * 0.56; float dens = smoothstep(thr, thr + 0.22, d); dens *= smoothstep(0.02, 0.12, cov); if (dens <= 0.002) return vec4(0.0); float dl = fbm(p + sd.xz * 0.6 + (w - 0.5) * 1.7); float sh = clamp(1.0 - (dl - thr) * 2.9, 0.0, 1.0); vec3 lit = vec3(1.06, 1.03, 0.985); vec3 shd = mix(vec3(0.50, 0.56, 0.68), vec3(0.40, 0.42, 0.47), uW.y); vec3 c = mix(shd, lit, sh * (1.0 - uW.y * 0.8)); float mu = max(dot(rd, sd), 0.0); c += vec3(0.5, 0.42, 0.3) * pow(mu, 12.0) * (1.0 - dens) * (1.0 - uW.y); vec3 slate = mix(vec3(0.74, 0.76, 0.80), vec3(0.47, 0.49, 0.53), uW.y); slate *= 1.06 - d * 0.22; c = mix(c, slate, clamp((cov - 0.72) * 3.2, 0.0, 1.0) * 0.7); float fade = smoothstep(0.02, 0.14, rd.y); return vec4(c, dens * fade); } // --- rain: lens droplets (refract the sky behind them) ----------------------- vec3 N13(float p) { vec3 p3 = fract(vec3(p) * vec3(0.1031, 0.11369, 0.13787)); p3 += dot(p3, p3.yzx + 19.19); return fract(vec3((p3.x + p3.y) * p3.z, (p3.x + p3.z) * p3.y, (p3.y + p3.z) * p3.x)); } float Saw(float b, float t) { return smoothstep(0.0, b, t) * smoothstep(1.0, b, t); } float dropLayer(vec2 uv, float t) { vec2 UV = uv; uv.y += t * 0.75; vec2 a = vec2(6.0, 1.0); vec2 grid = a * 2.0; vec2 id = floor(uv * grid); float colShift = N13(id.x).x; uv.y += colShift; id = floor(uv * grid); vec3 n = N13(id.x * 35.2 + id.y * 2376.1); vec2 st = fract(uv * grid) - vec2(0.5, 0.0); float x = n.x - 0.5; float y = UV.y * 20.0; float wiggle = sin(y + sin(y)); x += wiggle * (0.5 - abs(x)) * (n.z - 0.5); x *= 0.7; float ti = fract(t + n.z); y = (Saw(0.85, ti) - 0.5) * 0.9 + 0.5; vec2 p = vec2(x, y); float d = length((st - p) * a.yx); float mainDrop = smoothstep(0.4, 0.0, d); float r = sqrt(smoothstep(1.0, y, st.y)); float cd = abs(st.x - x); float trail = smoothstep(0.23 * r, 0.15 * r * r, cd); float trailFront = smoothstep(-0.02, 0.02, st.y - y); trail *= trailFront * r * r; y = UV.y; y = fract(y * 10.0) + (st.y - 0.5); float dd = length(st - vec2(x, y)); float droplets = smoothstep(0.3, 0.0, dd) * r * trailFront; return mainDrop + droplets + trail * 0.45; } float staticDrops(vec2 uv, float t) { uv *= 40.0; vec2 id = floor(uv); uv = fract(uv) - 0.5; vec3 n = N13(id.x * 107.45 + id.y * 3543.654); vec2 p = (n.xy - 0.5) * 0.7; float d = length(uv - p); float fade = Saw(0.025, fract(t + n.z)); return smoothstep(0.3, 0.0, d) * fract(n.z * 10.0) * fade; } float dropsMask(vec2 uv, float t, float amount) { float c = staticDrops(uv, t) * 0.55 * amount + dropLayer(uv * 0.85, t) * amount + dropLayer(uv * 1.6, t + 0.37) * 0.75 * amount; return smoothstep(0.3, 1.0, c); } // --- rain: distant airborne streaks (kept soft and ambiguous) ---------------- float rainStreaks(vec2 st, float scale, float speed, float slant) { vec2 g = vec2((st.x + st.y * slant) * 110.0 * scale, st.y * 5.0 * scale + uTime * speed); float col = floor(g.x); float ph = hash12(vec2(col, 7.7)); float row = floor(g.y + ph * 61.0); float gate = step(hash12(vec2(col, row)), 0.09); float xw = fract(g.x); float yy = fract(g.y + ph * 61.0); return gate * smoothstep(0.5, 0.02, abs(xw - 0.5)) * smoothstep(0.05, 0.45, yy) * smoothstep(1.0, 0.6, yy); } // --- clock digits: classic LCD 7-segment ------------------------------------- float bitOn(float mask, float k) { return mod(floor(mask / exp2(k)), 2.0); } float segHexH(vec2 p, vec2 c, float l, float t) { vec2 d = abs(p - c); return smoothstep(0.010, -0.010, max(d.y - t, d.x + d.y - l)); } float segHexV(vec2 p, vec2 c, float l, float t) { vec2 d = abs(p - c); return smoothstep(0.010, -0.010, max(d.x - t, d.x + d.y - l)); } // Segment bits: 0=A top, 1=B tr, 2=C br, 3=D bottom, 4=E bl, 5=F tl, 6=G mid float sevenSeg(vec2 p, float mask, float th) { float cx = 0.31, w = 0.24, vh = 0.215, g = 0.022; float m = 0.0; m = max(m, bitOn(mask, 0.0) * segHexH(p, vec2(cx, 0.93), w - g, th)); m = max(m, bitOn(mask, 6.0) * segHexH(p, vec2(cx, 0.50), w - g, th)); m = max(m, bitOn(mask, 3.0) * segHexH(p, vec2(cx, 0.07), w - g, th)); m = max(m, bitOn(mask, 1.0) * segHexV(p, vec2(cx + w, 0.715), vh - g, th)); m = max(m, bitOn(mask, 2.0) * segHexV(p, vec2(cx + w, 0.285), vh - g, th)); m = max(m, bitOn(mask, 5.0) * segHexV(p, vec2(cx - w, 0.715), vh - g, th)); m = max(m, bitOn(mask, 4.0) * segHexV(p, vec2(cx - w, 0.285), vh - g, th)); return m; } // Full HH:MM mask. cuv: x in 0..3.50 (glyph track), y in 0..1. float clockMaskAt(vec2 cuv, float th) { float m = 0.0; m = max(m, sevenSeg(cuv - vec2(0.00, 0.0), uSeg[0], th)); m = max(m, sevenSeg(cuv - vec2(0.80, 0.0), uSeg[1], th)); m = max(m, sevenSeg(cuv - vec2(2.05, 0.0), uSeg[2], th)); m = max(m, sevenSeg(cuv - vec2(2.85, 0.0), uSeg[3], th)); vec2 q1 = abs(cuv - vec2(1.825, 0.34)); vec2 q2 = abs(cuv - vec2(1.825, 0.66)); float c1 = smoothstep(0.010, -0.010, max(q1.x, q1.y) - 0.062); float c2 = smoothstep(0.010, -0.010, max(q2.x, q2.y) - 0.062); m = max(m, (c1 + c2) * uColon); return min(m, 1.0); } // Rounded-rectangle SDF. float rrect(vec2 p, vec2 c, vec2 half_, float r) { vec2 d = abs(p - c) - half_ + r; return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0) - r; } // ----------------------------------------------------------------------------- // The whole wall: sky + clouds + sun + rain seen through the glass curtain // wall. Pure function of the fragment position, so the floor can sample it // again with a mirrored coordinate to get its reflection. Returns linear // (pre-tonemap) color. // ----------------------------------------------------------------------------- vec3 wallScene(vec2 fc) { vec2 q = fc / uRes; vec2 v = (2.0 * fc - uRes) / uRes.y; vec2 sp = fc / uRes.y; float paneW = 0.315; float pid = floor(sp.x / paneW); float band = step(FLOOR_Y + 0.006, q.y) + step(0.895, q.y); float prnd = hash12(vec2(pid * 3.7, band * 13.1 + 1.7)); vec2 paneOff = (vec2(hash12(vec2(pid, band + 7.7)), hash12(vec2(pid + 11.3, band))) - 0.5) * 0.014; vec2 bend = vec2(0.0); float dropM = 0.0; if (uW.z > 0.001) { float rt = uTime * 0.2; dropM = dropsMask(v, rt, uW.z); vec2 e = vec2(0.0022, 0.0); bend = vec2(dropsMask(v + e.xy, rt, uW.z) - dropM, dropsMask(v + e.yx, rt, uW.z) - dropM); } float el = 0.5325 + (v.y + bend.y * 2.2 + paneOff.y) * 0.5175; float az = (v.x + bend.x * 2.2 + paneOff.x) * 0.5175; vec3 rd = normalize(vec3(sin(az) * cos(el), sin(el), -cos(az) * cos(el))); vec3 sd = normalize(uSun); float mu = clamp(dot(rd, sd), -1.0, 1.0); float zen = clamp(rd.y, 0.0, 1.0); vec3 zenC = mix(vec3(0.035, 0.21, 0.62), vec3(0.38, 0.42, 0.48), uW.y); vec3 horC = mix(vec3(0.52, 0.70, 0.92), vec3(0.55, 0.57, 0.61), uW.y); vec3 col = mix(horC, zenC, pow(zen, 0.65)); col += vec3(0.28, 0.20, 0.10) * pow(max(mu, 0.0), 6.0) * (1.0 - uW.y); vec4 c1 = cloudDeck(rd, sd, 1.7, vec2(0.014, 0.006), 0.0); vec4 c0 = cloudDeck(rd, sd, 3.1, vec2(0.030, 0.010), 0.06); float trans = (1.0 - c1.a) * (1.0 - c0.a); float disk = smoothstep(0.99965, 0.99985, mu); float glow = pow(max(mu, 0.0), 300.0) * 0.55 + pow(max(mu, 0.0), 32.0) * 0.10; col += (vec3(1.0, 0.96, 0.88) * disk * 14.0 + vec3(1.0, 0.9, 0.72) * glow) * (1.0 - uW.y * 0.92) * trans * trans; col = mix(col, c1.rgb, c1.a); col = mix(col, c0.rgb, c0.a); vec3 hazeC = mix(vec3(0.78, 0.84, 0.92), vec3(0.58, 0.60, 0.64), uW.y); float hz = uW.w * pow(1.0 - zen, 2.2); col = mix(col, hazeC, clamp(hz, 0.0, 1.0) * 0.85); if (uW.z > 0.001) { float veil = fbm(vec2(az * 5.0 - uTime * 0.03, el * 1.1 + uTime * 0.55)); col = mix(col, hazeC * 0.82, uW.z * veil * veil * 0.35 * (1.0 - zen * 0.5)); float gust = sin(uTime * 0.22) * 0.05; float r = 0.0; r += rainStreaks(sp, 1.00, 16.0, 0.16 + gust) * 0.055; r += rainStreaks(sp, 1.60, 23.0, 0.21 + gust * 1.4) * 0.04; col += r * uW.z * vec3(0.75, 0.80, 0.88); col = mix(col, vec3(dot(col, vec3(0.333))), uW.z * 0.12); col *= mix(vec3(1.0), vec3(0.94, 0.97, 1.06), uW.z); col += dropM * 0.08 * vec3(0.9, 0.95, 1.0); } // --- glass: per-pane tint and a faint reflection sheen --- col *= vec3(0.90, 0.975, 0.955) * (0.96 + prnd * 0.05); float refl = pow(max(sin((sp.x * 0.8 + sp.y * 0.55 + prnd * 2.0) * 3.14159), 0.0), 10.0); col += vec3(0.9, 0.95, 1.0) * refl * 0.045; // --- mullions and transoms: slim extruded aluminum profiles --- float FW = 0.0042; float FH = 0.0058; float fx = fract(sp.x / paneW) - 0.5; float du = (0.5 - abs(fx)) * paneW; float dy1 = q.y - (FLOOR_Y + 0.006), dy2 = q.y - 0.895; float dv = min(abs(dy1), abs(dy2)); float sy = abs(dy1) < abs(dy2) ? sign(dy1) : sign(dy2); float ao = (1.0 - smoothstep(FW * 1.6, FW * 5.5, du)) * 0.13 + (1.0 - smoothstep(FH * 1.6, FH * 5.5, dv)) * 0.13; col *= 1.0 - ao; float gasket = max( smoothstep(FW * 0.9, FW * 1.1, du) * (1.0 - smoothstep(FW * 1.35, FW * 1.7, du)), smoothstep(FH * 0.9, FH * 1.1, dv) * (1.0 - smoothstep(FH * 1.35, FH * 1.7, dv))); col = mix(col, vec3(0.030, 0.032, 0.036), gasket * 0.85); float ambient = (0.85 - uW.y * 0.30) * (0.85 + 0.3 * q.y); float nV = clamp(du / FW, 0.0, 1.0); float profV = 0.50 + 0.50 * sqrt(max(0.0, 1.0 - nV * nV)); profV += sign(fx) * 0.09 * (1.0 - nV); float brushV = (vnoise(vec2(pid * 17.3, fc.y * 0.07)) - 0.5) * 0.16; vec3 frameColV = vec3(0.135, 0.140, 0.155) * (0.5 + 0.9 * profV + brushV) * ambient; float nH = clamp(dv / FH, 0.0, 1.0); float profH = 0.50 + 0.50 * sqrt(max(0.0, 1.0 - nH * nH)); profH += sy * 0.12 * (1.0 - nH); float brushH = (vnoise(vec2(q.y * 210.0, fc.x * 0.07)) - 0.5) * 0.16; vec3 frameColH = vec3(0.135, 0.140, 0.155) * (0.5 + 0.9 * profH + brushH) * ambient; frameColV += vec3(0.06) * smoothstep(0.55, 0.95, profV) * ambient; frameColH += vec3(0.06) * smoothstep(0.55, 0.95, profH) * ambient; float vF = 1.0 - smoothstep(FW * 0.85, FW, du); float hF = 1.0 - smoothstep(FH * 0.85, FH, dv); col = mix(col, frameColH, hF); col = mix(col, frameColV, vF); return col; } // ----------------------------------------------------------------------------- // The monument: a dark monolithic slab on a low plinth, warm-white digits // glowing from behind the face. Returns color + coverage mask so the floor // can render its reflection with a second call. // ----------------------------------------------------------------------------- vec4 monolithAt(vec2 pp, float aspect, float light) { vec4 outc = vec4(0.0); float bw = min(1.12, aspect * 0.94); float bh = 0.42; float plinthH = 0.030; // Plinth. vec2 pcen = vec2(aspect * 0.5, BASE_Y + plinthH * 0.5); float dPl = rrect(pp, pcen, vec2(bw * 0.54, plinthH * 0.5), 0.006); float plM = smoothstep(0.0015, -0.0015, dPl); if (plM > 0.001) { float nyP = clamp((pp.y - BASE_Y) / plinthH, 0.0, 1.0); vec3 pc = vec3(0.150, 0.152, 0.158) * (0.65 + 0.55 * nyP) * light; outc = vec4(pc, plM); } // Slab. float slabBot = BASE_Y + plinthH; vec2 scen = vec2(aspect * 0.5, slabBot + bh * 0.5); float dS = rrect(pp, scen, vec2(bw * 0.5, bh * 0.5), 0.012); float sM = smoothstep(0.0012, -0.0012, dS); if (sM > 0.001) { float ny = clamp((pp.y - slabBot) / bh, 0.0, 1.0); float din = -dS; vec3 sc = vec3(0.082, 0.086, 0.094) * (0.85 + 0.30 * ny) * light; // Vertical hairline grain of dark brushed metal / honed granite. sc += (vnoise(vec2(pp.x * 700.0, pp.y * 2.5)) - 0.5) * 0.020; // A broad, dull sheen drifting across the face. sc += vec3(0.050, 0.055, 0.060) * pow(max(0.0, sin((pp.x - aspect * 0.5) * 2.6 + 0.6)), 8.0) * light; // Silhouette falloff, and a top cap that catches the skylight. sc *= 1.0 - 0.25 * (1.0 - smoothstep(0.0, 0.035, din)); sc += vec3(0.16, 0.17, 0.18) * smoothstep(0.006, 0.0, abs(pp.y - (slabBot + bh))) * light; // Digits: warm-white LED glowing through the dark face. float dh = min(bh * 0.52, bw * 0.82 / 3.50); vec2 cuv = (pp - vec2(aspect * 0.5, slabBot + bh * 0.5)) / dh + vec2(3.50 * 0.5, 0.5); float m = clockMaskAt(cuv, 0.054); sc = mix(sc, vec3(1.05, 1.00, 0.88), m); outc = vec4(mix(outc.rgb, sc, sM), max(outc.a, sM)); } return outc; } void main() { vec2 fc = gl_FragCoord.xy; vec2 q = fc / uRes; vec2 sp = fc / uRes.y; float aspect = uRes.x / uRes.y; float light = 1.0 - uW.y * 0.30; vec3 col; if (q.y >= FLOOR_Y) { col = wallScene(fc); } else { // --- dark reflective tile floor, pseudo-perspective toward the wall --- float dyF = FLOOR_Y - q.y; float z = 0.052 / (dyF + 0.014); // pseudo depth float wx = (sp.x - aspect * 0.5) * z; vec2 cell = vec2(wx, z) / 0.60; vec2 cid = floor(cell); vec2 cf = fract(cell); float tv = 0.82 + 0.36 * hash12(cid + 3.1); // per-tile tone variation vec3 base = vec3(0.072, 0.064, 0.056) * tv; // Mirror the wall scene about the floor line for the glossy reflection. vec2 mfc = vec2(fc.x, (2.0 * FLOOR_Y - q.y) * uRes.y); vec3 refl = wallScene(mfc); float fres = 0.22 + 0.42 * smoothstep(0.0, FLOOR_Y, q.y); col = mix(base, refl * 0.60, fres); // Tile seams cut the gloss; fog melts the floor into the wall base. float seam = min(min(cf.x, 1.0 - cf.x), min(cf.y, 1.0 - cf.y)); float seamM = 1.0 - smoothstep(0.010, 0.045, seam); col *= 1.0 - seamM * 0.38; float fog = smoothstep(FLOOR_Y * 0.5, FLOOR_Y, q.y); col = mix(col, refl * 0.8, fog * 0.35); } // --- tonemap + gamma + weather darkening --- col = 1.0 - exp(-col * 1.25); col = pow(col, vec3(0.4545)); col *= light; vec2 pp = vec2(sp.x, q.y); // Monolith reflection on the floor (vertically compressed, fading out). if (q.y < BASE_Y) { vec4 MR = monolithAt(vec2(pp.x, BASE_Y + (BASE_Y - q.y) * 2.0), aspect, light); float fade = pow(clamp(1.0 - (BASE_Y - q.y) / BASE_Y, 0.0, 1.0), 1.4); col = mix(col, MR.rgb * 0.45, MR.a * fade * 0.55); } // Contact shadow pooling around the plinth. { float bw = min(1.12, aspect * 0.94); vec2 sdw = vec2((pp.x - aspect * 0.5) / (bw * 0.60), (q.y - BASE_Y) / 0.05); float sh = 1.0 - smoothstep(0.5, 1.2, length(sdw)); col *= 1.0 - sh * 0.5 * step(q.y, BASE_Y + 0.012); } // The monument itself. vec4 M = monolithAt(pp, aspect, light); col = mix(col, M.rgb, M.a); col += (hash12(fc + fract(uTime) * 61.7) - 0.5) / 255.0; gl_FragColor = vec4(col, 1.0); } `; // --------------------------------------------------------------------------- // GL setup // --------------------------------------------------------------------------- const canvas = document.getElementById('stage'); const labelEl = document.getElementById('label'); const hintEl = document.getElementById('hint'); const gl = canvas.getContext('webgl', { antialias: false, alpha: false }) || canvas.getContext('experimental-webgl'); if (!gl) { document.body.innerHTML = '

WebGL not available

'; throw new Error('no webgl'); } function compile(type, src) { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(s)); } return s; } const prog = gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG)); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(prog)); } gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW); const aPos = gl.getAttribLocation(prog, 'aPos'); gl.enableVertexAttribArray(aPos); gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0); const U = { res: gl.getUniformLocation(prog, 'uRes'), time: gl.getUniformLocation(prog, 'uTime'), sun: gl.getUniformLocation(prog, 'uSun'), w: gl.getUniformLocation(prog, 'uW'), seg: gl.getUniformLocation(prog, 'uSeg[0]'), colon: gl.getUniformLocation(prog, 'uColon'), }; // 7-segment encodings for 0-9 (bit 0=A ... bit 6=G). const SEGMAP = [63, 6, 91, 79, 102, 109, 125, 7, 127, 111]; const segArr = new Float32Array(4); // Fixed pleasant sun: ~33 degrees up, a bit off to the right. const SUN_EL = 0.58, SUN_AZ = 0.42; const sunDir = [ Math.sin(SUN_AZ) * Math.cos(SUN_EL), Math.sin(SUN_EL), -Math.cos(SUN_AZ) * Math.cos(SUN_EL), ]; // --------------------------------------------------------------------------- // Weather state // --------------------------------------------------------------------------- const url = new URLSearchParams(location.search); let weatherIdx = 0; if (url.has('weather')) { const v = url.get('weather'); const byId = WEATHERS.findIndex(w => w.id === v || w.name === v); const byNum = parseInt(v, 10); if (byId >= 0) weatherIdx = byId; else if (Number.isFinite(byNum)) weatherIdx = ((byNum % WEATHERS.length) + WEATHERS.length) % WEATHERS.length; } const cur = { ...WEATHERS[weatherIdx] }; // interpolated live params let labelTimer = 0; function setWeather(i, announce = true) { weatherIdx = ((i % WEATHERS.length) + WEATHERS.length) % WEATHERS.length; if (!announce) return; const w = WEATHERS[weatherIdx]; labelEl.textContent = `${weatherIdx + 1}/${WEATHERS.length} ${w.name} ${w.id}`; labelEl.style.opacity = '1'; clearTimeout(labelTimer); labelTimer = setTimeout(() => { labelEl.style.opacity = '0'; }, 1600); } // --------------------------------------------------------------------------- // Resize / render / loop (robustness: immediate first paint, 1s size poll, // setInterval watchdog for embeds that suspend requestAnimationFrame). // --------------------------------------------------------------------------- function handleResize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const cssW = window.innerWidth, cssH = window.innerHeight; if (cssW < 2 || cssH < 2) { setTimeout(handleResize, 120); return; } canvas.width = Math.max(1, Math.floor(cssW * dpr)); canvas.height = Math.max(1, Math.floor(cssH * dpr)); canvas.style.width = cssW + 'px'; canvas.style.height = cssH + 'px'; gl.viewport(0, 0, canvas.width, canvas.height); render(); } const startMs = performance.now(); function render() { const d = new Date(); const hh = d.getHours(), mm = d.getMinutes(); segArr[0] = SEGMAP[(hh / 10) | 0]; segArr[1] = SEGMAP[hh % 10]; segArr[2] = SEGMAP[(mm / 10) | 0]; segArr[3] = SEGMAP[mm % 10]; gl.uniform2f(U.res, canvas.width, canvas.height); gl.uniform1f(U.time, (performance.now() - startMs) / 1000); gl.uniform3f(U.sun, sunDir[0], sunDir[1], sunDir[2]); gl.uniform4f(U.w, cur.coverage, cur.gloom, cur.rain, cur.haze); gl.uniform1fv(U.seg, segArr); gl.uniform1f(U.colon, d.getMilliseconds() < 500 ? 1.0 : 0.0); gl.drawArrays(gl.TRIANGLES, 0, 3); } let lastNow = performance.now(); let sizeCheckAccum = 0; function tick(now) { const dt = Math.min(200, now - lastNow) / 1000; lastNow = now; sizeCheckAccum += dt; if (sizeCheckAccum >= 1) { sizeCheckAccum = 0; const dpr = Math.min(window.devicePixelRatio || 1, 2); if (canvas.width !== Math.max(1, Math.floor(window.innerWidth * dpr)) || canvas.height !== Math.max(1, Math.floor(window.innerHeight * dpr))) { handleResize(); } } const target = WEATHERS[weatherIdx]; const k = 1 - Math.exp(-dt * TRANSITION_SPEED); cur.coverage += (target.coverage - cur.coverage) * k; cur.gloom += (target.gloom - cur.gloom) * k; cur.rain += (target.rain - cur.rain) * k; cur.haze += (target.haze - cur.haze) * k; render(); } function loop(now) { requestAnimationFrame(loop); tick(now); } setInterval(() => { const now = performance.now(); if (now - lastNow > 600) tick(now); }, 400); // --------------------------------------------------------------------------- // Interaction // --------------------------------------------------------------------------- canvas.addEventListener('pointerup', () => setWeather(weatherIdx + 1)); window.addEventListener('keydown', (e) => { if (e.key >= '1' && e.key <= String(WEATHERS.length)) { setWeather(parseInt(e.key, 10) - 1); } else if (e.key === ' ') { e.preventDefault(); setWeather(weatherIdx + 1); } }); window.addEventListener('resize', handleResize); // --------------------------------------------------------------------------- handleResize(); requestAnimationFrame(loop); setWeather(weatherIdx); setTimeout(() => { hintEl.style.opacity = '0'; }, 6000); // Debug hooks. window.__sky = { setWeather, get weather() { return WEATHERS[weatherIdx].id; }, get params() { return { ...cur }; }, snap() { Object.assign(cur, WEATHERS[weatherIdx]); render(); }, render, };

AI GENERATED DEMO: SKY DECK CLOCK