# First Draft ## Introduction This is the first draft of this page. Things will update on regular basis. ### **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) 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. ![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. ![](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://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. {% 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. ![](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. {% 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: Also, figure out if there is a way to do a dirty optimization. ## Use GLTF format TODO