제작자: Theodore
라이브 체험 프로젝트 소개
ANOMALY는 작동할 수 없을 것처럼 보이는 구조를 하나씩 지닌 실재 동물 열여섯 종의 아카이브입니다. 배럴아이의 두개골을 덮은 투명한 액체 돔, 갯가재의 캐비테이션 기포 타격, 꼬리지느러미가 없는 개복치를 소개합니다. A-001–A-016의 각 기록에는 드래그, 확대·축소, 초기화가 가능한 전용 Tripo 모델이 포함됩니다.
컬렉션은 분류 체계가 아니라 특이 구조 자체를 기준으로 정리합니다. 투명성, 시각, 생물발광, 위장, 포식, 거대화, 몸의 기본 구조에 더해, 이들과 독립적인 심해 분류를 제공합니다. 한 표본이 동시에 여러 카테고리에 속할 수도 있습니다. 배럴아이의 돔과 회전하는 관 모양 눈은 한 동물에 있는 서로 다른 두 가지 특이 구조입니다. 그래서 각 기록은 종명보다 해부 구조를 먼저 보여 줍니다. 모든 경험은 한 화면 안에서 이루어집니다. 카테고리, 캐러셀 카드, 검색 결과를 선택하면 콘텐츠가 제자리에서 교체되며, 왼쪽에는 아카이브 플레이트, 관찰 기록, 접을 수 있는 필드 노트, 중앙에는 3D 스테이지, 오른쪽에는 종 데이터와 분포 지도가 배치됩니다.
체험 포인트
- 하단 레일의 01–16에서 원하는 기록을 선택하면 스테이지와 양쪽 사이드 패널이 제자리에서 교체됩니다. 드래그해 회전하고 스크롤해 확대·축소할 수 있으며, 전환할 때마다 카메라를 초기화하므로 열여섯 개 표본 모두가 서로 비교할 수 있는 크기로 표시됩니다.
- 아카이브 플레이트를 클릭하면 자체 썸네일에서 형태가 변하며 백라이트 뷰잉 박스로 펼쳐집니다. 주변의 후광은 플레이트 가장자리로 새어 나오는 빛입니다. 최대 3.2×까지 확대하고 드래그해 이동할 수 있습니다.
- 특이 구조 자체, 즉 투명성, 시각, 생물발광, 위장, 포식, 거대화, 몸의 기본 구조로 필터링할 수 있으며, 서식지에 맞춘 독립적인 심해 분류도 제공합니다. 한 표본이 동시에 여러 카테고리에 속할 수 있고, 검색 범위에는 종명, 학명, 구조, 표본 ID가 포함됩니다.
- 모델을 다운로드하는 동안 GSAP가 표본의 측정 선화 플레이트를 한 획씩 그리고, 캘리퍼가 눈금자를 따라 이동합니다. 설계도가 몸체보다 먼저 나타난 뒤 3D 모델로 크로스페이드되며, 캐시된 모델도 플레이트를 1.5초 동안 유지해 읽기도 전에 번쩍 지나가지 않도록 합니다.
기술 분석
3D 에셋 · Tripo 하이 폴리 모델을 웹으로 가져오기
열여섯 개의 표본 모델은 Tripo로 생성했습니다. 원본은 각각 ~60 MB, ~1.9M 삼각형으로, 그대로 제공할 수 없는 조각 수준의 밀도입니다. gltf-transform meshopt 파이프라인은 지오메트리를 2.4–11 MB로 줄입니다. 정점을 용접하고, 오류 허용치 0.0002로 단순화한 뒤, 불필요한 데이터를 제거하고 meshopt로 압축합니다. 텍스처는 다운샘플링하지 않고 의도적으로 4K를 유지합니다. 다운샘플링으로 얻는 절감 효과는 적고 오히려 흐려짐의 주된 원인이었기 때문입니다. 8K로 제공된 텍스처는 4K로 낮춰 베이스 컬러 맵 한 장당 VRAM을 약 358 MB에서 89 MB로 줄이며, 화면에 표시되는 크기에서는 눈에 띄는 손실이 없습니다.
각 표본은 GLB → 정지 이미지 → 컷아웃 → 수작업 선화 플레이트 순서로 독립적으로 폴백합니다. 플레이트가 없어도 뒤에 제도 그리드가 남으므로, 어떤 파일이 누락되어도 스테이지가 비어 버리지 않습니다.
표본 스테이지 · 자동 프레이밍과 컨텍스트 보호
열여섯 개의 모델은 공통 규약에 맞춰 제작되지 않았고, 어느 모델도 변환을 수동으로 조정하지 않습니다. 각 모델은 로드할 때 자체 루트 행렬을 기준으로 측정합니다. 월드 공간에서 측정하면 이미 적용된 스케일까지 다시 읽어 재측정할 때마다 모델이 작아집니다. 측정에는 원시 Box3 대신 백분위 경계를 사용합니다. 몇몇 동물의 더듬이와 필라멘트는 전체 정점 중 극히 일부만 차지하면서도 바운딩 박스의 범위를 결정해 몸체를 작게 만듭니다. 양끝의 극값을 잘라 내면 바운딩 박스가 동물 몸체의 주된 덩어리를 감싸므로, 열여섯 개 모두가 비슷한 시각적 무게로 표시됩니다. 자동 맞춤은 가장 긴 가로축이 화면을 가로지르도록 모델을 돌리고 중앙에 배치해 canvas를 채웁니다. 새 표본을 카탈로그에 넣으면 스스로 프레임에 맞춰지며, 표본별로 필요한 것은 기껏해야 약간의 미세 조정뿐입니다(대왕조개는 옆모습이 아니라 뚜껑처럼 생겼습니다).
Canvas에는 표본을 key로 지정하지 않습니다. 전환할 때마다 WebGL 컨텍스트를 해제하고 다시 만들면 브라우저가 가장 오래된 활성 컨텍스트를 버리기 때문입니다. key는 내부 Scene에만 지정합니다. primitive에는 dispose={null}도 필요합니다. drei의 GLTF cache가 클론 사이에서 지오메트리를 공유하므로, 언마운트 시 R3F가 dispose하도록 두면 아직 사용 중인 버퍼까지 파괴됩니다.
조명 · 복사대가 아닌 진열장처럼 비추기
하나의 모델링 키 라이트, 뒤에서 가장자리를 스치듯 비추는 두 개의 림 라이트, 바닥 반사광은 없음——이 동물 대부분은 어둡고, 어두운 바탕에서 어두운 몸을 분리하는 것은 가장자리이며, 그것이 바로 림 라이트의 역할입니다. 환경 맵은 Scene 내부의 에어리어 라이트를 사용해 그 자리에서 베이크합니다(Environment가 key가 지정된 Scene 바깥에 있으므로 표본을 전환해도 다시 베이크하지 않습니다). HDRI 다운로드와 외부 요청은 없습니다.
조명을 다시 조정하는 것만으로는 가장 어두운 표본을 분리할 수 없었습니다. 짙은 적갈색 오징어와 따뜻한 갈색 바닥은 실제로 명도가 비슷하기 때문입니다. 그래서 표본을 부드러운 빛 웅덩이 안에 두고 접촉 그림자가 그 빛을 파고들게 해 실루엣을 드러냈습니다. 톤 매핑에는 중간 톤을 강하게 눌러 바로 이 표본들을 묻히게 한 기본 ACES 대신 노출 1.34의 Khronos PBR Neutral을 사용합니다.
로딩 · 신뢰할 수 있는 진행 상태
drei의 useProgress는 바이트가 아니라 파일 수를 셉니다. 자체 완결형 GLB는 한 항목이므로 다운로드 내내 진행 바가 0에 머물다가 마지막에 100으로 뛰어오릅니다. 이 숫자는 실제 진행 상황을 보여 주지 못합니다. 그래서 로더는 백분율을 표시하지 않습니다. DrawSVGPlugin이 표본의 측정 선화 플레이트를 한 획씩 그리는 동안 캘리퍼가 눈금자를 따라 이동하며, 남은 양을 안다고 가장하지 않고 작업이 진행 중이라는 사실만 전달합니다.
모델이 준비되면 플레이트가 3D 모델로 크로스페이드됩니다. 캐시된 모델도 플레이트를 최소 1.5초 동안 유지합니다. 그렇지 않으면 읽기도 전에 번쩍 지나가기 때문입니다. prefers-reduced-motion에서는 장식 애니메이션을 멈추고 최소 유지 시간도 없앱니다. 모션 감소는 기능이 아니라 모션을 제거해야 하며, 대기 시간을 추가해서도 안 됩니다.
