Problems with drawing multiple Webgl meshes

Asked

Viewed 88 times

1

I’m making a Rubik’s Cube using Webgl 2, so far so good, I made some classes to do math with matrices, others to take care of shaders and etc. But when I went to draw the cube in fact it just uses the texture of the last cube that is drawn on the screen Cubo mágico de forma bugada The code that draws the object and the code that prepares the VAO.

Mesh.prototype.prepara = function() {
    gl.bindVertexArray(this.VAO);

    gl.bindBuffer(gl.ARRAY_BUFFER, this.VBO);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(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, new Float32Array(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, new Uint8Array(this.indices), gl.STATIC_DRAW);

    gl.enableVertexAttribArray(0);
    gl.enableVertexAttribArray(1);
};
Mesh.prototype.bind = function() {
    gl.bindVertexArray(this.VAO);

    for (let i = 0; i < this.texturas.length; i++)
        this.texturas[i].bind();
};
Mesh.prototype.draw = function(shader) {
    this.bind();

    for (let i = 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 the preparer() instead of bind() the generated result is this (the expected is by the way): O Cubo funcionando

Can anyone tell me why? And how to fix it? If you have any more questions about my code follow the link to my repository on github: Github Repository

(I already apologize for some silly mistake of mine in the code, it is the first project I do with Opengl/ Webgl).

EDIT: I forgot to mention, if in the bind code I leave so

Mesh.prototype.bind = function() {
    gl.bindVertexArray(this.VAO);
};

The code as it should, but as far as I know for the textures to work it takes "bindar" they tbm, why does it work?

  • has attempted to place the lines Gl.enableVertexAttribArray(0); and Gl.enableVertexAttribArray(1); in the bind method?

  • Yes, even the result

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.