Layering a Masked Blur

[Mike Montoya]

Hello,

I am new to PIXI and as a former Flash developer, I am greatly enjoying learning it, as the concepts are quite similar! ?

I recently came up against a stumbling block, which I hope a kind soul here may help me resolve:

I'm trying to reproduce what one sees when looking through a camera's viewfinder.

In order to achieve this, I am attempting to blur only a circular portion at the center of the stage. While this works as expected when I add a single blurred container and its corresponding mask, as children of the stage, the moment I add a "crisp" (non-blurred) version of the same container, I don't get what I would expect: i.e. the blurred circular portion overlaid over the non-blurred container. Instead, the masked, blurred version gets overriden and I only see the crisp version.

Building off a CodePen generously provided by OSUblake from the GreenSock forums, I put together this CodePen to illustrate the problem:

https://codepen.io/montoyland/pen/zYvWLzv

(Uncomment the line in question, noted in the comments, to see what I mean).

What would be the proper way to achieve what I am trying to do? I have seen from examples that other filters (such as the DisplacementFilter) can be constrained to a discreet area on the canvas, so I assume the same can be done with the BlurFilter while still coexisting with other containers on the stage. What I am missing?

Thank you so much for your help!

Cheers!

Mike

  

[ivan.popelyshev]

Its not possible to add the same element to two places,  I tried once to make an stage tree that allows it but it got really messy, that's why no one allows that.

The whole effect has to be made with following algorithm:

1. draw everything in renderTexture

2. apply blurFilter, render into another renderTexture

3. draw renderTexture, draw another renderTexture with a mask.

If you have a problem with using renderTextures, then you have to wait when I port this plugin to v5: https://github.com/pixijs/pixi-picture/ 

Here's how it worked in v4: https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js

You are not the only one who can wait for it: https://github.com/pixijs/pixi-picture/issues/12 Seems that people cant do it on their own even with all my hints.

Basically, it adds extra input for filter that is copied from the background, and I will make a special filter that can take any effect (blur, displacement) and apply it masked by something.

Without copying data somewhere (number 2 in first case, copySubTexture in pixi-picture), its not possible to make the desirable effect.

SUMMARY:

Choice

1. do on your own with renderTextures

2. wait for me, 2 days or 1 week probably

 

Edited May 8, 2020 by ivan.popelyshev

[ivan.popelyshev]

oh, and Welcome to the forums!

Edited May 8, 2020 by ivan.popelyshev

[Mike Montoya]

Thanks you so much, Ivan!
This is extremely helpful!
Thank you for all your hard work, so that the rest of us can make cool stuff! 

I greatly look forward to all your improvements and enhancements - it is much appreciated! ?

 

Edited May 8, 2020 by Mike Montoya