Shader configuration

[rcoaxil]

I have very specific visual effect in mind, and it requires sequential rendering in specific order.

The idea is to use a layer (a group) image as a secondary texture for a shader. Effect graphics is rendered to the layer, a filter is applied; this layer should NOT be visible. Then main graphics is rendered, and previously rendered buffer is used as a secondary texture in the shader.

In many other frameworks this would be fairly straightforward to do (e.g. GameMaker or Unity), or even in bare Javascript and WebGL, but with Phaser I don't see any obvious way to do it.

[rcoaxil]

I think I figured it out on my own.

1) create a PIXI.RenderTexture of appropriate dimensions

2) set up a "secondary" rendering hierarchy - the objects that would be drawn to the render texture; make sure none of it actually ends up on "game.stage" or "game.world"

3) wrap it into another PIXI.DisplayObjectContainer (or Phaser.Group, or anything of the sort really) because first level object's transformation is ignored

4) in processing shader source, add extra uniform "uniform sampler2D uSecondaryTexture;" and sampling from this uniform as necessary - it contains your secondary graphics

5) create custom uniforms object (proper format can be found in source for PIXI.AbstractShader) containing key-value pair "uSecondaryTexture: { type: 'sampler2D', value: rendertexture }"

6) create a filter using source and uniforms object, apply it to "game.world"

7) in preRender, call "rendertexture.render ( displayobjectcontainer )", this will draw everything into this texture, and specifically before final rendering takes place (clearing the texture may be necessary); you may need to undo the camera transformations

 

Using similar method, you may take on fully manual rendering to different render textures as necessary. Additionally, you can display rendertexture using blank Phaser.Image created with rendertexture passed as 4th argument (key).