Creative Coding
SNOWFLOW：WebGPU 程序化雪地 demo 與 AI 產品影片自動化的啟發
SNOWFLOW 是 Noniv/snowflow_demo 的 WebGPU / Babylon.js / WGSL 即時程序化雪地渲染 demo。本文查證 GitHub、MIT 授權、WebGPU 條件，並整理它對 AI-assisted interactive demo → product video pipeline 的啟發。
2026年8月3日3 分鐘閱讀👁 3
Threads 知識整理 · WebGPU · Product Demo
SNOWFLOW 是一個 WebGPU / Babylon.js / WGSL 寫成的即時程序化雪地渲染 demo。Threads 來源把它放在「Codex 一天內把 8 個網頁變成影片 / 產品 demo 自動化」的脈絡下，但 repo 本身更準確的價值是：展示用完整技術設計文件與 GPU 程序化渲染做出可互動、高視覺品質的 browser-native demo。
Matt 判斷：這不是一般 landing page 模板，而是可作為「AI 生成互動式技術 demo → 錄製成產品影片」的參考案例。對 BigIntTech 比較有價值的不是雪地本身，而是把產品 demo 從剪片後製，前移成可程式化、可重錄、可自動化的互動場景。
來源重點
- Threads 來源說：有人用 Codex 一天內把 8 個網頁變成影片，花約 10 分鐘把產品演示變成自動化影片。
- 來源連到 GitHub：Noniv/snowflow_demo。
- 關聯 Threads 補充：SNOWFLOW 是 browser demo，重點是 persistent deformable snow、waterbending spells、snow-surfing dynamic wakes，且「從完整 technical design document 開始，而不是 vague prompt」。
GitHub 查證
| 項目 | 結果 |
|---|---|
| Repo | Noniv/snowflow_demo |
| 官方描述 | Real-time procedural snow rendering demo built with WebGPU, Babylon.js and hand-written WGSL |
| Demo | snowflow-lilac.vercel.app |
| 主要語言 | JavaScript |
| License | MIT License |
| Stars / forks | 查證時約 474 stars、116 forks |
| 前端 stack | Vite、Babylon.js 9.x、WebGPU、hand-written WGSL |
| WebGPU 條件 | README 明確要求 WebGPU-capable desktop browser；沒有 WebGL fallback |
技術亮點
| 模組 | README 描述的做法 | 可學到的 pattern |
|---|---|---|
| Terrain | Nested-ring geometry clipmap，約 870m 半徑、333k triangles、一個 static mesh / draw call | 大場景可用 GPU displacement + clipmap，而不是大量 CPU mesh |
| Snow shading | 多尺度 normals、subsurface scattering、GGX specular、procedural glints | 視覺質感靠 shader layer 堆疊，不靠貼圖素材 |
| Deformation |