GN⁺: WebGPU에서의 UE5 Nanite 기술
(github.com/Scthe)Nanite WebGPU
요약
- Nanite WebGPU는 웹 브라우저에서 WebGPU를 사용하여 Nanite를 구현한 프로젝트임.
- Chrome에서만 사용 가능함.
- Meshlet LOD 계층, 소프트웨어 래스터라이저, 빌보드 임포스터 등을 포함함.
- 프러스텀 및 오클루전 컬링을 지원함.
- 텍스처와 버텍스 노멀을 지원함.
- Deno를 사용하여 오프라인에서도 작동함.
기능
-
Meshlet LOD 계층
- 브라우저에서 WebAssembly를 사용하여 메쉬를 전처리함.
- 파일 내보내기 기능도 제공함.
-
소프트웨어 래스터라이저
- WebGPU는
atomic<u64>
를 지원하지 않음. - 깊이(
u16
)와 옥타헤드론 인코딩된 노멀(2 * u8
)을 32비트로 압축함.
- WebGPU는
-
빌보드 임포스터
- 카메라 위치에 따라 12개의 이미지를 혼합하여 표시함.
- 상하 뷰는 처리하지 않음.
-
컬링
- 인스턴스별: 프러스텀 및 오클루전 컬링.
- Meshlet별: 프러스텀 및 오클루전 컬링.
- 삼각형별: 하드웨어 백페이스 컬링 및 z-버퍼.
-
GPU 기반 렌더링과 CPU 구현 간 전환 가능.
-
텍스처 모델과 다양한 객체를 동시에 지원함.
-
런타임에 매개변수 변경 가능.
-
통계 정보 제공: 메모리, 지오메트리, 메쉬렛 수, 삼각형 수 등.
-
사용자 정의 파일 형식 지원.
-
버텍스 위치 양자화 및 옥타헤드론 인코딩된 노멀 지원.
-
창 크기 조정을 처리함.
-
Deno를 사용하여 오프라인에서도 작동함.
-
WebGPU 및 WGSL 코드를 프로젝트에 복사 가능.
목표
- 단순성: OBJ 파일로 시작하여 모든 작업을 앱 내에서 처리함.
- 실험: 다양한 설정을 변경하여 성능을 테스트할 수 있음.
데모 장면
- Jinx: 120*120 인스턴스, 640m 삼각형.
- Lucy와 드래곤: 70*70 인스턴스, 1.7b 삼각형.
- Lucy: 110*110 인스턴스, 1.2b 삼각형.
- 드래곤: 70*70 인스턴스, 1.2b 삼각형.
- 토끼: 500*500 인스턴스, 1.2b 삼각형.
- 임포스터 미리보기: 임포스터 텍스처 크기 증가.
사용법
- [W, S, A, D] 키로 이동, **[Z, SPACEBAR]**로 상하 이동.
- 컬링 옵션을 토글하여 버그를 해결할 수 있음.
- 프로파일 버튼을 사용하여 성능을 측정할 수 있음.
FAQ
-
UE5의 Nanite와의 주요 차이점
- 단순화 오류 메트릭이 단순함.
- Meshlet 단순화가 단순함.
- 2단계 오클루전 컬링 없음.
- 셰이더에 작업 큐 없음.
- VRAM에서 사용되지 않는 LOD의 제거 및 스트리밍 없음.
- 가시성 버퍼 없음.
- 내장된 그림자/멀티뷰 없음.
- 많은 다른 객체를 처리할 수 없음.
- GPU 프로파일러 없음.
-
수십억 개의 삼각형이 의미하는 바
- 밀집된 메쉬는 성능에 부정적인 영향을 미칠 수 있음.
- 인스턴스 수가 많으면 VRAM을 많이 소비함.
- 장면 배열이 성능에 영향을 미침.
-
Nanite에 대한 놀라운 점
- DAG의 목표는 먼 객체에 대해 적은 삼각형을 사용하는 것이 아님.
- Nanite 자체보다 컬링과 Meshlet 작업에 더 많은 시간을 소비함.
- Meshlet LOD 계층은 쉽게 작동함.
- 메쉬가 깨끗하게 단순화되지 않으면 성능이 떨어짐.
-
메쉬 단순화
- 단순화 과정에서 많은 문제가 발생할 수 있음.
- UE5는 자체 메쉬 단순화 코드를 사용함.
-
오류 메트릭
- 적절한 Meshlet을 선택하는 것이 Nanite의 핵심임.
-
Nanite 구현을 직접 작성해야 하는가?
- UE5를 사용하는 것이 가장 간단한 방법임.
- 학습 목적으로는 직접 구현해볼 만함.
-
Meshlet 백페이스 콘 컬링의 가치
- 밀집된 메쉬에서 효과적임.
- 오클루전 컬링과 중복될 수 있음.
- WebAssembly 호출로 인해 성능 저하가 발생할 수 있음.
GN⁺의 정리
- Nanite WebGPU는 웹 브라우저에서 Nanite를 구현한 흥미로운 프로젝트임.
- 다양한 컬링 기법과 소프트웨어 래스터라이저를 통해 성능을 최적화함.
- UE5와 비교하여 단순화 및 오류 메트릭에서 차이가 있음.
- 학습 목적으로는 직접 구현해볼 만하지만, 실제 프로젝트에서는 UE5를 사용하는 것이 더 나을 수 있음.
- 비슷한 기능을 가진 프로젝트로는 Unreal Engine 5의 Nanite가 있음.
Hacker News 의견
-
Nanite의 서드 파티 구현이 흥미로움
- Nanite는 그래픽 메시를 표현하는 매우 영리한 방법임
- 반복은 링크로 처리되고, 재귀적으로 서브메시를 공유할 수 있음
- 메시 내부의 디테일 수준을 지원하여 작은 서브메시는 제거됨
- 큰 크기의 반복 콘텐츠를 적은 데이터로 빠르게 렌더링할 수 있음
- 현재 GPU 디자인은 Nanite와 맞지 않으며, 새로운 하드웨어 작업이 필요함
- Unreal Engine 데모는 동일한 조각상을 반복적으로 사용하는 장면을 보여줌
- Nanite 메시를 만드는 것은 복잡하며, 현재는 Unreal Engine의 에디터만 가능함
- 포맷의 내부 오프셋은 공격 표면을 제공할 수 있음
-
Bevy도 Nanite의 아이디어를 구현한 Virtual Geometry를 가지고 있음
- Bevy의 저자가 직접 질문에 답변할 수 있음
- Scthe가 Bevy의 코드 개선에 기여함
-
데모가 사용자 에이전트 문자열을 사용하여 호환성을 결정하는 것은 좋지 않음
- 기능 호환성은 개별적으로 감지하여 사용해야 함
- Chromium을 사용 중이며 WebGPU를 자주 사용하지만, 데모는 Chrome을 요구함
-
iPhone 12 Pro Max에서 WebGPU가 작동하지 않음
- 실험적 기능에서 WebGPU를 활성화했지만, 다른 웹사이트에서는 작동함
- 웹 앱이 실패 원인에 대한 더 많은 정보를 제공했으면 좋겠음
-
WebGPU의 64비트 아토믹 부족을 해결하기 위해 타협이 필요했음
- 데스크탑급 하드웨어에서는 거의 보편적으로 지원됨
-
이름과 설명이 혼란스럽고 상표 침해 가능성이 있음
- 실제 Nanite와 관련이 없으며, UE5와 무관한 사람이 구현한 것임
- Bevy의 Virtual Geometry가 더 유용할 수 있음
-
다른 엔진의 LOD 시스템 비교
- Godot는 자동 LOD를 제공함
- Unity는 LOD 모델을 수동으로 생성해야 함
- NeoAxis는 흥미로운 접근 방식을 가지고 있지만 성능이 좋지 않음
- Unreal은 많은 객체를 화면에 표시하는 데 매우 앞서 있음
-
three.js 포럼에서 가상 지오메트리 구현에 대한 흥미로운 토론을 읽었음
- 웹 그래픽 구현에 대한 논의와 트레이드오프가 흥미로웠음
-
소프트웨어 래스터라이저가 하드웨어 래스터라이저보다 빠르다는 주장에 대한 질문
- GPU의 목적이 래스터라이제이션을 가속화하는 것임
- 소프트웨어 래스터라이저가 GPU에서 실행되는 경우를 제외하고는 이해하기 어려움
-
M2 Max에서 jinx 데모 실행 중 WebGPU 오류 발생
- "Fill size (7398781) is not a multiple of 4 bytes" 오류 메시지 발생