Three.js로 액체 파운데이션 흐르는 효과 만들기
Key Point
웹에서 실시간으로 동작하는 물리 기반 액체 시뮬레이션의 실제 구현 과정과 시각적 효과 우선의 설계 선택을 상세히 보여주므로, Three.js와 WebGL 셰이더를 다루는 개발자에게 참고할 만한 기술 문서다.
핵심 요약
- 2021년 일본 화장품 브랜드의 액체 파운데이션 프로모션 프로젝트를 위해 개발한 액체 확산 효과를 Three.js로 구현한 과정을 설명한다.
- 마우스나 손가락으로 드래그하면 액체가 밀려나고 주변 액체가 함께 움직이는 현상을 재현하기 위해 유체 시뮬레이션 알고리즘을 선택했다.
- 높이 맵을 사용해 액체의 두께를 표현하며, 유체 시뮬레이션에서 생성된 속도 맵으로 액체의 움직임을 업데이트한다.