BlurFilter at edge of view

[merachefet]

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.

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

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?

[ivan.popelyshev]

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

[merachefet]

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.

[ivan.popelyshev]

Ok, so we have po2+padding problem. @bQvle already stated that. You have a test so i can find the mistake

[Mat Groves]

Hello! Should be fixed in the dev branch now

Padding is applied after rather than before clipping to the renderer viewport happens.

[merachefet]

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.

[ivan.popelyshev]

Nice! Btw, thats the build for you: https://dl.dropboxusercontent.com/u/46636530/pixijs/filter2/pixi.js