webgl - Sprite animation with pixelStorei & texImage2D gives strange color margin - Stack Overflow

admin管理员组

文章数量:1125564

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

本文标签： webglSprite animation with pixelStorei amp texImage2D gives strange color marginStack Overflow