example for render mesh with WGSL?

[tiye]

there was a nice example of rendering with shader in older versions
https://codesandbox.io/p/sandbox/pixijs-mesh-and-shaders-uniforms-example-o432o?file=%2Fsrc%2Findex.js

now PIXI has support for WebGPU, does it mean we can render mesh with WGSL?

[tiye]

oh, I got one here https://pixijs.com/8.x/examples/mesh-and-shaders/triangle-color . can I only provide WGSL there, if I don't have to run in older browsers?

still I'm curious about example for loading images and draw in mesh with WGSL.

[tiye]

using order of Object keys does not seem to be good practice of ordering WebGPU attributes,

        for (const i in attributes)
        {
            const attribute = attributes[i] = ensureIsAttribute(attributes[i]);

            const bufferIndex = this.buffers.indexOf(attribute.buffer);

    const geometry = new Geometry({
        attributes: {
            aColor: [1, 0, 0, 0, 1, 0, 0, 0, 1], // if I swap..
            aPosition: [-100, -50, 100, -50, 0, 100],    
        },
    });

layout of WebGPU bindings has an order, however order of Object keys might change if {...p, k: v} syntax involved or data created dynamically.

so is uniforms order.

still looking for more examples from source code.

[tiye]

and comes another question, how do I pass my own uniforms?

somewhere I could try is:

 const shader = new Shader({
     glProgram: glProgram,
     gpuProgram: gpuProgram,
     resources: {
         uTexture: texture.source,
         uSampler: texture.sampler,
         uColor: [1, 0, 0, 1],
     },
 });

according to https://pixijs.download/release/docs/rendering.Shader.html

but turned out wrong:

[tiye]

hi, @GoodBoyDigital could you give me some hints on defining my own uniforms?