WebGPU vs WebGL：核心区别？

// Three.js WebGPU 渲染器 - 彩色旋转立方体矩阵
// 注意：需要 Chrome 113+ 或 Edge 113+ 并启用 WebGPU

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

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 2, 6);
camera.lookAt(0, 0, 0);

// 创建 WebGPU 渲染器
const renderer = new WebGPURenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加光源
scene.add(new THREE.AmbientLight(0x404040, 3));
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(5, 10, 5);
scene.add(light);

// 创建立方体矩阵 (3x3x3)
const geometry = new THREE.BoxGeometry(0.6, 0.6, 0.6);
const cubes = [];

for (let x = -1; x <= 1; x++) {
  for (let y = -1; y <= 1; y++) {
    for (let z = -1; z <= 1; z++) {
      const hue = (x + 1) / 3 * 0.3 + (y + 1) / 3 * 0.3 + (z + 1) / 3 * 0.3;
      const material = new THREE.MeshStandardMaterial({
        color: new THREE.Color().setHSL(hue, 0.8, 0.5),
        metalness: 0.5,
        roughness: 0.3
      });
      const cube = new THREE.Mesh(geometry, material);
      cube.position.set(x * 1.2, y * 1.2, z * 1.2);
      cube.userData = { baseY: y * 1.2, offset: Math.random() * Math.PI * 2 };
      scene.add(cube);
      cubes.push(cube);
    }
  }
}

// 动画循环
let time = 0;
async function animate() {
  time += 0.02;
  
  // 每个立方体独立旋转和浮动
  cubes.forEach((cube, i) => {
    cube.rotation.x = time + cube.userData.offset;
    cube.rotation.y = time * 0.7 + cube.userData.offset;
    cube.position.y = cube.userData.baseY + Math.sin(time + cube.userData.offset) * 0.2;
  });
  
  await renderer.renderAsync(scene, camera);
  requestAnimationFrame(animate);
}

// WebGPU 需要异步初始化
await renderer.init();
animate();