Bug with TiltShiftFilter

[florentbolo]

Hi,

The TiltShiftFilter doesn't stay at the middle when you change the height of the filtered element ( in that case, the window height )

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.5/pixi.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-filters.min.js"></script>
<script>

  var app = new PIXI.Application({
    height: window.innerHeight,
    width: window.innerWidth,
  })

  var background = PIXI.Sprite.fromImage("https://pixijs.io/examples/required/assets/bkg-grass.jpg");
  background.width = window.innerWidth;
  background.height =  window.innerHeight;
    
  var filter = new PIXI.filters.TiltShiftFilter();
  background.filters = [filter]

  app.stage.addChild(background)
  document.body.appendChild(app.view)
     
</script>

There is no bug with the alpha Version of Pixijs : 5.0.0.alpha.3 but I can't use it in production.

Thanks for your advises

[bigtimebuddy]

TiltShiftFilter could probably use some improvement with resizing. It's not super intuitive.

You need to update and set the start and end values to the TiltShiftFilter, for instance:

var filter = new PIXI.filters.TiltShiftFilter();

window.addEventListener('resize', function() {
 // Reassign the start and end values of the blur
 filter.start = new PIXI.Point(0, window.innerHeight / 2);
 filter.end = new PIXI.Point(600, window.innerHeight / 2);

 // also update the texture size
 filter.uniforms.texSize.set(window.innerWidth, window.innerHeight);
});

I can work on a pull request to improve the ergonomics of resizing.

[florentbolo]

Thanks for your answer,

Still have the same problem with the update of end and start , and

 filter.uniforms.texSize.set(window.innerWidth, window.innerHeight);

return : Uncaught TypeError: Cannot read property 'set' of undefined
It's not really about live resizing it's just that the filter behavior is very strange with differents heights
and it works well in many heights with the 5.0.0.alpha.3

[bigtimebuddy]

Here's an example how to resize:
https://jsfiddle.net/bigtimebuddy/6yk5eg1w/

Will add a resize() method to TiltShiftFilter to make this easier.