Pixi.js: vTextureCoord wrong coordination

[dmtth]

Hi, I messing with filters but have some issue with fragment shader (i think the problem is more like with the vertex shader, or i just missing something). Anyway, i just create a basic project with a basic fragment shader and i noticed that the 'filtered' area is bigger than it should be.

the fragment shader

precision mediump float;

varying vec2 vTextureCoord;
uniform sampler2D uSampler;

void main() {


    if ( vTextureCoord.x < 0.5 )
    {
        gl_FragColor = vec4(1.0,0.5,0.5, 1.0);
    }
}

the project file

window.onload = function(){
    var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
    document.body.appendChild(app.view);

    var base_rect = new PIXI.Graphics();
    base_rect.beginFill(0xff0080);
    base_rect.drawRect(0, 0, 800, 600);
    app.stage.addChild(base_rect);

       PIXI.loader.add('shader', 'vignette.frag').load(onLoaded);

       var filter;

       function onLoaded (loader,res) {
        filter = new PIXI.Filter(null, res.shader.data);
        app.stage.filterArea = new PIXI.Rectangle(0,0,800,600);
        app.stage.filters = [filter];

        app.start();
    }

    app.ticker.add(function(delta) {
    });
}

and the result is with the code 'if ( vTextureCoord.x < 0.5 )'

instead of this: (but if i write 'if ( vTextureCoord.x < 0.4 )' i get the 50% width that i want)

[ivanpopelyshev]

In v4 filters are using parts of bigger texture for rendering, thus vTextureCoord has to be mapped in it, please look at https://github.com/pixijs/pixi-filters/blob/master/src/twist/twist.frag , but mapCoord and unmapCoord give coords in pixels. If you want (0,1) please look in http://www.html5gamedevs.com/topic/28597-vtexturecoord-and-custom-filters-on-pixi-v4/

Yes, I know, there are many people with that issue. I'm gonna make new iteration on filters that will take care of that, and I'll provide the docs ;)

[dmtth]

thanks for the reply!

[WienerGames]

In both cases (pixel or relative coordinates) , when the sprite moves the shader is not working correctly, any help with that ?

[ivanpopelyshev]

@WienerGames do you rotate the sprite? Better to show us a demo.

[WienerGames]

In this demo, if you add sprite.x = 100 , it looks wrong, at least I don't expect it to behave in this way

[ivanpopelyshev]

OK, I agree, something is wrong.

var x = 0;
app.ticker.add(function(delta) {
    x += delta;
   sprite.x = x%200>100 ? 200-x%200:x%200;
});

[GoodBoyDigital]

Hi there! Closing this issue for now due to its inactivity. Feel free to give us a poke if you would like this issue reopened. Thanks 👍

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.