Multiple Camera + Custom Shaders

Phaser 3
1

Hi, I want to use a second camera for “special effects”, but ran into weird issues. If this 2nd camera with a custom shader renders an object with yet another custom shader, the object is rendered upside-down and mirrored. I simplified the test below and also attached the screenshot.

First text is rendered by main camera only. Second text is rendered by the second camera but using default TextureTintPipeline. The last text is rendered by the second camera using custom shader and this one is upside-down and mirrored.

import Phaser from "phaser";

require("./test.html");

var Shader1 = `
#define SHADER_NAME Shader1
precision mediump float;
uniform sampler2D uMainSampler;
varying vec2 outTexCoord;
varying float outTintEffect;
varying vec4 outTint;
void main(){
    vec4 color = texture2D(uMainSampler, outTexCoord);
    float c = color.r*0.3 + color.g*0.4 + color.b*0.3;
    gl_FragColor = vec4(c,c,c,color.a);
}
`;

var Shader2 = `
#define SHADER_NAME Shader1
precision mediump float;
uniform sampler2D uMainSampler;
varying vec2 outTexCoord;
varying float outTintEffect;
varying vec4 outTint;
void main(){
    vec4 color = texture2D(uMainSampler, outTexCoord);
    color.r = 1.0;
    gl_FragColor = color;
}
`;

class Test {
constructor(){
    this.$canvas = $("canvas");
    this.canvas = this.$canvas.get(0);
    this.scene;
    var self = this;
    new Phaser.Game({
        type:Phaser.WEBGL,
        width:200,height:200,
        canvas:this.canvas,
        scene:{
            preload:function(){self.preload(this)},
            create:this.create.bind(this)
        }
    });
    window.g = this;
}
preload(scene){
    this.scene = scene;
    this.gray = new Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline({
        game:this.scene.game,
        renderer:this.scene.game.renderer,
        fragShader:Shader1
    });
    this.scene.game.renderer.addPipeline("gray", this.gray);

    this.red = new Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline({
        game:this.scene.game,
        renderer:this.scene.game.renderer,
        fragShader:Shader2
    });
    this.scene.game.renderer.addPipeline("red", this.red);
}
create(){
    this.text1 = this.scene.add.text(0,0,"Main camera",{color:"blue",fontSize:16});
    this.text1.setOrigin(0,0);

    this.text2 = this.scene.add.text(0,30,"Gray camera",{color:"blue",fontSize:16});
    this.text2.setOrigin(0,0);

    this.text3 = this.scene.add.text(0,60,"Red + Gray camera",{color:"blue",fontSize:16});
    this.text3.setOrigin(0,0).setPipeline("red");

    this.grayCam = this.scene.cameras.add(0, 0, 200, 200);
    this.grayCam.setRenderToTexture(this.gray);
    this.grayCam.ignore(this.text1);
    this.scene.cameras.main.ignore([this.text2,this.text3]);
}
}

$(document).ready(function(){
    new Test();
});

test.js (2.3 KB)
54%20PM