Performance

<!--
  说明：同样五千个立方体，分别用五千个独立网格与一个实例化网格绘制，比较绘制调用
  核心逻辑：InstancedMesh 把逐实例的变换装进一个缓冲区，一次 draw call 画完全部
  依赖：three.js 0.160.0、OrbitControls · jsDelivr CDN（ESM + importmap）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>性能对比</title>
<style>
  html,body{height:100%;margin:0;background:#0d1117}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:10px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:5px;cursor:pointer;
       border:1px solid #303845;background:#1d2531;color:#c8d2e0}
  .bar button:hover{background:#253040}
  .bar button.on{border-color:#3f6fa8;background:#1c3350;color:#9fd0ff}
  .bar .sp{flex:1 1 auto}
  #stage{flex:1 1 auto;min-height:0;position:relative}
  #stage canvas{display:block}
</style>
</head>
<body>
<div class="bar">
  <button id="b-inst" class="on">实例化网格</button>
  <button id="b-many">独立网格</button>
  <span>绘制调用 <b id="calls">—</b></span>
  <span>三角面 <b id="tris">—</b></span>
  <span>帧率 <b id="fps">—</b></span>
  <span>构建耗时 <b id="build">—</b></span>
  <span class="sp"></span>
  <span>拖拽旋转 · 5000 个立方体</span>
</div>
<div id="stage"></div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const stage = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
stage.appendChild(renderer.domElement);

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

const camera = new THREE.PerspectiveCamera(
  48, stage.clientWidth / stage.clientHeight, 0.1, 300
);
camera.position.set(0, 16, 26);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.maxPolarAngle = Math.PI * 0.495;
controls.update();

scene.add(new THREE.HemisphereLight(0xc8ddff, 0x151d26, 1.2));
const key = new THREE.DirectionalLight(0xffffff, 2.1);
key.position.set(10, 18, 12);
scene.add(key);

const COUNT = 5000;
const geometry = new THREE.BoxGeometry(0.3, 0.3, 0.3);
const material = new THREE.MeshStandardMaterial({ roughness: 0.5, metalness: 0.15 });

/* 预生成位置、朝向和颜色，两种模式使用同一份数据 */
const spots = [];
const color = new THREE.Color();
for (let i = 0; i < COUNT; i++) {
  const r = Math.random() * 11;
  const a = Math.random() * Math.PI * 2;
  spots.push({
    x: Math.cos(a) * r,
    y: Math.random() * 7 - 3.5,
    z: Math.sin(a) * r,
    rx: Math.random() * Math.PI,
    ry: Math.random() * Math.PI
  });
  color.setHSL(0.58 - Math.random() * 0.45, 0.65, 0.42 + Math.random() * 0.2);
  spots[i].r = color.r;
  spots[i].g = color.g;
  spots[i].b = color.b;
}

const dummy = new THREE.Object3D();

/* ---------- 实例化网格 ---------- */
const instT0 = performance.now();
const instanced = new THREE.InstancedMesh(geometry, material, COUNT);
for (let i = 0; i < COUNT; i++) {
  const s = spots[i];
  dummy.position.set(s.x, s.y, s.z);
  dummy.rotation.set(s.rx, s.ry, 0);
  dummy.scale.setScalar(1);
  dummy.updateMatrix();
  instanced.setMatrixAt(i, dummy.matrix);
  instanced.setColorAt(i, color.setRGB(s.r, s.g, s.b));
}
instanced.instanceMatrix.needsUpdate = true;
if (instanced.instanceColor) instanced.instanceColor.needsUpdate = true;
const instCost = performance.now() - instT0;
scene.add(instanced);

/* ---------- 五千个独立网格 ---------- */
const manyT0 = performance.now();
const manyGroup = new THREE.Group();
for (let i = 0; i < COUNT; i++) {
  const s = spots[i];
  const mesh = new THREE.Mesh(geometry, material.clone());
  mesh.material.color.setRGB(s.r, s.g, s.b);
  mesh.position.set(s.x, s.y, s.z);
  mesh.rotation.set(s.rx, s.ry, 0);
  manyGroup.add(mesh);
}
const manyCost = performance.now() - manyT0;
manyGroup.visible = false;
scene.add(manyGroup);

document.getElementById('build').textContent =
  instCost.toFixed(0) + ' ms / ' + manyCost.toFixed(0) + ' ms';

/* ---------- 模式切换 ---------- */
let mode = 'inst';

function setMode(next) {
  mode = next;
  instanced.visible = next === 'inst';
  manyGroup.visible = next === 'many';
  document.getElementById('b-inst').classList.toggle('on', next === 'inst');
  document.getElementById('b-many').classList.toggle('on', next === 'many');
}

document.getElementById('b-inst').addEventListener('click', function () { setMode('inst'); });
document.getElementById('b-many').addEventListener('click', function () { setMode('many'); });

/* ---------- 动画与统计 ---------- */
const clock = new THREE.Clock();
const fpsEl = document.getElementById('fps');
const callsEl = document.getElementById('calls');
const trisEl = document.getElementById('tris');

let frames = 0;
let acc = 0;

renderer.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.1);

  /* 整体缓慢自转，两种模式的几何变换完全一致 */
  if (mode === 'inst') instanced.rotation.y += dt * 0.15;
  else manyGroup.rotation.y += dt * 0.15;

  controls.update();
  renderer.render(scene, camera);

  frames++;
  acc += dt;
  if (acc >= 0.5) {
    fpsEl.textContent = (frames / acc).toFixed(0);
    callsEl.textContent = renderer.info.render.calls;
    trisEl.textContent = renderer.info.render.triangles.toLocaleString('zh-CN');
    frames = 0;
    acc = 0;
  }
});

window.addEventListener('resize', function () {
  const w = stage.clientWidth;
  const h = stage.clientHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
});
</script>
</body>
</html>