three.js로 액체가 번지는 효과를 만든 방법

Spreading Liquid with Three.js

2021년 일본 화장품 브랜드의 리퀴드 파운데이션 프로모션을 위해 개발된 액체 확산 효과의 구현 과정을 설명한다. 유체 시뮬레이션의 속도 맵을 활용해 높이 맵의 두께를 이동시키고, 알파 맵으로 액체가 지나간 자국을 남기며, 높이 맵에서 법선을 계산해 Matcap으로 하이라이트를 입힌다. 물리적으로 정확한 부피 보존은 아니지만 시각적 효과를 우선한 실용적 접근을 공유한다.