trouble with write_texture data

[ford442]

I have been trying to work around the lack of HTMLVideoElement interaction by getting video frame data into a canvas element and then into C++ webgpu.h write_texture via emscripten FS files. Using regular webgl getImageData commands gives me an odd shaped image over in C++. Maybe i don't know the exact request of bytesPerBlockRow or blockRowsPerImage purpose or equation? I get my frames all chopped up into consecutively smaller chunks as if the data sizes don't line up.

Anyone want to clarify?
ty...

[greggman]

Is there some reason you can't use copyExternalImageToTexture like in this article?

https://webgpufundamentals.org/webgpu/lessons/webgpu-importing-textures.html

[greggman]

Ah, I haven't used webgpu.h and wasn't aware it didn't yet support copyExternalImageToTexture. That's a shame, although I get it as anywhere outside of the browser it would be left as an "exercise to the reader"

I might suggest you should look into adding it yourself if you're only targeting the browser. It will be extremely inefficient to go through canvas 2D

But in any case, there's nothing special using data from getImageData with writeTexture. The data from getImageData as a Uint8ClamppedArray and you should be able to pass it to writeTexture. The bytesPerRow should just be the width of whatever size you passed to getImageData * 4. The format will be rgba8unorm

Here's the example using copyExternalImageToTexture with video converted to use a 2d canvas and getImageData

https://jsgist.org/?src=d2210fd3dc64d99f3f24b64099e9fdfd