How to display triangles with WebGPU + WGSL?

Questions
,
1

Below is a sample triangle using GLSL in Babylon.js. This does not seem to be a problem.

BABYLON.ShaderStore.ShadersStore["customTriangleVertexShader"] = `#version 300 es
    in  vec3 position;
    in  vec4 color;
    out vec4 vColor;

    void main() {
        vColor = color;
        gl_Position = vec4(position, 1.0);
    }
`;

Next I tried the above sample with WebGPU + WGSL.

BABYLON.ShaderStore.ShadersStoreWGSL["customTriangleVertexShader"] = `   
    attribute position : vec3<f32>;
    attribute color : vec4<f32>;
    varying vColor : vec4<f32>;

    @vertex
    fn main(input : VertexInputs) -> FragmentInputs {
        vColor = color;
        gl_Position = vec4<f32>(position, 1.0);
    }
`;

However, the following error occurred and could not be displayed.

Attribute shader location (1) is used more than once.

Can someone tell me what is wrong?

2
3

Something has been broken in the WGSL support, looking into thatā€¦

2 Likes
4

BTW, it was displayed without problems when vertex colors were not used.

5

Ok, so the position and color attributes are handled automatically by the system (as well as normal and uv), you donā€™t need to list them in the attributes property when creating a ShaderMaterial instance:

If you do pass some attributes to the constructor, you should still donā€™t pass color because this one is automatically added as long as there is a ā€œcolorā€ vertex buffer attached to the mesh. So, you should only pass position:

Itā€™s a bit weird, but thatā€™s how ShaderMaterial works and we canā€™t change it to avoid breaking backwards compatibility.

2 Likes
6

What do you think about using GitHub - brendan-duncan/wgsl_reflect: A WebGPU Shading Language parser and reflection library for Javascript. to automate this?

7

We could not use it because we are using our own parser to parse some specific constructs not available in WGSL (ā€œattributeā€ / ā€œvaryingā€ for eg).

8

Itā€™s a little strange, but I understand that it is not necessary to specify the position and color attributes when using ShaderMaterial.
I thought it would be nice to have some additional information about vertex colors in the documentation.

9

Doc updated:

2 Likes
10

Thank you for adding to the documentation.
I made some samples using Babylon.js and WGSL. It seems fine for now.

Colored Cube

Textured Cube

Teapot

1 Like
11