How to visualize bounding boxes?

Help & Support
1

this code not rendering lines why?

C1.prototype.renderBoundingBox = function(box) {
    var w0 = new pc.Vec3();

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

    var color1 = new pc.Color(1, 0, 0);
    var color2 = new pc.Color(0.5, 0.5, 0.5);
    var color3 = new pc.Color(1, 0, 1);
    var color4 = new pc.Color(1, 1, 0);
    var color5 = new pc.Color(0.5, 0.2, 0);
    var color6 = new pc.Color(0.5, 0.2, 1);
    var color7 = new pc.Color(1, 0, 0.94);


    var tl = box.getMin();
    var br = box.getMax();

    var he = w4.copy(box.halfExtents).scale(2);

    pc.app.renderLine(w0.copy(tl),
                      w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 0, 1))),
                      color1, color2 );
    pc.app.renderLine(w0.copy(tl),
                      w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 0))),
                      color3, color2 );
    pc.app.renderLine(w0.copy(tl),
                      w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(1, 0, 0))),
                      color3, color2 );

    pc.app.renderLine(w0.copy(br),
                      w3.copy(br).add(w1.copy(he).mul(new pc.Vec3(0, 0, -1))),
                      color3, color2 );
    pc.app.renderLine(w0.copy(br),
                      w3.copy(br).add(w1.copy(he).mul(new pc.Vec3(0, -1, 0))),
                      color3, color2 );
    pc.app.renderLine(w0.copy(br),
                      w3.copy(br).add(w1.copy(he).mul(new pc.Vec3(-1, 0, 0))),
                      color3, color2 );

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

    pc.app.renderLine(w0.copy(bl),
                      w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(1, 0, 0))),
                      color1, color2 );
    pc.app.renderLine(w0.copy(bl),
                      w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 0))),
                      color4, color5 );

    bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(1, 0, 1)));
    pc.app.renderLine(w0.copy(bl),
                      w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(0, 0, -1))),
                      color1, color6 );
    bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 0, 1)));
    pc.app.renderLine(w0.copy(bl),
                      w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 0))),
                      color1, color6 );
    bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 1)));
    pc.app.renderLine(w0.copy(bl),
                      w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(0, 0, -1))),
                      color1, color6 );
    bl = w3.copy(tl).add(w1.copy(he).mul(new pc.Vec3(0, 1, 0)));
    pc.app.renderLine(w0.copy(bl),
                      w3.copy(bl).add(w1.copy(he).mul(new pc.Vec3(1, 0, 0))),
                      color7, color6 );

};
2

Try replacing this:

pc.app.renderLine

for this:

this.app.renderLine
3

Hi @grzesiekmq,

You will have to call the pc.app.renderLine per frame, in your update loop for it to render.

1 Like