Vertex and Index Buffer to Vertex Shader

Compute Shader Buffer to Vertex Shader | Babylon.js Playground

I have created a simple program that in theory creates
4 vertices and 2 triangles in a vertex and index buffer.
They are created with the correct flags.
I then create a custom material and pass them these buffers.

After i accomplish these things, I am not getting expected results. On my machine the vertices are not where i would expect them to be and it prints like half a mesh plane. On the Playground example i am not getting anything.

Could you take a look at my code and see where my gap is.

Do you use WebGPU version of the Playground?

Yeah, I did on edge.

There are a few problems:

  • your vertex/shader fragments are not found:
    image
  • you do not set the position/index buffers for the compute shader (see lines 66-67 in the corrected PG below)
  • ComputeShader.dispatch will not dispatch the shader if it is not ready. You should use dispatchWhenReady instead, to be sure that the shader will be dispatched when it is ready.
  • I have inverted the definition of the 2 triangles in the index buffer, otherwise the triangles were defined backwards.
  • you must pass true for the 4th parameter of Mesh.setIndexBuffer because the index buffer is 32 bits

Corrected PG:

Thank you. That cleared up most of my understanding.

One more issue i did have though is the quad is not displaying flat on the ground like I would expect in your example. All the y values are 0 but the plane is not flat on the ground.

I edited your example and added a custom mesh defined from the CPU. Notice how there is a difference even thought the vertices and indices were defined the same. What is causing this?

Compute Shader Buffer to Vertex Shader | Babylon.js Playground

For alignment reasons, array<vec3f> really is array<vec4f> (it’s coming from WebGPU, not Babylon), so you will have some unwanted 0 after each x/y/z positions. You should declare positionBuffer as an array<f32> instead:

Note that I’ve inverted the indices for the red plane, this way we can see both the red and black planes.

1 Like