OBCF.Highlighter just recolor, but not highlight

[VictorTrumpel]

Describe the bug 📝

Why does the highlighter not highlight, but simply recolor?
If I highlight a chair, it won't be visible throw the walls the way it worked before.

Example from docks:
https://thatopen.github.io/engine_components/examples/Highlighter/
https://docs.thatopen.com/Tutorials/Components/Front/Highlighter

How to make it so that the backlight not only recolors, but also shines through?

Reproduction ▶️

https://thatopen.github.io/engine_components/examples/Highlighter/

Steps to reproduce 🔢

https://thatopen.github.io/engine_components/examples/Highlighter/

System Info 💻

https://thatopen.github.io/engine_components/examples/Highlighter/

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

[agviegas]

You are right! We temporarily removed the highlight feature for the new refactor, as the way the highlight works has changed drastically. This is not a but. But don't worry, we'll put it back the next milestone. I'll remove the bug flag and add a feature flag instead

[vishal-eartheon]

Hi @agviegas any update on this issue/feature? I noticed this as well in my recent migration to the new refactor.

[agviegas]

I'll do it asap. We have few hands. Hopefully these weeks, I'll post any updates here

[vishal-eartheon]

Thanks for the update @agviegas

Shall I take it up and create a pull request once done? I would like to contribute if possible.

[VictorTrumpel]

For temporary solution I use this code. Maybe It will helpful for somebody

const highlightMats = {
  default: new MeshBasicMaterial({
    color: '#674db3',
    depthTest: false,
    opacity: 0.8,
    transparent: true,
  }),
};

const highlightFragment = (fragmentMap: FragmentIdMap) => {
  const components = new Components();
  const fragmentsManager = components.get(OBC.FragmentsManager);
  for (const fragID in fragmentMap) {
    const fragment = fragmentsManager.list.get(fragID);
    if (!fragment) continue;
    fragment.mesh.material = [highlightMats.default];
  }
};

It looks like this

[vishal-eartheon]

Yeah, this workaround is good.

But, one extra thing it probably needs is to make a copy of the mesh and highlight the copy so that the original mesh retains it materials once the highlight is disabled. The copy can be deleted on highlight removal.

[agviegas]

I'm actually currently implementing Fragment cloning. Once I solve that, implementing this should be a piece of cake.

[agviegas]

Will be available from @thatopen/components-front@2.1.18 (I hope to publish later today). Now there's an outline component that allows to add outlines to fragments and can be used with the highlighter easily. With this code:

const outliner = components.get(OBCF.Outliner);
outliner.world = world;
outliner.enabled = true;

outliner.create(
  "example",
  new THREE.MeshBasicMaterial({
    color: 0xbcf124,
    transparent: true,
    opacity: 0.5,
  }),
);

highlighter.events.select.onHighlight.add((fragIdMap) => {
  outliner.clear("example");
  outliner.add("example", fragIdMap);
});

This is the result:

2024-08-06.13-39-54.mp4

The highlighter tutorial will also be updated with this.