Changing sprite width/height messes up my filter's shader

[JErvin]

Finally I could use shaders in PixiJS. It is so hard to figure things out, really hard to find solutions or documentation.

The solution I find is to create a sprite and apply my Filter with my custom shader code. My problem now If I change the sprite's width and height then (I guess because the scale changes) in the shader the vTextureCoord.x/y just goes off (I guess with the ratio of the scale changes).

I just want to use my shader code, I want to know where is my sprite's left top (0,0) and my sprite's right bottom (1,1) thats all I want, regardless of the width and height changes on the sprite. How can I achieve this?

edit: Maybe I was wrong and the problem is that my sprite's width/height is not power of two. Thats all I do:

Quote

this.sprite=new Sprite();
this.sprite.filters=[this.shader];  
this.sprite.x=100;
this.sprite.y=100;
this.sprite.width=300;
this.sprite.hegith=300;

Thank you!

Edited October 3, 2023 by JErvin

[JErvin]

It seems I could solve the problem, with a vertex shader:

Quote

        attribute vec2 aVertexPosition;

        uniform mat3 projectionMatrix;
        
        varying vec2 vTextureCoord;
        
        uniform vec4 inputSize;
        uniform vec4 outputFrame;
        
        vec4 filterVertexPosition( void )
        {
            vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;
        
            return vec4(( projectionMatrix *  vec3(position, 1.0)).xy, 0.0, 1.0);
        }
        
        vec2 filterTextureCoord( void )
        {
            return aVertexPosition * (outputFrame.zw * inputSize.zw);
        }
        
        void main(void)
        {
            gl_Position = filterVertexPosition();
            vTextureCoord = aVertexPosition;//filterTextureCoord();
        }

I am not totally sure what I am did, but I basically just making vTextureCoord=aVertexPosition, and commented out that filtertextureCoord function.