How to put a texture into a shader

Phaser 3
1

I would like to feed a texture into a shader so I can layer an effect on top of it.
But I don’t know how to do it.

Code:

// index.js
var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 450,
    scale: {
        mode: Phaser.Scale.ScaleModes.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        autoRound: true
    },
    scene: {
        preload: preload,
        create: create
    }
}
var game = new Phaser.Game(config);

function preload()
{
    this.load.glsl("lighting", "./assets/shaders/lighting.glsl");  
    this.load.image("sphere", "./assets/sphere.png");
}

function create()
{
    var shader = this.add.shader("lighting", 0, 0, 128, 128);
    shader.setSampler2D("iChannel0", "sphere");
    shader.setRenderToTexture("sphere-shader");

    this.add.image(200, 200, "sphere-shader");
}

// lighting.glsl
precision mediump float;

uniform sampler2D uMainSampler;
uniform sampler2D iChannel0;

varying vec2 outTexCoord;

void main(void) 
{
    vec4 col = texture2D(iChannel0, gl_FragCoord);

    gl_FragColor = vec4(col.rgb, 1.0);
}

But the console window just says this:

phaser.js:82823 Uncaught Error: Fragment Shader failed:
ERROR: 0:14: ‘texture2D’ : no matching overloaded function found
ERROR: 0:14: ‘=’ : dimension mismatch
ERROR: 0:14: ‘=’ : cannot convert from ‘const mediump float’ to ‘mediump 4-component vector of float’

It seems like I don’t know how to get the texture coordinates right and if I swap gl_FragCoord
for outTexCoord I get a black screen.

2

Maybe see shader test 6.

3

Okay I think I sort of get how that works but if I apply that logic to my code it still doesn’t work.

Here’s my code now:

// Create method:
function create()
{
    var shader = this.add.shader("lighting", 200, 200, 80, 80, ["sphere"]);
    shader.setChannel0("sphere");
}


// shader.glsl
precision mediump float;

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

varying vec2 fragCoord;

void main(void) 
{
    vec2 uv = fragCoord.xy / resolution.xy;
    vec4 color = texture2D(iChannel0, uv);
    gl_FragColor = vec4(color.rgb, 1.0);
}

I also think the example is broken. Like what is s?
How does the example still work when s is not even defined in the example anywhere?

Also, if I comment anything to do that variable it still works for some reason.

4

The s (it’s supposed to be shader) is only in the pointerdown handler. So the clicking part is broken but the shader is still set up correctly.

5

Why does my code still not work though? All I get is a black screen.

6

yeah it’s been a week yet it still doesn’t work.