Bring PIXI.filters.GlowFilter only on other pixi-layer

[Ifnot]

Hello !

First of all, thanks you all for pixi.js and community for tutoriels. I am begining with pixijs but lurking on internet bring me all the solutions until now

On my isometric game i want to glow my players when they are below elements for showing only a outline when they are hidden.

I am acheving this with an ugly solution : two similar sprites, one for the player, the second the glow-only effect (with knockout option) on a different layer (pixi-layers).

The problem is, even if duplicating one sprite is not dramatic, duplicating a whole container is more problematic. My player is now composed of several animated sprites etc ...

I understood that i can "copy" the generated texture of the container, bring it to another sprite that can be glowed only on a different layer, but how ? ?

I tried some render texture stuff with this example (https://pixijs.io/examples/#/textures/render-texture-basic.js) but my GPU crashed after 30 seconds ... (filling memory ?)

Thanks

/* import stuff, init pixi as app, etc ... */

let container = new PIXI.Container()
let sprite1 = new PIXI.Sprite(/* png source */)
let sprite2 = new PIXI.Sprite(/* png source */)
let animation1 = new PIXI.AnimatedSprite(/* png source */)
container.addChild(sprite1)
container.addChild(sprite2)
container.addChild(animation1)
app.stage.addChild(container)

// TODO: Copy existing container to "glowing"
glowing.filters = [new GlowFilter({knockout: true})]
glowing.parentLayer = /* my top layer */
app.stage.addChild(glowing);

Ticker.add(() => {
    // TODO: And refresh glowing content using base texture without filling graphic card ?
});

 

[ivan.popelyshev]

Hello and Welcome to the forums!

That's an interesting first post!

yes, layers + filters is very advanced topic and I hope you understand that we cannot give you full solution to this because its just .. no one actually did it.

Every new case helped me to make layers better, but I think at this point to make that knockout thing I need more information for you.

I really need better explanation and minimal demo, otherwise i'll just spend a few hours on something just for it to be not something that you need  People want me to port pixi-picture to v5 for two weeks already, there are many other issues, and my pixi brain time is really limited at the moment. Please give me as much as you can.

at the moment pixi-layers automatic manipulation with renderTextures is limited to whole screen, so you have to decide: whether we make that effect for several characters at the same time or only for one. 

Several things might or not be part of solution:

0. getRenderTexture() feature of the plugin, with correct order of layers (if layer1<layer2 and you use layer2 texture in layer1 somewhere, it will be front previous frame)

1. duplicating. sometimes its just not possible without it

2. stripping glowfilter down and using its shader on existing renderTextures intead of using extra temp renderTexture like FilterSystem does

3. changing glowfilter to one of lesser quality versions because pixi-filters one is slow

Anyway, I dont think its possible without a demo we can work on together.

Edited April 25, 2020 by ivan.popelyshev

[Ifnot]

Hi

I already saw your investment in the community during my searches and you have to know that is something rare and many of us really appreciate it, really thank you to take this time to help us.

My project is big and cannot be pasted as-is. I have to make a simple demo example for this (and it will be easier for newbs lurking here for solving this problem).

I keep you updated when this is done !

EDIT: I will keep the "duplicating" solution. Maybe this is not as bad for the moment ...

Edited April 26, 2020 by Ifnot