opensourceBIM
Better effect for showing outlines of selected objects
Instead of showing bounding boxes, highlight objects by rendering them with glowing outlines.
An ideal effect would be like this Unreal Engine example.
This very simple THREE.js example works by rendering each highlighted object a second time, scaled up slightly and glowing, with only back faces drawn. Z-rejection causes the objects' front faces to always render over the back faces, making only the outline appear highlighted.
A better technique is be to render highlighted objects to a stencil buffer, then render a second, larger and glowing instance of those objects while only rendering where the stencil buffer is empty. The glowing objects' may be made larger by either rendering them as thick wireframe or by scaling their vertex positions along their normals in the vertex shader.
If we render the glowing objects last, with Z-testing disabled, then we'll have an X-ray effect where we'll always be able to see the glowing outlines of selected objects through any other objects that lie in front of them.
Currently trying out a new highlight effect in commit https://github.com/opensourceBIM/BIMsurfer/commit/f03a951acd1c4d4b1dc31b01236cb8c09dab7d74
For each highlighted object, I create a another object that has the same geometry and modelling transform, but rendered after all other objects, with depth testing disabled. This has the effect of layering a glowing ghost version of each highlighted entity over the model.
In the screenshot below, some tiles on the roof are selected, which due to this technique, can be seen through the model when looking underneath.
I don't think we'll find a perfect highlighting solution - always going to be imperfect for certain object colours and structures etc.
Amazing, I like that. The black outline not so much though. Same for the viewFit function, the visible outline during the animation doesn't look great in my opinion. Any reason to keep it?
For the outline, what about giving an option for the user to choose the type of effects to show when selecting objects? Something like:
bimSurfer.setOutlineEffects(["boundingBox", "highlight"])
We can also add options like the highlight colour:
bimSurfer.setOutlineEffects([ "boundingBox", { type: "highlight", options: { highlightColor: [1.0, 1.0, 0] } } ])
The 3 modes suggested in #162, #163 and #164 would be other types of outline effects, allowing the user to use multiple effects in conjunction if they want.
@xeolabs If you agree with this suggestion I am happy to make the change and create a pull request.
In principle I also think this is a good way forward, but indeed there still are some points for improvement.
- The outline is a bit thick and in your face for me. Can it be just 1px, a bit transparent, a bit gray, or whatever something to make it a bit more subtle?
- Can the bbox be rendered for all selected items individually?
- Not that big a fan of that colour yellow. Is there a way we can render the original object colour, but just a bit brighter or something?
