[g-webgpu] 实现 readTexture 以支持拾取

[xiaoiver]

在 WebGL 1/2 中，可以通过 readPixels 同步方法获取纹理数据。但在 WebGPU 中，类似方法需要使用异步：

gpuBuffer
        .mapAsync(GPUMapMode.READ, srcByteOffset, size)
        .then()

https://doc.babylonjs.com/setup/support/webGPU/webGPUBreakingChanges#readpixels-is-now-asynchronous

但需要注意的是，拷贝 texture 到 buffer 时，bytesPerRow 是有要求的：
https://gpuweb.github.io/gpuweb/explainer/#example-020d533f

// Copy data from the texture to the buffer.
const encoder = device.createCommandEncoder();
encoder.copyTextureToBuffer(
    { texture },
    { buffer: readbackBuffer, bytesPerRow: textureWidth * 4 },
    [textureWidth, textureHeight],
);
device.queue.submit([encoder.finish()]);

必须是 256 的倍数，否则会报错：

bytesPerRow (4) is not a multiple of 256

[xiaoiver]

另外 https://www.w3.org/TR/webgpu/#dom-gpu-getpreferredcanvasformat 会返回 bgra8unorm
和常规的 rgba 排布并不一样，在 decode picking color 时需要注意