Highlighter ignores the culled fragment map entries

[SrujanPonnur1]

Highlighter ignores the culled fragment map entries

[MadsHolten]

This is awesome, thanks. I am aware about the performance issues, but it will not be a problem with the particular case where I do for instance only want to load the furnishing elements. That's quite a common case for me. I might also want to load columns from model A and windows from model B together. In this case I would probably also build the JSON config on the fly so the streamer would never try to request anything but the elements in scope.

I will work on the implementation and give you a heads up if I discover something unexpected. Thanks a million for the swift response, that's much appreciated!

[MadsHolten]

Works pretty well now, I would say! This is an example of how I use it for spatial decomposition of the model 🤩

Screen.Recording.2024-08-02.at.13.29.33.mov

[agviegas]

Hey, this is already fixed from @thatopen/[email protected].

Before reading the answer, keep in mind that the goal of streaming is to only load the geometries that the user sees. If you are building an app where the user highlights all items at all times, you will hit performance issues for bigger models and more modest machines, simply because that's the computational cost of loading that amount of geometry at the same time. This doesn't mean it won't work, but it's something to keep in mind.

I'm using the streaming tutorial code as starting point. There are 2 possible use cases:

Case 1

You want to highlight, stream the highlighted elements and show them to the user. For example: show the user all the furnishing elements of a project. This can now be done like this:

  const model = await loader.load(geometryData, true, propertiesData);
  console.log(model);

  const highlighter = components.get(OBCF.Highlighter);
  const classifier = components.get(OBC.Classifier);
  classifier.byEntity(model);

  const furnitures = classifier.find({ entities: ["IFCFURNISHINGELEMENT"] });
  highlighter.add("example", new THREE.Color("red"));
  highlighter.config.world = world;

  window.addEventListener("keydown", async (event) => {
    if (event.code === "KeyP") {
      const furnituresIDs = Object.keys(furnitures);
      await loader.setStatic(furnituresIDs, true, false);
      await highlighter.highlightByID("example", furnitures, false, true);
    }
  });
}

When using setStatic, you are forcing the given items to be streamed. They will be kept in memory until the model is disposed or until they are removed from the static using false as the second setStatic parameter. The third parameter of setStatic determines whether the culler should be applied to these elements or not. I'm using false to ensure the elements are kept visible. When you are done highlighting the items, remember to set them static to false or the geometry will be kept in memory. The result:

2024-08-01.18-32-21.mp4

Case 2

You want to highlight the currently streamed elements, and highlight the ones that get streamed as they are discovered. For example: apply a red filter to all the furnishing elements of a project, but don't necesarily show them. This can now be done like this:

  const model = await loader.load(geometryData, true, propertiesData);
  console.log(model);

  const highlighter = components.get(OBCF.Highlighter);
  const classifier = components.get(OBC.Classifier);
  classifier.byEntity(model);

  const furnitures = classifier.find({ entities: ["IFCFURNISHINGELEMENT"] });
  highlighter.add("example", new THREE.Color("red"));
  highlighter.config.world = world;

  window.addEventListener("keydown", async (event) => {
    if (event.code === "KeyP") {
      await highlighter.highlightByID("example", furnitures, false, true);
    }
  });

  loader.onFragmentsLoaded.add((frags) => {
    highlighter.updateFragments(frags);
  });
}

As you see, in this case the highlighting style is applied to fragments only when they are streamed. This is the result:

2024-08-01.18-07-54.mp4

I hope this helps. Let me know how it goes!