Sign in to follow this  
merachefet

BlurFilter at edge of view

Recommended Posts

When I apply a blur filter, the blurred image doesn't quite seem to clamp to the edge of the view. You can see the background color on the right edge here. I've tested this with the latest v4 dev, and the rc3, with Chrome and Firefox on Win7, and with Android Chrome.

download.png

var renderer = PIXI.autoDetectRenderer(256, 256,{backgroundColor : 0x888888});
document.body.appendChild(renderer.view);
var test = new PIXI.Graphics();
test.filters = [new PIXI.filters.BlurFilter(32,10,1)];
test.beginFill(0x000000, 1);
test.drawCircle(175,128,100);
renderer.render(test);

Using image sprites instead of vector graphics doesn't seem to make a difference, neither does putting it in a container. The effect isn't consistent, it pops in and out based on what I draw. It seems to disappear if the total area being filtered is a power of two? For example, in this case, adding a single completely transparent pixel on the left edge fixes the problem. But if the renderer is set to width 257 instead of 256, the problem returns. (Now the black is bleeding out, but from what I understand that's the expected result from GL_CLAMP_TO_EDGE.)

download (1).png

testg.beginFill(0x000000, 0);
testg.drawRect(0,0,1,1);

What I'm trying to do is create full screen masks for TilingSprites. I use a Perlin Noise library to draw a low-res vector mask on a RenderTexture, and use the blur filter to feather it and hide the jagged edges. This is the only approach I could find that's fast enough to draw the full view every frame. Making the RenderTexture ~50 pixels larger then the view hides the problem, but that seems inefficient, especially for several layers of this, right?

So is this a bug, or is there something I should be doing differently?

Share this post


Link to post
Share on other sites
40 minutes ago, ivan.popelyshev said:

You can add a padding to filter. Please look at https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/Filter.js#L57 . And for next time, also look in the sources, they are useful :)

Hi. Setting filter padding follows the same behavior as drawing on the opposite edge - it only fixes the problem if the renderer is set to a Po2. In this example, setting the padding to 100 makes the problem disappear, and setting the renderer width to 255 or 257 makes it come back. I noticed that it was randomly working on some frames, and it turned out that was when the drawing happened to be a Po2 across.

I did look through the source code for a while to see if there was a simple GL parameter that I could override or something, and went through all the properties and methods in the Chrome console, but no luck.

Share this post


Link to post
Share on other sites

Wow, you guys aren't messing around! Thanks! If anyone else is confused, like I was at first, you now need to keep drawing your vector graphics past the edge of the view, and the off-screen pixels will be pulled into the blur before they're clipped off. No more bleeding edges.

Untitled-2.gif

Untitled-1.gif

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.