Getting efficient lines for drawing BoundingBox

Demos and projects
1

I discovered/created this while I’m optimizing physics visual debug lines. First noticing that both CreateGeasedLines and CreateLineSystem can both take muliple lines, each with multiple vertices.

The brute force method of creating each edge as a line by itself. This results in 8 vertices, 12 lines and 24 indices. Or 24 vertices if not using indexes.

Then I thought maybe it could be done by (maybe?) a single line without repeating any lines. Turns out that is impossible. So how to do it with the fewest lines and line segments?

I had to draw it out and stare at it to come up with this. Start with the drawn box in the lower left. Because each vertex has three lines coming out, you can have at most a line through a vertex, and another line starting or ending at that vertex.

Screenshot_20240929_234844_Samsung Notes
Screenshot_20240929_234844_Samsung Notes700×588 140 KB

There’s a neat little symmetry that each line is made up of three orthogonal line segments. When listing out all the lines and their segments, you end up with four lines each having four vertices. I think that is a minimal solution! I don’t think I’m the first to notice this, but google doesn’t reveal any particularly good solution, and I haven’t seen this elsewhere.

The code below depends on the specific ordering of BoundingBox.vectors.

function getBoundingBoxLines(boundingBox) {
    // CONVERT BoundingInfo TO LINES FOR CreateGreasedLine or CreateLineSystem
    // boundingBox.vectors indexes that draw lines along edges
    // in four lines and 16 vertices (4 vertices are repeated).
    // This is the fewest vertices. 
    const lines = [[0,3,5,1],  [3,6,1,7],  [6,4,0,2],  [5,2,7,4]];
        
    const vec = boundingBox.vectors.map((v)=>v.clone())

    lines.forEach((row)=>row.forEach((i,colnum)=>{row[colnum]=vec[i];}))
    return lines;
}
4 Likes
2

Wow, this is cool :wink:

I’ve created a demo PG to visualize the lines:

One thing, vectorsWorld should be used.

2 Likes