WebGPURenderer: Use `ReadbackBuffer` in `readRenderTargetPixelsAsync()`.

[Mugen87]

Description

see #29341 (comment)

WebGPURenderer.readRenderTargetPixelsAsync() creates a new buffer for each call. The idea is to find a solution to define a buffer once and reuse it.

Solution

Use the same approach of getArrayBufferAsync() in readRenderTargetPixelsAsync(). The PRs #33300 and #33322 introduced ReadbackBuffer.

Alternatives

• Leave the code as it is.

Additional context

#29341

[2005rishabh]

Hey @Mugen87 I’d like to work on this issue.

I’ve been reviewing the previous discussions and implementations around #29341, #33300 and #33322, especially the introduction of ReadbackBuffer and the later adjustments to its lifecycle and reuse semantics.

From what I understand, the remaining gap is applying the same ReadbackBuffer patterns already used by getArrayBufferAsync() to readRenderTargetPixelsAsync(), so repeated calls can reuse readback resources instead of allocating a new buffer every time.

I’m currently tracing the existing WebGPU readback flow and experimenting with a prototype that keeps the current API behavior aligned with the newer ReadbackBuffer design introduced in #33322.