How can I use a custom shader with PlayCanvas 2.5.1 WebGPU

I try to use a custom shader with PlayCanvas 2.5.1 WebGPU. But the shader is not ready and couldn’t be used.


SkyMaterial1.prototype.initialize = function() {
    var device = this.app.graphicsDevice;
    if (!device) {
        console.error("no GraphicsDevice ");
        return;
    }

    // 1️⃣ Shader-Code
    var vsCode = `
        attribute vec3 aPosition;
        attribute vec3 aNormal;
        uniform mat4 matrix_modelViewProjection;
        void main(void) {
            gl_Position = matrix_modelViewProjection * vec4(aPosition, 1.0);
        }`;

    var fsCode = `
        void main(void) {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // red
        }`;

    // 2️⃣ Shader-Definition
    var shaderDesc = {
        attributes: {
            aPosition: pc.SEMANTIC_POSITION,
            aNormal: pc.SEMANTIC_NORMAL
        },
        vshader: vsCode,
        fshader: fsCode
    };

    this.shader = new pc.Shader(device, shaderDesc);
    this.shader.compile();
    var self = this;
    setTimeout(() => {
        var material = new pc.ShaderMaterial();
        material.shader = self.shader;
        material.update();
        var fbxEntity = self.app.root.findByName("ModelRu");
        if (fbxEntity) {
            var model = fbxEntity.model;
            if (model && model.meshInstances.length > 0) {
                model.meshInstances.forEach(meshInstance => {
                    console.error("Set MeshInstance Material");
                    meshInstance.material = material;
                });
            }
        }
    }, 2000);    

};

A good starting point would be the engine examples, there are multiple custom shaders being demonstrated. Perhaps PlayCanvas Examples

1 Like

I’m doing the same, but not from scratch using the PC editor and want to change the material from on existing object. I need an example for that. Thera have to be something different