show Edge line between image and image like border

[GBear]

hi. i was using 2.2.9... and i updated to 3.0.8 yesterday..

and than i can see edge line with scaling or moving ..

 

 

basetexture has 1024*1024 size  and sprites draw sequentially like
    sprite1.position.set(0,0),  sprite2.position.set(1024, 0) 

 

 

what can i do for this?

thx..

 

 

[bubamara]

it's the texture filtering - repeat texture borders on your source image and also make sure you are using rounded x,y coordinates

[ivan.popelyshev]

You dont have to make rounded coords, we can try solution based on filter I just came up with

function pixiAddTileFilter() {    var core = PIXI;    function TileFilter()    {        core.AbstractFilter.call(this,            // vertex shader            null,            // fragment shader            ['precision mediump float;',            'varying vec2 vTextureCoord;',            'uniform sampler2D uSampler;',            'uniform float alphaEdge;',            'void main(void)',            '{',            '   gl_FragColor = texture2D(uSampler, vTextureCoord);',            '	if (gl_FragColor.a > alphaEdge) gl_FragColor.a = 1.0;',            '}'].join("\n"),        // custom uniforms            {                alphaEdge:        { type: 'f', value: 0.25 }            });    }    TileFilter.prototype = Object.create(core.AbstractFilter.prototype);    TileFilter.prototype.constructor = TileFilter;    core.filters.TileFilter = TileFilter;}pixiAddTileFilter();

1) move your terrain in separate containter, which filterArea will contain current screen

container.filterArea = new PIXI.Container(0,0,renderer.width,renderer.height);

2) DO NOT MOVE THE CONTAINER. move terrain inside.

 

3) apply filter:

container.filters = [new PIXI.filters.TileFilter()];

I didnt try this solution yet, I just wrote it in notepad, I'll be happy if you create project for it to test

 

UPD. i tested this solution only in SVG, didnt test it in webgl yet

[ivan.popelyshev]

are you using "antialias:1" parameter in renderer?

 

 

UPD. I think that will work for you:

renderer = PIXI.autoDetectRenderer({width:1024, height:1024, antialias:1});

[GBear]

I'm using antilias:true ...and same.. 
not using .. same..


and i don't use rounded coordinates for this.. 
sprite position always same.. and onlyposition  changed by parent container.

it look like reapet border like  bubamara tell me.... so i wanna set to CLAMP_TO_EDGE..

How can i control this?

thx..
 

[GBear]

hi. i adjust forced..(not clear code);

i add texture.forceEdge..becuase Texture of 'powerOfTwo' set always gl.REPEAT);

 

and i can set outside...

 

i set to 'true' on  my 1024*1024 basetexture.

 

and then i can look normal screen 

        if(texture.forcedEdge){                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);        } else {            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);        }

THIS IS NORMAL SCREEN. 

WebGLRenderer.prototype.updateTexture = function (texture){    texture = texture.baseTexture || texture;    if (!texture.hasLoaded)    {        return;    }    var gl = this.gl;    if (!texture._glTextures[gl.id])    {        texture._glTextures[gl.id] = gl.createTexture();        texture.on('update', this.updateTexture, this);        texture.on('dispose', this.destroyTexture, this);    }    gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);    if (texture.mipmap && texture.isPowerOfTwo)    {        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);        gl.generateMipmap(gl.TEXTURE_2D);    }    else    {        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);    }    if (!texture.isPowerOfTwo)    {        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);    }    else    {                if(texture.forcedEdge){                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);        } else {            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);        }    }    return  texture._glTextures[gl.id];};

[ivan.popelyshev]

Yep, that's good solution. You can create issue at https://github.com/pixijs/pixi.js/ , something like that must be added in pixi

[chg]

Clamp will give you a more subtle seam, in this case you really won't see it (it's more subtle then the jpeg compression and DCT blocks I suspect) but I think overlapping such textures may be a better solution in the general case