What is the best way to download pictures from webgpu？

[ouzhou]

Thanks to toji and greggman, i find way to load texture from canvas/image.

https://webgpufundamentals.org/webgpu/lessons/webgpu-importing-textures.html
https://toji.dev/webgpu-best-practices/img-textures

But I can't find a way to download pictures from canvas or gputexture, so I'll try to ask, what's the best way to download pictures?

export async function downloadImageFromCanvas(
  device: GPUDevice,
  canvas: HTMLCanvasElement // must be webgpu context
): Promise<void> {
}

export async function downloadImageFromTexture(
  device: GPUDevice,
  texture: GPUTexture,
): Promise<void> {
}

I asked chatgpt and got some code, but the effect was not good in the test. The downloaded file was invalid, and the canvas screen was broken to white color.
It seems that my download action has affected the content I originally rendered on canvas.

export async function downloadImageFromCanvas(
  device: GPUDevice,
  canvas: HTMLCanvasElement
): Promise<void> {
  const context = canvas.getContext("webgpu") as GPUCanvasContext;
  const currentTexture = context.getCurrentTexture(); 
  const bytesPerPixel = 4; 
  const bufferSize = canvas.width * canvas.height * bytesPerPixel;
  const buffer = device.createBuffer({
    size: bufferSize,
    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
  });

  const commandEncoder = device.createCommandEncoder();

  commandEncoder.copyTextureToBuffer(
    {
      texture: currentTexture.createView(), 
    },
    {
      buffer,
      bytesPerRow: canvas.width * bytesPerPixel,
      rowsPerImage: canvas.height,
    },
    [canvas.width, canvas.height]
  );

  device.queue.submit([commandEncoder.finish()]);

  await buffer.mapAsync(GPUMapMode.READ);
  const arrayBuffer = buffer.getMappedRange();
  const data = new Uint8Array(arrayBuffer);

  const imageData = new ImageData(
    new Uint8ClampedArray(data),
    canvas.width,
    canvas.height
  );

  const offscreenCanvas = new OffscreenCanvas(canvas.width, canvas.height);
  const ctx = offscreenCanvas.getContext("2d");
  ctx.putImageData(imageData, 0, 0);

  offscreenCanvas.convertToBlob({ type: "image/png" }).then((blob) => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "webgpu_capture.png";
    link.click();
    URL.revokeObjectURL(url);
  });

  buffer.unmap();
  currentTexture.destroy(); 
}

export async function downloadImageFromTexture(
  device: GPUDevice,
  texture: GPUTexture,
): Promise<void> {
  // Create a buffer to store the texture data
  const textureExtent = texture.size;
  const bufferSize = textureExtent.width * textureExtent.height * 4; // Assuming RGBA format
  const buffer = device.createBuffer({
    size: bufferSize,
    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
  });

  // Create a command encoder to copy texture to the buffer
  const encoder = device.createCommandEncoder();
  const textureView = texture.createView();
  encoder.copyTextureToBuffer(
    { texture: texture },
    { buffer: buffer, offset: 0, bytesPerRow: textureExtent.width * 4 },
    textureExtent
  );

  // Submit the command to the GPU
  device.queue.submit([encoder.finish()]);

  // Map the buffer to read the data
  await buffer.mapAsync(GPUMapMode.READ);
  const arrayBuffer = buffer.getMappedRange();

  // Create an ImageData object from the buffer (RGBA format)
  const imageData = new ImageData(
    new Uint8ClampedArray(arrayBuffer),
    textureExtent.width,
    textureExtent.height
  );

  // You can now use imageData, for example, to display it on a canvas or save it
  console.log('Image data downloaded:', imageData);

  // Unmap the buffer after use
  buffer.unmap();

  const url = URL.createObjectURL(imageData);
  const link = document.createElement("a");
  link.href = url;
  link.download = "webgpu_capture.png";
  link.click();
}

[greggman]

If you draw to a canvas then you can use canvas.toBlob() or canvas.toDataURL

example: https://jsgist.org/?src=b217695c8f1104370ba2a81e5efc1ef3

It's not clear what your example code is trying to do and it's rather around about. Calling context.getCurrentTexture() always gives you a blank texture if it's in its own event so all you're going to get from that method is a blank image. Maybe there was supposed to be a comment "// render to this texture" after the call to context.getCurrentTexture() and before any other code. But, given you have a canvas, you can just call canvas.toBlob. There's no need to go through canvas->buffer->2d_offscreen_canvas->imagedata->toBlob. That's 4 steps too many.

The 2nd example copies to a buffer and then an ImageData and then tries to make file URL from the ImageData. I don't think it's valid to pass ImageData to URL.createObjectURL and even if it was I don't think it would create a PNG. It's certainly not documented on MDN at a glance.

[ouzhou]

The 2nd example .Can I change it to this
texture -> copy texture to gpu buffer -> read gpu buffer to ImageData -> draw image data to canvas -> canvas to blob

[greggman]

why? Did you look at the linked example? It's just canvas to blob, no gpu buffer, no image data, no draw to canvas.

[ouzhou]

yes，the 2nd example is to download any GPUTexture to a img file.
I don't know if there is any method in GPUTexture to get a blob.
so i plan to draw the texture to a new canvas element ,then use canvas.toBlob to get file like example one.

[greggman]

There a no built in way to copy "any" texture ot a blob. You have to do it yourself.

The most efficent way to take any texture to a PNG for some defintion of any would be

1. use copyTextureToTexture to copy from that texture to a canvas texture then canvas toBlob.

   You can only do this if both texture are the canvas texture are the same format

2. use a compute shader to copy from that texture to a canvas texture then cavnas toBlob