Choose the representation that fits the scene

First, build a mental model

A scene is a collection of repeated costs: data to transfer, data to decode, resources to allocate, commands to submit and pixels to shade. Optimization changes one representation to reduce a demonstrated cost while preserving the visual and gameplay contract.

1. Count draw submissions, visible geometry, texture allocation and shaded pixels separately. Fewer triangles do not automatically reduce draw calls; fewer files do not automatically reduce texture memory. Measure the limiting stage in the assembled scene.
2. Instancing can reuse one geometry and compatible material across many transforms. It is useful for repeated props, but multiple materials, render passes, transparency and visibility requirements still affect the actual draw workload.
3. Level of detail selects cheaper representations when fine detail contributes little to the image. Distance can be a useful signal, but projected size and visible transitions matter. A small distant object should not consume a hero asset's full shading and geometry budget.
4. An atlas can combine image regions, while compression can reduce a particular representation's size. Both introduce trade-offs such as padding, filtering, decoder support or quality loss. Evaluate the exact representation changed and keep a fallback where required.
5. Validate the artifact manifest against explicit limits: bytes, dimensions, materials, meshes, clips and bounds. Then test the complete scene on representative devices. Passing numerical gates does not prove that a silhouette, animation or readable interaction survived.

import * as THREE from "three";
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x77bb88 });
const count = 400;
const props = new THREE.InstancedMesh(geometry, material, count);
const transform = new THREE.Object3D();
for (let index = 0; index < count; index += 1) {
  transform.position.set((index % 20) * 2, 0, Math.floor(index / 20) * 2);
  transform.updateMatrix();
  props.setMatrixAt(index, transform.matrix);
}
props.instanceMatrix.needsUpdate = true;
props.computeBoundingSphere();
// scene.add(props) in a scene owner with a suitable camera and lighting.
// Shared geometry/material ownership is explicit; avoid disposing per instance.
// Compare measured submissions and frame time, not only object count.

1. Repeated data

   Four hundred props use the same box geometry and material. Their individual transforms are the differing information.

2. Representation

   The instanced mesh stores the shared resources once with an instance transform for each prop. The renderer can submit compatible instances together for a pass.

3. Verification

   Measure the assembled scene, including shadow or other passes, and inspect bounds and visibility. The code's object count is not a complete draw-call measurement.