THREE.js Texture Resizing Function Review

I've analyzed your texture resizing function that handles various data types in THREE.js. Here are some suggested improvements:

Improved Implementation

JAVASCRIPTCopied
async function resize_texture(image, res = 2048) {
  return new Promise(resolve => {
    const canvas = document.createElement('canvas');
    
    // Calculate scale while handling potential undefined width/height
    const imageWidth = image.width || 1;
    const imageHeight = image.height || 1;
    const scale = res / Math.max(imageWidth, imageHeight);
    
    // Set canvas dimensions with proper scaling
    canvas.width = Math.floor(imageWidth * Math.min(1, scale));
    canvas.height = Math.floor(imageHeight * Math.min(1, scale));
    
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    try {
      if (image instanceof ImageData) {
        // Create a temporary canvas for ImageData if dimensions don't match
        if (image.width !== canvas.width || image.height !== canvas.height) {
          const tempCanvas = document.createElement('canvas');
          tempCanvas.width = image.width;
          tempCanvas.height = image.height;
          const tempCtx = tempCanvas.getContext('2d');
          tempCtx.putImageData(image, 0, 0);
          ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);
        } else {
          ctx.putImageData(image, 0, 0);
        }
      } else if (image.data && image.data.constructor === Float32Array) {
        const u8 = new Uint8Array(image.data.length);
        
        for (let i = 0; i < image.data.length; i++) {
          // Clamp values between -1 and 1
          const tmp = Math.max(-1, Math.min(1, image.data[i]));
          // Convert to 8-bit range
          u8[i] = Math.round(((tmp < 0) ? (tmp * 0x8000) : (tmp * 0x7FFF)) / 128.0);
        }
        
        const imgData = new ImageData(new Uint8ClampedArray(u8.buffer), imageWidth, imageHeight);
        
        // Handle resizing for non-matching dimensions
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = imageWidth;
        tempCanvas.height = imageHeight;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.putImageData(imgData, 0, 0);
        ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);
      } else if (image.data && image.data.constructor === Uint16Array) {
        const u8 = new Uint8Array(image.data.length);
        
        for (let i = 0; i < image.data.length; i++) {
          // Use THREE.js utility to convert from half float
          const tmp = Math.max(-1, Math.min(1, THREE.DataUtils.fromHalfFloat(image.data[i])));
          // Convert to 8-bit range
          u8[i] = Math.round(((tmp < 0) ? (tmp * 0x8000) : (tmp * 0x7FFF)) / 128.0);
        }
        
        const imgData = new ImageData(new Uint8ClampedArray(u8.buffer), imageWidth, imageHeight);
        
        // Handle resizing for non-matching dimensions
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = imageWidth;
        tempCanvas.height = imageHeight;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.putImageData(imgData, 0, 0);
        ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);
      } else if (image.data && image.data.constructor === Uint8Array) {
        const imgData = new ImageData(new Uint8ClampedArray(image.data.buffer), imageWidth, imageHeight);
        
        // Handle resizing for non-matching dimensions
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = imageWidth;
        tempCanvas.height = imageHeight;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.putImageData(imgData, 0, 0);
        ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);
      } else {
        // For regular images (HTMLImageElement, etc.)
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
      }
      
      // Create and resolve with the texture
      const tex = new THREE.CanvasTexture(canvas);
      resolve(tex);
    } catch (error) {
      console.error("Error resizing texture:", error);
      // Create a fallback texture in case of error
      const tex = new THREE.CanvasTexture(canvas);
      resolve(tex);
    }
  });
}

Key Improvements

1. Error Handling: Added try/catch to handle potential errors during processing
2. Null Safety: Added checks for undefined width/height
3. Proper Resizing: Added intermediate canvases for proper resizing of ImageData
4. Math Precision: Added Math.floor() to ensure integer dimensions
5. Math.round(): Added rounding for pixel values to avoid potential artifacts
6. Promise Structure: Simplified the Promise structure
7. Consistent Approach: Used the same pattern for all array types
8. Comments: Added explanatory comments

These changes should make the function more robust while maintaining the same functionality.