threejs-performance

1# Three.js Performance
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9 
10const renderer = new THREE.WebGLRenderer({ antialias: true });
11renderer.setPixelRatio(window.devicePixelRatio);
12renderer.setSize(window.innerWidth, window.innerHeight);
13document.body.appendChild(renderer.domElement);
14 
15const scene = new THREE.Scene();
16scene.add(new THREE.HemisphereLight(0xffffff, 0x445566, 1));
17const sun = new THREE.DirectionalLight(0xffffff, 2);
18sun.position.set(3, 6, 4);
19scene.add(sun);
20 
21const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
22camera.position.set(0, 2, 8);
23 
24const mesh = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 16), new THREE.MeshStandardMaterial({ color: 0x4488ff }));
25scene.add(mesh);
26 
27function animate() {
28  mesh.rotation.y += 0.01;
29  renderer.render(scene, camera);
30  // the counters reset at the start of every render() call, so these cover the frame just drawn
31  console.log(`${renderer.info.render.calls} calls, ${renderer.info.render.triangles} triangles, ${renderer.info.memory.textures} textures`);
32}
33 
34renderer.setAnimationLoop(animate);
35```
36 
37## Measure First
38 
39Optimize what the numbers name, not what a hunch suspects. WebGLRenderer's `renderer.info` object is read after `render()`:
40 
41```javascript
42function animate() {
43  renderer.render(scene, camera);
44  console.table({
45…