Adding a Shader

Help & Support
1

Hello,

I am trying to add this shader to my project, but i keep getting issues with it. Material is not defined.

Code here:

// Opprett CustomShader-skriptet
var CustomShader = pc.createScript('customShader');

// Shader-attributter
CustomShader.attributes.add('effectColor', {
    type: 'rgb',
    default: [0.2, 0.3, 0.8],
    title: 'Effect Color'
});

CustomShader.attributes.add('octaveCount', {
    type: 'number',
    default: 10,
    title: 'Octave Count'
});

CustomShader.attributes.add('ampStart', {
    type: 'number',
    default: 0.5,
    title: 'Amplitude Start'
});

CustomShader.attributes.add('ampCoeff', {
    type: 'number',
    default: 0.5,
    title: 'Amplitude Coefficient'
});

CustomShader.attributes.add('freqCoeff', {
    type: 'number',
    default: 2.0,
    title: 'Frequency Coefficient'
});

CustomShader.attributes.add('speed', {
    type: 'number',
    default: 0.5,
    title: 'Speed'
});

// initialize() metoden
CustomShader.prototype.initialize = function() {
    this.time = 0;

    // Sjekk om modellen er tilgjengelig umiddelbart
    if (this.entity.model && this.entity.model.model) {
        this.applyShader();
    } else {
        // Lytt til hendelsen 'model:load' for dynamiske modeller
        this.entity.once('model:load', function() {
            this.applyShader();
        }, this);
    }
};

// Metode for å påføre shaderen til modellen
CustomShader.prototype.applyShader = function() {
    if (!this.entity.model || !this.entity.model.model || !this.entity.model.model.meshInstances) {
        console.error("Model or meshInstances are not defined.");
        return;
    }

    console.log("Applying shader to model.");

    var app = this.app;
    
    // Definer shaderen
    var fragmentShader = `
        precision ${app.graphicsDevice.precision} float;
        
        uniform float time;
        uniform vec3 effect_color;
        uniform int octave_count;
        uniform float amp_start;
        uniform float amp_coeff;
        uniform float freq_coeff;
        uniform float speed;

        varying vec2 vUv;

        float hash12(vec2 x) {
            return fract(cos(mod(dot(x, vec2(13.9898, 8.141)), 3.14)) * 43758.5453);
        }

        vec2 hash22(vec2 uv) {
            uv = vec2(dot(uv, vec2(127.1, 311.7)), dot(uv, vec2(269.5, 183.3)));
            return 2.0 * fract(sin(uv) * 43758.5453123) - 1.0;
        }

        float noise(vec2 uv) {
            vec2 iuv = floor(uv);
            vec2 fuv = fract(uv);
            vec2 blur = smoothstep(0.0, 1.0, fuv);
            return mix(mix(dot(hash22(iuv + vec2(0.0, 0.0)), fuv - vec2(0.0, 0.0)),
                           dot(hash22(iuv + vec2(1.0, 0.0)), fuv - vec2(1.0, 0.0)), blur.x),
                       mix(dot(hash22(iuv + vec2(0.0, 1.0)), fuv - vec2(0.0, 1.0)),
                           dot(hash22(iuv + vec2(1.0, 1.0)), fuv - vec2(1.1, 1.1)), blur.x), blur.y) + 0.5;
        }

        float fbm(vec2 uv, int octaves) {
            float value = 0.0;
            float amplitude = amp_start;
            for (int i = 0; i < octaves; i++) {
                value += amplitude * noise(uv);
                uv *= freq_coeff;
                amplitude *= amp_coeff;
            }
            return value;
        }

        void main() {
            vec2 uv = 2.0 * vUv - 1.0;
            uv += 2.0 * fbm(uv + time * speed, octave_count) - 1.0;
            float dist = abs(uv.x);
            vec3 color = effect_color * mix(0.0, 0.05, hash12(vec2(time))) / dist;
            gl_FragColor = vec4(color, 1.0);
        }
    `;

    var shaderDefinition = {
        attributes: {
            aPosition: pc.SEMANTIC_POSITION,
            aUv: pc.SEMANTIC_TEXCOORD0
        },
        vshader: `
            attribute vec3 aPosition;
            attribute vec2 aUv;
            varying vec2 vUv;

            void main(void) {
                gl_Position = vec4(aPosition, 1.0);
                vUv = aUv;
            }
        `,
        fshader: fragmentShader
    };

    var shader = new pc.Shader(app.graphicsDevice, shaderDefinition);

    // Lag materialet og tildel shaderen
    var material = new pc.Material();
    material.shader = shader;
    
    // Set uniform-parametre
    material.setParameter('effect_color', this.effectColor);
    material.setParameter('octave_count', this.octaveCount);
    material.setParameter('amp_start', this.ampStart);
    material.setParameter('amp_coeff', this.ampCoeff);
    material.setParameter('freq_coeff', this.freqCoeff);
    material.setParameter('speed', this.speed);
    
    this.material = material;

    // Påfør materialet til modellens mesh instances
    this.entity.model.model.meshInstances.forEach(meshInstance => {
        if (meshInstance) {
            meshInstance.material = this.material;
        }
    });
};

// update() metoden
CustomShader.prototype.update = function(dt) {
    this.time += dt;

    // Sjekk at materialet er definert før du prøver å sette parametere
    if (this.material) {
        this.material.setParameter('time', this.time);
    } else {
        console.error("Material is not defined yet.");
    }
};

Here is the project:
https://playcanvas.com/editor/project/1255004

Thanks.

Anders

2

The error is coming from your script. Place a breakpoint at your console.log and debug the code to see what is causing it.