Improve culler behavior

shahbaziparisa commented 4 days ago

Describe the bug 📝

Hi In previous versions, before new documentation, I could load large files of 200 MB, and worked correctly. But now the same files don't work smoothly. My browser is hanging. Rotating the model takes a long time. I asked other developers too, they have the same problem. My customer told me after fixing this bug we would pay for the project I had spent 2 months on.

This is one of ifc files: https://drive.google.com/file/d/12u25nWaniEVxg4jh85_Gm8yzLoyM3Njr/view?usp=sharing

look at speed in this video:

https://github.com/ThatOpen/engine_components/assets/70272544/daf20ec1-f653-4566-acff-01057397666a

Reproduction ▶️

No response

Steps to reproduce 🔢

I use npm start React.js app

System Info 💻

Macbook pro m2

Used Package Manager 📦

npm "@thatopen/components": "^2.0.20", "@thatopen/components-front": "^2.0.19", "@thatopen/fragments": "^2.0.7", "@thatopen/ui": "^2.0.8", "@thatopen/ui-obc": "^2.0.12",

Error Trace/Logs 📃

.

Validations ✅

[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A join our Community.
[X] The provided reproduction is a minimal reproducible example of the bug.

agviegas commented 4 days ago

The reason you are experiencing performance issues is that you are not using the culler. As explained in the docs, the culler is needed to improve the performance of bigger scenes.

When I load the IFC without using the culler, it looks like in your video:

https://github.com/ThatOpen/engine_components/assets/56475338/f98f01d8-0c7d-4797-a228-a62912c4705f

I just used exactly the same code as in the IfcLoader tutorial, but changed the loading function to add the loaded fragments to the culler:

const cullers = components.get(OBC.Cullers);
const culler = cullers.create(world);
culler.threshold = 10;

async function loadIfc() {
  const file = await fetch(
    "../../../../../resources/parisa.ifc",
  );
  const data = await file.arrayBuffer();
  const buffer = new Uint8Array(data);
  const model = await fragmentIfcLoader.load(buffer);
  model.name = "example";
  world.scene.three.add(model);

  for (const child of model.children) {
    if (child instanceof THREE.InstancedMesh) {
      culler.add(child);
    }
  }

  culler.needsUpdate = true;

  world.camera.controls.addEventListener("sleep", () => {
    culler.needsUpdate = true;
  });
}

This is the result:

https://github.com/ThatOpen/engine_components/assets/56475338/f4521ef4-2d3f-492e-8816-eeaf823998de

shahbaziparisa commented 3 days ago

The reason you are experiencing performance issues is that you are not using the culler. As explained in the docs, the culler is needed to improve the performance of bigger scenes.

When I load the IFC without using the culler, it looks like in your video:

2024-07-01.10-49-40.mp4 I just used exactly the same code as in the IfcLoader tutorial, but changed the loading function to add the loaded fragments to the culler:
const cullers = components.get(OBC.Cullers);
const culler = cullers.create(world);
culler.threshold = 10;

async function loadIfc() {
  const file = await fetch(
    "../../../../../resources/parisa.ifc",
  );
  const data = await file.arrayBuffer();
  const buffer = new Uint8Array(data);
  const model = await fragmentIfcLoader.load(buffer);
  model.name = "example";
  world.scene.three.add(model);

  for (const child of model.children) {
    if (child instanceof THREE.InstancedMesh) {
      culler.add(child);
    }
  }

  culler.needsUpdate = true;

  world.camera.controls.addEventListener("sleep", () => {
    culler.needsUpdate = true;
  });
}
This is the result:

2024-07-01.10-41-02.mp4

The reason you are experiencing performance issues is that you are not using the culler. As explained in the docs, the culler is needed to improve the performance of bigger scenes.

When I load the IFC without using the culler, it looks like in your video:

2024-07-01.10-49-40.mp4 I just used exactly the same code as in the IfcLoader tutorial, but changed the loading function to add the loaded fragments to the culler:
const cullers = components.get(OBC.Cullers);
const culler = cullers.create(world);
culler.threshold = 10;

async function loadIfc() {
  const file = await fetch(
    "../../../../../resources/parisa.ifc",
  );
  const data = await file.arrayBuffer();
  const buffer = new Uint8Array(data);
  const model = await fragmentIfcLoader.load(buffer);
  model.name = "example";
  world.scene.three.add(model);

  for (const child of model.children) {
    if (child instanceof THREE.InstancedMesh) {
      culler.add(child);
    }
  }

  culler.needsUpdate = true;

  world.camera.controls.addEventListener("sleep", () => {
    culler.needsUpdate = true;
  });
}
This is the result:

2024-07-01.10-41-02.mp4

Please check this model https://solidcloud.parisashahbazi.com/orange.ifc

load parts with your code by culler takes a lot of time. I need sth like in the first part of the video like: https://3dviewer.net/. Is it possible to make it faster for good appearance by culling?

https://github.com/ThatOpen/engine_components/assets/70272544/4f7ccaca-8d74-4dcc-ac90-6e9abd5046fd

agviegas commented 3 days ago

@shahbaziparisa I can take a look to improve it. That said, keep in mind that we are a small team and we won't be able to take a look at it until the end of the week.

I understand your situation at work, but we are making this code for free and we can't go faster. Insisting more in all our networks (LinkedIn, That Open People, etc) won't make us go faster 😅 If you are really in a hurry, you can also look for a solution and contribute with a pull request. I'll get back to you when I have news!

For now, I'm reopening this issue.

shahbaziparisa commented 3 days ago

@shahbaziparisa I can take a look to improve it. That said, keep in mind that we are a small team and we won't be able to take a look at it until the end of the week.

I understand your situation at work, but we are making this code for free and we can't go faster. Insisting more in all our networks (LinkedIn, That Open People, etc) won't make us go faster 😅 If you are really in a hurry, you can also look for a solution and contribute with a pull request. I'll get back to you when I have news!

For now, I'm reopening this issue.

Thanks a million. Sorry for my questions

ThatOpen / engine_components