WebGPU 1.0 + Three.js r170 — 브라우저 3D 게임 데모 사후

핵심 요약

WebGPU 1.0 GA. Three.js r170의 WebGPURenderer가 안정화. 100K instanced 메시 렌더링 60fps → 90fps, GPU compute shader 활용. Chrome 138+·Edge·Safari 18.4+ 모두 지원, Firefox는 1년 더 기다려야.

1. Three.js WebGPURenderer

import * as THREE from 'three/webgpu'
const renderer = new THREE.WebGPURenderer({ canvas })
await renderer.init()
renderer.setSize(window.innerWidth, window.innerHeight)
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial()
const mesh = new THREE.InstancedMesh(geometry, material, 100_000)
scene.add(mesh)
function animate() {
  renderer.render(scene, camera)
}

2. 성능 — 100K instance 비교

3. Compute shader — particle 시스템 GPU에서 직접

WGSL compute shader로 particle position 업데이트. CPU 부담 0, 1M particle 60fps 안정. WebGL에서는 transform feedback hack 필요했던 부분.

4. 호환성 — 2026.6 기준

• Chrome 138+, Edge 138+ — 안정
• Safari 18.4+(iOS 19+) — 안정, 일부 compute 미지원
• Firefox 134(Nightly) — 베타, 2027 GA 예정
• WebGL2 fallback — Three.js r170에서 자동 분기

5. 함정

• Shader 언어 차이 — WGSL 학습 필요, GLSL에서 자동 변환 도구 부분 호환
• Async init — renderer.init() await 필수, 안 하면 첫 frame undefined
• Render target — WebGPU의 render bundle 캐시 패턴, 잘못 쓰면 성능 손해
• Mobile 발열 — high-end mobile GPU도 5분 이상 풀 부하 시 throttling, frame budget 관리