Question about GPU buffers with WebGPU

Hi guys, I have a question about how GPU memory is used in Babylon.js, more specficaly for WebGPU applications.

In the Boids example (https://playground.babylonjs.com/?webgpu#3URR7V#186), it is not clear to me if all the buffers are declared in GPU memory. For example in this line:

this.particleBuffers = [
            new BABYLON.StorageBuffer(engine, initialParticleData.byteLength, BABYLON.Constants.BUFFER_CREATIONFLAG_VERTEX | BABYLON.Constants.BUFFER_CREATIONFLAG_WRITE),
            new BABYLON.StorageBuffer(engine, initialParticleData.byteLength, BABYLON.Constants.BUFFER_CREATIONFLAG_VERTEX | BABYLON.Constants.BUFFER_CREATIONFLAG_WRITE),
        ];

it seems quite clear that “particleBuffers” is declared on the GPU memory. But here:

this.vertexBuffers = [
            [
                new BABYLON.VertexBuffer(engine, this.particleBuffers[0].getBuffer(), "a_particlePos", false, false, 4, true, 0, 2),
                new BABYLON.VertexBuffer(engine, this.particleBuffers[0].getBuffer(), "a_particleVel", false, false, 4, true, 2, 2)
            ],

I am not sure where “vertexBuffers” is. When “particleBuffers[0].getBuffer()” is called, is it just a pointer in memory, or “particleBuffers” is actually copied to “vertexBuffers” via the CPU, as javascript arrays ?

Here my main concern is to ensure that we don’t have useless host<->device communications. In the original WebGPU javascript example, it is quite obvious that everything is staying in GPU memory, but here I am a bit confused what the Babylon abstractions are doing. Could someone explain how Babylon is handling the buffers?

Second question: is there a way in Babylon to check where data are in memory and to do some profiling of host and device usage, similar to what a tool like Nsight is doing?

Thanks for any help !

Emmanuel

No, the buffer is not copied when we do new BABYLON.VertexBuffer(engine, this.particleBuffers[0].getBuffer(), ...), it is simply reused. More generally, if APIs take DataBuffer as parameters, then there is no copy, a DataBuffer being a wrapper around a GPU buffer.

When I debug WebGPU, I often use PIX. It’s very useful to know what’s going on at low level (and, as far as I know, it’s the only low-level tool that currently works with Chrome!). If it helps, I have a little guide to help you configure PIX:

1 Like

Thank you for your answer, this is really helpful.

For PIX, it seems that it is only running on Windows. Do you know if there is a similar alternative on MacOS? If not, well, I will plug back my PC :slight_smile:

There’s also RenderDoc, but it seems it does not support MacOS…

It seems there is a xCode Frame Debugger Tool. Not sure if it will work for you, though.

you could use this and plug in an android device .GitHub - google/agi: Android GPU Inspector

that would be a good meme