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);
}
}
Set uniform values in onPreRender
method.
- Property with 1 value
- Float
this.set1f(name, value0);
- uniform1fv
this.set1fv(name, value0);
- Int
this.set1i(name, value0);
- Float
- Property with 2 values
- Float
this.set2f(name, value0, value1);
- uniform2fv
this.set2fv(name, value0, value1);
- Int
this.set2i(name, value0, value1);
- Float
- Property with 3 value
- Float
this.set3f(name, value0, value1, value2);
- uniform3fv
this.set3fv(name, value0, value1, value2);
- Int
this.set3i(name, value0, value1, value2);
- Float
- Property with 4 values
- Float
this.set4f(name, value0, value1, value2, value3);
- uniform4fv
this.set4fv(name, value0, value1, value2, value3);
- Int
this.set4i(name, value0, value1, value2, value3);
- Float
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);
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);