Post fx pipeline

Introduction

Post fx pipelines for game objects or camera.

• Author: Richard Davey

WebGL only

All kinds of post fx pipelines only work in WebGL render mode.

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

• Set uniform values in onPreRender method.

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);
  

• Or register post-fx pipeline at runtime

  var pipelineManager = scene.sys.renderer.pipelines;
  pipelineManager.addPostPipeline(PostFxName, MyPostFxClass);
  

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);

Unregister post-fx pipeline

var pipelineManager = scene.sys.renderer.pipelines;
pipelineManager.remove(PostFxName);

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);