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

shadow-vs-godray-vs-together.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?

filters/filters/drop-shadow/src/DropShadowFilter.ts

Lines 106 to 119 in d6af690

	apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void
	{
	const target = filterManager.getFilterTexture();
	this._tintFilter.apply(filterManager, input, target, 1);
	this._blurFilter.apply(filterManager, target, output, clear);
	if (this.shadowOnly !== true)
	{
	filterManager.applyFilter(this, input, output, 0);
	}
	filterManager.returnFilterTexture(target);
	}

filters/filters/godray/src/GodrayFilter.ts

Lines 102 to 117 in d6af690

	apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void
	{
	const { width, height } = input.filterFrame as Rectangle;
	this.uniforms.light = this.parallel ? this._angleLight : this.center;
	this.uniforms.parallel = this.parallel;
	this.uniforms.dimensions[0] = width;
	this.uniforms.dimensions[1] = height;
	this.uniforms.aspect = height / width;
	this.uniforms.time = this.time;
	this.uniforms.alpha = this.alpha;
	// draw the filter...
	filterManager.applyFilter(this, input, output, clear);
	}