# First Draft

## Introduction

This is the first draft of this page. Things will update on regular basis.&#x20;

### **Stuff to investigate**

**TODO**

* [x] What causes performance issues?
  * [x] Triangels?
  * [x] Materials?
  * [x] Too many requests?
* [ ] Difference between my MacBook and dedicated GPU?
  * [ ] Intel Iris Plus Graphics 655
  * [ ] RTX 2080 Ti
* [x] Can we change Three to 30 fps?
* [x] Can we swap models?
  * [ ] A low-poly?
  * [x] A merged?
  * [x] A skeleton?
* [x] Can we update three on camera moves only?

### Roadmap

* Investigate all approaches/ideas
* Determine which is most suitable
* Implement that solution in the [example](https://github.com/andrewisen/IFC.js-web-worker-example)&#x20;

This will probably take two weeks to complete.

## Chrome Dev Tools





![https://twitter.com/addyosmani/status/1281492172861136896](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSWliToMp94r6qDicrZ%2F-MSWnbiHNBs8_uVXkIdJ%2Fimage.png?alt=media\&token=1c6f69a0-2f2e-40af-9abd-409187a93653)

## Hiding Geometry

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

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSWliToMp94r6qDicrZ%2F-MSWnyqQKfLhvEnXiy7C%2Fimage.png?alt=media\&token=62a0289d-82b0-487b-8b1b-5a49da91617c)

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

![Only a skeleton is visible during a camera move.](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSWo3ch9ecJBcggj9RJ%2F-MSWp1IpaolNbNtAG2h8%2Fimage.png?alt=media\&token=a287faec-5081-47c6-a3a6-c0682d9e92f7)

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

```javascript
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](https://threejs.org/docs/#api/en/materials/MeshBasicMaterial) doesn't improve performance significantly.&#x20;

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSWpEkHD1cYAUBXKiJc%2F-MSWtYe_5wdPY8LrlfFt%2Fimage.png?alt=media\&token=a0de237e-50e7-4739-9855-96611cb3a667)

No improvments with wireframes.

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSWtfk0Y6npIEn852w8%2F-MSWufQyQXKG1OVov6Pb%2Fimage.png?alt=media\&token=e39d2d67-13fe-46ce-9926-9f9cc4860bfd)

## 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](https://threejsfundamentals.org/threejs/lessons/threejs-rendering-on-demand.html)

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSXDxy8L9SpVBGPMzqU%2F-MSXE4Gf5UjQ3-HpJTYi%2Fimage.png?alt=media\&token=3a01c901-4e4c-40ac-beb2-aaba12af1d9a)

## Merge Geometries

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

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSXEPtH2WWsFR5ChJR3%2F-MSXxCv2TUAxDd5brD1P%2Fimage.png?alt=media\&token=ac69b8a4-c2cb-4a44-932c-9a8e25b595bb)

### Some hours later

* Convert everything to bufferGeometry
* Apply transformation matrix
* Update matrix

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSYFZnCxuN0qQQoCaXo%2F-MSYFccq7MEHm77IjTTo%2Fimage.png?alt=media\&token=6cb40582-cdeb-4ed7-98a0-0b802c6c7cc7)

A single mesh seems to work fine. Very few frames dropped.&#x20;

{% hint style="warning" %}
Some bugs appeared (see top right corner)
{% endhint %}

### Merge Geometries Based on Material

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

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSayuTbArRHYIMXcN1u%2F-MSb4WQcr9tyQ8FJdJwS%2Fimage.png?alt=media\&token=45815e29-eb0a-452b-aa89-263aef0f3b29)

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

Some stuff to fix:

* [x] Merge Edges
* [ ] Add Boundary Boxes (and make them clickable)
* [x] Lunch

### Edges from Hell

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSbIFfpVOdVwT19d6xn%2F-MSbVPoI5FkfS2z5g7_r%2Fimage.png?alt=media\&token=f0a54180-ffe2-4021-8e84-4b620349c366)

Something is off with the transformation matrix.&#x20;

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSbgPs-vz2jXRxFXURl%2F-MSblGIc65HkqTTw0LWO%2Fimage.png?alt=media\&token=d87ca15e-1674-4092-9538-3a1269987b9d)

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

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSblRNxmpHdO4Px_KTh%2F-MSbqPq0QuyGb2gfAGLy%2Fimage.png?alt=media\&token=e821e1c7-fdf2-42a1-a488-00e8b31dd8e0)

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

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSblRNxmpHdO4Px_KTh%2F-MSbqg3x_8z4aLj80n_F%2Fimage.png?alt=media\&token=2363dc9f-ff50-473b-9fe7-bed4fde0329b)

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

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSbzFodM-C66_kzwTS7%2F-MSbzJ-rRhI9-51GjrY9%2Fimage.png?alt=media\&token=0aa0398c-1174-4daa-a4f5-3f9b5feccc9c)

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.

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSbzOwZOpl2xo5oui-D%2F-MSc0V0txdn7Quakkuvp%2Fimage.png?alt=media\&token=695d5d3a-f056-4748-9bb2-4f7be4742b4f)

### Differences

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

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSc3i8tOWtsrt1sKI2M%2F-MSc4mpE6hdSd4Xa8C_r%2Fimage.png?alt=media\&token=fa4af6cd-2d57-4e99-abeb-3eb6e13788fb)

There should be some more. Anyways, have some screenshots.&#x20;

{% tabs %}
{% tab title="Original" %}
![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSc0z1hAdjEeXd2TvkK%2F-MSc24bfnboGUjHNED3S%2Fimage.png?alt=media\&token=94693318-320e-4e4a-adbf-81d8a23ac642)
{% endtab %}

{% tab title="Merged" %}
![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSc0z1hAdjEeXd2TvkK%2F-MSc21FnX5IZszUQevKY%2Fimage.png?alt=media\&token=b9464ba7-a494-4b99-ad32-a44a343c84f0)
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Original" %}
![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSc0z1hAdjEeXd2TvkK%2F-MSc2zs1oukK_4rb1sKa%2Fimage.png?alt=media\&token=a22ed95e-b18f-4baa-bbdb-040ac0f4c672)
{% endtab %}

{% tab title="Merged" %}
![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSc0z1hAdjEeXd2TvkK%2F-MSc32uKqxZnzeAgbAb0%2Fimage.png?alt=media\&token=efcec9ea-aaf0-4a1b-94a6-faf601d217de)
{% endtab %}
{% endtabs %}



{% tabs %}
{% tab title="Original" %}
![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSc0z1hAdjEeXd2TvkK%2F-MSc3Nh53zn8StcXMpfn%2Fimage.png?alt=media\&token=f67b5294-510b-4e33-8818-2aeaf596ec94)
{% endtab %}

{% tab title="Merged" %}
![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSc0z1hAdjEeXd2TvkK%2F-MSc3SGbi4Evai2zSIJt%2Fimage.png?alt=media\&token=9b2c4ecc-e915-4688-bd5f-1f61b8f5d41e)
{% endtab %}
{% endtabs %}

### Fixing Materials

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MSc52C3VK4UEnAYaZ2g%2F-MSc7rWhYKdmvBacPniD%2Fimage.png?alt=media\&token=ff6dccfe-1807-45d6-9430-adf048987736)

![](https://1338860669-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSCCfuWwSmlrlrlRZ9a%2F-MScFwSJ7nadzZ8kEha7%2F-MScHYzSVP9zG_x-nUaW%2Fimage.png?alt=media\&token=0a6c5849-f8a1-4e57-81c5-a51c6aea67e9)

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/](https://google.github.io/draco/)

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

## Use GLTF format

TODO
