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