Three.js打造Q弹果冻甜点动画

Misha Kiiatkin（网名 mesq）用 Three.js 做出了一杯会抖动的果冻甜点，这件事的真正价值不在于"又一个好看的 3D 动画"，而在于它证明了浏览器端实时渲染已经能承载过去只有离线渲染或游戏引擎才能实现的风格化材质表现。

这个作品到底做了什么

Kiiatkin 是 edclub 的 Technical Artist，同时也是 Three.js 社区里被 80 Level 称为"真正的 Three.js 巫师"的人。他这次发布的是一段 frutiger aero 风格的 3D 动画——一杯装在塑料杯里的果冻水果甜点，整体色调梦幻、柔和、带点千禧年科技乌托邦的怀旧感。灵感来源是插画师 maomomiji 用丙烯颜料绘制的彩色食物插画。

关键在于，这不是一张静帧渲染图，而是一个可交互的实时场景。两个甜点都可以缩放、旋转视角，还能"摇晃杯子"让果冻动起来。这意味着所有材质计算、物理模拟、后处理都在浏览器里实时跑。

手绘法线贴图是风格化的核心手段

要做出透明、如果冻般的质感，Kiiatkin 用的是手绘法线贴图（hand-painted normal maps）配合 TSL 中的 PostProcessing。这是整个作品技术路线上最值得拆解的一点。

手绘法线贴图之所以适合风格化纹理，是因为它绕开了物理精确的法线计算，转而让艺术家直接控制光照在表面的偏折方向。你可以在 Three.js 里把自定义法线贴图应用到标准材质上，从而让一个本来"太真实"的 PBR 材质瞬间变成插画质感。Kiiatkin 还叠加了基于颜色渐变（color gradients）的笔触，进一步强化丙烯画的手工感。

手绘法线贴图 + 渐变笔触 = 用实时渲染管线复现传统绘画的笔触逻辑。

这对从业者的启示是：风格化渲染的瓶颈往往不在着色器代码，而在贴图资产的美术控制力。会画的人比会写 shader 的人更稀缺。

抖动、噪点、折射：三个容易被忽略的工程细节

Kiiatkin 做了三件很具体的事，每一件都对应一个实时渲染中的常见痛点。

第一，他修复了场景中的 dither noise，用来减少 Three.js 常见的颗粒感抖动。Dithering 在低色深渲染中常被用来掩盖色带，但处理不当就会变成满屏噪点。他选择"fix"而不是"hide"，说明他对最终画面的干净度有明确要求。

第二，他为主动物体设置了 soft body wobble（软体晃动）来模拟果冻的抖动物理。这不是刚体动画，而是需要顶点级别的形变控制。在 Three.js 里做软体模拟通常要自己写约束求解或借助外部物理库，他显然做了定制化处理。

第三，他利用 Three.js BLOCKS 中的 transmission 参数来调节材质的折射深度，从而让塑料杯、果冻和水果块都呈现出闪亮的玻璃般外观。Transmission 是模拟透光材质的关键参数，调得好就是晶莹剔透，调不好就是一团模糊。他把三个不同材质的折射深度分别调到位，这是需要反复试错的活儿。

所以呢：这对行业意味着什么

Three.js 长期以来被定位为"轻量级 WebGL 封装"，适合做产品展示、数据可视化、简单的 3D 场景。但 Kiiatkin 这个作品说明，它已经能支撑起完整的风格化美术管线——从手绘贴图到软体物理到透射材质到后处理，全链路在浏览器里跑通。

对游戏和数字艺术从业者来说，这意味着Web 端可以成为独立的作品发布平台，而不只是游戏引擎的降级替代方案。一个 Technical Artist 完全可以用 Three.js 做出有商业价值的风格化内容，直接嵌入网页，无需下载，无需插件。

Kiiatkin 今年在巴黎的 Three.js Conf 上专门讲了如何为 Three.js 项目创建手绘资产，他也在 GitHub 上开源了部分项目。这说明社区正在从"能不能做"进入"怎么做得好"的阶段。工具链在成熟，方法论在沉淀，剩下的是美术和技术结合的能力——而这恰恰是大多数团队最缺的。

当实时渲染的门槛降到浏览器级别，竞争点就从"引擎性能"转移到了"美术控制力"。

这个果冻甜点看起来只是个可爱的小品，但它背后是一条正在成型的 Web 端风格化渲染工作流。谁先掌握这套流程，谁就能在下一个轻量级交互内容爆发期里占住位置。