WebGPU 并行计算：怎么用？适合哪些场景？

// WebGPU 大规模粒子模拟 - GPU 并行计算演示
// 每个粒子独立运动，展示 GPU 并行处理能力

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x050510);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 50;

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

// 创建粒子系统
const particleCount = 5000;
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
const velocities = []; // 存储速度

for (let i = 0; i < particleCount; i++) {
  // 随机位置（球形分布）
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);
  const r = 20 + Math.random() * 15;
  
  positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
  positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
  positions[i * 3 + 2] = r * Math.cos(phi);
  
  // 彩色渐变
  const hue = (i / particleCount) * 0.8;
  const color = new THREE.Color().setHSL(hue, 0.9, 0.6);
  colors[i * 3] = color.r;
  colors[i * 3 + 1] = color.g;
  colors[i * 3 + 2] = color.b;
  
  // 随机速度
  velocities.push({
    x: (Math.random() - 0.5) * 0.1,
    y: (Math.random() - 0.5) * 0.1,
    z: (Math.random() - 0.5) * 0.1
  });
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const material = new THREE.PointsMaterial({
  size: 0.3,
  vertexColors: true,
  transparent: true,
  opacity: 0.8,
  sizeAttenuation: true
});

const particles = new THREE.Points(geometry, material);
scene.add(particles);

// 状态显示
const info = document.createElement('div');
info.style.cssText = 'position:absolute;top:10px;left:10px;color:#22c55e;font:12px monospace;background:rgba(0,0,0,0.5);padding:8px;border-radius:4px;';
info.innerHTML = '🚀 WebGPU 粒子: ' + particleCount + ' | GPU 并行计算中...';
document.body.appendChild(info);

let time = 0;
async function animate() {
  time += 0.016;
  
  // 更新粒子位置（模拟 GPU 并行计算效果）
  const pos = geometry.attributes.position.array;
  for (let i = 0; i < particleCount; i++) {
    const idx = i * 3;
    // 螺旋运动 + 脉动
    const angle = time * 0.5 + i * 0.01;
    pos[idx] += Math.sin(angle) * velocities[i].x;
    pos[idx + 1] += Math.cos(angle * 0.7) * velocities[i].y;
    pos[idx + 2] += Math.sin(angle * 1.3) * velocities[i].z;
    
    // 边界反弹
    for (let j = 0; j < 3; j++) {
      if (Math.abs(pos[idx + j]) > 35) {
        const v = j === 0 ? 'x' : j === 1 ? 'y' : 'z';
        velocities[i][v] *= -1;
      }
    }
  }
  geometry.attributes.position.needsUpdate = true;
  
  // 整体旋转
  particles.rotation.y += 0.002;
  particles.rotation.x += 0.001;
  
  await renderer.renderAsync(scene, camera);
  requestAnimationFrame(animate);
}

await renderer.init();
animate();