Antigravity Agent
65 lines
7.7 KiB
Markdown
65 lines
7.7 KiB
Markdown
---
|
|
category: Unified
|
|
tags: [auto-consolidated, technical-documentation]
|
|
title: [[WebGPU 대규모 건설 뷰어|WebGPU 대규모 건설 뷰어]]
|
|
last_updated: 2026-05-02
|
|
---
|
|
|
|
# [[WebGPU 대규모 건설 뷰어|WebGPU 대규모 건설 뷰어]]
|
|
|
|
## 📌 Brief Summary
|
|
> WebGPU 대규모 건설 뷰어는 WebGPU 기술을 활용하여 거대한 건축, 엔지니어링 및 건설 데이터(BIM 모델, LiDAR 포인트 클라우드 등)를 브라우저에서 실시간으로 렌더링하는 플랫폼입니다. 2026년 기준 500MB 미만의 모델이나 빠른 프로토타이핑에는 접근성이 높은 Three.js의 WebGPU가 주로 사용되며, 500MB를 초과하는 초대형 병원 캠퍼스, 공항 터미널 또는 복잡한 구조 시뮬레이션에는 강력한 제어력과 렌더 번들 기능을 갖춘 네이티브 WebGPU가 권장됩니다. 이 기술은 컴퓨트 셰이더 등을 통해 기존 [[WebGL|WebGL]] 대비 드로우 콜 오버헤드를 획기적으로 줄이고 최대 100배 이상의 성능 향상을 제공합니다.
|
|
|
|
---
|
|
|
|
> WebGPU는 웹 브라우저 환경에서 고성능 3D 그래픽 및 연산을 처리하기 위해 설계된 차세대 그래픽 API이다 [1]. 기존 [[WebGL|WebGL]]의 한계를 극복하고 컴퓨트 셰이더(Compute Shaders), 직접적인 메모리 관리, 멀티스레딩 등 최신 하드웨어 기능을 웹에서 사용할 수 있게 해준다 [2, 3]. Three.js와 같은 라이브러리를 통해 쉽게 도입할 수 있으며, 특히 드로우 콜([[Draw Call|Draw Call]])이 집중된 씬이나 대규모 물리 연산에서 기존 WebGL 대비 비약적인 성능 향상을 제공한다 [4-6].
|
|
|
|
## 📖 Core Content
|
|
* **Three.js 기반 WebGPU 뷰어 (500MB 이하 모델):**
|
|
Three.js(r171 이상)의 `WebGPURenderer`는 대규모 건설 플랫폼 개발을 간소화합니다. TSL(Three Shader Language)을 통해 콘크리트, 반사 유리, 강철 마감 등 건축용 맞춤형 재질을 단일 코드베이스로 구현할 수 있습니다. 반복적인 요소(빔, 기둥, 볼트 등)가 많은 건축 모델의 경우 `[[InstancedMesh|InstancedMesh]]` 또는 `BatchedMesh`를 활용하여 드로우 콜을 90% 이상 줄일 수 있어 성능 확보에 유리합니다.
|
|
* **네이티브 WebGPU (500MB 초과 대규모 워크로드):**
|
|
500MB가 넘는 거대한 BIM 모델이나 실시간 구조 응력 시뮬레이션을 다루는 경우, 네이티브 WebGPU의 저수준 제어가 필수적입니다. 스토리지 버퍼를 사용하여 수십만 개의 개별 객체 변환 행렬을 단일 버퍼로 압축하고, `[[GPURenderBundles|GPURenderBundles]]` 및 간접 그리기(`drawIndexedIndirect`)를 통해 최대 100,000개 이상의 객체를 CPU-GPU 동기화 지연 없이 단일 호출로 효율적으로 렌더링합니다.
|
|
* **컴퓨트 셰이더를 활용한 대규모 데이터 처리:**
|
|
충돌 감지, 현장 분석, 대규모 BIM 데이터의 실시간 필터링 등 연산 집약적인 작업을 자바스크립트 메인 스레드에서 GPU로 오프로드합니다. 컴퓨트 셰이더를 통해 수백만 개의 점으로 이루어진 LiDAR 포인트 클라우드나 파티클 시스템을 렌더링할 때 CPU 연산 대비 100배~150배의 획기적인 속도 향상을 달성할 수 있습니다.
|
|
|
|
---
|
|
|
|
* **브라우저 지원 및 Three.js 도입:**
|
|
WebGPU는 [[Chrome|Chrome]], Edge, Firefox, Safari(v26, 2025년 9월 이후) 등 모든 주요 브라우저에서 지원되어 상용화 준비를 마쳤다 [7]. Three.js 환경에서는 r171 버전부터 별도의 복잡한 설정 없이 `WebGPURenderer`를 비동기로 초기화하여 손쉽게 사용할 수 있으며, WebGPU를 지원하지 않는 기기에서는 자동으로 WebGL 2로 대체(Fallback)되는 기능을 제공한다 [2, 8, 9].
|
|
* **성능 향상과 컴퓨트 셰이더([[Compute Shaders|Compute Shaders]]):**
|
|
WebGPU는 드로우 콜이 많은 환경과 입자(Particle) 및 물리 시뮬레이션 같은 연산 집약적인 작업에서 2~10배의 성능 향상을 보여준다 [4]. 기존 CPU 기반 시스템에서는 약 5만 개의 파티클에서 병목 현상이 발생했으나, WebGPU의 컴퓨트 셰이더를 활용하면 수백만 개의 파티클을 오프스레드로 처리할 수 있다 [10, 11]. 연산 스레드 간 데이터 공유를 위한 작업 그룹 공유 메모리를 제공하며, 절차적 지형 생성 및 실시간 유체 시뮬레이션에 탁월하다 [12, 13].
|
|
* **바인딩 모델 및 데이터 전송 최적화:**
|
|
WebGL의 개별 바인딩 방식과 달리, WebGPU는 리소스를 '바인드 그룹(Bind Groups)' 단위로 일괄 처리하여 드로우 콜 간의 상태 전환 오버헤드를 최소화한다 [14]. 또한 `[[instancedArray|instancedArray]]`를 사용하여 프레임 간 유지되는 GPU 버퍼를 생성함으로써 CPU-GPU 간 데이터 전송 병목을 제거하고, 읽기 및 쓰기가 동시에 가능한 스토리지 텍스처([[Storage|Storage]] Textures)를 지원한다 [10, 14, 15].
|
|
* **Native WebGPU vs Three.js WebGPU:**
|
|
500MB 이상의 대형 건설 뷰어나 BIM 모델 같은 방대한 데이터셋을 다룰 때는 Three.js의 추상화 계층을 거치지 않는 Native WebGPU가 필수적일 수 있다 [16]. Native WebGPU는 `[[GPURenderBundles|GPURenderBundles]]`를 통해 10만 개 이상의 객체를 효율적으로 단일 호출로 재생할 수 있으며, 간접 그리기(`drawIndexedIndirect`)를 사용하여 CPU-GPU 동기화 지연을 완전히 제거하는 등 훨씬 정밀한 메모리 관리와 파이프라인 제어를 가능하게 한다 [3, 17, 18].
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
|
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.
|
|
|
|
---
|
|
|
|
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
|
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** Three.js WebGPU, Native WebGPU, BIM (Building Information Modeling), LiDAR Point Cloud, [[Compute Shaders|Compute Shaders]], [[GPURenderBundles|GPURenderBundles]]
|
|
- **Projects/Contexts:** Segments.ai (LiDAR 포인트 클라우드 레이블링 도구를 WebGPU로 전환하여 100배 성능 향상), [[Expo 2025 Osaka|Expo 2025 Osaka]] ("Waves of Connection" 설치물에서 4K 디스플레이에 100만 개 파티클을 지연 없이 실시간 렌더링)
|
|
- **Contradictions/Notes:** Three.js의 WebGPU는 추상화 레이어를 통해 빠르고 쉬운 뷰어 개발을 가능하게 하지만, 고유한 객체가 10,000~20,000개를 초과할 경우 UBO(Uniform Buffer Object) 바인딩 오버헤드로 인해 프레임 저하(예: 15 FPS)가 발생할 수 있습니다. 반면 네이티브 WebGPU는 막대한 데이터도 원활하게 처리할 수 있으나, 파이프라인 및 셰이더에 대한 깊은 지식이 요구되어 개발 속도가 상대적으로 느립니다.
|
|
|
|
---
|
|
*Last updated: 2026-04-19*
|
|
|
|
---
|
|
|
|
---
|
|
|
|
- **Related Topics:** [[WebGL|WebGL]], Compute Shaders, Three Shader Language (TSL), [[GPURenderBundles|GPURenderBundles]], [[Draw Call|Draw Call]]
|
|
- **Projects/Contexts:** Three.js, Segments.ai, [[Expo 2025 Osaka|Expo 2025 Osaka]]
|
|
- **Contradictions/Notes:** Three.js의 WebGPU 렌더러는 개발 속도를 비약적으로 높여주고 사용이 쉽지만, 수만 개의 고유 객체를 처리할 때 발생하는 UBO(Uniform Buffer Object) 바인딩 오버헤드와 메타데이터 메모리 소비로 인해 초대규모 데이터셋(500MB 이상)에서는 Native WebGPU 성능에 미치지 못한다는 벤치마크 결과가 있다 [18-21].
|
|
|
|
---
|
|
*Last updated: 2026-04-19*
|
|
|
|
---
|