Three.js로 액체 파운데이션 흐르는 효과 만들기

핵심 요약

• 2021년 일본 화장품 브랜드의 액체 파운데이션 프로모션 프로젝트를 위해 개발한 액체 확산 효과를 Three.js로 구현한 과정을 설명한다.
• 마우스나 손가락으로 드래그하면 액체가 밀려나고 주변 액체가 함께 움직이는 현상을 재현하기 위해 유체 시뮬레이션 알고리즘을 선택했다.
• 높이 맵을 사용해 액체의 두께를 표현하며, 유체 시뮬레이션에서 생성된 속도 맵으로 액체의 움직임을 업데이트한다.
• 현재 픽셀의 두께와 속도를 샘플링해 속도 방향으로 움직일 두께를 계산해 뺀 뒤, 역추적(backtracing)을 통해 원본 위치에서 두께를 샘플링해 더한다.
• 이 계산은 물리적으로 정확하지 않으며 액체의 총량을 보존하지 않지만, 시각적 효과를 우선하도록 조정했다.
• 별도의 알파 맵을 추가해 현재 두께뿐 아니라 지금까지 기록된 최댓값을 혼합하여 액체가 얇아져도 흔적이 남도록 했다.
• 높이 맵에서 샘플링한 인접 픽셀들의 높이로 표면 노멀을 계산한 후 프래그먼트 셰이더에서 하이라이트와 쉐이딩을 렌더링한다.
• 원형으로 그릴 때 샘플링 편향이 누적되어 액체의 양이 계속 증가하는데, 이는 물리적 정확성보다 시각적 효과를 중시한 결과다.
• 8비트 텍스처는 256단계만 저장해 높이 맵이 양자화되어 법선과 쉐이딩에 계단 현상이 나타나는 반면, 32비트 부동소수점 텍스처는 더 부드러운 윤곽을 만든다.
• 여러 색상의 액체를 같은 속도 맵으로 공유하면서 각각 높이 맵과 알파 히스토리를 유지하고, 쿠벨카-뭉크 모델을 단순화해 색상을 혼합했다.