一个「看得见肌肉发力」的实验：用 WebGL 实时渲染一匹黑色阿哈尔捷金马，把滚轮变成时间轴，让奔跑本身成为导航。
想做的东西
大多数品牌站把 3D 当装饰：模型转一圈，配一段文案，结束。我想试试相反的方向——让模型自己讲故事。
于是有了四个章节，每一章对应奔跑中的一个瞬间：
- 乾坤未定，黑马当先 — 起跑，马从画面右侧进入；
- 本能，为驰而生 — 解剖视角，肩胛、脊柱、后躯的结构；
- 专注，肌肉记忆 — 贴地机位，看蹄子落地那一下；
- 纯粹，不负热爱 — 收束到中景，背景切成朱红。
滚轮每走一格，慢动作就推进一段，镜头同时沿预设轨道移动。往回滚，动作倒放。
技术上的几个决定
模型直接用，不重做。 用的是 CC BY 4.0 的阿哈尔捷金马奔跑动画，保留原始骨骼与蒙皮权重，只重排了后肢节奏，让它变成干净的交替步态——重新绑定一套骨骼的成本，远超一个个人项目能承受的范围。
材质改成「近黑缎面」。 原模型是标准贴图，我把显示贴图降采样，换成自定义的黑色马毛材质，高光拉窄、粗糙度降低，才有了那种湿润的绸缎反光。
字体必须子集化。 手写体标牌用的中文字库原文件 51MB，直接上线等于劝退用户。最后按页面实际用到的 178 个字符做子集，压成 214KB 的 WOFF2——视觉完全一样，体积降到 0.4%。
声音是分层解锁的。 蹄声开场、嘶鸣落在中段、滚动解锁最后三秒；每次切换背景色，会有一声音效并报出新配色的名字。浏览器拦截自动播放时，会出现一个「CLICK TO PLAY THE HOOFBEAT」的兜底按钮。
数字
| 项目 | 数值 |
|---|---|
| 首屏 HTML + CSS + JS | 约 640KB |
| 马模型（GLB） | 23.6MB |
| 子集字体 | 214KB |
| 整站部署体积 | 28.8MB |
| 部署 | Cloudflare Pages（全球边缘，免费额度内） |
一点遗憾
模型有 23.6MB，首次加载在移动网络下大概要 10 秒。下一步想用 Draco 压缩几何体、再配 KTX2 纹理，目标压到 6MB 以内——但那需要改加载器，暂时先放着。
致谢
模型和动画来自 Animal Animator（CC BY 4.0）；飞鹰动画来自 GremorySaiyan（CC BY 4.0）。两位作者的原作是这个项目能成立的前提。