用 three.js 抹开一滩液体：高度图加流体模拟

📋 概述

作者在 Vue Fes Japan 2026 讲了液体粉底效果的实现，这篇文章接着上一篇流体模拟往下讲。这个效果最早是 2021 年为日本一个化妆品品牌的粉底宣传项目做的，客户要求能在网页上试不同质地与色号。他从零开始时并不知道怎么下手，花了大约一个月反复摸粉底，想弄清楚什么让它看起来、动起来像液体。最终判断流体算法是正解：手指划过液体时对侧会鼓起，周围材质被一起拉走。实现上复用同一张速度场制造铺开动作，另外开一个 FBO 作为高度图记录液体厚度，抬起与堆积在片元着色器里渲染，而不是去变形几何体。演示里他用了蓝色而非粉底色，拖动鼠标或手指就能把液体推开、拉出边缘。