title: Texture atlas to texture array via PIXEL_UNPACK_BUFFER
body: <p>I have two questions:</p>
  <p>First, is there any more direct, sane way to go from a texture atlas image to a texture array in WebGL than what I'm doing below? I've not tried this, but doing it entirely in WebGL seems possible, though four-times the work and I still have to make two round trips to the GPU to do it.</p>
  <p>And am I right that because <em>buffer data</em> for <code>texImage3D()</code> must come from <code>PIXEL_UNPACK_BUFFER</code>, this data must come directly from the CPU side? I.e. There is no way to copy from one block of GPU memory to a <code>PIXEL_UNPACK_BUFFER</code> without copying it to the CPU first. I'm pretty sure the answer to this is a hard &quot;no&quot;.</p>
  <p>In case my questions themselves are <em>stupid</em> (and they may be), my ultimate goal here is simply to convert a texture atlas PNG to a texture array. From what I've tried, the fastest way to do this by far is via <code>PIXEL_UNPACK_BUFFER</code>, rather than extracting each sub-image and sending them in one at a time, which for large atlases is extremely slow.</p>
  <p>This is basically how I'm currently getting my pixel data.</p>
  <pre><code>const imageToBinary = async (image: HTMLImageElement) =&gt; {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
  
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0);
  
      const imageData = context.getImageData(0, 0, image.width, image.height);
  
      return imageData.data;
  };
  </code></pre>
  <p>So, I'm creating an HTMLImageElement object, which contains the uncompressed pixel data I want, but has no methods to get at it directly. Then I'm creating a 2D context version containing the same pixel data a second time. Then I'm repopulating the GPU with the same pixel data a third time. Seems bonkers to me, but I don't see a way around it.</p>