RenderTexture update with custom pipeline

Phaser 3
1

Im creating a renderTexture from complex game objects and then applying a custom render pipeline to that texture to apply a blur effect. This all works fine. The problem comes when I clear and redraw my renderTexture in the update loop as the state of my game objects change - it causes the displayed renderTexture to be upside down, mirrored and smaller in size.

I have created a codepen to show the behavior. Have a look here

Is this a possible bug? Or maybe Im doing something wrong? Any ideas?

PS- Really digging Phaser 3!!
Thanks!!

2

Hi @hardylr,
In your create function this “solution” seems to work:

    bubble.setPipeline('Custom');
    dude.setPipeline('Custom');
    rt.setPipeline('Custom');

It works but I really don’t know why. :thinking:
Regards.

3

Hi @jjcapellan,

well, it sort of works. The shader has a weird effect on the renderTexture when you set the pipeline of the dude and bubble image also to ‘Custom’. The images in the example are a bit small for you to see the weird effect properly. Its like the shader gets applied twice.

Im also not sure how this is working. :face_with_monocle:

Thanks for your reply

4

I have updated my codepen example to better illustrate the problem.

  • The first is just normal images added to the scene.

  • The second is a renderTexture of the images added to the scene without any custom pipeline.

  • The third is another renderTexture of the images added to the scene with a custom pipeline that gets redrawn on update. The renderTexture is upside down and much smaller in size.

  • The forth is another renderTexture of the images added to the scene with a custom pipeline that does not get redrawn on update.

image

5

Hi again @hardylr,
A possible workaround is apply the custom pipeline over a camera with the method setRenderToTexture:

    // In create function
    var cam = this.cameras.add(0,0,800,600);
    cam.setRenderToTexture('Custom');
  
    bubble = this.add.image(20, 230, 'bubble').setScale(2,2).setOrigin(0,0);
    dude = this.add.image(55, 250, 'dude').setScale(2,2).setOrigin(0,0);
    cam.ignore([bubble,dude]);
  
    rt = this.add.renderTexture(200, 200, 200, 200); 
    rt.draw(bubble, 32, 32);
    rt.draw(dude, 68, 48);
    this.cameras.main.ignore(rt);

Surely not the best solution, but it works … :grinning:
Regards.

6

Thank you @jjcapellan, I ended up using your solution. :smile:

7

I managed to find a solution to updating and redrawing a renderTexture that is rendered through a custom pipeline. I dont know if this is optimal or not, but it seems to be working.

function update (){
  rt.resetPipeline()
  rt.clear();
  rt.draw(bubble, 32, 32);
  rt.draw(dude, 68, 48);
  rt.setPipeline('Custom');
}