How to blur just an area?

[Tominator]

Hello,

 

How can I blur (or apply any filter) just an specified area with PIXI? I tried this:

blurFilter = new PIXI.BlurFilter()stage.filters = [blurFilter];stage.filterArea = new PIXI.Rectangle( 0, 0, window.innerWidth, 300 );

 

But it's not working the way I way. It renders just first 100px x innerWidth. I want whole scene with blurred first 100px x innerWidth.

 

How to do that?

 

Thanks!

[Tominator]

This question is still actual. Or maybe even more interseting question. Is it possible to create a shape that will blur everything behind that shape? Or apply a mask to filter?

 

Thanks!

[xerver]

Create a DisplayObjectContiainer, position it, override that object's getBounds method to return the area you want, apply the filter to that object. That will blur everything with that container IIRC

[Tominator]

Hello,

 

thanks for reply, and sorry for my late response (I wasn't noticed about your reply). I don't understand how should it work. So what I did is (coffeescript):

@stage_to_render = new PIXI.Stage 0xFFFFFF, true@camera = @stage = new PIXI.DisplayObjectContainer()blur = new PIXI.DisplayObjectContainer()blurFilter = new PIXI.BlurFilter()blurFilter.blur = 20 blur.position = { x: 0, y: 0 }blur.getBounds = ()-> { x: 0, y: 0; height: 100, width: 1000 }blur.filters = [ blurFilter ]@stage_to_render.addChild @stage  # All the elements will have this parent@stage_to_render.addChild blur

It does nothing. I want to have a fullscreen @stage and also blur first 100px of that stage. When I added @stage as a child of blur, it showed only first 100px of the scene blurred (which I understand).

[sergkub]

I have the same problem.

[agamemnus]

This question is still actual. Or maybe even more interesting question. Is it possible to create a shape that will blur everything behind that shape? Or apply a mask to filter?

 

Thanks!

 

You would need to somehow import the mask into the filter, and then check x/y values. It might not be so fast since it would need to keep accessing that mask, not sure.

 

Another way: not sure what kind of render masks are available, but the basic idea is to use something like "destination-in" (https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html) to cut out everything but the mask with the filter, and then apply that to whatever you have already drawn.