연재 Web3 프로젝트 3D 모델링 항해 훈련 일지

약 1분

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}).

반복이 만드는 속도