웹용 3D 애니메이션: Spline의 탑과 비둘기

웹사이트에 생동감 있는 3D 애니메이션 구현: 비둘기와 건물로 시작하기

디자인 디렉터는 신경망으로 생성한 애니메이션 비둘기와 스탈린 시대 스타일의 최적화된 모델을 활용해 3D 장면을 구성했다. 수작업 리톱로지 기법을 통해 건물의 폴리곤 수를 40만에서 1만 7천으로, 비둘기의 경우 150만에서 단 1천으로 줄였다. 스플라인(Spline)에 비행 경로와 뼈대 애니메이션을 통합함으로써 브라우저 부담 없이도 상호작용 가능한 콘텐츠를 완성했다.

건축물 모델 최적화

스탈린 양식의 원본 타워 모델은 402,383개의 폴리곤을 포함하고 있었으며, 파사드, 문장, 별 등 고도의 세부사항을 담고 있었다. 정밀한 기하학적 제어가 필요했기에 자동 최적화는 적합하지 않았다. 블렌더에서는 점(버텍스) 스냅 기능을 활용해 주요 지점에 평행육면체를 붙이고 수작업으로 윤곽선을 따라 그렸다.

대칭성을 활용하면 작업량이 반으로 줄어든다. 전체 파사드 중 1/4만 제작 후 미러링 처리했다. 최종 폴리곤 수는 17,693개. 핵심 기하학은 단순화하면서도 파사드의 세부 사항은 유지했다. 스플라인에서는 모델을 조정 가능한 색상, 밀도, 입자 크기로 설정 가능한 포인트 클라우드 형태로 변환했다.

메시 비교 결과, 원본은 매우 빽빽한 반면 최적화된 버전은 간단한 표면에 큰 폴리곤을 사용한다.

비둘기 모델 생성 및 리톱로지

비둘기 모델은 트리포(Tripo)를 활용해 '날개를 펼친 도시의 새'라는 프롬프트로 생성했다. 결과적으로 150만 폴리곤의 모델이 나왔지만, 부리에 덩어리, 다리가 비틀린 등의 결함이 있었다. 블렌더에서 수작업 리톱로지 과정을 거쳐 형상 외곽선을 그리며 비율을 수정하고 불필요한 부피를 제거했다.

애니메이션 준비를 위한 조정: 다리는 움직임을 고려해 배치되었고, 부리는 정렬되었다. 폴리곤 수는 1,000배 이상 감소해 1,284개로 줄었으며, 작은 화면에서도 충분히 표현 가능하다. 리톱로지 과정은 고폴리곤 베이스 → 실루엣을 보존하는 저폴리곤 표면으로 전환되는 방식이다.

실제 참조 기반의 뼈대 애니메이션

뼈대는 모델 내부의 삼각형 뼈로 구성되며 대칭 구조(반만 제작 후 미러링). 블렌더에서 기하학적 메시를 뼈에 바인딩: 뼈를 회전하면 메시도 함께 움직인다.

참고 자료: 유튜브의 느린 촬영 영상 — 날개 퍼덕이며 이륙, 다리 확장, 착륙. 착륙 애니메이션은 목표 평면과 키프레임을 기반으로 설계했다.

날개 접기는 단순화: 각 깃털별 애니메이션보다 스케일링을 활용했으며, 멀리서 보면 세부사항이 보이지 않기 때문이다. 마이크로 애니메이션:

• 꼬리: 뼈를 따라 위아래 움직임.
• 머리: 회전.
• 긁는 동작: 날개 들기 + 머리 움직임.
• 보조 행동: 이륙 전 구부림, 꼬리 흔들기.

마이크로 애니메이션과 사이트 통합

비둘기는 소형 이동 가능한 사각형 안에서 3가지 짧은 클립(도착, 착륙, 이륙)으로 등장한다. 자바스크립트로 제어되는 컨테이너에 포함되어 있다. 로고에 맞춤 테스트: 디자인을 블렌더로 가져와 표면 조정을 진행했다.

스플라인에서의 작업: 경로와 FPS 관리

블렌더에서 24FPS로 내보낸 후 스플라인에서 처리. 비둘기 스타일은 줄무늬, 원형 비행 경로는 중심이 약간 이동해 자연스러운 움직임을 구현했다. 카메라: 줌 아웃 + 중심화로 시야 확대 효과를 냈다.

문제점:

• FPS 고정되지 않음: 고사양 PC에서는 24 이상, 저사양에서는 낮아짐 → 날개 퍼덕 동기화 문제 발생.
• 애니메이션 재설정: 요소가 화면에 계속 존재하도록 하여 최소화.

건물은 마우스 커서에 따라 회전하며, 폴리곤 뒷면이 복원된다.

웹 3D 작업을 위한 도구와 워크플로우

• 블렌더: 모델링, 라이팅, 애니메이션.
• 트리포: 기본 모델 생성.
• 스플라인: 장면 조립, 인터랙티브 요소, 포인트 클라우드.
• 애드 오브젝트: 2D 애니메이션(영상용).

핵심 교훈:

• 수작업 리톱로지는 실루엣을 유지하면서 부하를 극도로 줄인다.
• 대칭성은 모델링 속도를 4배로 증가시킨다.
• 현실적인 뼈대 애니메이션을 위해 느린 촬영 영상은 필수다.
• 스플라인은 보완 작업이 필요: 각도는 카메라 위치로, 비행 경로는 궤적 설정으로 해결.
• 24FPS + 마이크로 애니메이션은 파일 크기 최소화로 생동감을 제공한다.

전체 워크플로우: 생성 → 리톱로지 → 라이팅 → 애니메이션 → 내보내기 → 스플라인

— Editorial Team