CODEWITHSUNDEEP
javascriptwebgl
user10004359
user10004359

Reputation:

WebGL inserting calculated vertex-values

I am experimenting with WebGL for basic understanding.

I have a model that consists of 6 triangles and I want to create another 3 triangles which share a specific point inside of each triangle. The specific point will be the center/focus (Sry, I don't know which term is correct) of the parent-triangle. The Problem is, that I don't know how to insert the values to get the model to be rendered. 

//This is my function to set the vertex-points for each triangle
function setGeometry(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
          //vorne links (clockwise)
          -60, -52, 0,
          0, 52, 0,
          0, 0, 60,
          //vorne rechts (clockwise)
          0, 0, 60,
          0, 52, 0,
          60, -52, 0,
          //vorne mitte (clockwise)
          60, -52, 0,
          -60, -52, 0,
          0, 0, 60,
          //Front mid inner mid (clockwise)
          60, -52, 0,
          -60, -52, 0,
          getCenter([60, -52, 0], //This is where I call the function to get the Center of the parent
          [-60, -52, 0],          //and return the values as a concatinated string
          [0, 0, 60]),
          //hinten links (counter-clockwise)
          -60, -52, 0,
          0, 0, -60,
          0, 52, 0,
          //hinten rechts (counter-clockwise)
          0, 52, 0,
          0, 0, -60,
          60, -52, 0,
          //hinten mitte (counter-clockwise)
          60, -52, 0,
          0, 0, -60,
          -60, -52, 0,
          ]),
      gl.STATIC_DRAW);
}

//And this is the corresponding function to get the center. 
function getCenter(A,B,C){
    var center = [];
    for(var i = 0; i < A.length; ++i){
        center[i] = (A[i] + B[i] + C[i])/3;
    }
    return Math.round(center[0]) + "," + Math.round(center[1]) + "," + Math.round(center[2]);
}

I assume that the problem is, that the values will be returned as a string, rather than seperate integers.

Following Error-Message appears:

glDrawArrays: attempt to access out of range vertices in attribute 0

I can't think of a proper way to get the values in there.

I'd appreciate any hint in the right direction.

Upvotes: 1

Views: 37

Answers (1)

Martin Stone
Martin Stone

Reputation: 13027

Yes, part of the problem is that your getCenter function returns a string. I suggest returning a three-element array:

function getCenter(A,B,C){
    var center = [];
    for(var i = 0; i < A.length; ++i){
        center[i] = Math.round((A[i] + B[i] + C[i])/3);
    }
    return center;
}

Now you need to insert those three values into your array of coordinates. If you're using a modern browser you can use the ... "spread" syntax...

[-60, -52, 0, ...getCenter(A, B, C), -60, -52, 0]

...otherwise you'll have to use concat()...

[-60, -52, 0].concat(getCenter(A, B, C)).concat([-60, -52, 0])

Upvotes: 0

Related Questions