Optimizing Three.js Performance with Geometry Merging

Introduction: The Cost of WebGL Draw Calls

Rendering rich 3D graphics in web browsers requires coordinating instructions between the CPU and the GPU. The primary performance bottleneck in Three.js is not the total polygon count, but rather the number of draw calls. Every individual mesh rendered in a scene requires the CPU to send a draw instruction to the GPU. This draw call overhead is extremely high in JavaScript, leading to CPU frame locks and visible stuttering when scenes contain thousands of separate objects.

To keep rendering performance high, developers must reduce draw call counts. The most effective way to accomplish this is geometry merging, which consolidates separate meshes into a single unified geometry buffer, allowing the GPU to render them in a single draw operation.

How Geometry Merging Minimizes State Changes

Geometry merging improves rendering efficiency by eliminating GPU state changes:

• State Change Overhead: Before drawing a mesh, the GPU must bind materials, textures, and shaders. Drawing 1,000 separate meshes triggers 1,000 state changes, which stalls the graphics pipeline.
• Buffer Consolidation: Merging combines vertex coordinates, normal vectors, and UV coordinates into a single BufferGeometry. The GPU binds the material once and draws the combined buffer instantly.
• Memory Optimization: Consolidating buffers reduces JavaScript memory allocations and prevents garbage collection pauses during complex scene transitions.

This optimization is essential for displaying dense environments (like particle fields, landscapes, or organic visual networks) at a stable 60 frames per second.

Geometry Merging vs. Instancing

When optimizing Three.js scenes, developers must choose between geometry merging and instanced rendering. Geometry merging combines static shapes that share a single material, converting them into one static object. This is ideal for static environments where positions do not change independently.

In contrast, instanced rendering (using InstancedMesh) is used when the scene contains thousands of identical shapes (like leaves or windows) that need to be animated, scaled, or moved independently. Instancing keeps the base geometry in GPU memory and passes a transformation matrix array to render all copies in a single pass.

Technical Implementation: Merging Mesh Geometries

The JavaScript example below demonstrates how to import and use the BufferGeometryUtils module to merge multiple separate geometries into a single mesh:

import * as THREE from 'three';
import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';

function createMergedScene(positions) {
  const geometries = [];
  const baseGeometry = new THREE.BoxGeometry(1, 1, 1);

  positions.forEach(pos => {
    // Create a copy of the geometry and apply position transform
    const geom = baseGeometry.clone();
    geom.translate(pos.x, pos.y, pos.z);
    geometries.push(geom);
  });

  // Merge all buffers into a single BufferGeometry
  const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries, false);
  
  // Clean up cloned geometries to prevent memory leaks
  geometries.forEach(g => g.dispose());
  baseGeometry.dispose();

  const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
  const mergedMesh = new THREE.Mesh(mergedGeometry, material);

  return mergedMesh; // Add this single mesh to the scene
}

Optimizing WebGL Asset Delivery with Bramsley

• GPU Tiering & Assets: Bramsley integrates graphics tiering helpers to scale particle counts and geometry complexity based on client hardware profiles.
• Sub-Second Loading: Pre-compressed WebAssembly geometry decoders are cached at Bramsley's edge nodes to deliver instant asset loading.
• Edge-Optimized Assets: We pre-process and optimize heavy 3D GLTF/OBJ assets at the edge, reducing WAN bandwidth and rendering setup times.