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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-threejs-webgpurenderer	Threejs WebGPURenderer	10_Wiki/Topics	verified	self	Three.js WebGPU WebGPURenderer TSL	none	A	0.9	applied	threejs webgpu graphics web		2026-05-10	pending	language framework TypeScript / JavaScript 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

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)

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)

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

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)

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

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
• 변형: Babylonjs
• 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