Positioning container with filter

[Joery1]

Hey,

I am trying to position my container to a floating point number, that is possible. But the filter I applied does only move every integer, which makes my animation not smooth.

Code, or jsfiddle: https://jsfiddle.net/08pdhrff/10/

var test = new PIXI.Sprite();
test.width = 512;
test.height = 512;
test.position.x = 0.5; // <- this
test.position.y = 0.5;

app.stage.addChild(test);

var filter = new CircleFilter();
test.filters = [filter];

 

I am guessing that I am doing it completely the wrong way.

 

Thank you,

Joery

[ivan.popelyshev]

Before filter is being applied, container is rendered into separate RenderTexture, which works only with int coords. You can't detect fractional offset inside the shader, unless you map sprite matrix to a parameter. According to https://github.com/pixijs/pixi.js/wiki/Creating-Filters-in-Pixi-v4 , you have to pass mapped matrix as a parameter, like DisplacementFilter does. You dont need extra texture, you dont need extra sprite, your filter just have to pass your original sprite matrix to the uniform, and read it on shader side to determine the real center of the sprite.

[Joery1]

1 hour ago, ivan.popelyshev said:

Before filter is being applied, container is rendered into separate RenderTexture, which works only with int coords. You can't detect fractional offset inside the shader, unless you map sprite matrix to a parameter. According to https://github.com/pixijs/pixi.js/wiki/Creating-Filters-in-Pixi-v4 , you have to pass mapped matrix as a parameter, like DisplacementFilter does. You dont need extra texture, you dont need extra sprite, your filter just have to pass your original sprite matrix to the uniform, and read it on shader side to determine the real center of the sprite.

Thank you for your answer!

I think I will just stick with PIXI.Graphics, the time I will spent trying to figure it out is probably not going to be worth the tiny performance improvement.