The Prince AcademyAI & DX General Trading Company

2025.09.12Gave a talk at Ogaki Naka Rotary Club
2025.11.04Registered as an AI & DX “Expert Talent” at the Gifu Chamber of Commerce and Industry
2025.11.17Upgraded our servers to ensure stable ultra-fast delivery after a temporary issue caused by a surge in traffic.
2025.09.12Gave a talk at Ogaki Naka Rotary Club
2025.11.04Registered as an AI & DX “Expert Talent” at the Gifu Chamber of Commerce and Industry
2025.11.17Upgraded our servers to ensure stable ultra-fast delivery after a temporary issue caused by a surge in traffic.

Performance Tuning: Rendering and Shaders | Chapter 9: Optimization and Deployment | Three.js for Creators: A Beginner's Guide to 3D Web Experiences

Section

Performance Tuning: Rendering and Shaders

Part of The Prince Academy's AI & DX engineering stack.

Follow The Prince Academy Inc.

As your 3D web experiences grow in complexity, so too does the importance of performance. This section delves into the art of performance tuning, focusing on how your rendering pipeline and shaders can become bottlenecks, and more importantly, how to address them. We'll explore techniques to keep your creations smooth and responsive, ensuring a delightful experience for your users.

Rendering Performance: The Foundation of Smoothness

The primary goal of rendering performance tuning is to minimize the time it takes for your GPU to draw each frame. Three.js provides several tools and concepts to help you achieve this. The most significant factor is often the number of draw calls. A draw call is a command sent from the CPU to the GPU to render a set of vertices. Too many draw calls, especially for small objects, can overwhelm the CPU and become a significant bottleneck.

Batching Geometry: Reducing Draw Calls

One of the most effective ways to reduce draw calls is by merging multiple geometries into a single one. This is particularly useful when you have many identical or similar objects that share the same material. Three.js offers the BufferGeometryUtils.mergeBufferGeometries function for this purpose. By merging, you tell the GPU to draw one larger object instead of many small ones, significantly cutting down on overhead.

import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';

let geometriesToMerge = [];
// Add geometries from your scene here
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometriesToMerge);
const mergedMesh = new THREE.Mesh(mergedGeometry, material);
scene.add(mergedMesh);

Instancing: Drawing Many Copies Efficiently

When you need to render a large number of identical objects with variations in position, rotation, or scale, instancing is your best friend. Instead of creating individual mesh instances, you define a single InstancedMesh object. The GPU then renders multiple copies of the same geometry, applying per-instance transformations. This drastically reduces draw calls and memory usage compared to creating many separate meshes.

Next section: Loading and Managing Assets Efficiently

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);

// Set per-instance transformations
const matrix = new THREE.Matrix4();
const color = new THREE.Color();
for (let i = 0; i < count; i++) {
  // Position, rotation, scale for instance i
  matrix.setPosition(x, y, z);
  instancedMesh.setMatrixAt(i, matrix);
  // You can also set per-instance colors or other attributes
  instancedMesh.setColorAt(i, color);
}

scene.add(instancedMesh);

const lod = new THREE.LOD();

// Add meshes with decreasing detail
const meshLevel0 = createComplexMesh();
lod.addLevel(meshLevel0, 100);

const meshLevel1 = createMediumMesh();
lod.addLevel(meshLevel1, 50);

const meshLevel2 = createSimpleMesh();
lod.addLevel(meshLevel2, 10);

scene.add(lod);

graph TD;
    A[Start Shader Execution] --> B{Complex Calculation?};
    B -- Yes --> C[Execute Complex Math];
    C --> D{Texture Lookup?};
    B -- No --> D;
    D -- Yes --> E[Perform Texture Sample];
    E --> F{Branching?};
    D -- No --> F;
    F -- Yes --> G[Execute Conditional Logic];
    G --> H[End Shader];
    F -- No --> H;
    H --> I[Render Pixel/Vertex];

import Stats from 'three/addons/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
  requestAnimationFrame(animate);

  // Update your scene here

  stats.update();
}

animate();