2026-09-24 · 今日最炫

Momiji

湖边枫树从黎明转到月色；拨落叶、晃灯笼，最好开着声音慢慢玩。

打开网站 ↗

大白话拆解

它是什么：一座漂在水上的红枫小岛：从黎明到月夜自动流转，落叶可以拨弄，灯笼会晃，水面有涟漪。

好在哪：它把“氛围”做满了：光线、声音、小互动同时在线，像一张会动的明信片。

怎么做到的：

整座岛是做好的 3D 模型，用新一代 WebGPU 渲染，所以细节多也跑得动。
天空颜色、太阳角度和灯光强度随时间一起插值，形成日夜循环。
声音按位置播放，靠近灯笼、水边听到的不一样。

完整技术拆解

今日拆解 · Momiji

Live: https://momijigari.vercel.app/
Gallery: https://mesh3d.gallery/experiment/momiji-a-maple-from-dawn-to-moonlight
Author: Thomas Gertenbach（HTML meta author）
Bundle: /assets/index-DIPw4V9z.js（约 1.9 MB）+ /assets/index-CbKQuawD.css
证据目录：本文件夹（index.html、JS/CSS、noiseVolume.worker-*.js、glb 头、og-image.jpg）

为何选它

8 条里它是唯一把「一整棵可交互的红枫岛」做成 WebGPU 场景的：黎明→月色的日光循环、落叶拨弄、灯笼晃动、水面涟漪、空间音频同时成立。视觉冲击强，技术栈也深（Three r183 WebGPU + TSL + GLB + Bloom），比纯落地页或 App UI 更适合拆开看。

实际在源码里找到的技术栈

Three.js r183（WebGPU 路径）Od="183"；window.__THREE__=Od；字符串 three.js r${Od} webgpu；WebGPURenderer 出现 36 次

Three TSL / Node 材质TSL、MeshPhysicalNodeMaterial、MeshStandardNodeMaterial、BloomNode、PassNode；内含 UnrealBloom 风格 pass 名

React 19.3.0（UI 壳）cn.version="19.3.0"；TV.createRoot(...).render(st.jsx(G.StrictMode,{...}))；未找到 @react-three/fiber / useFrame / Drei

Howler（Web Audio 封装）HowlerGlobal / Howl / usingWebAudio / new AudioContext；播放类型含 temple-bell、wind-chime、arc-open/arc-close/arc-step。bundle 内未出现明确的 howler@x.y.z 版本字符串

GLTF + 纹理压缩GLTFLoader、DRACOLoader、KTX2Loader、MeshoptDecoder；资源 /grove/maple-tree.glb、/grove/lantern.glb（HTTP 200）

自定义噪声体积 Worker/assets/noiseVolume.worker-CvTZWSwE.js；体积常量 [128,256,128]，Jenkins 风格位混哈希（推测用于雾/体积噪声，非 Perlin 字符串）

日夜参数uniform/状态名：timeOfDay、dayCycleSpeed、sunHeading、sunIntensity、exposure、fogDensity；每帧近似 timeOfDay += dt * dayCycleSpeed / 60

未使用 / 未证实未找到 OGL、R3F、GSAP、Tone.js 包名、lil-gui 运行时（仅有「lil-gui look」CSS 注释）。#version 300 es 出现在 Three 内置 WebGL 回退路径，主路径是 WebGPU/WGSL

noscript 文案也写明：*interactive WebGPU scene*。

核心效果怎么工作（源码 + 标明推测）

1. 场景资产（确认）

结构枫树：/grove/maple-tree.glb
灯笼：/grove/lantern.glb（错误文案提到 *Lantern swing* 挂点、纸质发光材质）
字重：Yuji Boku woff2（标题「紅葉」一类书法 UI）

2. WebGPU 渲染管线（确认）

React UI 壳（音量、日弧、错误态）
    ↓
Three WebGPURenderer + TSL NodeMaterial
    ↓
场景图：岛 / 树 / 落叶实例 / 水面 / 雾 / 灯笼
    ↓
后处理：BloomNode（含 lanternBloom / lanternLight / lanternFlicker 等参数）

调试面板字符串暴露了成组参数：Water（折射、涟漪、落叶浮力）、Lantern（bloom/flicker/range）、Bloom（bloomEnabled）——推测生产 UI 用自研 mini-panel，样式刻意贴近 lil-gui。

3. 黎明 → 月色（确认）

状态里有 timeOfDay 与 dayCycleSpeed；更新式：

timeOfDay = wrap(timeOfDay + dt * dayCycleSpeed / 60)

再驱动 sunHeading / sunIntensity / exposure / fogDensity（具体映射曲线未全部展开，推测为预烘焙或 smoothstep 色温曲线）。

4. 交互与音频（确认 + 推测）

指针 / 射线：pointer、raycast 高频出现；落叶与水面有专门参数（waterLeafStrength、puddleLeafFloatTime、testWaterRipples）
灯笼：场景对象名含 Lantern swing；参数 lanternFlicker / lanternBloom
Howler：onMark → play({type:"wind-chime"})；日弧 UI → play({type:\arc-${ue}\})（arc-open / arc-close / arc-step）；另有 temple-bell
screenWind()：推测把指针/姿态映射成风场，推动落叶与飘带

5. 伪代码（忠实于源码结构）

boot:
  createRoot(<App/>)                    # React 19 UI
  renderer = new WebGPURenderer(...)    # three r183
  grove = await GLTFLoader(/grove/maple-tree.glb)
  lantern = await GLTFLoader(/grove/lantern.glb)
  noiseVol = Worker(noiseVolume)        # 128×256×128 hash volume
  howl = new Howl({ src: /audio/... })  # webm/mp3

each frame:
  timeOfDay = wrap(timeOfDay + dt * dayCycleSpeed/60)
  updateSunFogExposure(timeOfDay)
  wind = screenWind(pointer)
  stirLeaves(wind); rippleWater(contacts)
  swingLantern(pointer); flicker(lanternLight)
  render TSL materials → BloomNode → canvas

on UI:
  arc drag  → howl.play("arc-*")
  mark/chime → howl.play("wind-chime" | "temple-bell")