make GodrayFilter work with DropShadowFilter?

[andrewljohnson]

Is it possible to have a GodrayFilter work with DropShadowFilter?

When I add them both to a sprite, the DropShadowFilter seems to reveal the black image used to create the GodRay effect.

[bigtimebuddy]

Could you provide an example?

[andrewljohnson]

Thanks for following up. Here's code and video showing:

• sprite with drop shadow
• sprite with godray
• sprite with both

https://user-images.githubusercontent.com/455551/117481812-59775200-af18-11eb-9e47-0bad1d734538.mov

Maybe I'm handling dragdrop wrong? Here's the code:

var godray = new PIXI.filters.GodrayFilter();
var incrementGodrayTime = () => {
    godray.time += gameUX.app.ticker.elapsedMS / 1000;
}

function onDragStart(event, card, gameUX) {
    gameUX.app.ticker.add(incrementGodrayTime)
    card.data = event.data;
    card.dragging = true;
    card.filters = [
        godray,   // using both filters together creates the black border
        new PIXI.filters.DropShadowFilter({ distance: 15, outerStrength: 2 }),
    ];

    gameUX.app.stage.addChild(gameUX.inPlay);
    gameUX.app.stage.toLocal(gameUX.inPlay.position, gameUX.inPlayAndMenuRow, gameUX.inPlay.position);
    gameUX.app.stage.addChild(card);
    gameUX.app.stage.toLocal(card.position, card.parent, card.newPosition);
    var newPosition = card.data.getLocalPosition(card.parent);
    card.position.x = newPosition.x;
    card.position.y = newPosition.y;
}

[bigtimebuddy]

I'd assume this is a problem with clear, right @SukantPal?

https://github.com/pixijs/filters/blob/d6af69009847db0f4f0031b19ae023be5bad1c12/filters/drop-shadow/src/DropShadowFilter.ts#L106-L119

https://github.com/pixijs/filters/blob/d6af69009847db0f4f0031b19ae023be5bad1c12/filters/godray/src/GodrayFilter.ts#L102-L117