Vertex buffer object data being overwritten for some reason

Question

I'm having this weird issue where my object vertex data is being overridden when I create a new vertex buffer object... I believe this section of code is the culprit, as I'm aware it's in the constructor, since the data that is overwritten switches if i change the order of instancing:

this.shader = shaderProgram(srcContainer.vert, srcContainer.frag);

this.theta = 0;

this.vbo = gl.createBuffer();
this.ibo = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), gl.STATIC_DRAW); 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

gl.useProgram(this.shader);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.verts), gl.STATIC_DRAW);

// vertex position
gl.vertexAttribPointer(0, /*size of attribute(x,y,z) in count*/3, gl.FLOAT, gl.FALSE, /*size of a vertex in bytes*/6*Float32Array.BYTES_PER_ELEMENT, /*offset to attribute in vertex*/0*Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribArray(0);

// vertex color
gl.vertexAttribPointer(1, /*size of attribute(r,g,b) in count*/3, gl.FLOAT, gl.FALSE, /*size of a vertex in bytes*/6*Float32Array.BYTES_PER_ELEMENT, /*offset to attribute in vertex*/3*Float32Array.BYTES_PER_ELEMENT); 
gl.enableVertexAttribArray(1);

gl.bindBuffer(gl.ARRAY_BUFFER, null); 

this.verts is vertex data that is joined with color data vertex-wise. The following code is used to display the cubes to the screen:

let box, box2;

let canv, gl, time;
function setup() {
  canv = document.querySelector('#glCanvas');
  gl = loadGL(canv); // Grabs a reference to webGL from canvas in the middle of the page

  box2 = new Cube([
    1-0.4, 1-0.1, 1-0.8,
    1-0.5, 1-0.0, 1-0.2,
    1-0.6, 1-0.0, 1-0.0,
    1-0.7, 1-0.2, 1-0.0,
    1-0.6, 1-0.2, 1-0.9,
    1-0.5, 1-0.1, 1-0.6,
    1-0.7, 1-0.0, 1-0.5,
    1-0.9, 1-0.5, 1-0.0], 0.5, 1/7); // initialize box2 to have inverted color vertex data

  box = new Cube([
    0.4, 0.1, 0.8,
    0.5, 0.0, 0.2,
    0.6, 0.0, 0.0,
    0.7, 0.2, 0.0,
    0.6, 0.2, 0.9,
    0.5, 0.1, 0.6,
    0.7, 0.0, 0.5,
    0.9, 0.5, 0.0], 0.5, 1/10); // initialize box to have normal color data, which ends up overwriting the inverted data above.
  
  box2.time = Math.PI/6; // Angle one box differently to see both

  time = new Time(0); // Custom time class to keep track of the deltaTime, pass in 0 to start at 0 milliseconds.
  window.requestAnimationFrame(draw); // the first call of requestAnimationFrame will start the draw loop.
}

// Draw is called every animation frame with requestAnimationFrame
function draw(timestamp) {
  time.update(timestamp); // Calculate time.deltaTime
  background(0, 0, 0);

  //box.update(); 
  box.show(); // show box 1 (meant to be normal colored)

  //box2.update();
  box2.show(); // show box 2 (meant to be inverted colored)

  window.requestAnimationFrame(draw);
}

and this is the show, and bind functions:

bind() {
  gl.useProgram(this.shader);
  gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo);
};
show() {
  this.bind();
  gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_SHORT, 0);
  this.unbind();
};

this code renders them both to have normal vertex data which can be seen here

Answer 1

Answered by user LJᛃ,

"... you need to setup the attributes each time you render (so in your bind method), they're a global state. You may want to look into VAOs."