Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

BlurFilter at edge of view

$
0
0

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?


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>