林间小鹿

技术解析

• 3D 角色 · Tripo 生成与自动绑骨

  小鹿出自一条 Tripo API 流水线：生成模型、智能低模、绑骨前检查、四足自动绑骨，最后导出的 GLB 约 1.5 万个三角面，带一副 41 根骨骼的四足骨架和 PBR 贴图。页面用 GLTFLoader 载入，按头顶约 1.55 米（梅花鹿的体型）统一缩放。

  Tripo 骨骼的命名很规整：四条腿各按 Limb_0 到 Limb_3 分段，脊柱和头颈依次编号。程序直接按名字找到每条腿、脊柱和颈椎来驱动，不用手工对骨骼。毛色在着色器里调成梅花鹿夏毛的红褐，背脊两侧程序化撒上一排淡白斑；斑点按绑定姿势的坐标贴在皮肤上，走起来不会在身上滑，逆光时绒毛边缘还会透出一圈暖光。

• 步态 · 在骨骼上现场算出的走路

  走路是页面载入时，用 IK 在这副骨骼上现场算出来的。先定蹄子的轨迹：着地时和身体同速往后扫，悬空时抬起、前伸、落地；四条腿按左后、左前、右后、右前的顺序迈步，每条腿约七成时间着地，身体只有很轻的起伏和横滚。腿用三段 IK 解算，上下两段保持绑定姿势的夹角，前腿抬起时腕关节再额外折一下。整段步态烘成 48 帧的循环动画，交给 AnimationMixer 播放。

  播放速度按「身体速度 ÷ 蹄子后扫速度」换算，不管慢走还是按住 Shift 小跑，蹄子都不会在地上打滑。站着不动时，程序转动胸椎到头部的四节骨骼，让小鹿低头吃一阵草、抬头朝一侧张望，再低下去；一迈步，脖子就抬起来。

• 杉林 · 用代码种出来的森林

  除了小鹿，林子里的一切都由代码生成，贴图只用了 Poly Haven 的 CC0 杉树皮、苔石和林地三组材质。巨杉高约 44 米：近景的主树单独建网格，背景的树排用 InstancedMesh 批量绘制；树干的弯曲在着色器和 JS 里用同一套公式，树枝才能稳稳接在弯过的树干上。巨杉之间夹一层 8–17 米的幼树，再配上灌木、蕨丛、岩石和倒木，林子有了高低层次。

  地上铺着 12 万片实例化草叶，风在顶点着色器里摆动；按 G 起一阵 6 秒的风，草被压弯、蝴蝶被吹散。草还知道小鹿在哪儿，会在它身边往外倒。18 只蝴蝶平时绕着花丛慢慢飘，小鹿走近就惊起一群；70 片带叶柄和叶脉的落叶翻转着飘下，穿过光柱时被照亮。

• 光影 · 体积光柱与林间光斑

  树冠由几百个压扁的叶团拼成，生成时会把每个叶团沿光线投到地面，避开预设的 29 个光柱落点，光柱才能一束一束分开。体积光沿视线逐步采样太阳的阴影贴图，在半分辨率下算出散射，再依次和远雾、ACES 色调映射、辉光、FXAA 合成出画面。

  阴影改写成 PCSS 软阴影：离遮挡物越远，影子越虚。树冠漏下的光斑在光源空间里统一计算，所以草、树皮、小鹿和光柱上的光斑是同一套。空气里的浮尘只在光柱里亮起，到了阴影里几乎看不见。按 R 键，画面用 3 秒过渡到夜晚：太阳换成冷色的月光，光柱变弱，光点亮得像萤火。

• 镜头与录屏 · 在页面里直接出片

  按 C 进入电影镜头：机位绕着小鹿慢慢转、高低起伏，界面全部隐藏。按 V 开始录制，MediaRecorder 直接录 WebGL 画布和音效，以 60 帧、16 Mbps 输出，浏览器支持就存 MP4，否则存 WebM；录制期间画质档位锁定，分辨率不会中途跳变。

  声音全部用 Web Audio 现场合成：收集光点时一声风铃，音高沿五声音阶往上走；起风时一声风声。平时画面按帧率自动调整分辨率，掉帧就降一档，也可以按 1 / 2 / 3 手动锁定低、中、高画质。