1P by neo 1달전 | favorite | 댓글 1개

Nanite WebGPU

요약

  • Nanite WebGPU는 웹 브라우저에서 WebGPU를 사용하여 Nanite를 구현한 프로젝트임.
  • Chrome에서만 사용 가능함.
  • Meshlet LOD 계층, 소프트웨어 래스터라이저, 빌보드 임포스터 등을 포함함.
  • 프러스텀 및 오클루전 컬링을 지원함.
  • 텍스처와 버텍스 노멀을 지원함.
  • Deno를 사용하여 오프라인에서도 작동함.

기능

  • Meshlet LOD 계층

    • 브라우저에서 WebAssembly를 사용하여 메쉬를 전처리함.
    • 파일 내보내기 기능도 제공함.
  • 소프트웨어 래스터라이저

    • WebGPU는 atomic<u64>를 지원하지 않음.
    • 깊이(u16)와 옥타헤드론 인코딩된 노멀(2 * u8)을 32비트로 압축함.
  • 빌보드 임포스터

    • 카메라 위치에 따라 12개의 이미지를 혼합하여 표시함.
    • 상하 뷰는 처리하지 않음.
  • 컬링

    • 인스턴스별: 프러스텀 및 오클루전 컬링.
    • Meshlet별: 프러스텀 및 오클루전 컬링.
    • 삼각형별: 하드웨어 백페이스 컬링 및 z-버퍼.
  • GPU 기반 렌더링CPU 구현 간 전환 가능.

  • 텍스처 모델다양한 객체를 동시에 지원함.

  • 런타임에 매개변수 변경 가능.

  • 통계 정보 제공: 메모리, 지오메트리, 메쉬렛 수, 삼각형 수 등.

  • 사용자 정의 파일 형식 지원.

  • 버텍스 위치 양자화옥타헤드론 인코딩된 노멀 지원.

  • 창 크기 조정을 처리함.

  • Deno를 사용하여 오프라인에서도 작동함.

  • WebGPU 및 WGSL 코드를 프로젝트에 복사 가능.

목표

  1. 단순성: OBJ 파일로 시작하여 모든 작업을 앱 내에서 처리함.
  2. 실험: 다양한 설정을 변경하여 성능을 테스트할 수 있음.

데모 장면

  • 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에 대한 놀라운 점

    1. DAG의 목표는 먼 객체에 대해 적은 삼각형을 사용하는 것이 아님.
    2. Nanite 자체보다 컬링과 Meshlet 작업에 더 많은 시간을 소비함.
    3. Meshlet LOD 계층은 쉽게 작동함.
    4. 메쉬가 깨끗하게 단순화되지 않으면 성능이 떨어짐.
  • 메쉬 단순화

    • 단순화 과정에서 많은 문제가 발생할 수 있음.
    • 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" 오류 메시지 발생