three.jsでリキッドファンデーションの「伸び」を再現した手法

Spreading Liquid with Three.js

2021年に日本の化粧品ブランド向けに実装したリキッドファンデーションの質感シミュレーションを、Vue Fes Japan 2026での講演を機に解説。流体シミュレーションの速度マップを使い、高さマップで液体の厚みを移流させ、アルファマップで塗布跡を保持。フラグメントシェーダーで法線を計算しMatcapで光沢を表現する。物理的に正確な体積保存は行わず、見た目を優先した実装だ。