WEBGL get the specific lineVertexes of a shape

p5.js Development
1

I am trying to make a ray-triangle intersection for a library that I am working on.

My problem is not the actual ray-intersection algorithm, since I already have that ready. My issue is that I cannot access the individual vertices/lineVertices of each shape, which I need for the algorithm.

function setup () {
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background(220);
  push();
  translate(0,100,0)
  box();
  
  for(let i = 0; i < 3; i++){   
    push();
    points = this._renderer.retainedMode.geometry['box|4|4'].model.vertices[(i+pointCounter)%this._renderer.retainedMode.geometry['box|4|4'].model.vertices.length];
    points = [points.x, points.y, points.z]
    //console.log(points)
    vec3.scale(points, points, 50);
    //translate(0,200,0);
    point(points[0],points[1],points[2]);
    pointCounter++
    pop();
}

function keyPressed(){
  console.log(this._renderer.retainedMode.geometry['box|4|4'])
}

This is just some sample code that I have to show y’all what I have so far.

Is there an easier way to access the faces, like accessing one of the webGL buffers (which I don’t know how to do) or am I looking in the wrong places?

Help would really be appreciated!

-Sam

2

For those who saw this, I just figured out how the data structure works.

here is some sample code to show you what I did: https://editor.p5js.org/sjcobb/sketches/zNC6HOGll

here’s the juice of the code for those of you who don’t want to look at the editor:

  let indexes = [];
  let points = [];
  faces = this._renderer.retainedMode.geometry['box|4|4'].model.faces;
  faces = faces[pointCounter%faces.length];
  pointCounter++
  vertices = this._renderer.retainedMode.geometry['box|4|4'].model.vertices
  
  for(let i = 0; i < 3; i++){
    //3x because all shapes are rendered as triangles by default
    //that is why there are 12 faces instead of 6. in a box.
    points.push(vertices[faces[i]]);
  }
  
  for(let i=0; i<points.length; i++){
    a = [points[i].x, points[i].y, points[i].z]
    //scale(out, inVector, scalar)
    vec3.scale(a, a, 50);
    point(a[0], a[1], a[2]);
  }
  pop();

As you can see, it is a much more complicated method than it should be.

This is still not the end of my search though, I still need to fine a way to find the specific geometry for each specific shape, (maybe I can make a prototype of the shape functions eg. box.geometry() which returns the geometry of that individual box)

All feedback would be really helpful