WebGL - Resolution problems. How to add shader for entire scene?

Phaser 3
1

My shader works fine on one sprite. For example:

  this.background.setPipeline("outline");

…this works. But when I do

  this.cameras.main.setPipeline('outline');

…nothing happens. Why?

Also, for some reason when I set the pipeline for my this.background (a sprite), it shrinks my sprite. I pass in the resolution of my scene to my shader

this.filter.setFloat2(‘uResolution’, this.width, this.height);

And this is my shader code where I use uResolution

vec2 st = gl_FragCoord.xy/uResolution.xy;

I also tried:

vec2 st = vec2(uResolution.x, uResolution.y);

The WebGL seems to be doing really weird things with the resolution and/or aspect ratio.

2

I figured out the resolution problem, but would still like to know how to position my fragment shader better

  this.shadey = new Custom_Shader(this.game);
  this.filter = this.game.renderer.addPipeline('outline', this.shadey);
  this.filter.setFloat2('uResolution', 500, 500);
   this.filter.resize(this.width, this.height, 1);

I still need to know how to apply shader to the entire scene

3

When a shader is applied to a camera, the entire scene is rendered normally, then passed to the shader as a flat image. Depending on what your shader does, it may not be visible when applied to a camera.

If you want objects to be separately processed by the shader, you have to individually enable the pipeline on each one. A quick way to do this is to just iterate the display list (this.children in a scene).

4

Do you have an example of a working shader on a camera?

I don’t get why mine isn’t working, it works fine on my large background image but does nothing on camera.

5

This one comes to mind: Phaser 3 Examples

6

Thanks, looks like I need to call this before I call setPipeline

cam.setRenderToTexture(customPipeline1);

7

Right, that’s my mistake, I didn’t notice you weren’t calling setRenderToTexture. Anyhow, glad I could help.

1 Like