Multiple render passes - possible?

[wayfinder]

Hi! 

 

Is there a way to do multiple render passes in Phaser?

 

 

[Tom Atom]

Hi, yes it is possible.

 

You can render into BitmapData or into RenderTexture. Then you can use this texture as frame for sprite (even full screen quad) and render this sprite to another texture. You can do this as many times as you wish.

 

But watch for performance! I had big troubles to find problems with my game (see http://www.html5gamedevs.com/topic/14778-slow-rendering-into-rendertexture/). Solution was simple: create top level container for all objects you want to render and then do it with single call.

 

 Also look at filters if you want to make things like blur or any other WebGL things (http://phaser.io/examples/v2/category/filters)

[wayfinder]

So if I wanted to create a number of frame buffers from the whole scene, I'd renderXY game.world onto my renderTextures? And when do I do that? in state.preRender? 

[Tom Atom]

Look at this answer: http://www.html5gamedevs.com/topic/11303-understanding-rendertexture-to-create-a-mirror-effect/ and this example: http://phaser.io/examples/v2/display/pixi-render-texture

 

If you have some scene you want to process multiple times, I would not create it under world or stage, as it would get automatically rendered onto screen. I would create some top container (group) by myself and in update() (as in examples), I would render it into renderTexture. So, now all scene is in renderTexture (let"s call it rt1) and it is not visible on scree, as it is not included in world.

 If you want it to show on screen, then you must have sprite, that has rt1 as texture and is in world hierarchy.

 Now, if you want to make more passes, do not add this sprite to world, but render it into another renderTexture (rt2) and do this in loop any number of times:

 

in update():

 1) render some hierarchy into rt1,

 2) have some sprite1 (not in world) wiht rt1 as texture,

 3) render sprite1 into rt2,

 4) have some sprite2 (not in world) with rt2 as texture,

 5) render sprite2 into rt3,

 6) have some sprite3 (added to world) with rt3 as texture ---> as added to world it should render during render() method on screen.

 

 Hope, this helps...

[wayfinder]

It helps a lot actually, thanks

 

I may need to create my stuff in world because I will need interactivity, but perhaps xerver's technique from pixi-lights (ie extend Sprite so that it's aware of which render pass is going on and changes its visibility/ rendering behaviour accordingly) will work.

 

One thing I'm a little worried about is performance. I did some tests on the Phaser example you linked, and while my GPU has considerable power, it started dropping frames shortly after the 1000 sprite mark in this particular case, even earlier with two extra renderTextures/render passes (so it may not be right for bullet hell games where there may be thousands of objects) or substantially larger sprites. That is one of those cases though where autoCull might be a good strategy depending on size and distribution of display objects (at least that's what my tests indicate).

[drhayes]

Out of curiosity, what are the multiple render passes for? Whatcha doing?

[wayfinder]

I'm trying to draw a diffuse layer, then on top of that a rim light layer, illuminated by a lights layer. each layer is a rendertexture into which i draw a group that contains all my scenery and my lights (the lights are currently sprites with round glow textures).

 

In pictures:

 

diffuse layer: (normal blending)

 

rimlight layer:

 

lights layer: (multiplied onto rim light layer)

 

lights layer multiplied on rimlight layer:

 

 

that result drawn with blendmode SCREEN over the diffuse: 

 

 

I've added the rimlight texture as a separate texture to my (extended) sprite and put in some logic to swap out the texture when the rim light pass is being drawn and some other stuff depending on the current render pass..For the final scene render, only the composited rendertexture layers remain visible, and not the individual sprites. 

 

 

My problem however:

 

The texture swapping seems not to work when I do it before a renderXY operation on a renderTexture. the flag that tells the sprite how to behave works when I set it before the scene render, and I get the correct rim lights result there - but when i render the stuff into a renderTexture it ends up just black. :( other stuff like changing tint or alpha depending on the render pass is not a problem, it's just that damn texture. 

 

anybody know what's going on?

 

 

[wayfinder]

ha-HA!! Got it to work now.. I was stupidly clearing the render target before multiplying the light on it.