Optimizing Canvas Resizing in Three.js

Question 1: Better Method for Canvas Resizing

Your current approach is fundamentally correct, but there are a few optimizations you can implement to make it more efficient:

1. Debounce the Resize Event

The main issue with resize events is they fire continuously during resizing. Debouncing limits how often your handler executes:

JAVASCRIPTCopied
// Debounce function
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// Debounced resize handler
const handleResize = debounce(() => {
  // Update sizes
  canvasSizes.width = containerElement.clientWidth;
  canvasSizes.height = containerElement.clientHeight;

  // Update camera
  camera.aspect = canvasSizes.width / canvasSizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(canvasSizes.width, canvasSizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
}, 100); // 100ms delay

window.addEventListener('resize', handleResize);

2. Use RequestAnimationFrame for Smoother Updates

For a more responsive feel during resizing, you can combine debouncing with requestAnimationFrame:

JAVASCRIPTCopied
let resizeRequest;
window.addEventListener('resize', () => {
  // Cancel any pending resize
  if (resizeRequest) cancelAnimationFrame(resizeRequest);
  
  // Schedule the resize on the next animation frame
  resizeRequest = requestAnimationFrame(() => {
    canvasSizes.width = containerElement.clientWidth;
    canvasSizes.height = containerElement.clientHeight;
    
    camera.aspect = canvasSizes.width / canvasSizes.height;
    camera.updateProjectionMatrix();
    
    renderer.setSize(canvasSizes.width, canvasSizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    
    resizeRequest = null;
  });
});

3. Optimize the setSize Method

When using the setSize method, you can set the third parameter to false to prevent unnecessary style updates:

JAVASCRIPTCopied
renderer.setSize(canvasSizes.width, canvasSizes.height, false);

This prevents the renderer from modifying the canvas's CSS style, which can be more efficient if you're handling the styling elsewhere.

Question 2: Improving Resize Performance

The lag you're experiencing is likely due to:

1. The continuous firing of resize events
2. The computational cost of updating Three.js components
3. Browser reflow/repaint operations

Solutions:

1. Use ResizeObserver instead of window resize:

JAVASCRIPTCopied
const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    if (entry.target === containerElement) {
      // Only update when animation frame is ready
      requestAnimationFrame(() => {
        canvasSizes.width = entry.contentRect.width;
        canvasSizes.height = entry.contentRect.height;
        
        camera.aspect = canvasSizes.width / canvasSizes.height;
        camera.updateProjectionMatrix();
        
        renderer.setSize(canvasSizes.width, canvasSizes.height);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      });
      break;
    }
  }
});

resizeObserver.observe(containerElement);

2. Simplify your CSS:

   • Complex CSS calculations like calc(100dvh - 60px) can be expensive during resizing
   • Consider using simpler layout techniques or fixed dimensions where possible

3. Throttle pixel ratio updates:

   • Only update the pixel ratio when necessary, not on every resize

4. Consider a two-phase resize approach:

   • During active resizing: use a lower resolution/quality
   • After resizing completes: restore full quality

JAVASCRIPTCopied
let isResizing = false;
let resizeTimeout;

window.addEventListener('resize', () => {
  if (!isResizing) {
    isResizing = true;
    // Set to lower quality during resize
    renderer.setPixelRatio(1.0);
  }
  
  clearTimeout(resizeTimeout);
  
  // Update dimensions immediately
  canvasSizes.width = containerElement.clientWidth;
  canvasSizes.height = containerElement.clientHeight;
  camera.aspect = canvasSizes.width / canvasSizes.height;
  camera.updateProjectionMatrix();
  renderer.setSize(canvasSizes.width, canvasSizes.height);
  
  // Restore quality after resize completes
  resizeTimeout = setTimeout(() => {
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    isResizing = false;
  }, 250);
});

These optimizations should significantly improve the responsiveness of your Three.js canvas during window resizing operations.