北京
你见过一杯会抖的果冻吗？不是真的端在手里那种，而是打开网页就能戳一戳、摇一摇、还能放大缩小转视角的那种。技术美术师 Misha Kiiatkin（网名 mesq）最近分享了他用 Three.js 做的一个果冻水果甜点动画，整个画面透着一种梦幻的、frutiger aero 风格的质感。
先说清楚，这不是一款游戏，也不是什么能玩的关卡。它就是一个交互式的 3D 小场景——两杯甜点摆在画面里，你可以缩放、换视角，甚至"摇杯子"让里面的果冻动起来。但正是这种"没什么用但就是好看"的东西，往往最能看出一个技术美术的功力。
灵感来自丙烯画，不是照片
Kiiatkin 提到，这个作品的灵感来自 maomomiji 用丙烯颜料画的食物插画。也就是说，他一开始就没打算做写实——目标是那种色彩鲜艳、笔触明显、带点手绘感的风格化效果。这一点挺关键，因为后面所有的技术选择，都是围绕"怎么让 3D 看起来像手绘"来展开的。
他本人是 edclub 的技术美术，同时也被形容为一个真正的 Three.js 高手。今年他还在巴黎的 Three.js Conf 上做过一场分享，讲的就是怎么为基于 Three.js 的项目制作手绘风格的资产。所以这个果冻甜点，某种程度上算是他这套方法论的一次展示。
透明果冻感，靠的是手绘法线
要让一个东西看起来像果冻，核心难点在于"透"。Kiiatkin 的做法是用手绘法线贴图，配合 TSL 里的 PostProcessing 来实现。手绘法线贴图是做风格化纹理的常用手段——具体操作是在 Three.js 里把自定义法线贴图应用到标准材质上。
除了法线，他还用了基于颜色渐变的笔触来强化风格化观感。另外，为了减少 Three.js 里那种颗粒感明显的抖动，他专门处理了场景中的 dither 噪点。这些细节单拎出来都不算新鲜，但叠在一起，才撑起了那种"又透又软又干净"的视觉效果。
会抖，是因为加了软体物理
果冻最灵魂的地方当然是"抖"。为了模拟这种抖动，Kiiatkin 给主体对象设置了软体晃动（soft body wobble）。这不是简单的关键帧动画，而是让物体本身具备一种类似软体的物理反馈。
至于那种玻璃般的反光质感，他用了 Three.js BLOCKS 里的 transmission（透射）来调整材质的折射深度。塑料杯、果冻、水果块，三种不同材质都靠这个参数来拿捏通透度。最终呈现出来的，就是杯子像玻璃、果冻像果冻、水果块像泡在里面的效果。
能玩，而且不止一杯
如果你对这种粉彩系的抖动动画感兴趣，可以直接去玩一下。两杯甜点都是可交互的，具体能做的事包括：
- 放大和缩小画面
- 切换观察视角
- 摇晃杯子，让里面的果冻跟着动
说白了，它更像一个技术演示，而不是一个"作品"。但恰恰是这种轻量的交互，让人愿意多戳几下——毕竟谁能拒绝一杯会抖的果冻呢。
想自己做一个？路是通的
Kiiatkin 在 Twitter 上会分享更多 Three.js 相关的内容，GitHub 上也有一些他的项目。如果你看完想动手做点类似的东西，他公开的这些项目算是现成的参考。从手绘法线到透射材质，再到软体晃动，这套流程本身并不神秘，难的是审美和参数的手感。
顺带一提，这类风格化的 3D 作品最近挺多的。同一批内容里还提到了 Kem 的绘画风格静物，以及 Gaku Tada 的水彩树。看得出来，用代码做"手绘感"，正在变成一个小圈子里的共同趣味。
回到这杯果冻本身——它不解决任何实际问题，也不属于任何游戏。但作为一个技术美术的练手作品，它把"透、软、亮"这三件事同时做到了，而且做得挺好看。对于正在折腾 Three.js 的人来说，这大概就是那种"看完想打开编辑器试两下"的东西。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
