Shader GLSL files - whats the header block?

Phaser 3
1

So I’m trying to work the the Shader object, passing in various uniform values.
Using some basic glsl types: floats, vec2, vec3, vec4, and sampler2D.

But using the shader.setUniform isnt working.

After looking at the examples, I can see the Phaser GLSL files have an extra header section at the top, defined between the dashes. This includes some easy stuff, like name, type, author. All good there.
But then we get into the uniform section. It seems that Phaser needs the uniforms defined here in the header otherwise the setUniform method wont work.

What is the syntax for this header, is it documented somewhere?
How do I define a vec2?

For example, the “Tunnel” shader from the examples, the first 7 lines.

---
name: Tunnel
type: fragment
uniform.alpha: { "type": "1f", "value": 1.0 }
uniform.origin: { "type": "1f", "value": 2.0 }
uniform.iChannel0: { "type": "sampler2D", "value": null, "textureData": { "repeat": true } }
---

precision mediump float;

uniform float time;
uniform vec2 resolution;
uniform sampler2D iChannel0;
uniform float alpha;
uniform float origin;

varying vec2 fragCoord;

#define S 0.79577471545 // Precalculated 2.5 / PI
#define E 0.0001

void main(void) {
    vec2 p = (origin * fragCoord.xy / resolution.xy - 1.0) * vec2(resolution.x / resolution.y, 1.0);
    vec2 t = vec2(S * atan(p.x, p.y), 1.0 / max(length(p), E));
    vec3 c = texture2D(iChannel0, t + vec2(time * 0.1, time)).xyz;
    gl_FragColor = vec4(c / (t.y + 0.5), alpha);
}
2

afterwards you can update vec2 uniform so:

      this.shader
        .setUniform("testUniform.value.x", x)
        .setUniform("testUniform.value.y", y);
3

you can see the format Phaser is expecting uniforms to be defined here

For using vec2 uniform add this to header

uniform.testUniform: { "type": "2f", "value": {"x":0,"y":0} }
1 Like