Creating Texture Arrays in Three.js from Individual Images

You can definitely create a DataArrayTexture (which is the current name for what was previously called DataTexture2DArray in older Three.js versions) from individual PNG images rather than using a single combined file.

Here's how you can approach this:

Loading Individual Images and Creating a Texture Array

You can load individual PNG images and combine them into a texture array programmatically:

JAVASCRIPTCopied
// First, load all your individual PNG images
const textureLoader = new THREE.TextureLoader();
const imagePromises = [];

// Assuming you have an array of image URLs
const imageUrls = [
  'image1.png',
  'image2.png',
  // ... more images
];

// Load each image
for (let i = 0; i < imageUrls.length; i++) {
  imagePromises.push(
    new Promise(resolve => {
      textureLoader.load(imageUrls[i], texture => {
        resolve(texture);
      });
    })
  );
}

// Once all images are loaded
Promise.all(imagePromises).then(textures => {
  // Create a canvas to read pixel data from each texture
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 256;  // Your texture width
  canvas.height = 256; // Your texture height
  
  // Create the data array for all textures
  const size = 256 * 256;
  const bytesPerImage = size * 4; // RGBA
  const data = new Uint8Array(bytesPerImage * textures.length);
  
  // Process each texture
  textures.forEach((texture, index) => {
    // Draw the texture image to the canvas
    ctx.drawImage(texture.image, 0, 0);
    
    // Get the pixel data
    const imageData = ctx.getImageData(0, 0, 256, 256).data;
    
    // Copy the pixel data to our array at the right position
    data.set(imageData, bytesPerImage * index);
  });
  
  // Create the texture array
  const textureArray = new THREE.DataArrayTexture(data, 256, 256, textures.length);
  textureArray.needsUpdate = true;
  textureArray.format = THREE.RGBAFormat;
  textureArray.type = THREE.UnsignedByteType;
  
  // Use the texture array in your material
  // ...
});

Alternative Approach: Using ImageBitmaps

For better performance, especially with many images, you can use the createImageBitmap API:

JAVASCRIPTCopied
async function createTextureArray(imageUrls, width, height) {
  // Load all images as ImageBitmaps
  const bitmaps = await Promise.all(
    imageUrls.map(url => 
      fetch(url)
        .then(response => response.blob())
        .then(blob => createImageBitmap(blob))
    )
  );
  
  // Create canvas for pixel extraction
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  
  // Create data array
  const size = width * height;
  const bytesPerImage = size * 4; // RGBA
  const data = new Uint8Array(bytesPerImage * bitmaps.length);
  
  // Process each bitmap
  bitmaps.forEach((bitmap, index) => {
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(bitmap, 0, 0, width, height);
    
    const imageData = ctx.getImageData(0, 0, width, height).data;
    data.set(imageData, bytesPerImage * index);
    
    // Clean up
    bitmap.close();
  });
  
  // Create and return the texture array
  const textureArray = new THREE.DataArrayTexture(data, width, height, bitmaps.length);
  textureArray.needsUpdate = true;
  
  return textureArray;
}

Notes on Performance

• Loading many individual PNG files can cause performance issues due to multiple HTTP requests
• Consider using a sprite sheet or texture atlas if possible
• For production, you might want to create a server-side process to combine your images into a single raw data file

This approach gives you flexibility while developing, allowing you to work with individual image files rather than having to recreate a combined file every time you make changes.