# How to put a texture into a shader

**URL:** <https://phaser.discourse.group/t/how-to-put-a-texture-into-a-shader/12034>\
**Category:** Phaser 3\
**Created:** [July 17, 2022, 11:30pm UTC](https://phaser.discourse.group/t/how-to-put-a-texture-into-a-shader/12034 "2022-07-17T23:30:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Prolight](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prolight/32/5174_2.png) [@Prolight](https://phaser.discourse.group/u/Prolight)\
**Post date:** [July 17, 2022, 11:30pm UTC](https://phaser.discourse.group/t/how-to-put-a-texture-into-a-shader/12034/1 "2022-07-17T23:30:52Z")

</div>

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:

```javascript
// 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");
}

```

```javascript
// 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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 18, 2022, 4:41pm UTC](https://phaser.discourse.group/t/how-to-put-a-texture-into-a-shader/12034/2 "2022-07-18T16:41:02Z")

</div>

Maybe see [shader test 6](https://labs.phaser.io/edit.html?src=src/display/shaders/shader%20test%206.js).

---

<div class="post-metadata">

**Author:** ![Prolight](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prolight/32/5174_2.png) [@Prolight](https://phaser.discourse.group/u/Prolight)\
**Post date:** [July 18, 2022, 9:03pm UTC](https://phaser.discourse.group/t/how-to-put-a-texture-into-a-shader/12034/3 "2022-07-18T21:03:22Z")

</div>

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:

```javascript
// 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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 19, 2022, 12:47am UTC](https://phaser.discourse.group/t/how-to-put-a-texture-into-a-shader/12034/4 "2022-07-19T00:47:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Prolight](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prolight/32/5174_2.png) [@Prolight](https://phaser.discourse.group/u/Prolight)\
**Post date:** [July 19, 2022, 6:25pm UTC](https://phaser.discourse.group/t/how-to-put-a-texture-into-a-shader/12034/5 "2022-07-19T18:25:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Prolight](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prolight/32/5174_2.png) [@Prolight](https://phaser.discourse.group/u/Prolight)\
**Post date:** [July 27, 2022, 3:22am UTC](https://phaser.discourse.group/t/how-to-put-a-texture-into-a-shader/12034/6 "2022-07-27T03:22:43Z")

</div>

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