I'm doing a magic cube using WebGL 2, so far so good, I've done some classes to do matrix accounts, some to take care of shaders, and so on. But when I was drawing the cube in fact it just uses the texture of the last cube that is drawn on the screen ThecodethatdrawstheobjectandpreparestheVAO.
Mesh.prototype.prepara=function(){gl.bindVertexArray(this.VAO);gl.bindBuffer(gl.ARRAY_BUFFER,this.VBO);gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(this.vertices),gl.STATIC_DRAW);gl.vertexAttribPointer(0,3,gl.FLOAT,gl.FALSE,0,0);gl.bindBuffer(gl.ARRAY_BUFFER,this.textureBuffer);gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(this.textureCoords),gl.STATIC_DRAW);gl.vertexAttribPointer(1,2,gl.FLOAT,gl.FALSE,0,0);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.EBO);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,newUint8Array(this.indices),gl.STATIC_DRAW);gl.enableVertexAttribArray(0);gl.enableVertexAttribArray(1);};Mesh.prototype.bind=function(){gl.bindVertexArray(this.VAO);for(leti=0;i<this.texturas.length;i++)this.texturas[i].bind();};Mesh.prototype.draw=function(shader){this.bind();for(leti=0;i<this.texturas.length;i++)shader.setInt("texture", this.texturas[i].layer);
shader.setMat4("transform", this.transform);
gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_BYTE, 0);
};
What makes me confused is that if in the draw function I use prepare () instead of bind () the generated result is this (what is expected say by the way):
Cananyonetellmewhythis?Andhowtosolve?Ifyouhaveanyfurtherquestionsaboutmycodefollowthelinktomyrepositoryingithub: Github Repository
(I apologize for some silly mistake in my code, it's the first project I do with OpenGL / WebGL).
EDIT: I forgot to mention, if in the bind code I leave it like this
Mesh.prototype.bind = function() {
gl.bindVertexArray(this.VAO);
};
The code should be as it should, but as far as I know for textures to work it is necessary to "bind" them, so why does this work?