Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug with TiltShiftFilter #184

Open
florentbolo opened this issue Jan 8, 2019 · 3 comments
Open

Bug with TiltShiftFilter #184

florentbolo opened this issue Jan 8, 2019 · 3 comments

Comments

@florentbolo
Copy link

florentbolo commented Jan 8, 2019

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
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants