Filter Feedback / Apply Filter Multiple Times?

[m88]

I think I have seen this question asked before, but I have not been able to implement a working solution in pixi.js v4.5.0.  I am new to this, so bear with me....

I have a custom GLSL filter (the Game of Life, for now)-- I want to continually apply the filter to the sprite in a feedback loop.  That is:

1. Apply filter to sprite image
2. Capture the result
3. Set sprite image to result
4. Apply filter to sprite image
5. Loop

I have attempted this with PIXI.Texture.fromCanvas(app.view) -> texture.update(), but that resulted in a black screen.  I think using RenderTexture buffers with app.renderer.render may be on the right track, but I'm not sure how I should be applying them.  I attempted to set my sprite.texture to a RenderTexture and it resulted in an error... I've also had various "Feedback loop detected" warnings in the console when I attempted to pass render textures as filter uniforms and read from those.

Is there a way to set the sprite texture to the filtered sprite?

[Taz]

Here's a demo that shows a way to do this for Pixi 4.5.0. Just click or tap the bunny to start applying the filter once per frame. This custom GLSL filter just reduces the brightness by 2%, so you can see the bunny become dimmer and dimmer as the filter is applied over and over. The demo uses two sprites and two render textures, one for filtering and one for displaying, and swaps the render textures before each render.

 

[marteiro]

Can you guys point me to a working example of this? Or a solution on how to capture the filter result and feedback?

Thanks

[ivan.popelyshev]

There's a demo for v5 too  

https://www.pixiplayground.com/#/edit/Ngi8fYSPwGGZYnfGIHb9O

It was mentioned here: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#re-use-previous-frame-of-filtered-object

for v6 you have to update the code a bit because filterSystem most probably was changed

[marteiro]

Thanks @ivan.popelyshev, that was very helpful. 

Edited May 5, 2021 by marteiro