Weird FilterArea's size on v4

[GBear]

hi. i'm testing v4. and i create custom shader 

sprite is created by texture size is using 628x572;
and filterArea is set automatically to 1024, 1024;

so i can't calculate correct vTextureCoord.

because  end of vTextureCoord looks like 1024, 1024 if vtextureCoord has (1.0, 1.0);

how can i calcaulte or get  correct uv.


following code is custom shader code

function createShaderShadow(x, y, dist) {
// smoke shader
    var uniforms = {};
    uniforms.time = {
        type: '1f',
        value: 0
    };
    uniforms.mark= {
        type: '2f',
        value: {
            x: 0.5,
            y: 0.5
        }
    };


    var fragmentSrc = [
        "precision mediump float;",
        "uniform vec4      filterArea;",
        'varying vec2 vTextureCoord;',
        'uniform sampler2D uSampler;',
        "uniform float     time;",
        "uniform vec2      mark;",
        "const float max_dist = 0.2;",
        "void main() {",
        "vec2 start = vTextureCoord.xy;",
        "vec2 end = vec2(0.5, 0.5);",
        //"float dist = distance(start, end);",
        "float dist = distance(start, end);",
        //"if(vTextureCoord.x< max_dist || vTextureCoord.y< max_dist) {",
        "if(dist < max_dist) {",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 1.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "} else {",
        "    gl_FragColor = vec4(1.0, 0.0,  0.0, 1.0);",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 0.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "}",
        "}",
    ];

    fragmentSrc = fragmentSrc.join('\r\n');

    var coolFilter = new PIXI.Filter(null, fragmentSrc, uniforms);
    return coolFilter;
};

thx

[GBear]

http://jsfiddle.net/gbear/n0kzcjyu/18/

this is example code of jsfiddle

using image is 1024*1024 png image

 

[tips4design]

What is the desired outcome?

 

[GBear]

@tips4design hi ...

i make light effect but that is only simple test code.

i have weird issue 

1.why gregreen rectangle box is happened.. 4-5 pixel is more drawing
2.i wanna draw yellow circle on  middle of image . becuase i calculate by uv (0.5, 0.5) but it draw right down.   

thx..

[Exca]

I had same issue. Fix is in this thread

 

[GBear]

@Exca i want it.. do you resolve?

@ivan.popelyshev hi ivan. do you kwow how resolve this issue?

[Exca]

The fix Ivan posted to the other thread worked. What I did basically was just to add this to applyfilter. And in the shader multiply uv by that matrix.

filterManager.calculateNormalizedScreenSpaceMatrix(this.uniforms.mappedMatrix);

[GBear]

@ivan.popelyshev hi ivan 

how can i middle of position into shader?

v4 seems like image size is recalculated.

if image's size has 628*572,   shader's vTextureCorrd has value that created by 1024*1024.

 

if i set following shader code.. yellow circle is not middle of following image

Quote

function createShaderShadow(x, y, dist) {
// smoke shader
    var uniforms = {};
    uniforms.time = {
        type: '1f',
        value: 0
    };
    uniforms.mark= {
        type: '2f',
        value: {
            x: 0.5,
            y: 0.5
        }
    };


    var fragmentSrc = [
        "precision mediump float;",
        "uniform vec4      filterArea;",
        'varying vec2 vTextureCoord;',
        'uniform sampler2D uSampler;',
        "uniform float     time;",
        "uniform vec2      mark;",
        "const float max_dist = 0.2;",
        "void main() {",
        "vec2 start = vTextureCoord.xy;",
        "vec2 end = vec2(0.5, 0.5);",       
        "float dist = distance(start, end);",        
        "if(dist < max_dist) {",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 1.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "} else {",
        "    gl_FragColor = vec4(1.0, 0.0,  0.0, 1.0);",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 0.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "}",
        "}",
    ];

    fragmentSrc = fragmentSrc.join('\r\n');

    var coolFilter = new PIXI.Filter(null, fragmentSrc, uniforms);
    return coolFilter;
};

how can i calculate this?

 

thank you

[Exca]

function createShaderShadow(x, y, dist) {
// smoke shader
    var uniforms = {};
    uniforms.time = {
        type: '1f',
        value: 0
    };
    uniforms.mark= {
        type: '2f',
        value: {
            x: 0.5,
            y: 0.5
        }
    };


    var fragmentSrc = [
        "precision mediump float;",
        "uniform vec4      filterArea;",
        'varying vec2 vTextureCoord;',
        'uniform sampler2D uSampler;',
        "uniform float     time;",
        "uniform vec2      mark;",
        "uniform mat3 mappedMatrix;",
        "const float max_dist = 0.2;",
        "void main() {",
        "vec3 map = vec3( vTextureCoord.xy,1)*mappedMatrix;",
        "vec2 start =map.xy;",
        "vec2 end = vec2(0.5, 0.5);",       
        "float dist = distance(start, end);",        
        "if(dist < max_dist) {",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 1.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "} else {",
        "    gl_FragColor = vec4(1.0, 0.0,  0.0, 1.0);",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 0.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "}",
        "}",
    ];

    fragmentSrc = fragmentSrc.join('\r\n');
    var matrix = new PIXI.Matrix();
    var coolFilter = new PIXI.Filter(null, fragmentSrc, uniforms);
    coolFilter.apply = function(filterManager, input, output, clear){
        this.uniforms.mappedMatrix = filterManager.calculateNormalizedScreenSpaceMatrix(matrix);
        PIXI.Filter.apply.call(this, filterManager, input, output, clear);
    }
    return coolFilter;
};

You might need to declare the mappedMatrix uniform in uniforms. I'm not 100% sure how the autodetection works. Also might have some errors in the code, but the process should be clear from that.

[GBear]

@Exca hi.. thx..answer...

mappedMatrix is answer


following code is modified code from your code(it only modified a little bit miss) and it is good
 

function createShaderShadow(x, y, dist) {
// smoke shader
    var uniforms = {};
    uniforms.time = {
        type: '1f',
        value: 0
    };
    uniforms.mark= {
        type: '2f',
        value: {
            x: 0.5,
            y: 0.5
        }
    };

    uniforms.mappedMatrix= {
        type: 'mat3',
        value: new PIXI.Matrix()
    };


    var fragmentSrc = [
        "precision mediump float;",
        "uniform vec4      filterArea;",
        'varying vec2 vTextureCoord;',
        'uniform sampler2D uSampler;',
        "uniform float     time;",
        "uniform vec2      mark;",
        "uniform mat3 mappedMatrix;",
        "const float max_dist = 0.2;",
        "void main() {",
        "vec3 map = vec3( vTextureCoord.xy,1)*mappedMatrix;",
        "vec2 start =map.xy;",
        "vec2 end = vec2(0.5, 0.5);",
        "float dist = distance(start, end);",
        "if(dist < max_dist) {",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 1.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "} else {",
        "    gl_FragColor = vec4(1.0, 0.0,  0.0, 1.0);",
        "   vec4 color1  =texture2D(uSampler, vTextureCoord);",
        "   vec4 color2 = vec4(1.0, 0.0, 0.0, 1.0);",
        "   gl_FragColor = mix(color1, color2, 0.5);",
        "}",
        "}",
    ];

    fragmentSrc = fragmentSrc.join('\r\n');

    var matrix = new PIXI.Matrix();
    //uniforms.mappedMatrix = filterManager.calculateNormalizedScreenSpaceMatrix(matrix);

    var coolFilter = new PIXI.Filter(null, fragmentSrc, uniforms);
    if(1){
        coolFilter.apply = function(filterManager, input, output, clear){
            this.uniforms.mappedMatrix = filterManager.calculateNormalizedScreenSpaceMatrix(this.uniforms.mappedMatrix);
            PIXI.Filter.prototype.apply.call(this, filterManager, input, output, clear);
        }
    }

    return coolFilter;
};

thx.