Skip to content

Pre fx pipeline


Pre fx pipelines for texture-base game objects. A texture-base game object has a pre-fx effect.

  • Author: Richard Davey

WebGL only

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


Post fx pipeline class

class MyPreFxClass extends Phaser.Renderer.WebGL.Pipelines.PreFXPipeline {
    constructor(game) {
            game: game,
            fragShader: '...',  // GLSL shader

    onDraw(renderTarget) {
        var sprite = this.tempSprite;
        this.set1f('intensity', sprite._intensity);


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


Add pre-fx pipeline instance

var pipelineManager = scene.sys.renderer.pipelines;
var pipelineInstance = pipelineManager.add(PreFxName, new MyPreFxClass(;

Apply effect


Will replace current effect instance.

Get pre-fx pipeline

var pipelineInstance = gameObject.pipeline;

Reset to default effect


Unregister pre-fx pipeline

var pipelineManager = scene.sys.renderer.pipelines;