히어로 3D 를 파이프라인 게이트로 — 형태에 이유를 준다

'3D 라고 그냥 큐브만 돌면 안 된다'는 지적에서 시작해 조사부터 했다. research/three/06~08 에 사례 32건, GLB 소스 17곳, 방향 제안 3개가 있다. 조사 결론: 추상이다. GLB 는 쓰지 않는다. - 구체 오브젝트의 성립 조건 3개(물리적으로 존재 / 각도가 정보 / 오브젝트가 하나로 정해짐)를 우리 브리프는 하나도 충족하지 않는다. 규칙 묶음은 돌려봐도 새 정보가 없다 - 실측: DamagedHelmet.glb 3,685KB 중 텍스처가 87%라 Draco 를 걸어도 -13%. 게다가 디코더만 200KB 로 예산의 67%를 먹는다 - Stripe Globe 는 모델 파일이 0바이트다. 6만 점을 코드로 생성한다. 지오메트리가 파일이 아니라 코드일 때 추상이 이긴다 - 2026 Awwwards Developer Award 수상작 중에는 3D 를 아예 안 쓴 것도 있다 채택안: 파이프라인 게이트 - 유리 판 여섯 장이 깊이 축에 정면으로 선다. 이 스킬의 여섯 단계다 - 스크롤하면 카메라가 문을 하나씩 통과하고 지나온 판은 뒤에 겹친다 - 판이 여섯인 이유가 생겼다. 아래 Pipeline 섹션과 같은 수다 - 순서는 이 제품의 본체다('순서를 바꾸지 마라'가 절대 규칙). 순서를 깊이로 옮기는 것은 은유가 아니라 직역이다 스크롤 연동은 이미 도는 렌더 루프에서 위치를 한 번 읽는다. addEventListener('scroll') 을 쓰지 않는다(하드 게이트 10). 핀도 없다.
2026-08-20 12:32:09 +09:00 · 2026-08-20 12:32:09 +09:00 · 17d04ee2bb
commit 17d04ee2bb
parent ed1f335a89
4 changed files with 572 additions and 18 deletions
--- a/research/three/07-glb-sources.md
+++ b/research/three/07-glb-sources.md
@ -0,0 +1,206 @@
+# 07 — GLB 모델 소스 · 라이선스 · 실측 무게
+
+> 조사일 2026-08-20. **`실측` 표기는 이 문서를 쓰면서 직접 다운로드/압축해 잰 값**이다. 나머지는 문서 기재값.
+> 압축 실험은 `@gltf-transform/cli@4.4.2`로 수행했다.
+
+---
+
+## 0. 먼저 알아야 할 것 — 텍스처가 예산이다
+
+`DamagedHelmet.glb`(Khronos 표준 샘플)를 분해한 **실측**이다.
+
+| 구성 | 크기 | 비중 |
+|---|---|---|
+| 지오메트리 (14,556 vtx / 15,452 tri) | **558.5 KB** (GPU) | 13% |
+| baseColor 2048² JPEG | 935.6 KB | |
+| metallicRoughness 2048² JPEG | 1,300 KB | |
+| normal 2048² JPEG | 517.8 KB | |
+| occlusion 2048² JPEG | 361.7 KB | |
+| emissive 2048² JPEG | 97.5 KB | |
+| **텍스처 합계** | **≈ 3.2 MB** | **87%** |
+| **VRAM** | 텍스처 5장 × 22.37 MB = **111.9 MB** | |
+
+압축 **실측**:
+
+| 처리 | 결과 | 감소 |
+|---|---|---|
+| 원본 | 3,685.5 KB | — |
+| **Draco** | 3,216.3 KB | **−12.7%** |
+| **meshopt** | 3,320.8 KB | −9.9% |
+| gzip(원본) | 3,297.0 KB | −10.5% |
+
+> **Draco가 13%밖에 못 줄인다.** 지오메트리만 압축하는데 지오메트리가 파일의 13%뿐이기 때문이다.
+> **"Draco 쓰면 90% 준다"는 말은 지오메트리가 payload일 때만 참이다.**
+
+지오메트리가 payload인 모델의 **실측**:
+
+| 모델 | 원본 | Draco | Draco+gzip | 감소 |
+|---|---|---|---|---|
+| **Duck.glb** (텍스처 1장, 저폴리) | 117.7 KB | **34.4 KB** | **33.1 KB** | **−71%** |
+| **Fox.glb** (텍스처 없음, 애니메이션 3종) | 159.0 KB | **89.8 KB** | **68.1 KB** | **−44%** |
+| Box.glb (최소 큐브) | 1.6 KB | — | — | — |
+
+### 결론 — 300KB 예산에 들어오는 것
+
+| 시나리오 | 실현 가능? |
+|---|---|
+| 무텍스처 저폴리 GLB 1~3개 (Draco) | ✅ 35~90KB × 3 = **105~270KB** |
+| 텍스처 1장(512² WebP ~40KB) + Draco 지오메트리 | ✅ **~120KB** |
+| 애니메이션 캐릭터 1체 (무텍스처, Fox급) | ✅ **90KB** |
+| PBR 텍스처 세트(2048²) 모델 1개 | ❌ **3.7MB — 예산의 12배** |
+| PBR 세트를 512²로 줄이고 WebP | ⚠️ ~400~600KB **추정** — 여전히 초과 |
+| Sketchfab/Poly Haven 쇼케이스 모델 그대로 | ❌ 대부분 2~24MB |
+
+**규칙: 300KB 예산에서는 텍스처를 포기하거나 모델을 포기해야 한다. 둘 다는 안 된다.**
+
+---
+
+## 1. Khronos 표준 샘플 (실측 완료)
+
+`https://github.com/KhronosGroup/glTF-Sample-Assets` · GitHub raw 직링크 = **자동화 가능**
+라이선스는 **모델마다 다르다**(CC0 / CC-BY 4.0 / Khronos 전용). `Models/<name>/README.md`에 명시. 반드시 개별 확인.
+
+| 모델 | **실측 크기** | 성격 |
+|---|---|---|
+| Box.glb | **1.6 KB** | 최소 |
+| Duck.glb | **117.7 KB** | 저폴리 + 512 텍스처 1장 |
+| Fox.glb | **159.0 KB** | 무텍스처 + 애니 3종 |
+| BrainStem.glb | **3,120 KB** | 리깅 애니메이션 |
+| DamagedHelmet.glb | **3,685 KB** | PBR 표준 레퍼런스 |
+| SheenChair.glb | **4,029 KB** | 패브릭(sheen) |
+| ToyCar.glb | **5,295 KB** | 클리어코트 |
+| IridescentDishWithOlives.glb | **5,608 KB** | 이리데선스 |
+| DragonAttenuation.glb | **6,252 KB** | 투과·감쇠 |
+| ChronographWatch.glb | **7,272 KB** | 정밀 제품 |
+| Avocado.glb | **7,920 KB** | 소품 + 4K 텍스처 |
+| WaterBottle.glb | **8,757 KB** | 제품 |
+| Lantern.glb | **9,340 KB** | 발광 |
+| BoomBox.glb | **10,365 KB** | 제품 |
+| AntiqueCamera.glb | **17,129 KB** | 고해상 |
+| MosquitoInAmber.glb | **23,662 KB** | 투과 극한 |
+| GlassHurricaneCandleHolder.glb | **2,642 KB** | **유리 — 우리 미학과 가장 근접** |
+
+**용도**: 렌더러/머티리얼 검증용이지 프로덕션 에셋이 아니다. 예산 안에 드는 것은 Box·Duck·Fox뿐.
+
+---
+
+## 2. CC0 (상업 이용 자유 · 크레딧 불요) — 안전 등급 A
+
+| # | 소스 | URL | 라이선스 | 폴리곤 규모 | 크기대 | 자동화 |
+|---|---|---|---|---|---|---|
+| 1 | **Poly Haven** | polyhaven.com/models | **CC0** 전부 | 중~고 (스캔 기반 소품) | gltf 1k/2k/4k 분리 제공. **실측** `potted_plant_02_1k.gltf` 6.5KB(+ 별도 bin/텍스처) | ✅ 공개 API + `dl.polyhaven.org` 직링크 |
+| 2 | **Quaternius** | quaternius.com | **CC0** 전부 | **저폴리** (수백~수천 tri) | 팩 단위 수 MB, 개별은 수십 KB | ⚠️ 팩 zip 다운로드 |
+| 3 | **Kenney** | kenney.nl/assets | **CC0** 전부 | **극저폴리** | 개별 수 KB~수십 KB | ⚠️ 팩 zip |
+| 4 | **KayKit** (Kay Lousberg) | kaylousberg.itch.io | **CC0** (대부분) | 저폴리, 캐릭터 리깅 포함 | 팩 단위 | ⚠️ itch.io zip |
+| 5 | **ambientCG** | ambientcg.com | **CC0** | 텍스처·HDRI 중심, 모델 소수 | — | ✅ API |
+| 6 | **Smithsonian 3D** | 3d.si.edu | **CC0** (2,000+) | **고폴리 스캔** | 수 MB~수십 MB | ⚠️ 개별 다운로드. glTF/OBJ 제공 |
+| 7 | **Threedscans** | threedscans.com | **퍼블릭 도메인** | **초고폴리** 조각 스캔 | 수십 MB (STL/OBJ) | ⚠️ 수동. **GLB 변환 + 데시메이션 필수** |
+| 8 | **NASA 3D Resources** | nasa3d.arc.nasa.gov | **퍼블릭 도메인** (일부 CC-BY, 개별 확인) | 중~고 | 수 MB | ⚠️ 수동 |
+| 9 | **Blender Studio / demo files** | studio.blender.org, blender.org/download/demo-files | **CC0 / CC-BY** 혼재 | 고 | 수십 MB (.blend) | ⚠️ 변환 필요 |
+| 10 | **awesome-cc0** (메타 목록) | github.com/madjin/awesome-cc0 | 링크 모음 | — | — | — |
+| 11 | **Open Source 3D Assets** | opensource3dassets.com | CC0 중심 GLB 집계 | 저~중 | — | ⚠️ |
+
+---
+
+## 3. 크레딧 필요 또는 제한 있음 — 안전 등급 B/C
+
+| # | 소스 | URL | 라이선스 | 주의 |
+|---|---|---|---|---|
+| 12 | **Sketchfab (CC0 필터)** | sketchfab.com/3d-models?licenses=cc0 | 필터로 CC0만 | ✅ 자동 glTF 변환 제공. **CC-BY/NC/ND 모델은 Sketchfab 밖으로 못 나가는 경우가 있다** — 필터 없이 쓰지 마라 |
+| 13 | **Poly Pizza** (Google Poly 후속) | poly.pizza | **대부분 CC-BY** (크레딧 필수) | 로그인 불요, 저폴리 대량. **CC0가 아니다** |
+| 14 | **Scan the World** (MyMiniFactory) | myminifactory.com/scantheworld | **혼재 — CC-BY-NC 다수** | ⛔ **상업 사이트에 그대로 쓰면 위반.** 개별 확인 필수 |
+| 15 | **Sketchfab / Smithsonian 컬렉션** | sketchfab.com/Smithsonian | CC0 | ✅ 안전 |
+| 16 | **Mixamo** | mixamo.com | Adobe 계정 필요, 사용 조건 있음 | 캐릭터 리깅·애니메이션. **재배포 제한** |
+| 17 | **three.js examples 모델** | threejs.org/examples/models | 개별 상이 | **실측**: Soldier.glb 2,110KB · LittlestTokyo.glb 4,036KB · Flower.glb 4.7KB |
+
+---
+
+## 4. 300KB 안에서 실제로 가능한 파이프라인
+
+```bash
+# 1) 지오메트리만 남긴다 — 텍스처를 버리고 정점 색/머티리얼 상수로 간다
+npx @gltf-transform/cli prune  in.glb  s1.glb
+npx @gltf-transform/cli dedup  s1.glb  s2.glb
+npx @gltf-transform/cli weld   s2.glb  s3.glb
+
+# 2) 폴리곤을 깎는다 (error 0.001~0.01 사이에서 육안 확인하며 조정)
+npx @gltf-transform/cli simplify s3.glb s4.glb --ratio 0.5 --error 0.005
+
+# 3) 지오메트리 압축 — 여기서 비로소 Draco 가 값을 한다
+npx @gltf-transform/cli draco  s4.glb final.glb
+#   또는 디코드가 5~10배 빠른 meshopt
+npx @gltf-transform/cli meshopt s4.glb final.glb
+
+# 4) 텍스처를 꼭 써야 한다면 딱 한 장, 512 이하, WebP
+npx @gltf-transform/cli resize  final.glb r.glb --width 512 --height 512
+npx @gltf-transform/cli webp    r.glb        out.glb
+
+# 5) 검증 — 텍스처 비중과 VRAM 을 눈으로 본다
+npx @gltf-transform/cli inspect out.glb
+```
+
+> ⚠️ 이 환경에서 `--texture-compress` / `resize` 는 `sharp` 의 `colourspace: parameter space not set` 오류로 실패했다.
+> 텍스처 처리는 별도 환경(또는 squoosh-cli)에서 하고 GLB에 되넣는 편이 안전하다.
+
+### 디코더 비용도 예산이다
+
+| 디코더 | 크기 | 비고 |
+|---|---|---|
+| DRACO WASM | **~200 KB** | 자체 호스팅 필수. 한 번 받으면 캐시 |
+| KTX2/basis 트랜스코더 | **~250 KB** | |
+| meshopt 디코더 | **~25 KB** | **훨씬 작다.** 300KB 예산에서는 meshopt이 유일하게 현실적 |
+
+> **300KB 예산에서 Draco를 쓰면 디코더만으로 200KB(67%)가 날아간다.**
+> 모델 하나를 위해 Draco를 도입하지 마라. **meshopt(25KB) 또는 무압축 + gzip**이 맞다.
+
+---
+
+## 5. 압축 판단표
+
+| 상황 | 선택 |
+|---|---|
+| 지오메트리 > 텍스처 (저폴리·무텍스처) | **meshopt** (디코더 25KB). Draco는 디코더가 더 크다 |
+| 텍스처 > 지오메트리 (PBR) | **텍스처를 먼저 줄여라.** 지오메트리 압축은 무의미 |
+| 다운로드 크기가 문제 | WebP/AVIF (VRAM은 안 줄어든다) |
+| **VRAM**이 문제 (모바일) | **KTX2만이 답** (ETC1S ≈ 1/8). 단 이미 JPEG인 텍스처는 **파일이 커질 수 있다**(1.51MB → 1.98MB 사례) |
+| 모델 1개, 예산 300KB | 압축하지 말고 **모델을 다시 만들어라**. 저폴리로 |
+
+---
+
+## 6. 우리 브리프에 대한 판정
+
+| 후보 | 예산 적합 | 컨셉 적합 |
+|---|---|---|
+| Khronos `GlassHurricaneCandleHolder.glb` (유리, 2.6MB) | ❌ 8배 초과 | ⚠️ 미학은 맞지만 촛대가 designpaca와 무관 |
+| Khronos `Duck.glb` (34KB Draco) | ✅ | ❌ 오리가 왜 |
+| Quaternius/KayKit 저폴리 팩 | ✅ (수십 KB) | ❌ 게임 에셋 톤 |
+| Poly Haven 스캔 소품 | ⚠️ 1k도 수백 KB | ❌ 사실적 소품이 컨셉과 무관 |
+| Threedscans 조각 (데시메이션 후) | ⚠️ 가능하나 수작업 | ⚠️ "고전 조각" 은유는 카피에 없다 |
+
+**어느 것도 컨셉과 연결되지 않는다.** 상세 판단은 `08-proposal.md`.
+
+**GLB가 정당해지는 유일한 경로**: designpaca가 **브랜드 캐릭터(알파카)**를 아이덴티티로 채택하는 경우.
+그때는 CC0 팩에서 가져오지 말고 저폴리로 **직접 만들어야** 한다 — 남의 알파카는 우리 아이덴티티가 아니다.
+비용 추정: 무텍스처 저폴리 + 정점 색 + meshopt = **40~80KB**, 디코더 25KB, 합 **65~105KB**.
+
+---
+
+## 7. 출처
+
+- Khronos glTF-Sample-Assets https://github.com/KhronosGroup/glTF-Sample-Assets
+- Models 목록 https://github.com/KhronosGroup/glTF-Sample-Assets/blob/main/Models/Models.md
+- glTF Transform https://gltf-transform.dev/
+- Draco 압축률 논의 https://github.com/donmccurdy/glTF-Transform/discussions/347
+- KTX2 크기 논의 https://github.com/donmccurdy/glTF-Transform/discussions/443
+- Poly Haven https://polyhaven.com/models
+- Quaternius https://quaternius.com
+- Kenney https://kenney.nl/assets
+- KayKit https://kaylousberg.itch.io
+- ambientCG https://ambientcg.com
+- Smithsonian 3D https://3d.si.edu
+- Threedscans https://threedscans.com
+- NASA 3D Resources https://nasa3d.arc.nasa.gov
+- Sketchfab CC0 https://sketchfab.com/3d-models?licenses=cc0
+- Poly Pizza https://poly.pizza
+- Scan the World 라이선스 https://www.myminifactory.com/object-licensing
+- awesome-cc0 https://github.com/madjin/awesome-cc0