Captain's Log
← Observatory
Observatory·

도형 셋과 물방울 — Web3 애니메이션 스터디를 웹 3D로

콘·큐브·구 세 도형이 물방울 사이에 떠 있는 미니멀 애니메이션 스터디를 웹 뷰어로 게시한 기록. 이번 편의 관문은 하나의 절차적 재질이 오브젝트마다 다른 색을 내는 트릭을 웹으로 옮기는 것이었다.

TrainingBlender3DThree.js

도형 셋, 그리고 물방울

이 모델은 완성된 오브젝트가 아니라 애니메이션 스터디다. 콘·큐브·구 — 기본 도형 셋이 세로로 떠서 저마다 움직이고, 주변에는 유리 물방울들이 떠 있는 미니멀 컴포지션. Web3 프로젝트의 모션 감각을 잡기 위한 연습이다.

3D 뷰어 로딩 중…

하나의 재질, 여러 색

POI 마커 편의 재질은 이름에 색이 적혀 있어서(…Blue, …White 같은 식) 이름대로 색을 심으면 됐다. 이 파일은 더 까다로웠다 — 도형 셋과 물방울 전부가 Plastic 재질 하나를 공유하는데, 렌더에선 저마다 다른 파랑이다. 절차적 셰이더가 오브젝트 정보를 받아 색을 흩뿌리는 트릭인데, glTF는 재질을 오브젝트가 아닌 메시에 붙이므로 이 트릭이 통째로 사라진다.

그래서 이번엔 재질을 고치는 대신 오브젝트별로 새 재질을 만들어 갈아 끼웠다. 렌더에서 도형별 색을 샘플하고, 물방울들은 transmission 유리로 빚어서.

HERO = {
    "Cone.001":   make_mat("ConeBlue",   (0.40, 0.62, 0.90), ...),  # 연한 하늘
    "Cube.001":   make_mat("CubeBlue",   (0.03, 0.18, 0.42), ...),  # 짙은 남색
    "Sphere.001": make_mat("SphereBlue", (0.07, 0.30, 0.65), ...),  # 중간 파랑
}
BUBBLE = make_mat("BubbleGlass", (1, 1, 1), rough=0.05, transmission=1.0)

물방울 유리는 Geo DiPin 편에서 만든 뷰어의 유리 옵션이 그대로 받아준다 — 여기서는 비눗방울답게 두께를 얇게(glassThickness={0.1}).

반복이 만드는 속도

시리즈를 거듭할수록 파이프라인이 손에 붙는다. 씬 분석 → 미리보기 렌더 → 선택 내보내기 + 재질 패치 → 태그 한 줄. 관문은 편마다 다르지만(조명·유리·절차적 색·오브젝트별 색), 그때마다 뷰어에 옵션이 하나씩 쌓인 덕에 이 편에서는 새로 만든 코드가 한 줄도 없다. 도구를 만들어 두면, 다음 작업은 글쓰기만 남는다.