Hello, I want to display the bounding boxes of two meshes in different colors.
I found that by initialising a new BoundingBoxRenderer and giving it a different color, attaching the second Bounding Box to it works.
Is it okay to do that, because the scene has a method to return only one Bounding Box and I will have to take care of my other instance on my onw?
Okay, I cannot get two Bounding Box Renderers to work.
Is there a way to show 2 bounding boxes with different colors?
Unfortunately this is not the goal of the renderer. But why not simply replicating the code for your own need:
I looked at the code for the Bounding Box, but I do not get what you mean to write on my own.
I need the following thing.
I want boundingBox1 to be rendered from boundingBoxRenderer1
boundingBoxRenderer1 = scene.getBoundingBoxRenderer();
boundingBoxRenderer1.frontColor = { r: 1, g: 1, b: 1}
And I want boundingBox2 to be rendered from boundingBoxRenderer2
boundingBoxRenderer2 = new BABYLON.BoundingBoxRenderer();
boundingBoxRenderer2.frontColor = { r: 1, g: 0, b: 0}
Is there a way to have two bounding boxes with different colors.
Nope as I stated before.
What I tried to say is that the code of the boundingBox renderer is pretty straightforward so you should be able to recreate your own.
But nevermind, let me help you more. I will add 2 new observables for the next commit:
boundingBoxRenderer1.onBeforeBoxRenderingObservable
boundingBoxRenderer1.onAfterBoxRenderingObservable
These observable will be called before and after EACH bounding box so you can decide to change the color the way you want
Thank you!
I look forward to trying it.
I will keep you in touch
Hello, thank you for your implementation.
I saw the onBeforeBoxRenderingObservable and onAfterBoxRenderingObservable, but maybe I did not explain my problem clearer.
My idea is to create two bounding boxes on the scene different color.
This control is available to the BoundingBoxRenderer and not to the BoundingBox to which I have access in the observer.
I need a way to create two boundingBoxRenderers and move bounding boxes between them.
The example is that I can have a square and a Sphere which have a green bounding boxes around them:
Square - GreenBB
Sphere - GreenBB
I want to make the square have a different color BB around it while the Sphere remains with the GreenBB like:
Square - RedBB
Sphere - GreenBB
It this possible?
Thank you for your time.
Best wishes,
Michael.
maybe a repro in the playground could help?
Yes, here is a repro in the playground.
https://playground.babylonjs.com/#S3T216
You can see two spheres that have BB around them. But the BBs are the same color, because they belong to one boundingBoxRenderer.
I do not want to draw the bounding box on my own, because we do automatic animations like I have shown you in the example and I really like how the default bounding box of the object stays with the object no matter the position. It’s really convenient.
I know that I can draw the BB on my own and then animate it and give it custom colours, but then I stumble upon bigger problems -> BB size, animation, drawing vertexes on top of other vertexes… it’s a mess.
Hey, we are finally getting somewhere!
So basically the BoundingBoxRenderer is needed right before the rendering of the BoundingBox Vectors to give them colours and properties, right? Maybe I should go on GitHub and check it out.
I made a little more complex example with three objects, metadata and pointerPick. I want to be able to give the colours based on the object’s metadata, but I do not seem to be able to get the object to which the BB is in the observer. Am I missing something obvious?
the observer will receive the boundingbox to draw so from there you can cycle through your meshes to find which one has that boundingbox
something like that: https://playground.babylonjs.com/#S3T216#9
Okay, this is something.
But we have 40k meshes on our scenes and this observable is executed every 4 to 16 ms.
I think that it is not an option for us to filter every time.
A kind word to help you help us - please fully explain your use case when you first post, there is a lot of difference between
and
so there is no wonder the solution given
Agree with @JohnK
You can simply set the Metadata to you bounding ox instead of your mesh or you can rely on fast structures like hash map to get the mesh from the bounding box
Hi!
I am working on a similar task - I have a bunch of meshes in my scene, and depending on the state of the object (maintained externally) like active, inactive, selected, I want to set a different colour to its bounding box.
I tried the using the onBeforeBoxRenderingObservable and onAfterBoxRenderingObservable as mentioned, but in the render method in boundingBoxRenderer.ts, I see that the frontColor and backColor are being accessed before the onBeforeBoxRenderingObservable observers are notified ( Babylon.js/boundingBoxRenderer.ts at ccad5933bd61e72ad67d097f7cece69b5ffa4698 · BabylonJS/Babylon.js · GitHub ). So any changes I make to the colour in the observers have no effect. I have created a playground for this - https://playground.babylonjs.com/#KPSDID#4
Could a change be made so that this.frontColor and this.backColor are directly accessed, and not stored in a constant first in the render method? This would help!
I am not opposed to a PR for it. Basically the PR could expose the color 4 as well ? and the color3 as a getter setter or use a different binding method 
Hi! I’ve created a draft PR - Allows colour changes from bboxrenderer observers by aaloksg · Pull Request #13956 · BabylonJS/Babylon.js · GitHub
I did not understand what was meant by exposing the color 4. But I’ve made the changes that would help with the dynamic colour changes from the observers.
The only issue I can see here is the possible perf decrease due to calling this.backColor.toColor4() and this.frontColor.toColor4() in a for-loop.
Maybe this decrease is negligible. But otherwise, would having frontColor and backColor properties on the BoundingBox object be a viable solution as well?