WebGPU + Three.js TSL로 브라우저에서 10만 개 파티클을 2ms로 — 컴퓨트 셰이더와 GPGPU가 만든 새로운 성능 기준

// WGSL 컴퓨트 셰이더 — 파티클 위치 업데이트
@group(0) @binding(0) var<storage, read_write> positions: array<vec4f>;
@group(0) @binding(1) var<storage, read_write> velocities: array<vec4f>;
@group(0) @binding(2) var<uniform> params: SimParams;
 
@compute @workgroup_size(256)
fn main(@builtin(global_invocation_id) id: vec3u) {
  let i = id.x;
  if (i >= arrayLength(&positions)) { return; }
 
  var pos = positions[i];
  var vel = velocities[i];
 
  // 중력 적용
  vel.y -= params.gravity * params.deltaTime;
 
  // 위치 갱신
  pos += vel * params.deltaTime;
 
  positions[i] = pos;
  velocities[i] = vel;
}

import {
  Fn, float, instanceIndex, deltaTime, If
} from 'three/tsl';
 
// JavaScript처럼 보이지만 GPU에서 실행됩니다
const updateParticles = Fn(() => {
  const i = instanceIndex;
  const pos = positionBuffer.element(i);
  const vel = velocityBuffer.element(i);
 
  vel.y.addAssign(gravityUniform.mul(deltaTime).negate());
  pos.addAssign(vel.mul(deltaTime));
 
  positionBuffer.element(i).assign(pos);
  velocityBuffer.element(i).assign(vel);
})().compute(PARTICLE_COUNT);

// 기존 WebGL
// import { WebGLRenderer } from 'three';
// const renderer = new WebGLRenderer({ antialias: true });
 
// WebGPU로 전환 — 이것만 바꾸면 됩니다
import WebGPURenderer from 'three/addons/renderers/common/WebGPURenderer.js';
 
const renderer = new WebGPURenderer({ antialias: true });
await renderer.init(); // WebGPU는 비동기 초기화가 필요합니다
 
document.body.appendChild(renderer.domElement);

import * as THREE from 'three';
import WebGPURenderer from 'three/addons/renderers/common/WebGPURenderer.js';
// ※ StorageBufferAttribute의 import 경로는 Three.js 버전에 따라 달라질 수 있습니다
import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
import { Fn, instanceIndex, deltaTime, storage, float, If } from 'three/tsl';
 
const PARTICLE_COUNT = 100_000;
 
async function initGPGPU() {
  const renderer = new WebGPURenderer();
  await renderer.init();
 
  // scene, camera 초기화는 생략 — 일반적인 Three.js 씬 구성과 동일합니다
 
  // GPU 스토리지 버퍼 — CPU 메모리가 아닌 VRAM에 상주합니다
  const positions = new StorageBufferAttribute(
    new Float32Array(PARTICLE_COUNT * 4), 4
  );
  const velocities = new StorageBufferAttribute(
    new Float32Array(PARTICLE_COUNT * 4), 4
  );
 
  // 초기 데이터 설정
  for (let i = 0; i < PARTICLE_COUNT; i++) {
    positions.setXYZW(i,
      (Math.random() - 0.5) * 10,
      (Math.random() - 0.5) * 10,
      (Math.random() - 0.5) * 10,
      1
    );
    velocities.setXYZW(i,
      (Math.random() - 0.5) * 0.1,
      Math.random() * 0.2,
      (Math.random() - 0.5) * 0.1,
      0
    );
  }
 
  const posStorage = storage(positions, 'vec4', PARTICLE_COUNT);
  const velStorage = storage(velocities, 'vec4', PARTICLE_COUNT);
 
  const computeUpdate = Fn(() => {
    const i = instanceIndex;
    const pos = posStorage.element(i);
    const vel = velStorage.element(i);
 
    // 중력 + 공기 저항
    vel.y.addAssign(float(-9.8).mul(deltaTime));
    vel.mulAssign(float(0.999));
    pos.addAssign(vel.mul(deltaTime));
 
    // 바닥 충돌
    If(pos.y.lessThan(-5), () => {
      pos.y.assign(-5);
      vel.y.assign(vel.y.negate().mul(0.6));
    });
 
    posStorage.element(i).assign(pos);
    velStorage.element(i).assign(vel);
  })().compute(PARTICLE_COUNT);
 
  // 컴퓨트 결과를 복사 없이 렌더 파이프라인에 연결
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', positions);
 
  const material = new THREE.PointsMaterial({ size: 0.02, color: 0x88ccff });
  const particles = new THREE.Points(geometry, material);
 
  function animate() {
    requestAnimationFrame(animate);
    renderer.compute(computeUpdate); // GPU에서 위치 갱신
    renderer.render(scene, camera);  // 갱신된 버퍼를 바로 렌더링
  }
 
  animate();
}

import { MeshBasicNodeMaterial } from 'three/webgpu';
import {
  Fn, uniform, uv, time, vec4, vec3,
  mx_noise_float, smoothstep, mix
} from 'three/tsl';
 
const createDissolveShader = () => {
  const dissolveProgress = uniform(0); // 0 = 원본, 1 = 완전 디졸브
 
  const fragmentShader = Fn(() => {
    // uv는 TSL 내장 노드 — 파라미터로 받지 않아도 됩니다
    const noiseScale = uniform(5.0);
    const noiseValue = mx_noise_float(
      vec3(uv().mul(noiseScale), time.mul(0.5))
    );
 
    // 노이즈 임계값으로 픽셀 제거
    const threshold = dissolveProgress.add(noiseValue.mul(0.3));
    const alpha = smoothstep(threshold, threshold.add(0.1), noiseValue);
 
    // 경계 글로우 효과 — 타오르는 느낌
    const edgeGlow = smoothstep(
      threshold.sub(0.05), threshold, noiseValue
    ).mul(vec4(0.3, 0.8, 1.0, 1.0)); // 시안 색상 글로우
 
    return mix(vec4(1, 1, 1, alpha), edgeGlow, edgeGlow.w);
  });
 
  const material = new MeshBasicNodeMaterial();
  material.fragmentNode = fragmentShader;
  material.transparent = true;
 
  return { material, dissolveProgress };
};
 
// GSAP으로 디졸브 진행도 애니메이션
const { material, dissolveProgress } = createDissolveShader();
 
gsap.to(dissolveProgress, {
  value: 1,
  duration: 2,
  ease: 'power2.inOut'
});