[SOLVED] Shader values in real time?

Help & Support
#1

Hi all, I’m a bit new to shaders and I’m still trying to get my head around the concept. I know shaders need to be compiled prior to being attached to a material and so on. now I am able to basically re-load a shader during runtime by just recreating the material if there any changes to the shader. My question is this, is it possible to actually update variables inside that shader by passing the values in with arguments instead of declaring everything inside the shader file.

for example say I have this fragment shader:

void main(void)
{
    vec4 color = vec4(0.0,0.7,1.0,0.5);
    gl_FragColor = color;
}

is there any way I can pass in that vec4 as an argument or pass in the colour values separate in 4 different floats (ie , R, G, B, A) for instance? if so, how would this be accomplished?

#2

Hey. It sounds to me like you are looking for shader uniforms. You can read more about how to set and use uniforms here: https://developer.playcanvas.com/en/tutorials/custom-shaders/#glsl-uniform-variables.

So something like:

...

uniform vec4 u_color;

void main() {

...

and then setting/updating your uniform in the js by doing something like

this.material.setParameter('u_color', [r, g, b, a]);
1 Like
#3

This is exactly what I was looking for! Thank you, works like a charm. :+1: