Jump to content

Weird FilterArea's size on v4


GBear
 Share

Recommended Posts

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

Link to comment
Share on other sites

@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.   

23.png

thx..

Link to comment
Share on other sites

  • 3 weeks later...

@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

93.png

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

mappedMatrix is answer
result.png

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...