---
id: [[P-Reinforce|P-Reinforce]]-AUTO-C06372
category: Dev
confidence_score: 0.90
tags: [auto-reinforced]
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - WebGPU"
---

# [[WebGPU|WebGPU]]

## 📌 한 줄 통찰 (The Karpathy Summary)
> WebGPU는 웹 브라우저 환경에서 고성능 3D 그래픽 및 연산을 처리하기 위해 설계된 차세대 그래픽 API이다 [1]. 기존 [[WebGL|WebGL]]의 한계를 극복하고 컴퓨트 셰이더(Compute Shaders), 직접적인 메모리 관리, 멀티스레딩 등 최신 하드웨어 기능을 웹에서 사용할 수 있게 해준다 [2, 3]. Three.js와 같은 라이브러리를 통해 쉽게 도입할 수 있으며, 특히 드로우 콜([[Draw Call|Draw Call]])이 집중된 씬이나 대규모 물리 연산에서 기존 WebGL 대비 비약적인 성능 향상을 제공한다 [4-6].

## 📖 구조화된 지식 (Synthesized Content)
*   **브라우저 지원 및 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].

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.

## 🔗 지식 연결 (Graph)
- **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*

---