make GodrayFilter work with DropShadowFilter? #297

Activity

1. bigtimebuddy commented on May 6, 2021

   

   bigtimebuddy

   on May 6, 2021

   Member

   More actions

   Could you provide an example?
2. andrewljohnson commented on May 7, 2021

   

   andrewljohnson

   on May 7, 2021

   Last edited by andrewljohnson

   Author

   More actions

   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;
   }
   
3. bigtimebuddy commented on May 7, 2021

   

   bigtimebuddy

   on May 7, 2021

   Member

   More actions

   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);
   	}
4. bigtimebuddy

   added

   bug

   on Aug 18, 2024