How to display triangles with WebGPU + WGSL?

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?

Something has been broken in the WGSL support, looking into that…

2 Likes

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

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

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

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).

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.

Doc updated:

2 Likes

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