Locating shape data in WEBGL (and p5.js)

[Samuel Cobb]

Hey guys,

 

I'm trying to make a ray-triangle intersection algorithm in p5.js but I have been having some issues relating to locating where and how the vertex/face data is stored for each object. I don't know the specific details related to how vertex and face data in webGL but it would be really useful if they had a data structure similar to this:

shape[face, face, [vertex,vertex,[x,y,z]]]

what I HAVE found is that p5 does have a system for storing all these values but I am not sure what structure they have as they are all separate arrays. 

for example a test sketch in p5 may look something like this 

let pointCounter = 0;

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

function draw() { 
  background(220); 
  push(); 
  translate(0,100,0) 
  box();
  pop();
  for(let i = 0; i < 3; i++){ 
  	push(); 
  	vertices = this._renderer.retainedMode.geometry['box|4|4'].model.vertices
  	points = vertices[(i+pointCounter)%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(){ 
  //for my own reference
  console.log(this._renderer.retainedMode.geometry['box|4|4']) 
}

to get this to work you would need to run it on https://editor.p5js.org/

 

As you can see from this code, there IS data relating to the shapes, but it is not a the for a specific object but for the entire geometry. Although I could make a function to give each specific shape it's own geometry attribute, I think there MUST be a better way to find the data relating to each shape, whether it be through WEBGL buffers (which I have no idea how to access) or through some other method. Does anyone know a way to do this?

 

thanks

 - Sam