Visualizing bounding boxes

Help & Support
1

I’m got a number of bounding box shapes made like this:

var aabb_bbox = new pc.BoundingBox(top_node.getPosition().clone(), top_node.getLocalScale().clone().scale(0.5));

However they appear to be much larger than anticipated.
(my objects are all scaled)

  1. Is there a better way to make the bbox using the actual entity (its a model asset) ?

  2. What’s the best way to build a box that shows how big the bbox is so i can visualize it ?

2

I used a separate box entity in WebVR Lab and just turned off the rendering component when I was done.

Statue Button is the entity with all the logic and effectively the root of the object. It’s always scale 1,1,1 as it’s ‘real size’. Model represents the visuals (the mesh etc) and is scaled to size. Shape is the bounding shape and scaled to size.

https://playcanvas.com/editor/scene/484674

3

Ahh yes that’s a good idea. alas all my models are procedurally generated so no help in the editor for me.

I think I’ve found a solution to the size issue.
Instead of:

var aabbShape = new pc.BoundingBox(top_node.getPosition().clone(), top_node.getLocalScale().clone().scale(0.5));

this works better (but not really sure why):

var aabbShape = new pc.BoundingBox();
aabbShape.copy(top_node.model.meshInstances[0].aabb);

(no luck yet on the visualizing - doesn’t look like you can tell the box component to be a specific size. maybe you have to use scale instead.)

4

Potentially the root position of the model is not in the centre? I would try creating this in the editor to get the sizes and position that you need?

5

Render a bounding box:

var w1 = new pc.Vec3();
var w2 = new pc.Vec3();
var w3 = new pc.Vec3();
var w4 = new pc.Vec3();

function renderBoundingBox(box, mode) {
    var tl = box.getMin();
    var br = box.getMax();

    var he = w4.copy(box.halfExtents).scale(2);
  
    app.renderLine(w0.copy(tl),
        w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 0, 1))),
        color('#ff0000'), color('#666666'), mode);
    app.renderLine(w0.copy(tl),
        w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 0))),
        color('#ff00ff'), color('#666666'), mode);
    app.renderLine(w0.copy(tl),
        w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(1, 0, 0))),
        color('#ff00ff'), color('#666666'), mode);

    app.renderLine(w0.copy(br),
        w3.copy(br).add(w1.copy(he).mul(new pc.Vec3(0, 0, -1))),
        color('#ff00ff'), color('#666666'), mode);
    app.renderLine(w0.copy(br),
        w3.copy(br).add(w1.copy(he).mul(new pc.Vec3(0, -1, 0))),
        color('#ff00ff'), color('#666666'), mode);
    app.renderLine(w0.copy(br),
        w3.copy(br).add(w1.copy(he).mul(new pc.Vec3(-1, 0, 0))),
        color('#ff00ff'), color('#666666'), mode);

    var bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 0, 1)));

    app.renderLine(w0.copy(bl),
        w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(1, 0, 0))),
        color('#ff0000'), color('#666666'), mode);
    app.renderLine(w0.copy(bl),
        w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 0))),
        color('#ffff00'), color('#663300'), mode);

    bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(1, 0, 1)));
    app.renderLine(w0.copy(bl),
        w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(0, 0, -1))),
        color('#ff0000'), color('#6633ff'), mode);
    bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 0, 1)));
    app.renderLine(w0.copy(bl),
        w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 0))),
        color('#ff0000'), color('#6633ff'), mode);
    bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 1)));
    app.renderLine(w0.copy(bl),
        w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(0, 0, -1))),
        color('#ff0000'), color('#6633ff'), mode);
    bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 0)));
    app.renderLine(w0.copy(bl),
        w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(1, 0, 0))),
        color('#ff00f0'), color('#6633ff'), mode);

}
3 Likes
6

You can change the mode in the code to pc.LINEBATCH_OVERLAY if you don’t want the ZBuffer getting in your way

3 Likes