Webgl：纹理在不同的vbo之间混合

Question

我可以使用纹理成功渲染平面，但是当我绘制具有不同纹理的多个对象时，它们会“随机”开始在彼此之间混合纹理。

我的目标是渲染精灵。我有一个vbo，它只是一个平面，可以改变每次渲染的纹理。

这是我的渲染功能：“spritePlan”是平面顶点纹理坐标等的vbo。

gl.uniform2fv(shaderProgram.texScalerUniform, [subImageWidth/object.objectTypeMetaData.sprite.mergedImages.width, 1]);
gl.uniform2fv(shaderProgram.texOffsetUniform, [object.objectTypeMetaData.sprite.mergedImagesPositions[object.spriteIndex]/object.objectTypeMetaData.sprite.mergedImages.width, 0]);



gl.bindBuffer(gl.ARRAY_BUFFER, spritePlan.vertBuffer);
gl.vertexAttribPointer(vertexAttribLocation, spritePlan.vertBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, spritePlan.texCoordBuffer);
gl.vertexAttribPointer(textureCoordAttribute, spritePlan.texCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, spritePlan.colorBuffer);
gl.vertexAttribPointer(colorAttribLocation, spritePlan.colorBuffer.itemSize, gl.FLOAT, false, 0, 0);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, object.objectTypeMetaData.sprite.textureSprite);
gl.uniform1i(shaderProgram.sampler2DUniform, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, spritePlan.indexBuffer);
setMatrixUniforms();



var xPos = Math.round(object.x-object.objectTypeMetaData.sprite.originX - viewXP)/rooms[gameVariables.currentRoom].roomWidth,
    yPos = Math.round(object.y-object.objectTypeMetaData.sprite.originY - viewYP)/rooms[gameVariables.currentRoom].roomHeight;

var scaleX = (object.objectTypeMetaData.sprite.width/2)/rooms[gameVariables.currentRoom].roomWidth;
var scaleY = (object.objectTypeMetaData.sprite.height/2)/rooms[gameVariables.currentRoom].roomHeight;
mat4.identity(mvMatrix);



mat4.scale(mvMatrix, mvMatrix, [scaleX, scaleY, 1]);

mat4.translate(mvMatrix, mvMatrix, [(xPos/scaleX), (1/scaleY)-(yPos/scaleY), 0.0]);
gl.drawElements(gl.TRIANGLES, spritePlan.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
gl.bindTexture(gl.TEXTURE_2D, null);

这是我的片段着色器：

precision mediump float;
varying vec3 fragColor;
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main()
{
    vec4 tex = texture2D(uSampler, vTextureCoord);
    gl_FragColor = vec4(fragColor, 1.0) * vec4(tex.rgb, tex.a);
};

这是我的片段着色器：

precision mediump float;
attribute vec3 vertPosition;
attribute vec3 vertColor;
attribute vec2 aTextureCoord;
varying vec3 fragColor;
varying highp vec2 vTextureCoord;
uniform mat4 uPMatrix;
uniform mat4 uMVMatrix;

uniform vec2 uvOffset;
uniform vec2 uvScale;

void main()
{
    fragColor = vertColor;
    gl_Position = uPMatrix * uMVMatrix * vec4(vertPosition.x, vertPosition.y, vertPosition.z, 1.0);
    vTextureCoord =  (vec4(aTextureCoord, 0, 1)).xy * uvScale + uvOffset;
};

我真的不知道是什么原因引起的。每个精灵纹理都与一个对象和一个“新图像”相关联，我看了一下，每个纹理都与正确的对象相关联。

我没有正确绑定纹理吗？可能是什么问题？

EDIT1：

我注意到了纹理被替换的模式。他们只是将一步切换到后面执行的精灵，所以不是渲染“1 2 3”而是渲染“3 1 2”告诉我这可能是一个非常容易让人感到沮丧的问题：S

每个精灵都是一个拥有自己Image的对象。我的画布渲染器告诉我每个精灵都有与它们相符的正确图像，所以它可能是我将图像转换为出现错误的纹理的地方。但是我看不到纹理转换器的图像有任何问题：

for(var i=0; i<spritesCompiled.length; i++){
    spritesCompiled[i].textureSprite = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, spritesCompiled[i].textureSprite);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true);
    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE, spritesCompiled[i].mergedImages);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,gl.NEAREST);
    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);
    gl.bindTexture(gl.TEXTURE_2D,null);
}