How can we set the width of the BoundingBox lines for BoundingBoxRendered?

Questions
1

Hi,
The BoundingBoxRenderer can have front and back color.

There is no API method to set the “width” of the lines. I would like to set the width as users are not seeing the bounding box. Is there a way to do this?

ps: what should be the tag for such a question on forum.babylonjs.com

1 Like
2

Unfortunately the bounding box renderer can only render simple lines. It would need to render triangles to be able to have thick edges.

3

Can I implement my own bounding box rendered and give some width of the lines?

1 Like
4

Sure, but you will need to draw triangles instead of lines, I don’t think WebGL allow lines to have a width.

You can take example on how the bounding box renderer is doing it: Babylon.js/boundingBoxRenderer.ts at master · BabylonJS/Babylon.js · GitHub

The edge renderer is using a shader that can render thick lines using triangles:

1 Like
5

Yes. Thanks. I will draw the rectangles. My question is if I could somehow replace the BoundingBoxRenderer with my implementation of BoundingBoxRenderer that draws rectangles?

I saw scene.getBoundingBoxRenderer() but no scene.setBoundingBoxRenderer()

1 Like
6

You can write your own getBoundingBoxRenderer as it is where the renderer is created:

Scene.prototype.getBoundingBoxRenderer = function() {
    if (!this._boundingBoxRenderer) {
        this._boundingBoxRenderer = new MyBoundingBoxRenderer(this);
    }
    return this._boundingBoxRenderer;
};
7

Thanks. I was just looking at it.
I guess that I could just extends BoundingBoxRenderer.

Thanks again. Will think about how to do it.

8

I think this is what I will try - sharing to help others if in similar needs.

I will try to implement my own BoundingBoxRendered (Babylon.js/boundingBoxRenderer.ts at master · BabylonJS/Babylon.js · GitHub) but instead of the colorShader that is used by default I will use a lineShader that knows how to draw lines with width.

Very close to what @Evgeni_Popov has said, but just formulated with my own worlds.

Let’s see how it goes.

9

I could not do it in a couple of hours, but I leave my work for others to continue if they need - https://playground.babylonjs.com/#4F33I3#34

My idea was to extend BoundingBoxRenderer and to include the code of EdgesRendered in it. In this way I could render edges with width.
Current I am first calling super on BoundingBoxRenderer and then do my own rendering on top of it. A nice solution would probably skip the original render.
Also _generateEdgesLines is called way to many times. Generally there is still work to be done.

1 Like