RenderTexture low blur filter power from sprite

[sergkub]

Hello.

 

I am rendering on renderTexture, sprite with blur filter,

rendering be with weak blur, unlike sprite,

 

have any ideas why?

[hubert]

are there any other containers that you have used blur with? Maybe the parent has a blur on it and the effect is added to the child. If so that would explain the behavior.

 

http://www.sevenative.com

[sergkub]

Here my example.

I changed pixi example "1 Basics"

 

===

    var assetsToLoader = ["bunny.png"];

    var loader = new PIXI.AssetLoader(assetsToLoader);

    loader.onComplete = onAssetsLoaded

    loader.load();    

    

    function onAssetsLoaded(){        

        var stage = new PIXI.Stage(0x66FF99);

        var renderer = PIXI.autoDetectRenderer(400, 300);

        var texture = new PIXI.Texture.fromFrame("bunny.png");

        var bunny = new PIXI.Sprite(texture);

        var blur_filter = new PIXI.BlurFilter();

        blur_filter.blur = 20;

        bunny.filters = [blur_filter];

        

        var render_texture = new PIXI.RenderTexture();

        render_texture.render(bunny);

        

        // comment and uncomment for see difference blur power

        bunny = new PIXI.Sprite(render_texture);

        

        bunny.position.x = 100;

        bunny.position.y = 100;

        stage.addChild(bunny);

        

        function animate() {

            requestAnimFrame(animate);

            renderer.render(stage);

        }

        

        document.body.appendChild(renderer.view);

        requestAnimFrame(animate);

    } 

===

[sergkub]

i watch blur power depends of renderer size ...

Example. blur = 5 on renderer size 100x100 different power on renderer size 1000x1000.

 

It's bug or not ?

[hubert]

No idea. 

 

Feel free to notify the pixie team

 

https://github.com/GoodBoyDigital/pixi.js/issues

 

http://www.sevenative.com

[sergkub]

http://jsfiddle.net/sD8Tt/8/

[hubert]

When you said that it depends on the renderer size did you mean the result of autoDetectRenderer method or the renderTexture method. In the example above you can see that with renderTexture you need to pass the size of the rendered texture.

 

I'm not sure if this is what you are looking for?

 

http://jsfiddle.net/sD8Tt/10/

 

http://www.sevenative.com

[sergkub]

Both, blur power depends of autoDetectRenderer and renderTexture size.

I looked your example, thanks, try set renderTexture size 1500x1500 you will see difference.

[hubert]

OK! I have it working for you with a jsFiddle!

 

What you need to do is to pass to the renderTexture  sprite.width * 4

 

http://jsfiddle.net/sD8Tt/17/

 

The solution is not perfect because in case of blurs over 100 the image becomes malformed but I assume that you won't be needing it!

 

http://www.sevenative.com