Jump to content

Locating shape data in WEBGL (and p5.js)

Samuel Cobb

Recommended Posts

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() { 
  for(let i = 0; i < 3; i++){ 
  	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);

function keyPressed(){ 
  //for my own reference

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?



 - Sam

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...