three.js로 파운데이션 액체 번짐 구현: 높이맵과 유체 속도맵으로 두께를 옮긴다
- 2021년 일본 화장품 브랜드 primavisa의 파운데이션·베이스 텍스처 시뮬레이션 사이트용으로 만든 액체 번짐 효과를 2026년 Vue Fes Japan에서 발표한 내용임
- 액체 두께를 별도 FBO 높이맵의 R채널에 저장하고, 유체 시뮬레이션이 만든 속도맵을 그대로 써서 두께를 이동시킴
- 현재 픽셀에서 속도 방향만큼 두께를 빼고, backtraceUv()로 역추적한 소스 UV에서 두께를 더하는 advection 방식으로 퍼짐을 만듦
- 높이맵에서 노멀을 계산해 Matcap과 알파맵으로 렌더링하며, 기하를 변형하지 않고 프래그먼트 셰이더로 볼록한 부피감을 냄
- 알파맵은 현재 높이맵과 액체가 발린 이력을 함께 써서 갱신하고, 초기 두께는 반구형 블롭을 셰이더로 그려 넣음
Hacker News 의견들
신기한데 부피가 보존되는 것 같진 않음. 덩어리를 안쪽으로 퍼뜨리면 액체가 다 사라지면서 얇은 점만 남더라. 시뮬레이션할 때 자주 겪는 문제고, 반대 방향으로 가면 에너지가 계속 커지는 웃긴 결과도 나옴.
작은 원을 계속 돌리면 무한 페인트를 만들 수 있음. 크고 작은 원을 오가면 다른 색이 조금이라도 섞여 있을 때 2차색으로 수렴하고, 왜 그런지는 글에 설명돼 있음.
그건 그냥 크림이 손가락에 흡수된 거 아닌가 ㅋㅋ
약간만 손보면 캘리그래피 앱 만들 때 쓸 수 있겠음.
글 끝부분 결론이 좀 아쉬웠음. 공개하면 더 이상 특별한 방법이 아니게 된다는 대목.
자기 자아에서 한 발짝 벗어나서 개인적 성취 대신 연결됨 쪽에서 보면 그런 문장에 슬퍼할 필요 없음.
근데 이 데모에서 three.js가 왜 필요함? DIV에 CSS 효과 보여주면서 React로 만들었다고 하는 느낌임. 데모는 좋은데 이런 걸 하려고 큰 라이브러리를 써야 하는 건 아님.
작성자가 이런 거 항상 three.js로 만들고, 텍스처에 셰이더 올리는 법 알아내기 귀찮았을 수도 있음.
색이 섞이는 거 보니까 고등학교 때 물감 섞던 게 생각남. 얼마나 잘 만들었는지 보여주는 증거임.
진짜 잘 만들었는데 상단 헤더가 인터랙티브하지 않은 게 이유 없이 아쉽더라.