2nd/10_Wiki/Topics/AI_and_ML/Threejs WebGPURenderer.md

---
id: wiki-2026-0508-threejs-webgpurenderer
title: Threejs WebGPURenderer
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Three.js WebGPU, WebGPURenderer, TSL]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [threejs, webgpu, graphics, web]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript / JavaScript
  framework: Three.js r170+
---

# Threejs WebGPURenderer

## 매 한 줄
> **"매 modern GPU access for the web"**. Three.js의 WebGPURenderer (r170+, 2024-2026 stable)는 WebGL 의 successor — 매 compute shaders, modern bind groups, lower CPU overhead. TSL (Three.js Shading Language) 로 cross-API shader (WebGPU + WebGL fallback) 의 author 가능.

## 매 핵심

### 매 WebGL → WebGPU shift
- **Lower CPU overhead** — 매 explicit pipelines, fewer state-change costs.
- **Compute shaders** — 매 GPGPU on the web (particles, fluid sim, ML inference).
- **Modern API** — 매 Vulkan/Metal/D3D12 의 abstraction 의 inherit.
- **Storage buffers** — 매 large structured data 의 GPU access.

### 매 TSL (Three.js Shading Language)
- 매 JS 로 shader 의 author — 매 cross-compile to WGSL (WebGPU) + GLSL (WebGL).
- Node-based composition — 매 reusable shader graph.
- 매 `MeshStandardNodeMaterial` 등 node-aware material.

### 매 응용
1. High-particle scenes (1M+ particles via compute).
2. Real-time GPGPU (cloth, fluids, soft-body).
3. Modern post-processing pipelines.

## 💻 패턴

### Renderer 의 setup
```ts
import * as THREE from "three/webgpu";

const renderer = new THREE.WebGPURenderer({ antialias: true });
await renderer.init();          // 매 async init 필수
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
```

### TSL material (node-based)
```ts
import { MeshStandardNodeMaterial, uniform, time, sin } from "three/tsl";

const mat = new MeshStandardNodeMaterial();
mat.colorNode = uniform(new THREE.Color(0x0088ff)).mul(sin(time).add(1).mul(0.5));
mesh.material = mat;
```

### Compute shader (particles)
```ts
import { Fn, instanceIndex, storage, vec3, deltaTime } from "three/tsl";

const positions = storage(positionBuffer, "vec3", count);
const velocities = storage(velocityBuffer, "vec3", count);

const updateParticles = Fn(() => {
    const i = instanceIndex;
    positions.element(i).addAssign(velocities.element(i).mul(deltaTime));
});

const compute = updateParticles().compute(count);
renderer.computeAsync(compute);
```

### Fallback to WebGL
```ts
import WebGPU from "three/addons/capabilities/WebGPU.js";

const Renderer = WebGPU.isAvailable()
    ? (await import("three/webgpu")).WebGPURenderer
    : (await import("three")).WebGLRenderer;

const renderer = new Renderer({ antialias: true });
if (renderer.init) await renderer.init();
```

### Post-processing (PostProcessing API)
```ts
import { PostProcessing } from "three/webgpu";
import { pass, mrt, output, emissive } from "three/tsl";

const post = new PostProcessing(renderer);
const scenePass = pass(scene, camera);
scenePass.setMRT(mrt({ output, emissive }));

const bloom = scenePass.getTextureNode("emissive").bloom(1.5);
post.outputNode = scenePass.getTextureNode("output").add(bloom);
```

### Async render loop
```ts
renderer.setAnimationLoop(async () => {
    controls.update();
    await renderer.renderAsync(scene, camera);
});
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Modern browsers, target audience | WebGPURenderer |
| Legacy browser support | WebGLRenderer (fallback) |
| Massive particle / GPGPU | WebGPU compute (필수) |
| Simple scene | WebGL still fine |
| Cross-API shader | TSL |
| Production app (2026) | WebGPU primary, WebGL fallback |

**기본값**: 매 new project 는 WebGPURenderer + WebGL fallback (WebGPU support 매 ~92% as of 2026).

## 🔗 Graph
- 부모: [[Threejs]] · [[WebGPU]]
- 변형: [[Babylon-js]]
- Adjacent: [[WGSL]] · [[GLSL]] · [[react-three-fiber]]

## 🤖 LLM 활용
**언제**: 매 modern web 3D, compute shader 의 필요, particle systems, custom shader pipelines.
**언제 X**: 매 simple banner animations — 매 CSS / SVG 의 충분.

## ❌ 안티패턴
- **`renderer.init()` 의 forget**: 매 async init 매 필수 — 매 sync 가정 시 crash.
- **WebGL-only shader (raw GLSL) 의 lock-in**: 매 TSL 로 portable 하게 작성.
- **Per-frame buffer recreation**: 매 storage buffer 의 reuse — 매 GC pressure.
- **Compute dispatch overuse**: 매 1k particles 의 compute 가 vertex shader 보다 slow 일 수 있음.

## 🧪 검증 / 중복
- Verified (Three.js docs r170+, WebGPU spec W3C CR 2024).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — WebGPU + TSL modern patterns |