function __boot() { const LOCATION = { lat: 34.7016, lng: 135.4944, label: "KITTE大阪" }; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(p => { LOCATION.lat = p.coords.latitude; LOCATION.lng = p.coords.longitude; LOCATION.label = "現在地(GPS)"; fetchWeather(); }, () => {}, { timeout: 5e3 }); } const CFG = { ORTHO_WIDTH: 18, CAM_HEIGHT: 5, GROUND_SIZE: 20, GROUND_Y: -.5, GROUND_COLOR: 8421504, GROUND_EMISSIVE: 5066061, CLOCK_COLOR: 3355443, CLOCK_RADIUS: 1, RING_WIDTH: .02, RING_SEGMENTS: 64, STROKE_SCALE_RING: .5, STROKE_SCALE_HAND: 1, HANDS: { hour: { w: .08, l: .4, z: .002 }, min: { w: .05, l: .75, z: .004 }, sec: { w: .015, l: 1.05, z: .006, drop: .2 } }, HUB: { r: .06, z: .005 }, TICKS: { on: false, shape: "circle", count: 12, radius: .82, dotR: .03, squareW: .03, squareH: .03 }, SPAWN_X: -14, KILL_X: 16, SPEED_MIN: .2, SPEED_MAX: 1.5, REVERSE_PROB: .1, SIZE_MIN: .5, SIZE_STEPS: 5, SIZE_JITTER: .5, SIZE_SEP: 2, SIZE_SPEED: 0, ROLL_EQ: 1, DISTRIB_ON: true, DISTRIB_CAND: 10, DISTRIB_GAP: .5, DISTRIB_PASS: 6, DISTRIB_MAXCO: 6, BIRTH_MAX: .3, MAX_CLOCKS: 100, SUN_RADIUS: 30 }; const PARAMS = { secMotion: "circOut" }; const VIEW = { mode: "composite", shadowTilt: 60, seam: .05, wallGap: .25, solidShadow: false, realOrient: true, wallAzimuth: 160 }; const VIEW_MODES = [ "composite", "wall", "plan" ]; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const scene = new THREE.Scene; scene.background = new THREE.Color(0); const stage = new THREE.Group; scene.add(stage); const camera = new THREE.OrthographicCamera(-9, 9, 1, -1, .1, 20); camera.position.set(0, CFG.CAM_HEIGHT, 0); camera.rotation.x = -Math.PI / 2; stage.add(camera); const camFront = new THREE.OrthographicCamera(-9, 9, 1, -1, .1, 20); camFront.position.set(0, 0, CFG.CAM_HEIGHT); stage.add(camFront); let lastAspect = 8950 / 1080; function setCameraAspect(aspect) { lastAspect = aspect; const halfW = CFG.ORTHO_WIDTH / 2; const halfH = halfW / aspect; camera.left = -halfW; camera.right = halfW; camera.top = halfH; camera.bottom = -halfH; const S = VIEW.seam * 2 - 1; if (VIEW.mode === "composite") { const a = VIEW.shadowTilt * DEG, D = 14; const uy = Math.cos(a), uz = -Math.sin(a), fy = -Math.sin(a), fz = -Math.cos(a); camera.rotation.set(-a, 0, 0); camera.position.set(0, CFG.GROUND_Y - uy * (S * halfH) - fy * D, -uz * (S * halfH) - fz * D); camera.near = .1; camera.far = D + 40; } else { camera.rotation.set(-Math.PI / 2, 0, 0); camera.position.set(0, CFG.CAM_HEIGHT, 0); camera.near = .1; camera.far = 20; } camera.updateProjectionMatrix(); const cy = CFG.GROUND_Y - S * halfH; camFront.left = -halfW; camFront.right = halfW; camFront.top = halfH; camFront.bottom = -halfH; camFront.position.set(0, cy, CFG.CAM_HEIGHT); camFront.updateProjectionMatrix(); } const sun = new THREE.DirectionalLight(16777215, 1); scene.add(sun); sun.target.position.set(0, 0, 0); scene.add(sun.target); const sunInfo = { altDeg: 0, azDeg: 0 }; const ENV = { lock: "off", weather: "auto", cloud: 0, rain: 0, cloudFloor: .8, cloudGamma: 2.2, cloudFx: 0, cloudFloorSh: .3, cloudGammaSh: 1.5, cloudFxSh: 0, cloudDesat: .25, cloudDark: .15, rainDark: .1, rainCool: 1, rainHue: 290, wxEase: 30, curve: 1, mixMode: "srgb", clockLMode: "contrast", clockLContrast: .5, clockLHyst: .04, clockLEase: 3 }; const ENV_KEYS = [ { a: -12, name: "夜", top: new THREE.Color(65804), bottom: new THREE.Color(2632259), clock: new THREE.Color(14605297) }, { a: -4, name: "薄明", top: new THREE.Color(7303070), bottom: new THREE.Color(13209494), clock: new THREE.Color(393494) }, { a: 6, name: "朝夕", top: new THREE.Color(10393807), bottom: new THREE.Color(15774864), clock: new THREE.Color(394011) }, { a: 22, name: "昼", top: new THREE.Color(12901869), bottom: new THREE.Color(12504302), clock: new THREE.Color(591648) } ]; const WX_PRESET = { clear: { cloud: 0, rain: 0 }, cloudy: { cloud: .9, rain: 0 }, rain: { cloud: 1, rain: .7 } }; const skyScene = new THREE.Scene; const skyCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const skyUniforms = { uTop: { value: new THREE.Vector3 }, uBottom: { value: new THREE.Vector3 }, uTopLch: { value: new THREE.Vector3 }, uBotLch: { value: new THREE.Vector3 }, uCurve: { value: 1 }, uMode: { value: 0 } }; const SKY_GLSL = `\n uniform vec3 uTop, uBottom, uTopLch, uBotLch;\n uniform float uCurve, uMode;\n float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }\n vec3 srgb2lin(vec3 c){ return mix(c/12.92, pow((c+0.055)/1.055, vec3(2.4)), step(0.04045, c)); }\n vec3 lin2srgb(vec3 c){ c=max(c,0.0); return mix(c*12.92, 1.055*pow(c,vec3(1.0/2.4))-0.055, step(0.0031308,c)); }\n vec3 oklab2lin(float L,float a,float b){\n float l_=L+0.3963377774*a+0.2158037573*b, m_=L-0.1055613458*a-0.0638541728*b, s_=L-0.0894841775*a-1.2914855480*b;\n float l=l_*l_*l_, m=m_*m_*m_, s=s_*s_*s_;\n return vec3( 4.0767416621*l-3.3077115913*m+0.2309699292*s,\n -1.2684380046*l+2.6097574011*m-0.3413193965*s,\n -0.0041960863*l-0.7034186147*m+1.7076147010*s);\n }\n vec3 rampLinear(float t){\n if (uMode < 0.5) return srgb2lin(mix(uBottom, uTop, t)); \n float dh = uTopLch.z - uBotLch.z; \n if (dh > 3.14159265) dh -= 6.28318531; else if (dh < -3.14159265) dh += 6.28318531;\n float L = mix(uBotLch.x, uTopLch.x, t);\n float C = mix(uBotLch.y, uTopLch.y, t);\n float h = uBotLch.z + dh * t;\n return oklab2lin(L, C*cos(h), C*sin(h));\n }\n`; const skyMat = new THREE.ShaderMaterial({ uniforms: skyUniforms, depthTest: false, depthWrite: false, vertexShader: `varying vec2 vUv; void main(){ vUv=uv; gl_Position=vec4(position.xy,0.0,1.0); }`, fragmentShader: `\n precision highp float;\n varying vec2 vUv;\n ${SKY_GLSL}\n void main(){\n float t = pow(clamp(vUv.y, 0.0, 1.0), uCurve);\n vec3 srgb = lin2srgb(rampLinear(t)); \n \n \n srgb += (hash(gl_FragCoord.xy)-0.5)*(1.5/255.0);\n gl_FragColor = vec4(clamp(srgb2lin(srgb),0.0,1.0), 1.0); \n }\n ` }); const skyQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), skyMat); skyQuad.frustumCulled = false; skyScene.add(skyQuad); const skyRT = new THREE.WebGLRenderTarget(2, 2, { depthBuffer: false, generateMipmaps: false, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter }); skyRT.texture.colorSpace = THREE.SRGBColorSpace; scene.background = skyRT.texture; function updateSkyRTSize() { const v = renderer.getDrawingBufferSize(new THREE.Vector2); const w = Math.min(1280, Math.max(2, Math.round(v.x))); skyRT.setSize(w, Math.max(2, Math.round(w / (v.x / Math.max(1, v.y))))); } const bgUniforms = { uTop: skyUniforms.uTop, uBottom: skyUniforms.uBottom, uTopLch: skyUniforms.uTopLch, uBotLch: skyUniforms.uBotLch, uCurve: skyUniforms.uCurve, uMode: skyUniforms.uMode, uBand: { value: new THREE.Vector2(0, 1) } }; const bgMat = new THREE.ShaderMaterial({ uniforms: bgUniforms, depthTest: false, depthWrite: false, vertexShader: skyMat.vertexShader, fragmentShader: `\n precision highp float;\n varying vec2 vUv;\n uniform vec2 uBand;\n ${SKY_GLSL}\n void main(){\n float y = clamp((vUv.y - uBand.x) / max(uBand.y - uBand.x, 1e-4), 0.0, 1.0);\n float t = pow(y, uCurve);\n vec3 srgb = lin2srgb(rampLinear(t)); \n srgb += (hash(gl_FragCoord.xy)-0.5)*(1.5/255.0); \n gl_FragColor = vec4(clamp(srgb,0.0,1.0), 1.0);\n }\n ` }); const bgScene = new THREE.Scene; const bgQuad = new THREE.Mesh(skyQuad.geometry, bgMat); bgQuad.frustumCulled = false; bgScene.add(bgQuad); const _envRGB = { r: 0, g: 0, b: 0 }; function envAdjust(c) { const o = oklabOfLinear(c.r, c.g, c.b); let L = o.L, h = Math.atan2(o.b, o.a); let C = Math.hypot(o.a, o.b); C *= 1 - Math.min(1, ENV.cloudFx * ENV.cloudDesat); L *= 1 - Math.min(.9, ENV.cloudFx * ENV.cloudDark + ENV.rain * ENV.rainDark); const d = ENV.rainHue * Math.PI / 180 - h; h += Math.atan2(Math.sin(d), Math.cos(d)) * Math.min(1, ENV.rain * ENV.rainCool); setColorOklabL(c, L, C * Math.cos(h), C * Math.sin(h)); } function mixOklch(out, c0, c1, t) { const A = oklabOfLinear(c0.r, c0.g, c0.b), B = oklabOfLinear(c1.r, c1.g, c1.b); const hA = Math.atan2(A.b, A.a), hB = Math.atan2(B.b, B.a); const CA = Math.hypot(A.a, A.b), CB = Math.hypot(B.a, B.b); let dh = hB - hA; if (dh > Math.PI) dh -= 2 * Math.PI; else if (dh < -Math.PI) dh += 2 * Math.PI; const L = A.L + (B.L - A.L) * t, C = CA + (CB - CA) * t, h = hA + dh * t; const lin = oklabToLinear(L, C * Math.cos(h), C * Math.sin(h)); out.setRGB(Math.max(0, lin.r), Math.max(0, lin.g), Math.max(0, lin.b), THREE.LinearSRGBColorSpace); } function mixKey(out, c0, c1, t) { if (ENV.mixMode === "oklch") mixOklch(out, c0, c1, t); else out.copy(c0).lerp(c1, t); } function envColorsAt(altDeg, outTop, outBottom, outClock) { let i = 0; while (i < ENV_KEYS.length - 2 && altDeg > ENV_KEYS[i + 1].a) i++; const m0 = ENV_KEYS[i], m1 = ENV_KEYS[i + 1]; let t = Math.max(0, Math.min(1, (altDeg - m0.a) / (m1.a - m0.a))); t = t * t * (3 - 2 * t); mixKey(outTop, m0.top, m1.top, t); envAdjust(outTop); mixKey(outBottom, m0.bottom, m1.bottom, t); envAdjust(outBottom); if (outClock) mixKey(outClock, m0.clock, m1.clock, t); } function oklabOfLinear(r, g, b) { const l = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * b); const m = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * b); const s = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * b); return { L: .2104542553 * l + .793617785 * m - .0040720468 * s, a: 1.9779984951 * l - 2.428592205 * m + .4505937099 * s, b: .0259040371 * l + .7827717662 * m - .808675766 * s }; } function oklabToLinear(L, a, b) { const l = (L + .3963377774 * a + .2158037573 * b) ** 3; const m = (L - .1055613458 * a - .0638541728 * b) ** 3; const s = (L - .0894841775 * a - 1.291485548 * b) ** 3; return { r: +4.0767416621 * l - 3.3077115913 * m + .2309699292 * s, g: -1.2684380046 * l + 2.6097574011 * m - .3413193965 * s, b: -.0041960863 * l - .7034186147 * m + 1.707614701 * s }; } function setColorOklabL(c, L, a, b) { const inG = o => o.r >= -1e-4 && o.r <= 1.0001 && o.g >= -1e-4 && o.g <= 1.0001 && o.b >= -1e-4 && o.b <= 1.0001; let rgb = oklabToLinear(L, a, b); if (!inG(rgb)) { let lo = 0, hi = 1; for (let i = 0; i < 16; i++) { const mid = (lo + hi) / 2, o = oklabToLinear(L, a * mid, b * mid); if (inG(o)) { lo = mid; rgb = o; } else hi = mid; } if (lo === 0) rgb = oklabToLinear(L, 0, 0); } const cl = x => Math.min(1, Math.max(0, x)); c.setRGB(cl(rgb.r), cl(rgb.g), cl(rgb.b), THREE.LinearSRGBColorSpace); } const _bgB0 = { r: 0, g: 0, b: 0 }, _bgT0 = { r: 0, g: 0, b: 0 }; function bgLAtClock(top, bot) { const halfH = CFG.ORTHO_WIDTH / 2 / lastAspect; const v = VIEW.mode === "plan" ? .5 : Math.min(1, Math.max(0, VIEW.seam + CFG.CLOCK_RADIUS / (2 * halfH))); const t = Math.pow(v, ENV.curve); bot.getRGB(_bgB0, THREE.SRGBColorSpace); top.getRGB(_bgT0, THREE.SRGBColorSpace); const s2l = x => x <= .04045 ? x / 12.92 : Math.pow((x + .055) / 1.055, 2.4); return oklabOfLinear(s2l(_bgB0.r + (_bgT0.r - _bgB0.r) * t), s2l(_bgB0.g + (_bgT0.g - _bgB0.g) * t), s2l(_bgB0.b + (_bgT0.b - _bgB0.b) * t)).L; } function clockContrastAdjust(c, top, bot) { const Lbg = bgLAtClock(top, bot); const side = Lbg >= .5 ? -1 : 1; const o = oklabOfLinear(c.r, c.g, c.b); setColorOklabL(c, Math.min(1, Math.max(0, Lbg + side * ENV.clockLContrast)), o.a, o.b); } const _envTop = new THREE.Color, _envBot = new THREE.Color; let clockLSide = 0, clockLCur = NaN; let clockLTarget = NaN; let envPrevMs = 0; function computeEnv(altDeg) { const _ms = performance.now(); const envDt = envPrevMs ? Math.min(.5, (_ms - envPrevMs) / 1e3) : 0; envPrevMs = _ms; if (ENV.lock !== "off") { const k = ENV_KEYS.find(k => k.name === ENV.lock); if (k) altDeg = k.a; } if (ENV.weather === "auto") { const tc = weatherInfo.cloudPct != null ? weatherInfo.cloudPct / 100 : 0; const tr = weatherInfo.precipMm != null ? Math.min(1, weatherInfo.precipMm / 2) : 0; const k = ENV.wxEase > 0 ? 1 - Math.exp(-envDt / ENV.wxEase) : 1; ENV.cloud += (tc - ENV.cloud) * k; ENV.rain += (tr - ENV.rain) * k; } else if (WX_PRESET[ENV.weather]) { ENV.cloud = WX_PRESET[ENV.weather].cloud; ENV.rain = WX_PRESET[ENV.weather].rain; } const cRaw = Math.min(1, Math.max(0, ENV.cloud)); const cloudCurve = (floor, gamma) => Math.pow(Math.max(0, (cRaw - floor) / Math.max(1e-6, 1 - floor)), gamma); ENV.cloudFx = cloudCurve(ENV.cloudFloor, ENV.cloudGamma); ENV.cloudFxSh = cloudCurve(ENV.cloudFloorSh, ENV.cloudGammaSh); envColorsAt(altDeg, _envTop, _envBot, clockMat.color); if (ENV.clockLMode === "contrast") { const Lbg = bgLAtClock(_envTop, _envBot); if (clockLSide === 0) clockLSide = Lbg >= .5 ? -1 : 1; else if (clockLSide < 0 && Lbg < .5 - ENV.clockLHyst) clockLSide = 1; else if (clockLSide > 0 && Lbg >= .5 + ENV.clockLHyst) clockLSide = -1; const Lt = Math.min(1, Math.max(0, Lbg + clockLSide * ENV.clockLContrast)); clockLTarget = Lt; clockLCur = isNaN(clockLCur) || ENV.clockLEase <= 0 ? Lt : clockLCur + (Lt - clockLCur) * (1 - Math.exp(-envDt / Math.max(ENV.clockLEase, .001))); const o = oklabOfLinear(clockMat.color.r, clockMat.color.g, clockMat.color.b); setColorOklabL(clockMat.color, clockLCur, o.a, o.b); } _envTop.getRGB(_envRGB, THREE.SRGBColorSpace); skyUniforms.uTop.value.set(_envRGB.r, _envRGB.g, _envRGB.b); _envBot.getRGB(_envRGB, THREE.SRGBColorSpace); skyUniforms.uBottom.value.set(_envRGB.r, _envRGB.g, _envRGB.b); setLchUniform(skyUniforms.uTopLch.value, _envTop); setLchUniform(skyUniforms.uBotLch.value, _envBot); skyUniforms.uMode.value = ENV.mixMode === "oklch" ? 1 : 0; skyUniforms.uCurve.value = ENV.curve; } function setLchUniform(v, c) { const o = oklabOfLinear(c.r, c.g, c.b); v.set(o.L, Math.hypot(o.a, o.b), Math.atan2(o.b, o.a)); } const SHADOW_TINT = { hueAmt: .57, scale: 2, speed: .2, edge: .22, edgeScale: 1.5, noiseLift: .5, noiseWarp: .8, hueSoft: .3, sunSize: 1, maxBlur: 1.5, fadeKeep: .8, cloudFade: 1, cloudBlur: 2.5, rainFade: .5 }; const shadowHueA = new THREE.Color(10127040); const shadowHueB = new THREE.Color(7313056); const shadowBaseColor = new THREE.Color(8619700); const SHADOW_MAX = CFG.MAX_CLOCKS; const SUN_TAPS = 12; const shadowCatcherVert = `\n varying vec2 vQ;\n void main() {\n vQ = position.xy; \n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`; const shadowCatcherFrag = `\n precision highp float;\n varying vec2 vQ;\n uniform vec3 uColor; \n uniform float uOpacity; \n uniform vec3 uHueA, uHueB;\n uniform float uHueAmt, uNoiseScale, uShTime;\n uniform float uShBand, uShEdgeScale, uShNoiseLift, uShNoiseWarp, uShHueSoft;\n uniform float uTanSun, uMaxBlur, uAAp, uShAmp, uFadeKeep;\n uniform vec4 uClk[${SHADOW_MAX}]; \n uniform int uClkCount;\n uniform vec2 uQC0, uKx; \n uniform vec2 uKv; \n uniform float uCH; \n uniform mat2 uMinv; \n uniform float uT0, uTx; uniform vec2 uTuv; \n uniform vec2 uKDir; \n uniform float uK1, uK2; \n uniform float uR, uRingW, uHubR, uCullR2;\n uniform vec4 uHand[3]; \n uniform vec3 uHandW; \n uniform float uSolid; \n uniform float uStrokeScaleR, uStrokeScaleH; \n uniform float uTickR, uTicksOn, uTickShape, uTickStep, uTickDotR;\n uniform vec2 uTickSquareHW; \n \n\n float shHash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }\n float shVnoise(vec2 p){ vec2 i=floor(p),f=fract(p); vec2 u=f*f*(3.0-2.0*f);\n return mix(mix(shHash(i),shHash(i+vec2(1,0)),u.x),mix(shHash(i+vec2(0,1)),shHash(i+vec2(1,1)),u.x),u.y); }\n float shFbm(vec2 p){ float v=0.0,a=0.5; mat2 r=mat2(0.8,-0.6,0.6,0.8);\n for(int i=0;i<4;i++){ v+=a*shVnoise(p); p=r*p*2.02; a*=0.55; } return v; }\n\n \n \n float covBand(float d, float w, float pen) { \n float amp = w / max(w, pen);\n float t = clamp((0.5 * (w + pen) - abs(d)) / pen, 0.0, 1.0);\n return amp * t * t * (3.0 - 2.0 * t);\n }\n float covFill(float d, float w, float pen) { \n float amp = min(1.0, w / max(w, pen));\n float t = clamp(0.5 - d / pen, 0.0, 1.0);\n return amp * t * t * (3.0 - 2.0 * t);\n }\n \n \n \n \n float clockCov(vec2 pj, float pen, mat2 Rr, float scl, float wsclR, float wsclH, out float dSil) {\n float lp = length(pj);\n if (uSolid > 0.5) { \n float d = lp - (uR * scl + 0.5 * uRingW * wsclR);\n dSil = d;\n return covFill(d, 2.0 * uR * scl, pen);\n }\n float occ = covBand(lp - uR * scl, uRingW * wsclR, pen); \n dSil = abs(lp - uR * scl) - 0.5 * uRingW * wsclR;\n float dh = lp - uHubR * scl; \n dSil = min(dSil, dh);\n occ = max(occ, covFill(dh, 2.0 * uHubR * scl, pen));\n for (int h = 0; h < 3; h++) { \n vec2 g = Rr * uHand[h].xy;\n vec2 A = g * (uHand[h].z * scl), ab = g * ((uHand[h].w - uHand[h].z) * scl);\n float tt = clamp(dot(pj - A, ab) / max(dot(ab, ab), 1e-8), 0.0, 1.0);\n float dd = length(pj - A - ab * tt);\n dSil = min(dSil, dd - 0.5 * uHandW[h] * wsclH);\n occ = max(occ, covBand(dd, uHandW[h] * wsclH, pen)); \n }\n if (uTicksOn > 0.5) { \n mat2 RrT = mat2(Rr[0][0], Rr[1][0], Rr[0][1], Rr[1][1]); \n vec2 pu = RrT * pj;\n \n float ta = 1.5707963268 + floor((atan(pu.y, pu.x) - 1.5707963268) / uTickStep + 0.5) * uTickStep;\n vec2 dir = vec2(cos(ta), sin(ta)); \n vec2 q = pu - uTickR * scl * dir; \n float dt, w;\n if (uTickShape < 0.5) { \n dt = length(q) - uTickDotR * scl; w = 2.0 * uTickDotR * scl;\n } else { \n vec2 ql = vec2(dot(q, vec2(-dir.y, dir.x)), dot(q, dir)); \n vec2 bd = abs(ql) - uTickSquareHW * scl;\n dt = length(max(bd, 0.0)) + min(max(bd.x, bd.y), 0.0);\n w = 2.0 * min(uTickSquareHW.x, uTickSquareHW.y) * scl; \n }\n dSil = min(dSil, dt);\n occ = max(occ, covFill(dt, w, pen));\n }\n return occ;\n }\n\n float shLitV = 1.0; \n float shPenV = 0.0; \n float shHgtV = 0.0; \n float shIntV = 0.0; \n\n void shShadow() {\n float T = 1.0, oSum = 0.0, hSum = 0.0, pSum = 0.0, innMax = 0.0;\n for (int i = 0; i < ${SHADOW_MAX}; i++) {\n if (i >= uClkCount) break;\n vec4 ck = uClk[i];\n float dCH = uCH * (ck.w - 1.0); \n vec2 q = vQ - uQC0 - uKx * ck.x - uKv * dCH; \n if (dot(q, q) > uCullR2) continue; \n vec2 p = uMinv * q; \n float t0 = max(uT0 + uTx * ck.x + dot(uTuv, p) + uTuv.y * dCH, 0.0); \n float base = min(t0 * uTanSun, uMaxBlur); \n \n \n \n float kLen = min(uK1 * base, uMaxBlur);\n mat2 Rr = mat2(ck.y, ck.z, -ck.z, ck.y); \n float wsclR = mix(1.0, ck.w, uStrokeScaleR); \n float wsclH = mix(1.0, ck.w, uStrokeScaleH); \n \n \n \n float occ = 0.0, wsum = 0.0, dSil = 1e9, dTap;\n for (int j = 0; j < ${SUN_TAPS}; j++) {\n float xi = (float(j) + 0.5) / ${SUN_TAPS.toFixed(1)} * 2.0 - 1.0;\n float c = sqrt(max(1.0 - xi * xi, 1e-4));\n vec2 pj = p + uKDir * (kLen * xi);\n float pen = max(2.0 * uK2 * base * c, uAAp);\n occ += c * clockCov(pj, pen, Rr, ck.w, wsclR, wsclH, dTap);\n if (abs(xi) < 2.0 / ${SUN_TAPS.toFixed(1)}) dSil = min(dSil, dTap); \n wsum += c;\n }\n occ = clamp(occ / wsum, 0.0, 1.0);\n occ = pow(max(occ, 1e-7), 1.0 / (1.0 + 2.0 * uFadeKeep)); \n \n innMax = max(innMax, -dSil / max(uShBand + base * uShEdgeScale, 1e-4));\n T *= 1.0 - occ; \n oSum += occ; hSum += occ * t0; pSum += occ * base;\n }\n shLitV = mix(1.0, T, uShAmp); \n shHgtV = hSum / max(oSum, 1e-4);\n shPenV = pSum / max(oSum, 1e-4);\n float inn = clamp(innMax, 0.0, 1.0);\n shIntV = inn * inn * (3.0 - 2.0 * inn);\n }\n\n void main() {\n shShadow(); \n \n \n vec2 sp = vQ * uNoiseScale + vec2(0.9, -0.6) * (shHgtV * uShNoiseLift);\n sp += (vec2(shFbm(sp*0.6 + 3.1), shFbm(sp*0.6 - 7.7)) - 0.5) * uShNoiseWarp;\n float n1 = shFbm(sp + uShTime*vec2(0.05, 0.013));\n float n2 = shFbm(sp*1.7 + 13.7 - uShTime*vec2(0.032, 0.021));\n float inAmt = uHueAmt * shIntV; \n vec3 shCol = uColor;\n shCol = mix(shCol, uHueA, inAmt * smoothstep(0.5 - uShHueSoft, 0.5 + uShHueSoft, n1));\n shCol = mix(shCol, uHueB, inAmt * smoothstep(0.6 - uShHueSoft, 0.6 + uShHueSoft, n2));\n \n \n \n float shAmt = uOpacity * (1.0 - shLitV);\n vec3 outC = mix(vec3(1.0), shCol, shAmt);\n \n \n outC = clamp(outC, 0.0, 1.0);\n outC = mix(outC * 12.92, 1.055 * pow(outC, vec3(1.0 / 2.4)) - 0.055, step(vec3(0.0031308), outC));\n gl_FragColor = vec4(outC, 1.0);\n }`; function makeShadowCatcherMat() { const mat = new THREE.ShaderMaterial({ vertexShader: shadowCatcherVert, fragmentShader: shadowCatcherFrag, transparent: true, depthWrite: false, blending: THREE.MultiplyBlending, premultipliedAlpha: true, uniforms: { uColor: { value: shadowBaseColor }, uOpacity: { value: .4 }, uHueA: { value: shadowHueA }, uHueB: { value: shadowHueB }, uHueAmt: { value: SHADOW_TINT.hueAmt }, uNoiseScale: { value: SHADOW_TINT.scale }, uShTime: { value: 0 }, uShBand: { value: SHADOW_TINT.edge }, uShEdgeScale: { value: SHADOW_TINT.edgeScale }, uShNoiseLift: { value: SHADOW_TINT.noiseLift }, uShNoiseWarp: { value: SHADOW_TINT.noiseWarp }, uShHueSoft: { value: SHADOW_TINT.hueSoft }, uTanSun: { value: 0 }, uMaxBlur: { value: SHADOW_TINT.maxBlur }, uAAp: { value: .003 }, uShAmp: { value: 0 }, uFadeKeep: { value: SHADOW_TINT.fadeKeep }, uClk: { value: Array.from({ length: SHADOW_MAX }, () => new THREE.Vector4) }, uClkCount: { value: 0 }, uQC0: { value: new THREE.Vector2 }, uKx: { value: new THREE.Vector2 }, uKv: { value: new THREE.Vector2 }, uCH: { value: 0 }, uMinv: { value: new Float32Array([ 1, 0, 0, 1 ]) }, uKDir: { value: new THREE.Vector2(1, 0) }, uK1: { value: 1 }, uK2: { value: 1 }, uT0: { value: 0 }, uTx: { value: 0 }, uTuv: { value: new THREE.Vector2 }, uR: { value: CFG.CLOCK_RADIUS }, uRingW: { value: CFG.RING_WIDTH }, uHubR: { value: CFG.HUB.r }, uCullR2: { value: 100 }, uHand: { value: [ new THREE.Vector4, new THREE.Vector4, new THREE.Vector4 ] }, uHandW: { value: new THREE.Vector3 }, uSolid: { value: 0 }, uStrokeScaleR: { value: CFG.STROKE_SCALE_RING }, uStrokeScaleH: { value: CFG.STROKE_SCALE_HAND }, uTickR: { value: CFG.CLOCK_RADIUS * CFG.TICKS.radius }, uTicksOn: { value: 0 }, uTickShape: { value: 0 }, uTickStep: { value: Math.PI * 2 / CFG.TICKS.count }, uTickDotR: { value: CFG.TICKS.dotR }, uTickSquareHW: { value: new THREE.Vector2(CFG.TICKS.squareW, CFG.TICKS.squareH) } } }); mat.opacity = .4; mat.color = shadowBaseColor; return mat; } const groundMat = makeShadowCatcherMat(); const wallMat = makeShadowCatcherMat(); const ground = new THREE.Mesh(new THREE.PlaneGeometry(CFG.GROUND_SIZE, CFG.GROUND_SIZE), groundMat); ground.rotation.x = -Math.PI / 2; ground.position.y = CFG.GROUND_Y; scene.add(ground); const wall = new THREE.Mesh(new THREE.PlaneGeometry(CFG.GROUND_SIZE, CFG.GROUND_SIZE), wallMat); wall.visible = false; stage.add(wall); const clockMat = new THREE.MeshBasicMaterial({ color: CFG.CLOCK_COLOR, side: THREE.DoubleSide }); const viewRect = { x: 0, y: 0, w: 2, h: 2 }; const strokeF = (s, k) => (1 + k * (s - 1)) / s; function applyClockGeoms(p) { const s = p.s || 1; const fR = strokeF(s, CFG.STROKE_SCALE_RING), fH = strokeF(s, CFG.STROKE_SCALE_HAND); const floorW = 2 * CFG.ORTHO_WIDTH / Math.max(1, viewRect.w * renderer.getPixelRatio()); const ringW = Math.max(CFG.RING_WIDTH * fR, floorW / s); const olds = [ p.ring.geometry, ...Object.keys(CFG.HANDS).map(n => p.hands[n].geometry) ]; p.ring.geometry = new THREE.RingGeometry(CFG.CLOCK_RADIUS - ringW / 2, CFG.CLOCK_RADIUS + ringW / 2, CFG.RING_SEGMENTS); for (const name of Object.keys(CFG.HANDS)) { const def = CFG.HANDS[name]; const handW = Math.max(def.w * fH, floorW / s); const geo = new THREE.PlaneGeometry(handW, def.l); geo.translate(0, def.l / 2 - (def.drop || 0), 0); p.hands[name].geometry = geo; p.hands[name].position.z = def.z; } p._geomF = fR + fH * 1e4; for (const g of olds) if (g) g.dispose(); } function rebuildRings() { for (const p of pool) applyClockGeoms(p); } function makeHubGeo() { return new THREE.CircleGeometry(CFG.HUB.r, 32); } let hubGeo = makeHubGeo(); function makeTicksGeo() { const R = CFG.CLOCK_RADIUS * CFG.TICKS.radius; const n = CFG.TICKS.count, sq = CFG.TICKS.shape === "square"; const v = []; for (let k = 0; k < n; k++) { const ang = Math.PI / 2 + k * (Math.PI * 2 / n); const cx = R * Math.cos(ang), cy = R * Math.sin(ang); if (sq) { const hw = CFG.TICKS.squareW, hh = CFG.TICKS.squareH; const rx = Math.cos(ang), ry = Math.sin(ang); const tx = -ry, ty = rx; const P = (sw, sh) => [ cx + sw * hw * tx + sh * hh * rx, cy + sw * hw * ty + sh * hh * ry ]; const a = P(-1, -1), b = P(1, -1), c = P(1, 1), d = P(-1, 1); v.push(a[0], a[1], 0, b[0], b[1], 0, c[0], c[1], 0, a[0], a[1], 0, c[0], c[1], 0, d[0], d[1], 0); } else { const r = CFG.TICKS.dotR, SEG = 12; for (let s = 0; s < SEG; s++) { const a0 = s / SEG * Math.PI * 2, a1 = (s + 1) / SEG * Math.PI * 2; v.push(cx, cy, 0, cx + r * Math.cos(a0), cy + r * Math.sin(a0), 0, cx + r * Math.cos(a1), cy + r * Math.sin(a1), 0); } } } const g = new THREE.BufferGeometry; g.setAttribute("position", new THREE.Float32BufferAttribute(v, 3)); return g; } let ticksGeo = makeTicksGeo(); function makeClockTemplate() { const group = new THREE.Group; const tmpl = new THREE.Group; tmpl.rotation.x = -Math.PI / 2; group.add(tmpl); const ring = new THREE.Mesh(new THREE.BufferGeometry, clockMat); tmpl.add(ring); const hub = new THREE.Mesh(hubGeo, clockMat); hub.position.z = CFG.HUB.z; tmpl.add(hub); const ticks = new THREE.Mesh(ticksGeo, clockMat); ticks.position.z = .006; ticks.visible = CFG.TICKS.on; tmpl.add(ticks); const hands = {}; for (const name of Object.keys(CFG.HANDS)) { const hand = new THREE.Mesh(new THREE.BufferGeometry, clockMat); hand.position.z = CFG.HANDS[name].z; tmpl.add(hand); hands[name] = hand; } return { group: group, tmpl: tmpl, hands: hands, ring: ring, hub: hub, ticks: ticks }; } function rebuildHands() { for (const p of pool) applyClockGeoms(p); } function rebuildHub() { const old = hubGeo; hubGeo = makeHubGeo(); for (const p of pool) { p.hub.geometry = hubGeo; p.hub.position.z = CFG.HUB.z; } old.dispose(); } function rebuildTicks() { const old = ticksGeo; ticksGeo = makeTicksGeo(); for (const p of pool) { p.ticks.geometry = ticksGeo; p.ticks.visible = CFG.TICKS.on; } old.dispose(); } const pool = []; const active = []; for (let i = 0; i < CFG.MAX_CLOCKS; i++) { const c = makeClockTemplate(); c.group.visible = false; stage.add(c.group); pool.push({ group: c.group, tmpl: c.tmpl, hands: c.hands, ring: c.ring, hub: c.hub, ticks: c.ticks, id: i, alive: false, x: 0, v: 0, rot0: 0, s: 1 }); applyClockGeoms(pool[i]); } function applyView() { const upright = VIEW.mode !== "plan"; for (const p of pool) { p.tmpl.rotation.x = upright ? 0 : -Math.PI / 2; p.group.position.y = upright ? CFG.GROUND_Y + CFG.CLOCK_RADIUS * p.s : 0; p.group.rotation.set(0, 0, 0); } wall.visible = VIEW.mode === "wall"; wall.position.z = -VIEW.wallGap; stage.rotation.y = VIEW.realOrient ? (180 - VIEW.wallAzimuth) * (Math.PI / 180) : 0; if (upright) camera.layers.disable(LINE_LAYER); else camera.layers.enable(LINE_LAYER); camFront.layers.enable(LINE_LAYER); setCameraAspect(lastAspect); } function makeNoise01(seed, interval) { const rnd = i => { const x = Math.sin(i * 127.1 + seed * 311.7) * 43758.5453; return x - Math.floor(x); }; return t => { const u = t / interval, i = Math.floor(u), f = u - i; const k = f * f * (3 - 2 * f); return rnd(i) * (1 - k) + rnd(i + 1) * k; }; } const birthNoise = makeNoise01(102, 2); let spawnAcc = 0; function coTime(x0, v, s, q, sep) { const D = CFG.CLOCK_RADIUS * (s + q.s) + sep; const life = (x, vv) => ((vv > 0 ? CFG.KILL_X : CFG.SPAWN_X) - x) / vv; const tEnd = Math.min(life(x0, v), life(q.x, q.v)); if (tEnd <= 0) return 0; const gap = q.x - x0, dv = v - q.v; if (Math.abs(dv) < 1e-6) return Math.abs(gap) < D ? tEnd : 0; const tA = (gap - D) / dv, tB = (gap + D) / dv; return Math.max(0, Math.min(Math.max(tA, tB), tEnd) - Math.max(Math.min(tA, tB), 0)); } function spawnClock() { if (active.length >= CFG.MAX_CLOCKS) return false; const p = pool.find(p => !p.alive); if (!p) return false; const rev = Math.random() < CFG.REVERSE_PROB; const x0 = rev ? CFG.KILL_X : CFG.SPAWN_X; const lo = Math.min(CFG.SPEED_MIN, CFG.SPEED_MAX); const hi = Math.max(CFG.SPEED_MIN, CFG.SPEED_MAX); const drawV = sc => (lo + Math.random() * (hi - lo)) * Math.pow(sc, CFG.SIZE_SPEED) * (rev ? -1 : 1); const n = Math.round(CFG.SIZE_STEPS); const stepW = n > 1 ? (1 - CFG.SIZE_MIN) / (n - 1) : 0; const classOf = sc => Math.round((sc - CFG.SIZE_MIN) / stepW); const drawS = k => n > 1 ? Math.min(1, Math.max(CFG.SIZE_MIN, CFG.SIZE_MIN + stepW * k + (Math.random() - .5) * stepW * CFG.SIZE_JITTER)) : Math.min(1, CFG.SIZE_MIN + Math.random() * (1 - CFG.SIZE_MIN)); const pen = (sc, vc) => { let t = 0; for (const q of active) { if (CFG.DISTRIB_ON) t += Math.max(0, coTime(x0, vc, sc, q, CFG.DISTRIB_GAP) - CFG.DISTRIB_PASS); if (CFG.SIZE_SEP > 0 && n > 1 && classOf(q.s) === classOf(sc)) { t += Math.max(0, coTime(x0, vc, sc, q, CFG.SIZE_SEP) - CFG.DISTRIB_PASS); } } return t; }; let s = 1, v = 0, best = Infinity; let order = [ 0 ]; if (n > 1) { const cnt = new Array(n).fill(0); for (const q of active) { const c = classOf(q.s); if (c >= 0 && c < n) cnt[c]++; } order = [ ...Array(n).keys() ].map(k => [ cnt[k] + Math.random() * .99, k ]).sort((a, b) => a[0] - b[0]).map(e => e[1]); } outer: for (const k of order) { for (let c = 0; c < Math.max(1, CFG.DISTRIB_CAND); c++) { const sc = drawS(k), vc = drawV(sc), pc = pen(sc, vc); if (pc < best) { best = pc; s = sc; v = vc; } if (best <= 0) break outer; } } if (best > CFG.DISTRIB_MAXCO) return false; p.alive = true; p.x = x0; p.v = v; p.rot0 = Math.random() * Math.PI * 2; p.s = s; p.group.scale.setScalar(p.s); const geomKey = strokeF(s, CFG.STROKE_SCALE_RING) + strokeF(s, CFG.STROKE_SCALE_HAND) * 1e4; if (Math.abs(geomKey - p._geomF) > .001) applyClockGeoms(p); p.group.position.y = VIEW.mode !== "plan" ? CFG.GROUND_Y + CFG.CLOCK_RADIUS * p.s : 0; p.group.visible = true; active.push(p); return true; } const rollOf = p => p.rot0 - p.x / (CFG.CLOCK_RADIUS * Math.pow(p.s, 1 - CFG.ROLL_EQ)); function updateParticles(dt, tSec) { spawnAcc += birthNoise(tSec) * CFG.BIRTH_MAX * dt; spawnAcc = Math.min(spawnAcc, 2); while (spawnAcc >= 1) { if (!spawnClock()) break; spawnAcc -= 1; } for (let i = active.length - 1; i >= 0; i--) { const p = active[i]; p.x += p.v * dt; if (p.x > CFG.KILL_X || p.x < CFG.SPAWN_X) { p.alive = false; p.group.visible = false; active.splice(i, 1); continue; } p.group.position.x = p.x; const roll = rollOf(p); if (VIEW.mode === "plan") { p.group.rotation.y = roll; } else { p.group.rotation.z = roll; } } } const DEG = Math.PI / 180; const SEC_EASE = { sineInOut: t => -(Math.cos(Math.PI * t) - 1) / 2, cubicInOut: t => t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2, quartInOut: t => t < .5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2, quadOut: t => 1 - (1 - t) * (1 - t), cubicOut: t => 1 - Math.pow(1 - t, 3), quartOut: t => 1 - Math.pow(1 - t, 4), expoOut: t => t >= 1 ? 1 : 1 - Math.pow(2, -10 * t), circOut: t => Math.sqrt(1 - Math.pow(t - 1, 2)), quintIn: t => t * t * t * t * t, backIn: t => { const c1 = 1.70158, c3 = c1 + 1; return c3 * t * t * t - c1 * t * t; }, backOut: t => { const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); }, backInOut: t => { const c2 = 1.70158 * 1.525; return t < .5 ? Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2 : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2; }, elasticOut: t => t <= 0 ? 0 : t >= 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - .75) * (2 * Math.PI / 3)) + 1, bounceOut: t => { const n1 = 7.5625, d1 = 2.75; if (t < 1 / d1) return n1 * t * t; if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + .75; if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + .9375; return n1 * (t -= 2.625 / d1) * t + .984375; } }; function secondsValue(r) { const s = r.getSeconds(), f = r.getMilliseconds() / 1e3; const m = PARAMS.secMotion; if (m === "step" || m === false) return s; if (m === "smooth" || m === true) return s + f; const fn = SEC_EASE[m]; return fn ? s + fn(f) : s; } const handAngles = { hour: 0, min: 0, sec: 0 }; function applyHands(date, realDate) { const h = date.getHours(), m = date.getMinutes(); const r = realDate || date; const s = secondsValue(r); const aHour = -((h + m / 60) * 30) * DEG; const aMin = -(m * 6) * DEG; const aSec = -(s * 6) * DEG; handAngles.hour = aHour; handAngles.min = aMin; handAngles.sec = aSec; for (const p of pool) { if (!p.alive) continue; p.hands.hour.rotation.z = aHour; p.hands.min.rotation.z = aMin; p.hands.sec.rotation.z = aSec; } } const LINE_LAYER = 5; const THREAD = { enabled: true, pow: 2.2, eps: .05, thick: .005, haloW: .02, intensity: .25, reach: 8, bead: 1.5, beadR: .06, trail: 2, trailInterval: .12, trailOpacity: 1, trailGamma: .6 }; const threadCoreColor = new THREE.Color(16774104); const threadHaloColor = new THREE.Color(16756816); const threadTrailNew = new THREE.Color(16774104); const threadTrailMid = new THREE.Color(16743762); const threadTrailOld = new THREE.Color(8023984); const THREAD_MAX = 100; const threadTips = Array.from({ length: THREAD_MAX }, () => new THREE.Vector2); const threadMat = new THREE.ShaderMaterial({ uniforms: { uTips: { value: threadTips }, uCount: { value: 0 }, uPow: { value: THREAD.pow }, uEps: { value: THREAD.eps }, uThick: { value: THREAD.thick }, uHaloW: { value: THREAD.haloW }, uThreadAA: { value: 0 }, uIntensity: { value: THREAD.intensity }, uReach: { value: THREAD.reach }, uBead: { value: 0 }, uBeadR: { value: THREAD.beadR }, uLineAmp: { value: 1 }, uCore: { value: threadCoreColor }, uHalo: { value: threadHaloColor } }, vertexShader: `\n varying vec2 vP;\n void main() {\n vP = position.xy; \n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`, fragmentShader: `\n precision highp float;\n uniform vec2 uTips[${THREAD_MAX}];\n uniform int uCount;\n uniform float uPow, uEps, uThick, uHaloW, uThreadAA, uIntensity, uReach, uBead, uBeadR, uLineAmp;\n uniform vec3 uCore, uHalo;\n varying vec2 vP;\n void main() {\n float wsum = 0.0, vsum = 0.0, cov = 0.0, bead = 0.0;\n float w1sum = 0.0, v1sum = 0.0; \n for (int i = 0; i < ${THREAD_MAX}; i++) {\n if (i >= uCount) break;\n vec2 t = uTips[i];\n float dx = vP.x - t.x;\n float w = pow(dx*dx + uEps*uEps, -0.5*uPow); \n wsum += w; vsum += w * t.y;\n float g = -uPow * dx / (dx*dx + uEps*uEps); \n w1sum += w * g; v1sum += w * g * t.y;\n cov += exp(-dx*dx / (2.0*uReach*uReach)); \n vec2 d2 = vP - t;\n bead += exp(-dot(d2,d2) / (2.0*uBeadR*uBeadR)); \n }\n if (wsum <= 0.0) { gl_FragColor = vec4(0.0); return; }\n float vhat = vsum / wsum; \n \n \n float m = (v1sum - vhat * w1sum) / wsum; \n float d = (vP.y - vhat) / sqrt(1.0 + m*m); \n float fade = smoothstep(0.12, 0.5, cov); \n \n \n \n float tk = max(uThick, uThreadAA), hw = max(uHaloW, uThreadAA);\n float core = exp(-d*d / (2.0*tk*tk));\n float halo = exp(-d*d / (2.0*hw*hw));\n vec3 col = ((uCore * core + uHalo * halo * 0.55) * uLineAmp + uHalo * bead * uBead) * uIntensity * fade;\n gl_FragColor = vec4(col, 1.0); \n }`, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false, depthTest: true }); const threadQuad = new THREE.Mesh(new THREE.PlaneGeometry(60, 8), threadMat); threadQuad.frustumCulled = false; threadQuad.renderOrder = -1.5; threadQuad.layers.set(LINE_LAYER); stage.add(threadQuad); const threadBeadMat = new THREE.ShaderMaterial({ uniforms: { ...threadMat.uniforms, uBead: { value: THREAD.bead }, uLineAmp: { value: 0 } }, vertexShader: threadMat.vertexShader, fragmentShader: threadMat.fragmentShader, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false, depthTest: false }); const threadBeadQuad = new THREE.Mesh(threadQuad.geometry, threadBeadMat); threadBeadQuad.frustumCulled = false; threadBeadQuad.renderOrder = -1.4; threadBeadQuad.layers.set(LINE_LAYER); stage.add(threadBeadQuad); const THREAD_LAYER = 6; threadQuad.layers.enable(THREAD_LAYER); const threadAcc = [ 0, 1 ].map(() => new THREE.WebGLRenderTarget(2, 2, { depthBuffer: false, generateMipmaps: false, type: THREE.HalfFloatType, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter })); let threadAccIdx = 0; const threadFadeScene = new THREE.Scene; const threadFadeCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const threadFadeMat = new THREE.ShaderMaterial({ uniforms: { uPrev: { value: null }, uDecay: { value: 0 } }, depthTest: false, depthWrite: false, blending: THREE.NoBlending, vertexShader: `varying vec2 vUv; void main(){ vUv=uv; gl_Position=vec4(position.xy,0.0,1.0); }`, fragmentShader: `\n uniform sampler2D uPrev; uniform float uDecay; varying vec2 vUv;\n void main(){ gl_FragColor = texture2D(uPrev, vUv) * uDecay; }` }); const threadFadeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), threadFadeMat); threadFadeQuad.frustumCulled = false; threadFadeScene.add(threadFadeQuad); const threadDisplayMat = new THREE.ShaderMaterial({ uniforms: { uAcc: { value: null }, uGhost: { value: 1 }, uGamma: { value: 1 }, uPeak: { value: 1 }, uDecayNow: { value: 1 }, uNew: { value: threadTrailNew }, uMid: { value: threadTrailMid }, uOld: { value: threadTrailOld } }, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false, depthTest: true, vertexShader: `\n varying vec2 vS;\n void main(){ vec4 c = projectionMatrix*modelViewMatrix*vec4(position,1.0); gl_Position = c; vS = c.xy/c.w*0.5+0.5; }`, fragmentShader: `\n precision highp float;\n uniform sampler2D uAcc;\n uniform float uGhost, uGamma, uPeak, uDecayNow;\n uniform vec3 uNew, uMid, uOld;\n varying vec2 vS;\n void main(){\n \n \n \n \n vec3 a = max(texture2D(uAcc, vS).rgb, 0.0) * uDecayNow;\n \n float t = clamp(max(a.r, max(a.g, a.b)) / max(uPeak, 1e-6), 0.0, 1.0);\n \n \n float te = pow(t, uGamma);\n \n vec3 grad = mix(uOld, uMid, smoothstep(0.0, 0.5, te));\n grad = mix(grad, uNew, smoothstep(0.5, 1.0, te));\n \n \n \n \n gl_FragColor = vec4(grad * te * max(uPeak, 1e-6) * uGhost, 1.0);\n }` }); const threadDisplayQuad = new THREE.Mesh(threadQuad.geometry, threadDisplayMat); threadDisplayQuad.frustumCulled = false; threadDisplayQuad.renderOrder = -1.6; threadDisplayQuad.layers.set(LINE_LAYER); stage.add(threadDisplayQuad); const _thrClearColor = new THREE.Color; let threadTrailAcc = Infinity; let threadTrailWasOn = false; function clearThreadTrail() { const ca = renderer.getClearAlpha(); renderer.getClearColor(_thrClearColor); renderer.setClearColor(0, 0); for (const rt of threadAcc) { renderer.setRenderTarget(rt); renderer.clear(); } renderer.setRenderTarget(null); renderer.setClearColor(_thrClearColor, ca); threadTrailAcc = Infinity; } function renderThreadTrail(dt) { threadTrailAcc += dt; threadDisplayMat.uniforms.uDecayNow.value = THREAD.trail > .001 && threadTrailAcc !== Infinity ? Math.exp(-threadTrailAcc * 3 / THREAD.trail) : 1; if (threadTrailAcc < THREAD.trailInterval) return; const elapsed = threadTrailAcc; threadTrailAcc = 0; const pr = renderer.getPixelRatio(); const w = Math.max(2, Math.round(viewRect.w * pr)), h = Math.max(2, Math.round(viewRect.h * pr)); for (const rt of threadAcc) if (rt.width !== w || rt.height !== h) rt.setSize(w, h); const prev = threadAcc[threadAccIdx], next = threadAcc[1 - threadAccIdx]; threadFadeMat.uniforms.uPrev.value = prev.texture; threadFadeMat.uniforms.uDecay.value = Math.exp(-elapsed * 3 / THREAD.trail); renderer.setRenderTarget(next); renderer.render(threadFadeScene, threadFadeCam); { const cam = VIEW.mode !== "plan" ? camFront : camera; const saveMask = cam.layers.mask, saveBg = scene.background, saveAuto = renderer.autoClear; threadMat.blending = THREE.CustomBlending; threadMat.blendEquation = THREE.MaxEquation; threadMat.blendSrc = THREE.OneFactor; threadMat.blendDst = THREE.OneFactor; cam.layers.set(THREAD_LAYER); scene.background = null; renderer.autoClear = false; renderer.render(scene, cam); renderer.autoClear = saveAuto; scene.background = saveBg; cam.layers.mask = saveMask; threadMat.blending = THREE.AdditiveBlending; } renderer.setRenderTarget(null); threadDisplayMat.uniforms.uAcc.value = next.texture; threadDisplayMat.uniforms.uGhost.value = THREAD.trailOpacity; threadDisplayMat.uniforms.uGamma.value = THREAD.trailGamma; threadDisplayMat.uniforms.uPeak.value = THREAD.intensity * Math.max(threadCoreColor.r + .55 * threadHaloColor.r, threadCoreColor.g + .55 * threadHaloColor.g, threadCoreColor.b + .55 * threadHaloColor.b); threadAccIdx = 1 - threadAccIdx; threadDisplayMat.uniforms.uDecayNow.value = 1; } function updateSecThread(now, realDate, dt) { threadQuad.visible = THREAD.enabled; threadBeadQuad.visible = THREAD.enabled && THREAD.bead > .001; const trailOn = THREAD.enabled && THREAD.trail > .001; threadDisplayQuad.visible = trailOn; if (!THREAD.enabled) { threadTrailWasOn = false; return; } if (trailOn && !threadTrailWasOn) clearThreadTrail(); threadTrailWasOn = trailOn; const upright = VIEW.mode !== "plan"; if (upright) { threadQuad.rotation.set(0, 0, 0); threadQuad.position.set(0, 0, -.12); } else { threadQuad.rotation.set(-Math.PI / 2, 0, 0); threadQuad.position.set(0, -.06, 0); } threadDisplayQuad.rotation.copy(threadQuad.rotation); threadDisplayQuad.position.copy(threadQuad.position); threadBeadQuad.rotation.copy(threadQuad.rotation); threadBeadQuad.position.copy(threadQuad.position); const r = realDate || now; const aSec = -(secondsValue(r) * 6) * DEG; const l = CFG.HANDS.sec.l - (CFG.HANDS.sec.drop || 0); const n = Math.min(active.length, THREAD_MAX); for (let i = 0; i < n; i++) { const p = active[i]; const li = l * p.s; const ang = aSec + rollOf(p); threadTips[i].set(p.x - li * Math.sin(ang), upright ? CFG.GROUND_Y + CFG.CLOCK_RADIUS * p.s + li * Math.cos(ang) : li * Math.cos(ang)); } const u = threadMat.uniforms; u.uCount.value = n; u.uPow.value = THREAD.pow; u.uEps.value = THREAD.eps; u.uThick.value = THREAD.thick; u.uHaloW.value = THREAD.haloW; u.uThreadAA.value = .8 * CFG.ORTHO_WIDTH / Math.max(1, viewRect.w * renderer.getPixelRatio()); u.uIntensity.value = THREAD.intensity; u.uReach.value = THREAD.reach; u.uBeadR.value = THREAD.beadR; threadBeadMat.uniforms.uBead.value = THREAD.bead; if (trailOn) renderThreadTrail(dt); } function updateSun(date) { const pos = SunCalc.getPosition(date, LOCATION.lat, LOCATION.lng); const alt = pos.altitude * DEG; const az = pos.azimuth * DEG; const ca = Math.cos(alt); sun.position.set(ca * Math.sin(az) * CFG.SUN_RADIUS, Math.sin(alt) * CFG.SUN_RADIUS, -ca * Math.cos(az) * CFG.SUN_RADIUS); sunInfo.altDeg = pos.altitude; sunInfo.azDeg = (pos.azimuth % 360 + 360) % 360; computeEnv(sunInfo.altDeg); } const _sh = { L: new THREE.Vector3, e1: new THREE.Vector3, e2: new THREE.Vector3, n: new THREE.Vector3, w0: new THREE.Vector3, u: new THREE.Vector3, v: new THREE.Vector3, A: new THREE.Vector3, B: new THREE.Vector3, ncp: new THREE.Vector3 }; function smooth01(a, b, x) { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); } function updateShadowCatcher(mat, mesh) { const U = mat.uniforms; const wxGain = Math.max(0, 1 - ENV.cloudFxSh * SHADOW_TINT.cloudFade - ENV.rain * SHADOW_TINT.rainFade); U.uOpacity.value = groundMat.opacity * wxGain; U.uShTime.value = shadowTime; U.uHueAmt.value = SHADOW_TINT.hueAmt; U.uNoiseScale.value = SHADOW_TINT.scale; U.uShBand.value = SHADOW_TINT.edge; U.uShEdgeScale.value = SHADOW_TINT.edgeScale; U.uShNoiseLift.value = SHADOW_TINT.noiseLift; U.uShNoiseWarp.value = SHADOW_TINT.noiseWarp; U.uShHueSoft.value = SHADOW_TINT.hueSoft; mesh.updateWorldMatrix(true, false); const me = mesh.matrixWorld.elements; _sh.e1.set(me[0], me[1], me[2]).normalize(); _sh.e2.set(me[4], me[5], me[6]).normalize(); _sh.n.crossVectors(_sh.e1, _sh.e2); _sh.L.copy(sun.position).normalize(); const Ln = _sh.L.dot(_sh.n); U.uShAmp.value = smooth01(.02, .08, Ln); if (U.uShAmp.value <= 0 || wxGain <= 0) { U.uClkCount.value = 0; return; } const LnS = Math.max(Ln, .03); const Le1 = _sh.L.dot(_sh.e1), Le2 = _sh.L.dot(_sh.e2); const proj2x = w => w.dot(_sh.e1) - w.dot(_sh.n) / LnS * Le1; const proj2y = w => w.dot(_sh.e2) - w.dot(_sh.n) / LnS * Le2; const phi = stage.rotation.y, cph = Math.cos(phi), sph = Math.sin(phi); const upright = VIEW.mode !== "plan"; _sh.u.set(cph, 0, -sph); if (upright) _sh.v.set(0, 1, 0); else _sh.v.set(-sph, 0, -cph); const y0 = upright ? CFG.GROUND_Y + CFG.CLOCK_RADIUS : 0; const me12 = me[12], me13 = me[13], me14 = me[14]; _sh.w0.set(-me12, y0 - me13, -me14); const Ux = proj2x(_sh.u), Uy = proj2y(_sh.u); const Vx = proj2x(_sh.v), Vy = proj2y(_sh.v); U.uQC0.value.set(proj2x(_sh.w0), proj2y(_sh.w0)); U.uKx.value.set(Ux, Uy); U.uKv.value.set(Vx, Vy); U.uCH.value = upright ? CFG.CLOCK_RADIUS : 0; const det = Ux * Vy - Uy * Vx; const detS = (det < 0 ? -1 : 1) * Math.max(Math.abs(det), .001); const mi = U.uMinv.value; mi[0] = Vy / detS; mi[1] = -Uy / detS; mi[2] = -Vx / detS; mi[3] = Ux / detS; U.uT0.value = _sh.w0.dot(_sh.n) / LnS; U.uTx.value = _sh.u.dot(_sh.n) / LnS; U.uTuv.value.set(_sh.u.dot(_sh.n) / LnS, _sh.v.dot(_sh.n) / LnS); _sh.A.crossVectors(_sh.L, _sh.n); if (_sh.A.lengthSq() < 1e-6) _sh.A.set(1, 0, 0); else _sh.A.normalize(); _sh.B.crossVectors(_sh.L, _sh.A); _sh.ncp.crossVectors(_sh.u, _sh.v); const Lc = _sh.L.dot(_sh.ncp); const LcS = (Lc < 0 ? -1 : 1) * Math.max(Math.abs(Lc), .025); const paraX = w => w.dot(_sh.u) - _sh.L.dot(_sh.u) * (w.dot(_sh.ncp) / LcS); const paraY = w => w.dot(_sh.v) - _sh.L.dot(_sh.v) * (w.dot(_sh.ncp) / LcS); const Sa1 = paraX(_sh.A), Sa2 = paraY(_sh.A), Sb1 = paraX(_sh.B), Sb2 = paraY(_sh.B); const r11 = Sa1 * Sa1 + Sb1 * Sb1, r22 = Sa2 * Sa2 + Sb2 * Sb2, r12 = Sa1 * Sa2 + Sb1 * Sb2; const mid = (r11 + r22) / 2, dif = Math.sqrt(((r11 - r22) / 2) ** 2 + r12 * r12); const k1 = Math.sqrt(Math.max(mid + dif, 1e-8)), k2 = Math.sqrt(Math.max(mid - dif, 1e-8)); let kdx = r12, kdy = mid + dif - r11; if (Math.abs(kdx) + Math.abs(kdy) < 1e-8) { kdx = 1; kdy = 0; } const kdl = Math.hypot(kdx, kdy); U.uKDir.value.set(kdx / kdl, kdy / kdl); U.uK1.value = Math.min(k1, 40); U.uK2.value = Math.max(k2, .001); const g11 = Ux * Ux + Uy * Uy, g22 = Vx * Vx + Vy * Vy, g12 = Ux * Vx + Uy * Vy; const sMax = Math.sqrt((g11 + g22) / 2 + Math.sqrt(((g11 - g22) / 2) ** 2 + g12 * g12)); const cullR = (CFG.CLOCK_RADIUS + CFG.RING_WIDTH + SHADOW_TINT.maxBlur) * sMax + .3; U.uCullR2.value = cullR * cullR; const cnt = Math.min(active.length, SHADOW_MAX); U.uClkCount.value = cnt; for (let i = 0; i < cnt; i++) { const p = active[i]; const roll = rollOf(p); U.uClk.value[i].set(p.x, Math.cos(roll), Math.sin(roll), p.s); } const hw = U.uHandW.value, HN = [ "hour", "min", "sec" ]; for (let h = 0; h < 3; h++) { const def = CFG.HANDS[HN[h]], a = handAngles[HN[h]], drop = def.drop || 0; U.uHand.value[h].set(-Math.sin(a), Math.cos(a), -drop, def.l - drop); hw.setComponent(h, def.w); } U.uR.value = CFG.CLOCK_RADIUS; U.uRingW.value = CFG.RING_WIDTH; U.uHubR.value = CFG.HUB.r; U.uStrokeScaleR.value = CFG.STROKE_SCALE_RING; U.uStrokeScaleH.value = CFG.STROKE_SCALE_HAND; U.uTickR.value = CFG.CLOCK_RADIUS * CFG.TICKS.radius; U.uTicksOn.value = CFG.TICKS.on ? 1 : 0; U.uTickShape.value = CFG.TICKS.shape === "square" ? 1 : 0; U.uTickStep.value = Math.PI * 2 / CFG.TICKS.count; U.uTickDotR.value = CFG.TICKS.dotR; U.uTickSquareHW.value.set(CFG.TICKS.squareW, CFG.TICKS.squareH); U.uTanSun.value = Math.tan(SHADOW_TINT.sunSize * (1 + ENV.cloudFxSh * SHADOW_TINT.cloudBlur) * DEG); U.uMaxBlur.value = SHADOW_TINT.maxBlur; U.uFadeKeep.value = SHADOW_TINT.fadeKeep; U.uSolid.value = VIEW.solidShadow ? 1 : 0; const vpxW = viewRect.w * renderer.getPixelRatio(); const sMin = Math.sqrt(Math.max((g11 + g22) / 2 - Math.sqrt(((g11 - g22) / 2) ** 2 + g12 * g12), 1e-6)); U.uAAp.value = 1.5 * CFG.ORTHO_WIDTH / Math.max(1, vpxW) / sMin; } const WMO_LABEL = { 0: "快晴", 1: "晴れ", 2: "薄曇り", 3: "曇り", 45: "霧", 48: "霧(着氷)", 51: "霧雨(弱)", 53: "霧雨", 55: "霧雨(強)", 56: "着氷性霧雨", 57: "着氷性霧雨(強)", 61: "雨(弱)", 63: "雨", 65: "雨(強)", 66: "着氷性の雨", 67: "着氷性の雨(強)", 71: "雪(弱)", 73: "雪", 75: "雪(強)", 77: "霧雪", 80: "にわか雨(弱)", 81: "にわか雨", 82: "にわか雨(強)", 85: "にわか雪", 86: "にわか雪(強)", 95: "雷雨", 96: "雷雨(雹)", 99: "雷雨(強い雹)" }; const weatherInfo = { label: "取得中…", code: null, tempC: null, cloudPct: null, precipMm: null, fetchedAt: null }; async function fetchWeather() { const url = "https://api.open-meteo.com/v1/forecast" + `?latitude=${LOCATION.lat}&longitude=${LOCATION.lng}` + "¤t=weather_code,temperature_2m,cloud_cover,precipitation"; try { const res = await fetch(url); if (!res.ok) throw new Error("HTTP " + res.status); const cur = (await res.json()).current; const first = !weatherInfo.fetchedAt; weatherInfo.code = cur.weather_code; weatherInfo.tempC = cur.temperature_2m; weatherInfo.cloudPct = cur.cloud_cover; weatherInfo.precipMm = cur.precipitation; weatherInfo.label = WMO_LABEL[cur.weather_code] ?? "code " + cur.weather_code; weatherInfo.fetchedAt = new Date; if (first && ENV.weather === "auto") { ENV.cloud = weatherInfo.cloudPct != null ? weatherInfo.cloudPct / 100 : 0; ENV.rain = weatherInfo.precipMm != null ? Math.min(1, weatherInfo.precipMm / 2) : 0; } } catch (e) { weatherInfo.label = "取得失敗 (" + e.message + ")"; } } fetchWeather(); setInterval(fetchWeather, 10 * 60 * 1e3); let timeScale = 1; let timeOffsetMs = 0; let simMs = Date.now(); function tickTime(dt) { if (timeScale === 1) simMs = Date.now() + timeOffsetMs; else simMs += dt * 1e3 * timeScale; } function getNow() { return new Date(simMs); } function setTimeScale(s) { if (s === 1) timeOffsetMs = simMs - Date.now(); timeScale = s; } function shiftTime(hours) { simMs += hours * 3600 * 1e3; timeOffsetMs += hours * 3600 * 1e3; } function resetTime() { timeScale = 1; timeOffsetMs = 0; simMs = Date.now(); } function setSimDate(month, day, hour, minute) { const target = new Date(new Date(simMs).getFullYear(), month - 1, day, hour, minute, 0, 0); const delta = target.getTime() - simMs; simMs += delta; timeOffsetMs += delta; } const TARGET_ASPECT = 8950 / 1080; const _vrSize = new THREE.Vector2; function layoutViewRect() { const s = renderer.getSize(_vrSize); let w = s.x, h = w / TARGET_ASPECT; if (h > s.y) { h = s.y; w = h * TARGET_ASPECT; } viewRect.x = (s.x - w) / 2; viewRect.y = (s.y - h) / 2; viewRect.w = w; viewRect.h = h; bgUniforms.uBand.value.set(s.y > 0 ? viewRect.y / s.y : 0, s.y > 0 ? (viewRect.y + viewRect.h) / s.y : 1); } function applySize() { if (window.__scDebugLayout) { window.__scDebugLayout(); return; } renderer.setSize(window.innerWidth, window.innerHeight); setCameraAspect(TARGET_ASPECT); const canvas = renderer.domElement; canvas.style.position = "absolute"; canvas.style.left = "0px"; canvas.style.top = "0px"; } window.addEventListener("resize", () => { applySize(); layoutViewRect(); updateSkyRTSize(); rebuildRings(); }); applySize(); layoutViewRect(); rebuildRings(); updateSkyRTSize(); applyView(); const WARMUP_S = 120; if (new URLSearchParams(location.search).get("ff") === null) { for (let s = 0; s < WARMUP_S; s += .05) updateParticles(.05, s); } const DEV = { hooks: [], scene: scene, stage: stage, renderer: renderer, camera: camera, camFront: camFront, sun: sun, ground: ground, wall: wall, pool: pool, active: active, sunInfo: sunInfo, weatherInfo: weatherInfo, clockMat: clockMat, SHADOW_TINT: SHADOW_TINT, shadowHueA: shadowHueA, shadowHueB: shadowHueB, THREAD: THREAD, threadCoreColor: threadCoreColor, threadHaloColor: threadHaloColor, threadTrailNew: threadTrailNew, threadTrailMid: threadTrailMid, threadTrailOld: threadTrailOld, ENV: ENV, ENV_KEYS: ENV_KEYS, envColorsAt: envColorsAt, clockContrastAdjust: clockContrastAdjust, LOCATION: LOCATION, CFG: CFG, PARAMS: PARAMS, VIEW: VIEW, VIEW_MODES: VIEW_MODES, TARGET_ASPECT: TARGET_ASPECT, getNow: getNow, setTimeScale: setTimeScale, getTimeScale: () => timeScale, shiftTime: shiftTime, resetTime: resetTime, setSimDate: setSimDate, getClockL: () => ({ cur: clockLCur, target: clockLTarget }), setPaused: setPaused, isPaused: () => paused, applySize: applySize, setCameraAspect: setCameraAspect, updateParticles: updateParticles, rebuildRings: rebuildRings, rebuildHands: rebuildHands, rebuildHub: rebuildHub, rebuildTicks: rebuildTicks, applyView: applyView, computeEnv: computeEnv, updateSkyRTSize: updateSkyRTSize }; window.__signageClock = DEV; let lastT = performance.now(); let shadowTime = 0; let paused = false; let lastNow = new Date; function setPaused(p) { p = !!p; if (p === paused) return; paused = p; if (!paused) lastT = performance.now(); } function animate() { requestAnimationFrame(animate); if (paused) { for (const fn of DEV.hooks) fn(lastNow, 0); return; } layoutViewRect(); const t = performance.now(); let dt = (t - lastT) / 1e3; if (!(dt > 0)) dt = 1 / 60; dt = Math.min(dt, .1); lastT = t; tickTime(dt); const now = getNow(); lastNow = now; const realNow = new Date; updateParticles(dt, t / 1e3); applyHands(now, realNow); updateSecThread(now, realNow, dt); updateSun(now); renderer.setRenderTarget(skyRT); renderer.render(skyScene, skyCam); renderer.setRenderTarget(null); shadowTime += dt * SHADOW_TINT.speed; updateShadowCatcher(groundMat, ground); if (VIEW.mode === "wall") updateShadowCatcher(wallMat, wall); renderer.setScissorTest(true); renderer.setViewport(0, 0, _vrSize.x, _vrSize.y); renderer.setScissor(0, 0, _vrSize.x, _vrSize.y); renderer.render(bgScene, skyCam); renderer.setViewport(viewRect.x, viewRect.y, viewRect.w, viewRect.h); renderer.setScissor(viewRect.x, viewRect.y, viewRect.w, viewRect.h); if (VIEW.mode === "plan") { scene.background = skyRT.texture; renderer.render(scene, camera); } else if (VIEW.mode === "wall") { scene.background = skyRT.texture; renderer.render(scene, camFront); } else { scene.background = null; renderer.autoClear = false; const ch = _vrSize.y; const Sband = 2 * VIEW.seam - 1; const halfHb = CFG.ORTHO_WIDTH / 2 / TARGET_ASPECT; const yg = viewRect.y + (1 - Sband) / 2 * viewRect.h; const halfHf = halfHb * ch / viewRect.h; const Sf = 1 - 2 * yg / ch; const a = VIEW.shadowTilt * DEG, D = 14; const uy = Math.cos(a), uz = -Math.sin(a), fy = -Math.sin(a), fz = -Math.cos(a); const _ct = camera.top, _cb = camera.bottom, _cpx = camera.position.x, _cpy = camera.position.y, _cpz = camera.position.z; camera.top = halfHf; camera.bottom = -halfHf; camera.position.set(0, CFG.GROUND_Y - uy * (Sf * halfHf) - fy * D, -uz * (Sf * halfHf) - fz * D); camera.updateProjectionMatrix(); renderer.setViewport(viewRect.x, 0, viewRect.w, ch); renderer.setScissor(viewRect.x, 0, viewRect.w, ch); renderer.clearDepth(); clockMat.colorWrite = false; clockMat.depthWrite = false; renderer.render(scene, camera); clockMat.colorWrite = true; clockMat.depthWrite = true; camera.top = _ct; camera.bottom = _cb; camera.position.set(_cpx, _cpy, _cpz); camera.updateProjectionMatrix(); renderer.setViewport(viewRect.x, viewRect.y, viewRect.w, viewRect.h); renderer.setScissor(viewRect.x, viewRect.y, viewRect.w, viewRect.h); renderer.clearDepth(); renderer.render(scene, camFront); renderer.autoClear = true; scene.background = skyRT.texture; } for (const fn of DEV.hooks) fn(now, dt); } animate(); } if (window.THREE && window.SunCalc) __boot(); else window.addEventListener("libs-ready", __boot, { once: true });

off the clock