Comments (3)
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!
from components.
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
from components.
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!
from components.
Related Issues (20)
- Allow to define selectable/hoverable categories in the highlighter HOT 5
- 2D Plans problem HOT 8
- Issue using "@thatopen/components" when using watchify HOT 3
- ClipEdges is not working anymore HOT 2
- Config optional to unloadLostGeometries and toHide when using culler for IfcStreamer. HOT 4
- IfcStreamer load multiple json files
- Camera controls broken if the zoom distance is too high HOT 1
- Multiple Building Not in Center HOT 3
- Fragment loading fails with large IFC file HOT 5
- Consistency in process and language in the documentation
- Highlighter - Improving events
- Display IFCGRID in 3D view HOT 3
- Highlighter - AutoToggle is active during function highlighter.highlightByID HOT 2
- Each CullerRenderer creates a new WebGL context HOT 7
- Possible memory leak when disposing HOT 1
- some IFC mesh elements not being properly processed with ifcLoader HOT 10
- Static Errors class to throw and document all errors in the library
- Same model twice breaks the scene (with culler in place) HOT 2
- Investigate "Please ignore" messages in tree in umdasch 700MB model
- I generated tile json files using IfcGeometriyTiler, but I don't know how to use these files HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from components.