Sprite animation with pixelStorei & texImage2D gives strange color margin

Question

This code works generally. I use 4x4 shema for sprite animation (texture/image). Only when YY is 3 (last row) i got strange color margin.

I found at How do I use texSubImage2D to show sprites in webgl? nice explanation and i use it.

Any suggestion ?

if(object.texParams.spriteAnimation != false && object.textures[t].image.width != 0) {

// char * data; // data of 8-bit per sample RGBA image
// int w, h; // size of the image
// int sx, sy, sw, sh; // position and size of area you want to crop.
// glTexImage2D does support regions - of - interest.You do it as follows:

world.GL.gl.pixelStorei(world.GL.gl.UNPACK_FLIP_Y_WEBGL, false);

var [XX, YY] = object.texParams.spriteAnimation.getOffsetXY();
world.GL.gl.pixelStorei(world.GL.gl.UNPACK_ROW_LENGTH, object.textures[t].image.height);
world.GL.gl.pixelStorei(world.GL.gl.UNPACK_SKIP_PIXELS, XX * object.textures[t].image.width / object.texParams.spriteAnimation.shema[0]);
world.GL.gl.pixelStorei(world.GL.gl.UNPACK_SKIP_ROWS,
  YY * object.textures[t].image.height /  object.texParams.spriteAnimation.shema[1]);
                            
world.GL.gl.pixelStorei(world.GL.gl.UNPACK_ALIGNMENT, 1);
// LodePNG tightly packs everything
// glTexImage2D(GL_TEXTURE_2D, level, internalFormat,
// sw, sh, border, format, type, data);
world.GL.gl.texImage2D(world.GL.gl.TEXTURE_2D,
    0, world.GL.gl.RGBA,
    object.textures[t].image.width / object.texParams.spriteAnimation.shema[0],
    object.textures[t].image.height / object.texParams.spriteAnimation.shema[1],
    0,
    world.GL.gl.RGBA,
    world.GL.gl.UNSIGNED_BYTE,
    object.textures[t].image);
// texImage2D(target, level, internalformat, width, height, border, format, type, offset)
// texImage2D(target, level, internalformat, width, height, border, format, type, source)
// texImage2D(target, level, internalformat, width, height, border, format, type, srcData, srcOffset)

world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MIN_FILTER,
  world.GL.gl.LINEAR_MIPMAP_NEAREST);
world.GL.gl.generateMipmap(world.GL.gl.TEXTURE_2D);
}

Visual presentation :

Other code for sprite animator :

            spriteAnimation: {
                activeFrame: 0,
                shema: [4, 4],
                updateAfter: 20,
                X: 0,
                Y: 0,
                getOffsetXY: function() {
                    this.activeFrame++;
                    if(this.activeFrame > this.updateAfter) {
                        this.activeFrame = 0;
                        this.X = this.X + 1;
                        if(this.X >= this.shema[0]) {
                            this.X = 0;
                            this.Y = this.Y + 1;
                            if(this.Y >= this.shema[1]) {
                                this.Y = 0;
                            }
                        }
                        console.log('TEST X:', this.X, " Y:", this.Y)
                    }
                    return [this.X, this.Y];
                }
            }

This works fine :

TEST X: 0  Y: 0
app.js:64 TEST X: 1  Y: 0
app.js:64 TEST X: 2  Y: 0
app.js:64 TEST X: 3  Y: 0
app.js:64 TEST X: 0  Y: 1
app.js:64 TEST X: 1  Y: 1
app.js:64 TEST X: 2  Y: 1
app.js:64 TEST X: 3  Y: 1
app.js:64 TEST X: 0  Y: 2
app.js:64 TEST X: 1  Y: 2
app.js:64 TEST X: 2  Y: 2
app.js:64 TEST X: 3  Y: 2
app.js:64 TEST X: 0  Y: 3
app.js:64 TEST X: 1  Y: 3
app.js:64 TEST X: 2  Y: 3
app.js:64 TEST X: 3  Y: 3

There must be something with transparency on the end. From begin looks they take normally but on last row program just fill it in white for some reason...

Answer 1

It was transparency in range from end of to the first non transparency pixel.

I fixed this with changing image file. I replace transparency color with black color and everything looks fine.

If i need transparency i have always blend mode from glBlend enabling.