Color channel pipeline

Phaser 3
1

Hey there,
How could I show sprites in specific color channels? I am using this example of grayscale pipeline and works fine but I need more color channels like red, green, yellow, and blue.

class GrayscalePipeline extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {
    constructor(game) {
        super({
            game,
            renderer: game.renderer,
            fragShader: `
            precision mediump float;
            uniform sampler2D uMainSampler;
            varying vec2 outTexCoord;
            void main(void) {
            vec4 color = texture2D(uMainSampler, outTexCoord);
            float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
            gl_FragColor = vec4(vec3(gray), 1.0);
            }`
        })

fourGeom1
fourGeom1750×750 112 KB

fourGeom1
fourGeom1750×750 132 KB

fourGeom1
fourGeom1750×750 135 KB

2

I don’t get exactly what you’re describing, but if you want to show the sprite in a shade of a given color instead of a shade of gray, you’d only have to change the last line in the shader. Colors have four components - red, green, blue, and alpha (stored in that order). vec4(vec3(gray), 1.0) creates a color in which the red, green, and blue channels are the luminance of the pixel in a given part of the texture, while the alpha is just 1. vec4(gray, 0.0, 0.0, 1.0) would use the luminance only for the red channel and leave the others at 0, making the sprite red. vec4(vec2(gray), 0.0, 1.0) creates yellow (equal parts red and green creates a shade of yellow), while vec4(gray, 0.0, gray, 1.0) would create magenta. You can do the same for any combination, or even multiply gray by a constant to make one channel stronger than another.

1 Like