Custom filter coord issue

[Lorenzo]

Hi,

i have a problem with a custom filter.

I notice that the result of this simple custom filter change when the sprite are moved from js.

Seems to be that vTextureCoord are affected by the position.x value:

when i change its value, the filter render a different image.

precision mediump float;

uniform float frequency;
uniform float amplitude;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;

float upDown(float v) {
  return sin(v) * .5 + .5;
}

void main (void) {

    vec2 uv = vTextureCoord;

    float t1 = frequency * 0.2;
    float t2 = frequency * 0.35;
    
    float v = uv.y;
    float h = uv.x;

    float off1 = sin((h + 0.4) * mix(1., 6., upDown(t1))) * amplitude * 0.5;
    float off2 = sin((h + 0.8) * mix(3., 8., upDown(t2))) * amplitude  * 1.5;
    float off3 = sin((h) * mix(1., 2., upDown(t1))) * amplitude  * 0.5;

    uv = vec2(
        h + off1 + off2 + off3,
        v
    );

    gl_FragColor = texture2D(uSampler, uv);
}

 

How can I get the same image, even moving or scaling the sprite?

Thanks in advance
 

[ivan.popelyshev]

Make a fiddle. It might be that you are doing it wrong in JS side.

[Lorenzo]

The filter change when exit from viewport (maybe an issue with the filter area?), and when container are scaled.

My goal is to make sure that the filter is scaled proportionally to its container, and that it does not change when it is outside the viewport.

https://jsfiddle.net/ujvkm2ac/

[ivan.popelyshev]

I thought you've added mapCoord and unmapCoord and dimensions there. Did I dream that?

[ivan.popelyshev]

Anyway, here's the article, I hope you read it already: https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#fitting-problem

Your second issue is about "dontFit". First is about map/unmap.

With the nature of your issue, only one sprite in container , may be its better to use renderer plugin instead, it doesnt have map/unmap and fitting problem. It has more lines of code, but less problems: https://github.com/pixijs/pixi-plugin-example/

[Lorenzo]

Thanks for reply.
I try to use createShaderPlugin, but i have a problem with the texture uniform.

https://jsfiddle.net/ujvkm2ac/9/

[ivan.popelyshev]

No guarantee about that mashup. People are complaining about lack of bindTexture in it  Please use original pixi-plugin-example code, you can move "frag" and "vert" files into strings and thus make single js file.