How to pass value to GLSL shader?

Hi! I’m trying to pass a value to a uniform variable. The code below doesn’t work. What am I doing wrong?

create()
{
	this.add.shader('rect', 200, 200, 512, 512, {
		u_time: {
			type: '1f',
			value: 0.9
		}
	});
}

GLSL shader code:

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

vec3 colorA = vec3(0.149,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);

void main() {
    vec3 color = vec3(0.0);

    float pct = abs(sin(u_time));

    // Mix uses pct (a value from 0-1) to
    // mix the two colors
    color = mix(colorA, colorB, pct);

    gl_FragColor = vec4(color,1.0);
}

:wave:

I think it’s

this.add.shader('rect', 200, 200, 512, 512).setUniform('u_time.value', 0.9);

But there is also a default uniform mapping time (seconds) that you could maybe use in the shader instead.

Unfortunately this code doesn’t work either. The color of the shader only changes if you specify a value instead of the u_time variable in the code of the shader itself.

//float pct = abs(sin(u_time));
float pct = abs(sin(0.9));
let shader;

function create() {
  const frag = `
#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

vec3 colorA = vec3(0.149,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);

void main() {
    vec3 color = vec3(0.0);

    float pct = abs(sin(u_time));

    // Mix uses pct (a value from 0-1) to
    // mix the two colors
    color = mix(colorA, colorB, pct);

    gl_FragColor = vec4(color,1.0);
}
        `;

  const base = new Phaser.Display.BaseShader("rect", frag, null, {
    u_time: { type: "1f", value: 0.9 },
  });

  shader = this.add.shader(base, 200, 200, 512, 512);
}

function update(t, dt) {
  this.shader.setUniform("u_time.value", 0.001 * t);
}
1 Like
function create() {
  const frag = `
#ifdef GL_ES
precision mediump float;
#endif

uniform float time;

vec3 colorA = vec3(0.149,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);

void main() {
    vec3 color = vec3(0.0);

    float pct = abs(sin(time));

    // Mix uses pct (a value from 0-1) to
    // mix the two colors
    color = mix(colorA, colorB, pct);

    gl_FragColor = vec4(color,1.0);
}
  `;
  const base = new Phaser.Display.BaseShader("rect", frag);
  
  this.add.shader(base, 200, 200, 512, 512);
}
1 Like