Skip to content

Post fx pipeline

Introduction

Post fx pipelines for game objects or camera.

  • Author: Richard Davey

Usage

Post fx pipeline class

class MyPostFxClass extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
    constructor(game) {
        super({
            game: game,
            renderTarget: true,
            fragShader: '...',  // GLSL shader
            uniforms: []
        });
    }

    onPreRender() {
        this.set1f('intensity', this._intensity);
    }

    onDraw(renderTarget) {
    }
}

Set uniform values

  • Property with 1 value
    • Float
      pipelineInstance.set1f(name, value0);
      // pipelineInstance.set1f(name, value0, shader);
      
    • uniform1fv
      pipelineInstance.set1fv(name, value0);
      // pipelineInstance.set1fv(name, value0, shader);
      
    • Int
      pipelineInstance.set1i(name, value0);
      // pipelineInstance.set1i(name, value0, shader);
      
  • Property with 2 values
    • Float
      pipelineInstance.set2f(name, value0, value1);
      // pipelineInstance.set2f(name, value0, value1, shader);
      
    • uniform2fv
      pipelineInstance.set2fv(name, value0, value1);
      // pipelineInstance.set2fv(name, value0, value1, shader);
      
    • Int
      pipelineInstance.set2i(name, value0, value1);
      // pipelineInstance.set2i(name, value0, value1, shader);
      
  • Property with 3 value
    • Float
      pipelineInstance.set3f(name, value0, value1, value2);
      // pipelineInstance.set3f(name, value0, value1, value2, shader);
      
    • uniform3fv
      pipelineInstance.set3fv(name, value0, value1, value2);
      // pipelineInstance.set3fv(name, value0, value1, value2, shader);
      
    • Int
      pipelineInstance.set3i(name, value0, value1, value2);
      // pipelineInstance.set3i(name, value0, value1, value2, shader);
      
  • Property with 4 values
    • Float
      pipelineInstance.set4f(name, value0, value1, value2, value3);
      // pipelineInstance.set4f(name, value0, value1, value2, value3, shader);
      
    • uniform4fv
      pipelineInstance.set4fv(name, value0, value1, value2, value3);
      // pipelineInstance.set4fv(name, value0, value1, value2, value3, shader);
      
    • Int
      pipelineInstance.set4i(name, value0, value1, value2, value3);
      // pipelineInstance.set4i(name, value0, value1, value2, value3, shader);
      

onPreRender

onDraw

  • Ping-pong drawing
    • Variables :
      • renderTarget : Render target, parameter of onDraw method.
      • pipelineInstance.fullFrame1, pipelineInstance.fullFrame2 : Ping-pong render texture.
    • Steps
      1. Copy frame to pipelineInstance.fullFrame1
        pipelineInstance.copyFrame(source, target);
        // pipelineInstance.copyFrame(source, target, brightness, clear, clearAlpha);
        
      2. Set uniform values
      3. Bind and draw on pipelineInstance.fullFrame1, pipelineInstance.fullFrame2.
        pipelineInstance.bindAndDraw(source, target);
        // pipelineInstance.bindAndDraw(source, target, clear, clearAlpha, shader);
        
      4. Draw result back
        pipelineInstance.bindAndDraw(source);
        

Register post-fx pipeline

  • Register post-fx pipeline in game config
    import MyPostFxClass from 'path';
    var config = {
        // ...
        pipeline: [MyPostFxClass]
        // ...
    };
    var game = new Phaser.Game(config);
    

Apply effect

  • Apply effect to game object
    gameObject.setPostPipeline(MyPostFxClass);
    
  • Apply effect to camera
    camera.setPostPipeline(MyPostFxClass);
    

Get post-fx pipeline

  • Get post-fx pipeline from game ovject
    var pipelineInstance = gameObject.getPostPipeline(MyPostFxClass);
    
  • Get post-fx pipeline from camera
    var pipelineInstance = camera.getPostPipeline(MyPostFxClass);
    

Remove post-fx pipeline

gameObject.removePostPipeline(MyPostFxClass);

Color matrix

Use color martix to change RGB render result, and more...

class MyPostFxClass extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
    constructor(game) {
        super({
            game: game,
            renderTarget: true,
            fragShader: '...',  // GLSL shader
            uniforms: []
        });
    }

    onPreRender() {
        // this.set1f('intensity', this._intensity);
        this.colorMatrix.grayscale(this._intensity);
    }

    onDraw(renderTarget) {
        this.colorMatrix.grayscale(this._intensity);
        this.drawFrame(renderTarget, this.fullFrame1);
        this.bindAndDraw(this.fullFrame1);
    }
}

Color adjusting

Invoke before drawFrame().

  • Grayscale
    this.colorMatrix.grayscale(value);
    // this.colorMatrix.grayscale(value, true); // Cascade
    
    • value : 0 ~ 1
  • Night vision tone
    this.colorMatrix.night(value);
    // this.colorMatrix.night(value, true); // Cascade
    
    • value : 0 ~ 1
  • Sepia tone
    this.colorMatrix.sepia();
    // this.colorMatrix.sepia(true); // Cascade
    
  • Trippy color tone
    this.colorMatrix.lsd();
    // this.colorMatrix.lsd(true); // Cascade
    
  • Brown tone
    this.colorMatrix.brown();
    // this.colorMatrix.brown(true); // Cascade
    
  • Vintage pinhole color effect
    this.colorMatrix.vintagePinhole();
    // this.colorMatrix.vintagePinhole(true); // Cascade
    
  • Kodachrome color effect
    this.colorMatrix.kodachrome();
    // this.colorMatrix.kodachrome(true); // Cascade
    
  • Technicolor color effect
    this.colorMatrix.technicolor();
    // this.colorMatrix.technicolor(true); // Cascade
    
  • Polaroid color effect
    this.colorMatrix.polaroid();
    // this.colorMatrix.polaroid(true); // Cascade
    
  • Brightness
    this.colorMatrix.brightness(value);
    // this.colorMatrix.brightness(value, true); // Cascade
    
    • value : 0(black) ~ 1
  • Saturation
    this.colorMatrix.saturate(value);
    // this.colorMatrix.saturate(value, true); // Cascade
    
    • value : -1 ~ 1
  • Desaturate
    this.colorMatrix.desaturate();
    // this.colorMatrix.desaturate(true); // Cascade
    
  • Hue
    this.colorMatrix.hue(rotation);
    // this.colorMatrix.hue(rotation, true); // Cascade
    
    • rotation : Hue rotation, in degree.
  • Black and white
    this.colorMatrix.blackWhite();
    // this.colorMatrix.blackWhite(true); // Cascade
    
  • Negative
    this.colorMatrix.negative();
    // this.colorMatrix.negative(true); // Cascade
    
  • Contrast
    this.colorMatrix.contrast(value);
    // this.colorMatrix.contrast(value, true); // Cascade
    
  • Desaturate luminance
    this.colorMatrix.desaturateLuminance();
    // this.colorMatrix.desaturateLuminance(true); // Cascade
    
  • Shifts RGB to BGR order
    this.colorMatrix.shiftToBGR();
    // this.colorMatrix.shiftToBGR(true); // Cascade
    

Draw

Invoke under onDraw(renderTarget).

this.drawFrame(renderTarget, this.fullFrame1);
this.bindAndDraw(this.fullFrame1);