Jump to content

Layering a Masked Blur

Mike Montoya

Recommended Posts


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:


(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!




Link to comment
Share on other sites

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.



1. do on your own with renderTextures

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


Edited by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...