First Draft

Introduction

This is the first draft of this page. Things will update on regular basis.

Stuff to investigate

TODO

• What causes performance issues?

  • Triangels?

  • Materials?

  • Too many requests?

• Difference between my MacBook and dedicated GPU?

  • Intel Iris Plus Graphics 655

  • RTX 2080 Ti

• Can we change Three to 30 fps?

• Can we swap models?

  • A low-poly?

  • A merged?

  • A skeleton?

• Can we update three on camera moves only?

Roadmap

• Investigate all approaches/ideas

• Determine which is most suitable

• Implement that solution in the example

This will probably take two weeks to complete.

Chrome Dev Tools

https://twitter.com/addyosmani/status/1281492172861136896

Hiding Geometry

Hiding everything during a camera move will result in a smooth performance... duh.

Hiding most of the geometry will also result in a smooth performance. However, the user experience might suffer.

Only a skeleton is visible during a camera move.

This simple snippet should split each object into two groups - either a visible or hidden group.

structured.MainObject.children.forEach((child) => {
    const data = child._Data;
    if (data === undefined) return;
    const ifcClass = data._IfcClass;
    if (hiddenObjects.indexOf(ifcClass) === -1) {
      visibleChildren = [...visibleChildren, child];
    } else {
      hiddenChildren = [...hiddenChildren, child];
    }
  });

N.B. Array push is faster.

Materials & Wireframes

Using basic materials doesn't improve performance significantly.

No improvments with wireframes.

Animate on Demand

Animating on demand increase the overall user experience. No frames are dropped - because they are not being rendered. See: https://threejsfundamentals.org/threejs/lessons/threejs-rendering-on-demand.html

Merge Geometries

I have built a dirty merge function.... it doens't work. I will experiment some more.

Some hours later

• Convert everything to bufferGeometry

• Apply transformation matrix

• Update matrix

A single mesh seems to work fine. Very few frames dropped.

Some bugs appeared (see top right corner)

Merge Geometries Based on Material

I split the geometries based on material UUID. This seems to work fine.

Perhaps its better to do this while building the geomtry. This approach results in an extra loop - which is unwanted.

Some stuff to fix:

• Merge Edges

• Add Boundary Boxes (and make them clickable)

• Lunch

Edges from Hell

Something is off with the transformation matrix.

I fixed it... but somethings is still off. Too many edges (see above)

Somethings off with my recursive function (see below). It only works on some objects.

Mm... probably a parent reference that's off. I will rewrite the recursive function...

Edges should work fine now. I must do some more testing, my recursive function might have some errors...

Results so Far

From ~5800* objects down to 190 objects.

Excluding children. E.g. A mesh migh consists of multiple objects.

Differences

I belive some information are missing/wrong. It seems the edges have the wrong material.

There should be some more. Anyways, have some screenshots.

Original

Merged

Original

Merged

Original

Merged

Fixing Materials

It seems that great-grandchildren should not inherit materials from parent.

Computation Time

It takes roughly 800ms to group and merge the geometries. Not great, not terrible.

Compress Geometry

TODO

See: https://google.github.io/draco/

Also, figure out if there is a way to do a dirty optimization.

Use GLTF format

TODO