Optimizing Large Grid-Based Obstacle Systems in Three.js

When working with large numbers of instances in Three.js (2000+ cells), performance optimization becomes critical, especially during dynamic updates like dragging. Here are some approaches to improve performance with your InstancedMesh-based obstacle system:

Optimization Strategies

1. Batch Updates with Matrix Calculations

Instead of updating each instance individually, consider using matrix calculations to update multiple instances at once:

JAVASCRIPTCopied
// Pre-allocate matrices and vectors
const matrix = new THREE.Matrix4();
const position = new THREE.Vector3();
const quaternion = new THREE.Quaternion();
const scale = new THREE.Vector3();

// Update in batches
function updateObstacles(startIndex, endIndex, heightFunction) {
  for (let i = startIndex; i < endIndex; i++) {
    const cell = cells[i];
    
    // Calculate height based on your logic
    const height = heightFunction(cell);
    
    // Set position, rotation, and scale
    position.set(cell.position.x, height / 2, cell.position.z);
    scale.set(cell.dimensions.x, height, cell.dimensions.z);
    
    // Compose matrix and set it
    matrix.compose(position, quaternion, scale);
    instancedMesh.setMatrixAt(i, matrix);
  }
  
  // Only update the instanceMatrix once after batch processing
  instancedMesh.instanceMatrix.needsUpdate = true;
}

2. Spatial Partitioning for Selective Updates

Only update the cells that need to be changed:

JAVASCRIPTCopied
// Create a spatial index of your cells
const spatialIndex = new Map(); // key: gridX_gridZ, value: array of indices

// When dragging, determine affected area
const affectedArea = getAffectedAreaFromDrag(dragEvent);
const indicesToUpdate = getIndicesInArea(affectedArea, spatialIndex);

// Only update those indices
updateObstacles(indicesToUpdate, heightFunction);

3. Use Shaders for Height Calculations

For relative obstacles where all heights change by the same amount, you could use a custom shader to handle the height transformation:

JAVASCRIPTCopied
// Add a uniform to your material
const material = new THREE.ShaderMaterial({
  uniforms: {
    heightMultiplier: { value: 1.0 }
  },
  vertexShader: `
    uniform float heightMultiplier;
    
    void main() {
      // Modify position based on heightMultiplier
      vec3 newPosition = position;
      if (newPosition.y > 0.0) {
        newPosition.y *= heightMultiplier;
      }
      
      gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
    }
  `,
  // Rest of your shader code
});

// Then to update heights, just change the uniform
material.uniforms.heightMultiplier.value = newHeight;

4. Level of Detail (LOD) Approach

When dragging, you could temporarily reduce the number of instances:

JAVASCRIPTCopied
function startDrag() {
  // Switch to lower resolution representation
  highResObstacle.visible = false;
  lowResObstacle.visible = true;
}

function endDrag() {
  // Update the high-res version once
  updateHighResObstacle();
  
  // Switch back to high resolution
  highResObstacle.visible = true;
  lowResObstacle.visible = false;
}

5. Web Workers for Calculations

Offload the matrix calculations to a Web Worker:

JAVASCRIPTCopied
// In your main thread
const worker = new Worker('obstacleWorker.js');

worker.onmessage = function(e) {
  // e.data contains the updated matrices
  const matrices = e.data;
  
  // Apply the matrices to your instancedMesh
  for (let i = 0; i < matrices.length; i++) {
    instancedMesh.setMatrixAt(i, new THREE.Matrix4().fromArray(matrices[i]));
  }
  instancedMesh.instanceMatrix.needsUpdate = true;
};

// When dragging
worker.postMessage({
  cells: cells,
  dragData: { /* drag information */ }
});

Specific Approach for Your Two Variants

For Relative Obstacles

Since all cubes are raised by the same amount, you could use a uniform scale transformation on the entire InstancedMesh:

JAVASCRIPTCopied
function updateRelativeObstacle(height) {
  // Just update the y-scale and position of the entire mesh
  obstacle.scale.y = height;
  obstacle.position.y = height / 2;
}

For Non-Relative Obstacles

Consider using GPU instancing with custom attributes to store the height information:

JAVASCRIPTCopied
// During setup
const heights = new Float32Array(cellCount);
const heightAttribute = new THREE.InstancedBufferAttribute(heights, 1);
instancedGeometry.setAttribute('height', heightAttribute);

// In your shader
vertexShader: `
  attribute float height;
  
  void main() {
    vec3 transformed = position;
    if (transformed.y > 0.0) {
      transformed.y *= height;
    }
    // Rest of your vertex shader
  }
`

// When updating, just update the attribute
function updateNonRelativeHeights(newHeights) {
  for (let i = 0; i < newHeights.length; i++) {
    heightAttribute.array[i] = newHeights[i];
  }
  heightAttribute.needsUpdate = true;
}

These approaches should help improve performance when working with large numbers of instanced objects in your grid-based system.