let THREE; let EffectComposer; let RenderPass; let UnrealBloomPass; let OutputPass; let GLTFLoader; let EXRLoader; (async () => { try { [ THREE, { EffectComposer }, { RenderPass }, { UnrealBloomPass }, { OutputPass }, { GLTFLoader }, { EXRLoader } ] = await Promise.all([ import("https://esm.sh/three@0.166.1"), import("https://esm.sh/three@0.166.1/examples/jsm/postprocessing/EffectComposer.js"), import("https://esm.sh/three@0.166.1/examples/jsm/postprocessing/RenderPass.js"), import("https://esm.sh/three@0.166.1/examples/jsm/postprocessing/UnrealBloomPass.js"), import("https://esm.sh/three@0.166.1/examples/jsm/postprocessing/OutputPass.js"), import("https://esm.sh/three@0.166.1/examples/jsm/loaders/GLTFLoader.js"), import("https://esm.sh/three@0.166.1/examples/jsm/loaders/EXRLoader.js") ]); start(); } catch (error) { const fallback = document.querySelector("#fallback"); if (fallback) { fallback.textContent = "Required 3D libraries could not be loaded."; fallback.hidden = false; } console.error(error); } })(); function start() { const canvas = document.querySelector("#scene"); const clockNode = document.querySelector("#clock"); const dateNode = document.querySelector("#date"); const fallbackNode = document.querySelector("#fallback"); const MAX_WAVES = 8; const ASSET_URLS = { petal: "https://stat.neort.io/externalResource/d8ukassms56bv6negdm0.png", outline: "https://stat.neort.io/externalResource/d8ukaqkms56bv6negdl0.png", meta: "https://stat.neort.io/externalResource/d8ukbckms56bv6negdn0.json", normal: "https://stat.neort.io/externalResource/d8ukbhcms56bv6negdo0.png", glb: "https://red-dust-a037.mao-23f.workers.dev/RoseLowPoly.glb", position: "https://red-dust-a037.mao-23f.workers.dev/RoseLowPoly_pos.exr" }; const CONFIG = { debug: { showFps: false }, renderer: { pixelRatio: 1.0, clearColor: 0x0b1112, exposure: 1.0, fps: 60 }, camera: { fov: 45, near: 0.1, far: 90, position: new THREE.Vector3(0, 16.4, 9.4), lookAt: new THREE.Vector3(0, 1.05, 0.0), driftX: 0.1 }, scene: { fogColor: 0x11b1c, fogDensity: 0.05, groundColor: 0x001000 }, lighting: { hemisphereSky: 0xf0f8f3, hemisphereGround: 0x263231, hemisphereIntensity: 1.85, keyColor: 0xf6fff9, keyIntensity: 1.2, keyPosition: new THREE.Vector3(-2, 8, 2), rimColor: 0x92f4e6, rimIntensity: 38, rimDistance: 38, rimPosition: new THREE.Vector3(0, 2.2, -2.8) }, bloom: { strength: 0.8, radius: 0.72, threshold: 0.8 }, grass: { count: 15000, bladeHeight: 0.9, bladeBaseWidth: 0.05, instanceHeightRange: [1.95, 2.05], instanceWidthRange: [1.35, 2.45], color: 0x6f9a9b, unlitColor: 0x578b8f, opacity: 0.9 }, flower: { maxCount: 4000, y: 0.1, scaleMin: 12.0, scaleMax: 18.4, spawnDelayMax: 0.2, growStart: 0.4, growEnd: 0.99, dieSpeed: 3.5, growSpeed: 1.0, waveSway: 0.3, jitter: 0 }, font: { family: "'Geist', Arial, sans-serif", weight: "700", canvasSize: 100, fontSize: 85, sampleStep: 2, worldScale: 0.06, charGap: 0.4, originZ: -1.6, threshold: 0.38, minStrokeDistance: 0.4, advanceWidth: 3.2, colonAdvanceWidth: 1.1 }, wave: { lifetime: 2.2, digitStrength: 3.1, colonStrength: 1.2, radiusMultiplier: 9.25, bandWidthRatio: 0.3, bandWidthMin: 1.2 } }; const MAX_FLOWERS = CONFIG.flower.maxCount; const GRASS_COUNT = CONFIG.grass.count; const waveUniforms = { uTime: { value: 0 }, uWaveCount: { value: 0 }, uWaves: { value: Array.from({ length: MAX_WAVES }, () => new THREE.Vector4(999, 999, 0, 0)) } }; let renderer; let composer; let bloomPass; let scene; let camera; let grass; let grassUniforms; let vatMesh; let vatGeometry; let flowerPositionAttr; let flowerProgressAttr; let flowerSeedAttr; let motes; let fireflies = []; let fpsNode; let fpsFrames = 0; let fpsLastTime = 0; let lastTimeText = ""; let flowers = []; let waves = []; const glyphSdfCache = new Map(); const dummy = new THREE.Object3D(); if (isWebGlSupported()) { init(); } else { showFallback("This browser does not support WebGL."); } function isWebGlSupported() { try { const testCanvas = document.createElement("canvas"); return Boolean( window.WebGL2RenderingContext && testCanvas.getContext("webgl2", { failIfMajorPerformanceCaveat: true }) ) || Boolean(testCanvas.getContext("webgl")); } catch (error) { return false; } } function showFallback(message) { fallbackNode.textContent = message; fallbackNode.hidden = false; } async function init() { try { renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: "high-performance" }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, CONFIG.renderer.pixelRatio)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(CONFIG.renderer.clearColor, 1); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = CONFIG.renderer.exposure; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(CONFIG.scene.fogColor, CONFIG.scene.fogDensity); camera = new THREE.PerspectiveCamera( CONFIG.camera.fov, window.innerWidth / window.innerHeight, CONFIG.camera.near, CONFIG.camera.far ); camera.position.copy(CONFIG.camera.position); camera.lookAt(CONFIG.camera.lookAt); createLighting(); createGround(); createGrass(); createFlowers(); createMotes(); createFps(); createPostProcessing(); window.addEventListener("resize", onResize); if (document.fonts) { await document.fonts.ready; glyphSdfCache.clear(); } window.setInterval(() => render(performance.now()), 1000 / CONFIG.renderer.fps); } catch (error) { showFallback("The scene could not be initialized."); console.error(error); } } function createLighting() { scene.add(new THREE.HemisphereLight( CONFIG.lighting.hemisphereSky, CONFIG.lighting.hemisphereGround, CONFIG.lighting.hemisphereIntensity )); const key = new THREE.DirectionalLight(CONFIG.lighting.keyColor, CONFIG.lighting.keyIntensity); key.position.copy(CONFIG.lighting.keyPosition); scene.add(key); const rim = new THREE.PointLight( CONFIG.lighting.rimColor, CONFIG.lighting.rimIntensity, CONFIG.lighting.rimDistance ); rim.position.copy(CONFIG.lighting.rimPosition); scene.add(rim); } function createGround() { const baseGround = new THREE.Mesh( new THREE.PlaneGeometry(42, 28, 1, 1), new THREE.MeshBasicMaterial({ color: CONFIG.scene.groundColor }) ); baseGround.rotation.x = -Math.PI / 2; baseGround.position.y = -0.028; scene.add(baseGround); const material = new THREE.MeshStandardMaterial({ color: CONFIG.grass.unlitColor, roughness: 0.95, metalness: 0 }); material.onBeforeCompile = (shader) => { shader.uniforms.uTime = waveUniforms.uTime; shader.uniforms.uWaveCount = waveUniforms.uWaveCount; shader.uniforms.uWaves = waveUniforms.uWaves; shader.vertexShader = shader.vertexShader.replace( "#include ", ` #include varying vec2 vGroundWorldXZ; ` ); shader.vertexShader = shader.vertexShader.replace( "#include ", ` #include vGroundWorldXZ = worldPosition.xz; ` ); shader.fragmentShader = shader.fragmentShader.replace( "#include ", ` #include uniform float uTime; uniform int uWaveCount; uniform vec4 uWaves[${MAX_WAVES}]; varying vec2 vGroundWorldXZ; ` ); shader.fragmentShader = shader.fragmentShader.replace( "#include ", ` #include float groundWave = 0.0; for (int i = 0; i < ${MAX_WAVES}; i++) { if (i >= uWaveCount) break; vec4 wave = uWaves[i]; float age = clamp((uTime - wave.z) / ${CONFIG.wave.lifetime.toFixed(2)}, 0.0, 1.0); float radius = mix(0.08, wave.w, 1.0 - pow(1.0 - age, 3.0)); float ringWidth = max(wave.w * ${CONFIG.wave.bandWidthRatio.toFixed(2)}, ${CONFIG.wave.bandWidthMin.toFixed(2)}); float distToWave = length(vGroundWorldXZ - wave.xy); float band = 1.0 - smoothstep(0.0, ringWidth, abs(distToWave - radius)); float fade = smoothstep(0.0, 0.08, age) * pow(1.0 - age, 2.35); float ring = band * fade; groundWave += ring; } outgoingLight += vec3(0.08, 1.28, 1.12) * groundWave * 1.7; ` ); }; const ground = new THREE.Mesh( new THREE.PlaneGeometry(42, 28, 1, 1), material ); ground.rotation.x = -Math.PI / 2; ground.position.y = -0.015; scene.add(ground); } function createGrass() { const geometry = createGrassBladeGeometry(); grassUniforms = waveUniforms; const material = new THREE.MeshBasicMaterial({ color: CONFIG.grass.color, transparent: true, opacity: CONFIG.grass.opacity, side: THREE.DoubleSide, depthWrite: false }); material.vertexColors = true; material.onBeforeCompile = (shader) => { shader.uniforms.uTime = grassUniforms.uTime; shader.uniforms.uWaveCount = grassUniforms.uWaveCount; shader.uniforms.uWaves = grassUniforms.uWaves; shader.vertexShader = shader.vertexShader.replace( "#include ", ` #include uniform float uTime; uniform int uWaveCount; uniform vec4 uWaves[${MAX_WAVES}]; varying float vWaveGlow; ` ); shader.vertexShader = shader.vertexShader.replace( "#include ", ` #include vec2 worldXZ = vec2(instanceMatrix[3].x, instanceMatrix[3].z); float tip = pow(uv.y, 1.8); float waveGlow = 0.03; vec2 wavePush = vec2(0.0); for (int i = 0; i < ${MAX_WAVES}; i++) { if (i >= uWaveCount) break; vec4 wave = uWaves[i]; float age = clamp((uTime - wave.z) / ${CONFIG.wave.lifetime.toFixed(2)}, 0.0, 1.0); float radius = mix(0.08, wave.w, 1.0 - pow(1.0 - age, 3.0)); vec2 diff = worldXZ - wave.xy; float ringWidth = max(wave.w * ${CONFIG.wave.bandWidthRatio.toFixed(2)}, ${CONFIG.wave.bandWidthMin.toFixed(2)}); float band = 1.0 - smoothstep(0.0, ringWidth, abs(length(diff) - radius)); float fade = smoothstep(0.0, 0.08, age) * pow(1.0 - age, 2.35); float strength = band * fade; wavePush += normalize(diff + vec2(0.0001)) * strength * 0.32; waveGlow += strength; } transformed.x += sin(uTime * 1.35 + worldXZ.x * 1.9 + worldXZ.y) * tip * 0.18 + wavePush.x * tip; transformed.z += cos(uTime * 0.9 + worldXZ.y * 1.5) * tip * 0.08 + wavePush.y * tip; transformed.y *= 1.0 - waveGlow * tip * 0.22; vWaveGlow = waveGlow * tip; ` ); shader.fragmentShader = shader.fragmentShader.replace( "#include ", ` #include varying float vWaveGlow; ` ); shader.fragmentShader = shader.fragmentShader.replace( "#include ", ` #include diffuseColor.rgb += vec3(0.12, 1.05, 0.96) * vWaveGlow * 1.35; diffuseColor.a *= 0.96; ` ); }; grass = new THREE.InstancedMesh(geometry, material, GRASS_COUNT); grass.instanceMatrix.setUsage(THREE.StaticDrawUsage); grass.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(GRASS_COUNT * 3), 3); for (let i = 0; i < GRASS_COUNT; i += 1) { const x = randomRange(-19, 19); const z = randomRange(-13, 13); const clump = 0.72 + 0.28 * Math.sin(x * 0.9 + z * 1.25); const h = randomRange(CONFIG.grass.instanceHeightRange[0], CONFIG.grass.instanceHeightRange[1]) * clump; const w = randomRange(CONFIG.grass.instanceWidthRange[0], CONFIG.grass.instanceWidthRange[1]); dummy.position.set(x, 0, z); dummy.rotation.set(0, randomRange(0, Math.PI * 2), randomRange(-0.22, 0.22)); dummy.scale.set(w, h, 1); dummy.updateMatrix(); grass.setMatrixAt(i, dummy.matrix); const shade = randomRange(0.72, 1.08); grass.setColorAt(i, new THREE.Color(shade * 0.76, shade * 0.94, shade)); } scene.add(grass); } function createPostProcessing() { composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), CONFIG.bloom.strength, CONFIG.bloom.radius, CONFIG.bloom.threshold ); composer.addPass(bloomPass); composer.addPass(new OutputPass()); } function createGrassBladeGeometry() { const segments = 5; const height = CONFIG.grass.bladeHeight; const baseWidth = CONFIG.grass.bladeBaseWidth; const positions = []; const uvs = []; const indices = []; for (let y = 0; y <= segments; y += 1) { const t = y / segments; const width = baseWidth * Math.pow(1 - t, 1.35); positions.push(-width, t * height, 0, width, t * height, 0); uvs.push(0, t, 1, t); } for (let y = 0; y < segments; y += 1) { const a = y * 2; indices.push(a, a + 1, a + 2, a + 1, a + 3, a + 2); } const geometry = new THREE.BufferGeometry(); geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3)); geometry.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)); geometry.setIndex(indices); geometry.computeVertexNormals(); return geometry; } async function createFlowers() { for (let i = 0; i < MAX_FLOWERS; i += 1) { flowers.push({ active: false, target: false, progress: 0, delayUntil: 0, charIndex: -1, pointIndex: -1, seed: Math.random() * 100, colorPhase: Math.random(), position: new THREE.Vector3() }); } try { const vat = await loadVatAssets(); vatGeometry = vat.geometry; setupFlowerAttributes(vatGeometry); vatMesh = new THREE.InstancedMesh(vatGeometry, createVatMaterial(vat), MAX_FLOWERS); vatMesh.frustumCulled = false; scene.add(vatMesh); } catch (error) { console.error("VAT flower load failed", error); await createStaticGlbFlowers(); } } function setupFlowerAttributes(geometry) { flowerPositionAttr = new THREE.InstancedBufferAttribute(new Float32Array(MAX_FLOWERS * 3), 3); flowerProgressAttr = new THREE.InstancedBufferAttribute(new Float32Array(MAX_FLOWERS), 1); flowerSeedAttr = new THREE.InstancedBufferAttribute(new Float32Array(MAX_FLOWERS), 1); geometry.setAttribute("iPosition", flowerPositionAttr); geometry.setAttribute("iProgress", flowerProgressAttr); geometry.setAttribute("iSeed", flowerSeedAttr); } async function createStaticGlbFlowers() { try { const staticFlower = await loadStaticFlowerAssets(); vatGeometry = staticFlower.geometry; setupFlowerAttributes(vatGeometry); vatMesh = new THREE.InstancedMesh(vatGeometry, createStaticFlowerMaterial(staticFlower), MAX_FLOWERS); vatMesh.frustumCulled = false; scene.add(vatMesh); } catch (error) { showFallback("Rose GLB assets could not be loaded."); console.error("Static flower load failed", error); } } async function loadVatAssets() { const fileLoader = new THREE.FileLoader(); const meta = JSON.parse(await fileLoader.loadAsync(ASSET_URLS.meta)); const gltfLoader = new GLTFLoader(); const exrLoader = new EXRLoader(); exrLoader.setDataType(THREE.HalfFloatType); const [gltf, posTex, nrmTex, colorTex, outlineTex] = await Promise.all([ gltfLoader.loadAsync(ASSET_URLS.glb), exrLoader.loadAsync(ASSET_URLS.position), new THREE.TextureLoader().loadAsync(ASSET_URLS.normal), new THREE.TextureLoader().loadAsync(ASSET_URLS.petal), new THREE.TextureLoader().loadAsync(ASSET_URLS.outline) ]); let geometry = null; gltf.scene.traverse((object) => { if (!geometry && object.isMesh) geometry = object.geometry.clone(); }); if (!geometry) throw new Error("Rose VAT geometry not found"); setupVatGeometry(geometry, meta); posTex.needsUpdate = true; nrmTex.needsUpdate = true; colorTex.colorSpace = THREE.SRGBColorSpace; outlineTex.colorSpace = THREE.SRGBColorSpace; return { geometry, meta, posTex, nrmTex, colorTex, outlineTex }; } async function loadStaticFlowerAssets() { const gltfLoader = new GLTFLoader(); const textureLoader = new THREE.TextureLoader(); const [gltf, colorTex, outlineTex] = await Promise.all([ gltfLoader.loadAsync(ASSET_URLS.glb), textureLoader.loadAsync(ASSET_URLS.petal), textureLoader.loadAsync(ASSET_URLS.outline) ]); let geometry = null; gltf.scene.traverse((object) => { if (!geometry && object.isMesh) geometry = object.geometry.clone(); }); if (!geometry) throw new Error("Rose GLB geometry not found"); const positionAttr = geometry.getAttribute("position"); const positionArray = new Float32Array(positionAttr.count * 3); for (let i = 0; i < positionAttr.count; i += 1) { positionArray[3 * i] = positionAttr.getX(i) * -1; positionArray[3 * i + 1] = positionAttr.getY(i); positionArray[3 * i + 2] = positionAttr.getZ(i); } geometry.setAttribute("position", new THREE.BufferAttribute(positionArray, 3)); colorTex.colorSpace = THREE.SRGBColorSpace; outlineTex.colorSpace = THREE.SRGBColorSpace; return { geometry, colorTex, outlineTex }; } function setupVatGeometry(geometry, meta) { const count = geometry.getAttribute("position").count; const positionAttr = geometry.getAttribute("position"); const uv1Array = new Float32Array(count * 2); const positionArray = new Float32Array(count * 3); const padding = meta.padding ?? 2; const adjustedFramesCount = meta.frameCount + padding; for (let i = 0; i < count; i += 1) { const columnIndex = Math.floor(i / meta.textureHeight); const verticalIndex = i % meta.textureHeight; const uIdx = columnIndex * adjustedFramesCount; uv1Array[2 * i] = (uIdx + 0.5) / meta.textureWidth; uv1Array[2 * i + 1] = (verticalIndex + 0.5) / meta.textureHeight; positionArray[3 * i] = positionAttr.getX(i) * -1; positionArray[3 * i + 1] = positionAttr.getY(i); positionArray[3 * i + 2] = positionAttr.getZ(i); } geometry.setAttribute("uv1", new THREE.BufferAttribute(uv1Array, 2)); geometry.setAttribute("position", new THREE.BufferAttribute(positionArray, 3)); } function createVatMaterial(vat) { return new THREE.ShaderMaterial({ uniforms: { uPosTex: { value: vat.posTex }, uColorTex: { value: vat.colorTex }, uOutlineTex: { value: vat.outlineTex }, uFrameCount: { value: vat.meta.frameCount }, uTextureWidth: { value: vat.meta.textureWidth }, uTime: waveUniforms.uTime, uWaveCount: waveUniforms.uWaveCount, uWaves: waveUniforms.uWaves }, transparent: true, side: THREE.DoubleSide, vertexShader: ` uniform sampler2D uPosTex; uniform float uFrameCount; uniform float uTextureWidth; uniform float uTime; uniform int uWaveCount; uniform vec4 uWaves[${MAX_WAVES}]; attribute vec2 uv1; attribute vec3 iPosition; attribute float iProgress; attribute float iSeed; varying vec2 vUv; varying float vProgress; varying float vFlowerWave; void main() { vUv = uv; vProgress = iProgress; float frame = clamp(iProgress, 0.0, 1.0); float frameIndex = (uFrameCount - 1.0) * frame; vec2 sampleUV = vec2(uv1.x + frameIndex / uTextureWidth, uv1.y); vec3 vatSample = texture2D(uPosTex, sampleUV).rgb; vec3 vatPos = mix(position * 0.85, vatSample, 0.72); float angle = iSeed * 6.2831853; mat2 rot = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); vatPos.xz = rot * vatPos.xz; float scale = mix(${CONFIG.flower.scaleMin.toFixed(2)}, ${CONFIG.flower.scaleMax.toFixed(2)}, fract(iSeed * 17.13)); vec3 world = vatPos * scale + iPosition; world.x += sin(uTime * 1.5 + iSeed * 8.0) * smoothstep(0.04, 0.28, abs(vatPos.y)) * 0.045; float waveGlow = 0.0; vec2 waveSway = vec2(0.0); for (int i = 0; i < ${MAX_WAVES}; i++) { if (i >= uWaveCount) break; vec4 wave = uWaves[i]; float age = clamp((uTime - wave.z) / ${CONFIG.wave.lifetime.toFixed(2)}, 0.0, 1.0); float radius = mix(0.08, wave.w, 1.0 - pow(1.0 - age, 3.0)); float ringWidth = max(wave.w * ${CONFIG.wave.bandWidthRatio.toFixed(2)}, ${CONFIG.wave.bandWidthMin.toFixed(2)}); vec2 diff = world.xz - wave.xy; float band = 1.0 - smoothstep(0.0, ringWidth, abs(length(diff) - radius)); float fade = smoothstep(0.0, 0.08, age) * pow(1.0 - age, 2.35); float strength = band * fade; waveGlow += strength; waveSway += normalize(diff + vec2(0.0001)) * strength; } float swayMask = smoothstep(0.02, 0.18, abs(vatPos.y)) * smoothstep(0.02, 0.18, iProgress); float swayVariation = mix(0.65, 1.35, fract(sin(iSeed * 41.37) * 43758.5453)); world.xz += waveSway * swayMask * swayVariation * ${CONFIG.flower.waveSway.toFixed(3)}; vFlowerWave = waveGlow; gl_Position = projectionMatrix * viewMatrix * vec4(world, 1.0); } `, fragmentShader: ` uniform sampler2D uColorTex; uniform sampler2D uOutlineTex; varying vec2 vUv; varying float vProgress; varying float vFlowerWave; void main() { vec2 petalUv = vec2((vUv.x - 0.5) * 0.8 + 0.5, vUv.y); vec3 petal = texture2D(uColorTex, petalUv).rgb; vec3 outline = texture2D(uOutlineTex, petalUv).rgb; vec3 cyan = vec3(0.5, 0.7, 1.0); vec3 color = mix(petal * 0.66, petal, outline.r); color = mix(color, cyan, 0.15); float rim = pow(smoothstep(0.18, 0.8, abs(vUv.x - 0.5)), 1.8); float sweep = smoothstep(0.24, 0.0, abs(vUv.y - fract(vProgress * 0.85 + 0.08))); float fade = smoothstep(0.02, 0.12, vProgress); gl_FragColor = vec4(color + cyan * (0.05 + sweep * 0.14 + rim * 0.16 + vFlowerWave * 0.45), fade); } ` }); } function createStaticFlowerMaterial(staticFlower) { return new THREE.ShaderMaterial({ uniforms: { uColorTex: { value: staticFlower.colorTex }, uOutlineTex: { value: staticFlower.outlineTex }, uTime: waveUniforms.uTime, uWaveCount: waveUniforms.uWaveCount, uWaves: waveUniforms.uWaves }, transparent: true, side: THREE.DoubleSide, vertexShader: ` uniform float uTime; uniform int uWaveCount; uniform vec4 uWaves[${MAX_WAVES}]; attribute vec3 iPosition; attribute float iProgress; attribute float iSeed; varying vec2 vUv; varying float vProgress; varying float vFlowerWave; void main() { vUv = uv; vProgress = iProgress; float angle = iSeed * 6.2831853; mat2 rot = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); vec3 flowerPos = position; flowerPos.xz = rot * flowerPos.xz; float scale = mix(${CONFIG.flower.scaleMin.toFixed(2)}, ${CONFIG.flower.scaleMax.toFixed(2)}, fract(iSeed * 17.13)); float grow = smoothstep(0.02, 1.0, iProgress); float heightMask = smoothstep(-0.02, 0.22, flowerPos.y); flowerPos.xz *= mix(0.18, 1.0, grow); flowerPos.y *= grow; vec3 world = flowerPos * scale + iPosition; world.x += sin(uTime * 1.5 + iSeed * 8.0) * heightMask * 0.045; float waveGlow = 0.0; vec2 waveSway = vec2(0.0); for (int i = 0; i < ${MAX_WAVES}; i++) { if (i >= uWaveCount) break; vec4 wave = uWaves[i]; float age = clamp((uTime - wave.z) / ${CONFIG.wave.lifetime.toFixed(2)}, 0.0, 1.0); float radius = mix(0.08, wave.w, 1.0 - pow(1.0 - age, 3.0)); float ringWidth = max(wave.w * ${CONFIG.wave.bandWidthRatio.toFixed(2)}, ${CONFIG.wave.bandWidthMin.toFixed(2)}); vec2 diff = world.xz - wave.xy; float band = 1.0 - smoothstep(0.0, ringWidth, abs(length(diff) - radius)); float fade = smoothstep(0.0, 0.08, age) * pow(1.0 - age, 2.35); float strength = band * fade; waveGlow += strength; waveSway += normalize(diff + vec2(0.0001)) * strength; } float swayVariation = mix(0.65, 1.35, fract(sin(iSeed * 41.37) * 43758.5453)); world.xz += waveSway * heightMask * grow * swayVariation * ${CONFIG.flower.waveSway.toFixed(3)}; vFlowerWave = waveGlow; gl_Position = projectionMatrix * viewMatrix * vec4(world, 1.0); } `, fragmentShader: ` uniform sampler2D uColorTex; uniform sampler2D uOutlineTex; varying vec2 vUv; varying float vProgress; varying float vFlowerWave; void main() { vec2 petalUv = vec2((vUv.x - 0.5) * 0.8 + 0.5, vUv.y); vec3 petal = texture2D(uColorTex, petalUv).rgb; vec3 outline = texture2D(uOutlineTex, petalUv).rgb; vec3 cyan = vec3(0.5, 0.7, 1.0); vec3 color = mix(petal * 0.66, petal, outline.r); color = mix(color, cyan, 0.15); float rim = pow(smoothstep(0.18, 0.8, abs(vUv.x - 0.5)), 1.8); float fade = smoothstep(0.02, 0.12, vProgress); gl_FragColor = vec4(color + cyan * (0.08 + rim * 0.14 + vFlowerWave * 0.45), fade); } ` }); } function createMotes() { const count = 90; const positions = new Float32Array(count * 3); const sizes = new Float32Array(count); for (let i = 0; i < count; i += 1) { const firefly = { origin: new THREE.Vector3(randomRange(-9, 9), randomRange(1.2, 6.2), randomRange(-4.5, 3.5)), phase: randomRange(0, Math.PI * 2), speed: randomRange(0.45, 1.35), radius: randomRange(0.18, 0.75), yAmp: randomRange(0.08, 0.38), size: randomRange(0.6, 0.9) }; fireflies.push(firefly); positions[i * 3] = firefly.origin.x; positions[i * 3 + 1] = firefly.origin.y; positions[i * 3 + 2] = firefly.origin.z; sizes[i] = firefly.size; } const geometry = new THREE.BufferGeometry(); geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3)); geometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1)); motes = new THREE.Points( geometry, new THREE.ShaderMaterial({ uniforms: { uTime: waveUniforms.uTime }, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, vertexShader: ` attribute float size; varying float vPulse; uniform float uTime; void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vPulse = 0.55 + 0.45 * sin(uTime * 2.2 + position.x * 1.7 + position.z * 2.1); gl_PointSize = size * (115.0 + vPulse * 95.0) / max(1.0, -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` varying float vPulse; void main() { vec2 uv = gl_PointCoord - 0.5; float d = length(uv); float glow = smoothstep(0.5, 0.0, d); float core = smoothstep(0.18, 0.0, d); vec3 color = mix(vec3(0.35, 0.95, 0.3), vec3(1.0, 1.0, 0.32), core); gl_FragColor = vec4(color, glow * (0.25 + vPulse * 0.75)); } ` }) ); scene.add(motes); } function updateFireflies(time) { if (!motes) return; const positions = motes.geometry.getAttribute("position"); for (let i = 0; i < fireflies.length; i += 1) { const fly = fireflies[i]; const t = time * fly.speed + fly.phase; positions.setXYZ( i, fly.origin.x + Math.sin(t * 0.9) * fly.radius + Math.sin(t * 1.7) * fly.radius * 0.28, fly.origin.y + Math.sin(t * 1.3) * fly.yAmp, fly.origin.z + Math.cos(t * 0.8) * fly.radius + Math.sin(t * 1.1) * fly.radius * 0.22 ); } positions.needsUpdate = true; } function createFps() { fpsNode = document.querySelector("#fps"); if (fpsNode) fpsNode.hidden = !CONFIG.debug.showFps; } function render(timeMs) { const time = timeMs * 0.001; updateFps(timeMs); grassUniforms.uTime.value = time; updateFireflies(time); const current = getTimeText(); if (current !== lastTimeText) { updateClock(current, time); } updateFlowers(time); updateWaves(time); syncGrassWaves(); camera.position.x = Math.sin(time * 0.09) * CONFIG.camera.driftX; camera.lookAt(CONFIG.camera.lookAt); composer.render(); } function getTimeText() { const now = new Date(); return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`; } function getDateText() { const now = new Date(); const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; return `${pad(now.getDate())} ${months[now.getMonth()]} ${now.getFullYear()}`; } function updateClock(timeText, time) { clockNode.textContent = timeText; dateNode.textContent = getDateText(); const changed = []; for (let i = 0; i < timeText.length; i += 1) { if (timeText[i] !== lastTimeText[i]) changed.push(i); } const points = sampleClock(timeText); const activeKeys = new Set(points.map((point) => flowerKey(point.charIndex, point.pointIndex))); const changedChars = new Set(changed); for (const flower of flowers) { if (!flower.active) continue; const key = flowerKey(flower.charIndex, flower.pointIndex); const shouldDie = changedChars.has(flower.charIndex) || !activeKeys.has(key); flower.target = !shouldDie; } for (const point of points) { const key = flowerKey(point.charIndex, point.pointIndex); const existing = flowers.find((flower) => ( flower.active && flower.target && flowerKey(flower.charIndex, flower.pointIndex) === key )); if (existing && !changedChars.has(point.charIndex)) { existing.target = true; existing.position.copy(point.position); continue; } const flower = getReusableFlower(); const wasActive = flower.active; flower.active = true; flower.target = true; flower.charIndex = point.charIndex; flower.pointIndex = point.pointIndex; flower.position.copy(point.position); flower.delayUntil = wasActive ? time : time + randomRange(0, CONFIG.flower.spawnDelayMax); if (!wasActive) flower.progress = 0; flower.seed = Math.random() * 100; } changed.forEach((charIndex) => { const center = charCenter(charIndex); const isColon = timeText[charIndex] === ":"; addWave(center.x, center.z, time, isColon ? CONFIG.wave.colonStrength : CONFIG.wave.digitStrength); }); lastTimeText = timeText; } function flowerKey(charIndex, pointIndex) { return `${charIndex}:${pointIndex}`; } function getReusableFlower() { return flowers.find((flower) => !flower.active) || flowers.find((flower) => !flower.target && flower.progress < 0.2) || flowers[0]; } function sampleClock(timeText) { const points = []; const layout = getSdfTextLayout(timeText); let cursor = -layout.totalWidth / 2; for (let c = 0; c < timeText.length; c += 1) { const glyph = getGlyphSdf(timeText[c]); let pointIndex = 0; if (timeText[c] === ":") { const centerX = cursor + getGlyphAdvance(timeText[c]) / 2; const centerZ = CONFIG.font.originZ + CONFIG.font.canvasSize * CONFIG.font.worldScale * 0.35; const dotGap = CONFIG.font.canvasSize * CONFIG.font.worldScale * 0.16; [centerZ - dotGap, centerZ + dotGap].forEach((z) => { points.push({ charIndex: c, pointIndex, position: new THREE.Vector3(centerX, 0, z) }); pointIndex += 1; }); cursor += getGlyphAdvance(timeText[c]) + CONFIG.font.charGap; continue; } for (const sample of glyph.samples) { points.push({ charIndex: c, pointIndex, position: new THREE.Vector3( cursor + sample.x + randomRange(-CONFIG.flower.jitter, CONFIG.flower.jitter), 0, CONFIG.font.originZ + sample.y + randomRange(-CONFIG.flower.jitter, CONFIG.flower.jitter) ) }); pointIndex += 1; } cursor += getGlyphAdvance(timeText[c]) + CONFIG.font.charGap; } return points.slice(0, MAX_FLOWERS); } function getSdfTextLayout(timeText) { let totalWidth = 0; for (let i = 0; i < timeText.length; i += 1) { totalWidth += getGlyphAdvance(timeText[i]); if (i < timeText.length - 1) totalWidth += CONFIG.font.charGap; } return { totalWidth }; } function getGlyphAdvance(char) { return char === ":" ? CONFIG.font.colonAdvanceWidth : CONFIG.font.advanceWidth; } function getGlyphSdf(char) { if (glyphSdfCache.has(char)) return glyphSdfCache.get(char); const size = CONFIG.font.canvasSize; const canvas2d = document.createElement("canvas"); canvas2d.width = size; canvas2d.height = size; const ctx = canvas2d.getContext("2d", { willReadFrequently: true }); ctx.clearRect(0, 0, size, size); ctx.fillStyle = "#fff"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = `${CONFIG.font.weight} ${CONFIG.font.fontSize}px ${CONFIG.font.family}`; ctx.fillText(char, size / 2, size / 2 + CONFIG.font.fontSize * 0.04); const alpha = ctx.getImageData(0, 0, size, size).data; const mask = new Uint8Array(size * size); let minX = size; let maxX = 0; let minY = size; let maxY = 0; for (let y = 0; y < size; y += 1) { for (let x = 0; x < size; x += 1) { const inside = alpha[(y * size + x) * 4 + 3] / 255 >= CONFIG.font.threshold; mask[y * size + x] = inside ? 1 : 0; if (inside) { minX = Math.min(minX, x); maxX = Math.max(maxX, x); minY = Math.min(minY, y); maxY = Math.max(maxY, y); } } } const boundary = []; for (let y = 1; y < size - 1; y += 1) { for (let x = 1; x < size - 1; x += 1) { const value = mask[y * size + x]; if ( value !== mask[y * size + x - 1] || value !== mask[y * size + x + 1] || value !== mask[(y - 1) * size + x] || value !== mask[(y + 1) * size + x] ) { boundary.push({ x, y }); } } } if (minX > maxX) { minX = size * 0.45; maxX = size * 0.55; minY = size * 0.35; maxY = size * 0.65; } const widthPx = Math.max(1, maxX - minX + 1); const heightPx = Math.max(1, maxY - minY + 1); const worldWidth = widthPx * CONFIG.font.worldScale; const samples = []; const step = CONFIG.font.sampleStep; for (let y = minY; y <= maxY; y += step) { for (let x = minX; x <= maxX; x += step) { const index = Math.round(y) * size + Math.round(x); if (!mask[index]) continue; const sdf = signedDistanceToBoundary(x, y, mask[index], boundary); if (sdf < CONFIG.font.minStrokeDistance) continue; samples.push({ x: (x - minX) * CONFIG.font.worldScale + (getGlyphAdvance(char) - worldWidth) / 2, y: (y - minY) * CONFIG.font.worldScale }); } } const glyph = { samples, worldWidth }; glyphSdfCache.set(char, glyph); return glyph; } function signedDistanceToBoundary(x, y, inside, boundary) { let minDistSq = Infinity; for (const point of boundary) { const dx = x - point.x; const dy = y - point.y; const distSq = dx * dx + dy * dy; if (distSq < minDistSq) minDistSq = distSq; } const dist = Math.sqrt(minDistSq); return inside ? dist : -dist; } function updateFps(timeMs) { if (!CONFIG.debug.showFps || !fpsNode) return; fpsFrames += 1; if (timeMs - fpsLastTime < 500) return; const fps = Math.round((fpsFrames * 1000) / (timeMs - fpsLastTime)); fpsNode.textContent = `${fps} FPS`; fpsFrames = 0; fpsLastTime = timeMs; } function charCenter(charIndex) { const timeText = lastTimeText || "00:00:00"; const layout = getSdfTextLayout(timeText); let cursor = -layout.totalWidth / 2; for (let c = 0; c < timeText.length; c += 1) { const glyph = getGlyphSdf(timeText[c]); if (c === charIndex) { return { x: cursor + getGlyphAdvance(timeText[c]) / 2, z: CONFIG.font.originZ + CONFIG.font.canvasSize * CONFIG.font.worldScale * 0.35 }; } cursor += getGlyphAdvance(timeText[c]) + CONFIG.font.charGap; } return { x: 0, z: 0 }; } function updateFlowers(time) { for (let i = 0; i < MAX_FLOWERS; i += 1) { const flower = flowers[i]; let progress = flower.progress; if (flower.active) { if (flower.target) { const canGrow = time >= flower.delayUntil; if (canGrow) progress = Math.min(1, flower.progress + CONFIG.flower.growSpeed * (1 / CONFIG.renderer.fps)); } else { progress = Math.max(0, flower.progress - CONFIG.flower.dieSpeed * (1 / CONFIG.renderer.fps)); if (progress <= 0.01) flower.active = false; } flower.progress = THREE.MathUtils.clamp(progress, 0, 1); } const visible = flower.active ? flower.progress : 0; const p = flower.position; if (flowerPositionAttr && flowerProgressAttr && flowerSeedAttr) { flowerPositionAttr.setXYZ(i, p.x, visible > 0 ? CONFIG.flower.y : -999, p.z); flowerProgressAttr.setX(i, visible); flowerSeedAttr.setX(i, flower.seed); } } if (flowerPositionAttr && flowerProgressAttr && flowerSeedAttr) { flowerPositionAttr.needsUpdate = true; flowerProgressAttr.needsUpdate = true; flowerSeedAttr.needsUpdate = true; } } function addWave(x, z, time, strength) { waves.push({ origin: new THREE.Vector2(x, z), start: time, lifetime: CONFIG.wave.lifetime, maxRadius: CONFIG.wave.radiusMultiplier * strength }); } function syncGrassWaves() { const live = waves.slice(0, MAX_WAVES); grassUniforms.uWaveCount.value = live.length; grassUniforms.uWaves.value.forEach((value) => value.set(999, 999, 0, 0)); for (let i = 0; i < MAX_WAVES; i += 1) { const wave = live[i]; if (wave) { grassUniforms.uWaves.value[i].set(wave.origin.x, wave.origin.y, wave.start, wave.maxRadius); } } } function updateWaves(time) { waves = waves.filter((wave) => { const progress = (time - wave.start) / wave.lifetime; return progress < 1; }); } function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); if (composer) composer.setSize(window.innerWidth, window.innerHeight); if (bloomPass) bloomPass.setSize(window.innerWidth, window.innerHeight); } function pad(value) { return String(value).padStart(2, "0"); } function randomRange(min, max) { return min + Math.random() * (max - min); } }

#webgl