Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.8 KiB

Raw Blame History

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

title

Threejs WebGPU 파티클 예제

매 한 줄

"매 GPU compute shader 의 millions-of-particles 의 60fps". Three.js r170+ 의 WebGPURenderer 의 TSL (Three Shader Language) 의 compute node 의 particle position/velocity 의 GPU buffer 의 simulate. 매 2026 standard: WebGPU 의 baseline browser support (Chrome/Edge/Safari 17.4+/Firefox 127+) 의 production 의 reach.

매 핵심

매 architecture

Storage buffer: 매 particle position/velocity 의 GPU memory 의 persist — 매 CPU readback 의 X.
Compute pass: 매 frame 의 start 의 simulation step 의 dispatch.
Render pass: 매 same buffer 의 vertex attribute 의 read — instanced point / mesh.
TSL: 매 JS-authored shader graph 의 WGSL 의 compile — 매 backend portability (WebGPU + WebGL fallback).

매 핵심 node

storage(): 매 mutable GPU buffer.
Fn(): 매 reusable shader function.
instanceIndex: 매 compute thread id.
attribute(): 매 vertex attribute read.
uniform(): 매 per-frame CPU-set value.

매 응용

Galaxy / nebula simulation 의 web demo.
GPGPU fluid (SPH, FLIP) 의 art piece.
Real-time crowd / flock (boid) 의 100k+ agent.
Data viz 의 millions-of-points scatter.

💻 패턴

Setup WebGPURenderer

import * as THREE from 'three/webgpu';
import { Fn, storage, instanceIndex, uniform, vec3, sin, cos, time } from 'three/tsl';

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

Allocate particle buffers

const COUNT = 500_000;
const positionBuffer = storage(new THREE.StorageInstancedBufferAttribute(COUNT, 3), 'vec3', COUNT);
const velocityBuffer = storage(new THREE.StorageInstancedBufferAttribute(COUNT, 3), 'vec3', COUNT);

Init compute (one-time)

const initCompute = Fn(() => {
  const i = instanceIndex;
  const angle = i.toFloat().mul(0.001);
  positionBuffer.element(i).assign(vec3(cos(angle).mul(50), 0, sin(angle).mul(50)));
  velocityBuffer.element(i).assign(vec3(0));
})().compute(COUNT);

await renderer.computeAsync(initCompute);

Per-frame simulation

const dt = uniform(0.016);
const simCompute = Fn(() => {
  const i = instanceIndex;
  const pos = positionBuffer.element(i);
  const vel = velocityBuffer.element(i);
  const gravity = pos.normalize().negate().mul(9.8);
  vel.addAssign(gravity.mul(dt));
  pos.addAssign(vel.mul(dt));
})().compute(COUNT);

Render as instanced points

const material = new THREE.SpriteNodeMaterial();
material.positionNode = positionBuffer.toAttribute();
material.colorNode = velocityBuffer.toAttribute().length().mul(0.1);

const mesh = new THREE.InstancedMesh(new THREE.PlaneGeometry(0.05), material, COUNT);
scene.add(mesh);

Animation loop

renderer.setAnimationLoop(async () => {
  dt.value = clock.getDelta();
  await renderer.computeAsync(simCompute);
  await renderer.renderAsync(scene, camera);
});

Curl noise flow field

import { mx_noise_vec3 } from 'three/tsl';

const flowCompute = Fn(() => {
  const i = instanceIndex;
  const pos = positionBuffer.element(i);
  const noise = mx_noise_vec3(pos.mul(0.1).add(time.mul(0.5)));
  velocityBuffer.element(i).assign(noise.mul(2));
  pos.addAssign(velocityBuffer.element(i).mul(dt));
})().compute(COUNT);

WebGL fallback

const renderer = WebGPU.isAvailable()
  ? new THREE.WebGPURenderer()
  : new THREE.WebGLRenderer();
// 매 TSL 의 same code 의 WebGL backend 의 transpile (compute X 의 limit 의 case 의 GPGPUComputationRenderer 의 fallback)

매 결정 기준

상황	Approach
<10k particle, simple motion	CPU 의 BufferGeometry update
10k–100k, WebGL2 only	GPGPUComputationRenderer (ping-pong texture)
100k–10M, modern browser	WebGPURenderer + TSL compute
Physics-accurate fluid	WebGPU compute + custom WGSL
Cross-browser 의 require, IE/legacy	Canvas2D 또는 WebGL1 fallback

기본값: 매 2026 의 new project 의 WebGPURenderer + TSL — 매 WebGL fallback 의 automatic.

🔗 Graph

부모: Three.js · WebGPU
변형: GPGPU · TSL (Three Shader Language)
응용: Particle System
Adjacent: Compute Shader · Instanced Rendering

🤖 LLM 활용

언제: 매 100k+ particle 의 60fps 의 require, 매 modern browser 의 target. 언제 X: 매 static scene, low count, 또는 mobile-Safari-pre-17.4 의 fallback 의 critical.

❌ 안티패턴

CPU position update: 매 frame 의 millions-of-vertex 의 GPU upload 의 PCIe bottleneck.
Compute pass 의 매 frame 의 buffer recreate: 매 GC pressure 의 stutter — 매 reuse.
renderer.compute() sync wait: 매 main thread 의 block — 매 computeAsync 의 use.
Float32 over-precision: 매 WebGPU 의 f16 storage 의 bandwidth halve 의 opportunity 의 miss.
TSL 의 raw WGSL 의 mix 의 unnecessary: 매 portability 의 break.

🧪 검증 / 중복

Verified (Three.js r170+ docs, threejs.org/examples webgpu_compute_particles).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — TSL compute, instanced render, WebGL fallback

5.8 KiB Raw Blame History Unescape Escape