WGSL Compute Shader vs JS World Matrix

Hello all,
I am trying to replicate the worldMatrix transformation (that you would normally execute in the vertex shader) in a WGSL ComputeShader, but I cant seem to get it to work. I send in the worldMatrix as a uniform, send in the vertices, but the result buffer is all messed up - as if the numbers are shuffled or something like that. I can get the correct calculation in JS space, but the WGSL gives weird results. I created a Playground (https://playground.babylonjs.com/#2PLUPA#3), you can see what I am talking about in the developer console. The Playground displaces a sphere and logs the correct vertex locations when calcluation is done in JS using Vector3.TransformCoordinates, but the WGSL ComputeShader then looks odd. I tested with bakeTransformIntoVertices as well, so the worldMatrix became an identity matrix, so row/column orientation could not become an issue, and I observe the same issue. It is as if the vertices I am putting in the buffer get shuffled or something like that. Also tried adding more structure to the input buffer like this, but no luck (see https://playground.babylonjs.com/#2PLUPA#4):

struct Vertex {
    vertex : vec3<f32>,
 };

struct Vertices {
    vertices : array<Vertex>,
};

Switch to WebGPU before running please.

It looks as if the first vertex is correct, but the later ones are not. Maybe it is not the matrix that is causing the issue, but the stride of my buffer? Any help is appreciated!

Thank you!

The problem comes from alignment. There are padding rules which mean that when you declare vertexBuffer: array<vec3<f32>>, each element of the array will actually be a vec4, with a padding of 0 at the end. Instead, you should declare it as `vertexBuffer: array`` :

2 Likes

Thank you, this completely solved my issue!