@crystaldesign/real-time-viewer 25.3.0-beta.4 → 25.3.0-beta.43

package/build/esm/index.js

@@ -1,6 +1,7 @@
 import { useRef, useEffect, memo } from 'react';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { Constants, HighlightLayer, Color4 as Color4$1 } from '@babylonjs/core';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
@@ -14,7 +15,6 @@ import { ExecuteCodeAction } from '@babylonjs/core/Actions/directActions';
 import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
 import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
 import '@babylonjs/core/Rendering/edgesRenderer';
-import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
 import { GLTF2Export } from '@babylonjs/serializers';
 import '@babylonjs/core/Helpers/sceneHelpers';
 import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
@@ -33,12 +33,10 @@ import { Rectangle } from '@babylonjs/gui/2D/controls/rectangle';
 import { TextBlock } from '@babylonjs/gui/2D/controls/textBlock';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { Axis } from '@babylonjs/core/Maths/math.axis';
-import { HighlightLayer } from '@babylonjs/core/Layers/';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Texture } from '@babylonjs/core/Materials/Textures/texture';
-import { Constants } from '@babylonjs/core/Engines/constants';
 import { Matrix as Matrix$1, Vector3 as Vector3$1 } from '@babylonjs/core/Maths/math';
-import { Engine } from '@babylonjs/core/Engines/engine';
+import { EngineFactory } from '@babylonjs/core/Engines/engineFactory';
 import { Scene } from '@babylonjs/core/scene';
 import { DracoCompression } from '@babylonjs/core/Meshes/Compression/dracoCompression';
 import { SceneLoader } from '@babylonjs/core/Loading/sceneLoader';
@@ -108,7 +106,9 @@ function GetCameraControls(camera) {
     };
     (_sceneStore$updateCam = sceneStore.updateCameraInformation) === null || _sceneStore$updateCam === void 0 || _sceneStore$updateCam.call(sceneStore, cam);
     uistore.requestNewOverlayImage(cam, sceneStore.focusedElement, sceneStore.targetCameraPosition);
-    if (stopRender) sceneStore.doRenderControlLoop = false;
+    if (stopRender) {
+      sceneStore.doRenderControlLoop = false;
+    }
   }
   function moveTarget(deltaX, deltaY) {
     sceneStore.isControlledViewpoint = false;
@@ -179,12 +179,13 @@ function GetCameraControls(camera) {
       sceneStore.targetCameraPosition = new Vector3(x, y, z);
     }
     rotateUniversalCamera(deltaX, deltaY);
+    if (!sceneStore.doRenderControlLoop) sceneStore.runRenderLoopIndefinitely();
     sceneStore.doRenderControlLoop = true;
   }
   function onRotateMouse(event) {
     if (previousTouch != undefined) return;
-    var deltaX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
-    var deltaY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+    var deltaX = event.movementX || 0;
+    var deltaY = event.movementY || 0;
     onRotate(deltaX, deltaY);
   }
   function onMouseDown(ev) {
@@ -204,9 +205,10 @@ function GetCameraControls(camera) {
     element === null || element === void 0 || element.removeEventListener('pointermove', onMouseMoveTarget, false);
   }
   function onMouseMoveTarget(event) {
-    var deltaX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
-    var deltaY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+    var deltaX = event.movementX || 0;
+    var deltaY = event.movementY || 0;
     moveTarget(deltaX * 0.002, deltaY * 0.002);
+    if (!sceneStore.doRenderControlLoop) sceneStore.runRenderLoopIndefinitely();
     sceneStore.doRenderControlLoop = true;
   }
   var onTouchStart = function onTouchStart(ev) {
@@ -232,6 +234,7 @@ function GetCameraControls(camera) {
       var dist = Math.hypot(ev.touches[0].pageX - ev.touches[1].pageX, ev.touches[0].pageY - ev.touches[1].pageY);
       var distChange = dist - initDistance;
       moveCameraAwayFromTarget(-distChange * 0.01);
+      if (!sceneStore.doRenderControlLoop) sceneStore.runRenderLoopIndefinitely();
       sceneStore.doRenderControlLoop = true;
       initDistance = dist;
     }
@@ -246,6 +249,7 @@ function GetCameraControls(camera) {
     }
     var value = ev.deltaY > 0 ? add : -add;
     moveCameraAwayFromTarget(value * 2);
+    if (!sceneStore.doRenderControlLoop) sceneStore.runRenderLoopIndefinitely();
     sceneStore.doRenderControlLoop = true;
   }
   function onDoubleClick() {}
@@ -940,6 +944,7 @@ function updateCam(camera, scene) {
   var _sceneStore$updateCam;
   if (camera.pos.x == 0 && camera.pos.y == 0 && camera.pos.z == 0) return;
   var utilStore = useUtilStoreContext();
+  if (!utilStore.updateCam) return;
   var sceneStore = useSceneStoreContext();
   var cam = scene.getCameraByName('defaultCam');
   if (!cam) {
@@ -1000,6 +1005,7 @@ var SceneStore = /*#__PURE__*/function () {
     _defineProperty(this, "_sceneConstruct", {});
     _defineProperty(this, "_hasRendered", false);
     _defineProperty(this, "_hasPlanned", false);
+    _defineProperty(this, "_modelIteration", 0);
     _defineProperty(this, "_utilStore", void 0);
     _defineProperty(this, "_cache", []);
     _defineProperty(this, "_ssao", undefined);
@@ -1010,6 +1016,7 @@ var SceneStore = /*#__PURE__*/function () {
     _defineProperty(this, "_jwt", void 0);
     _defineProperty(this, "_onMissingGeo", void 0);
     _defineProperty(this, "_cancelSceneExport", void 0);
+    _defineProperty(this, "_materialCache", void 0);
     //controls
     _defineProperty(this, "_renderControlLoop", undefined);
     _defineProperty(this, "_doRenderControlLoop", false);
@@ -1019,6 +1026,7 @@ var SceneStore = /*#__PURE__*/function () {
     _defineProperty(this, "_focusedElement", void 0);
     _defineProperty(this, "_isControlledViewpoint", true);
     // if the current viewpoint should automatically change with the planning
+    _defineProperty(this, "_renderLoopTimeoutId", void 0);
     _defineProperty(this, "light", undefined);
     _defineProperty(this, "changedElements", void 0);
     _defineProperty(this, "updateCameraInformation", void 0);
@@ -1029,6 +1037,9 @@ var SceneStore = /*#__PURE__*/function () {
     this.updateCameraInformation = updateCameraInformation;
     this._cancelSceneExport = false;
     this._jwt = jwt;
+    this._materialCache = [];
+    this._hqRenderScript = JSON.parse(hqRenderScript);
+    this._utilStore = utilStore;
     var options = new SceneOptimizerOptions(15, 1000);
     options.addOptimization(new ShadowsOptimization(0));
     options.addOptimization(new RenderTargetsOptimization(0));
@@ -1036,11 +1047,6 @@ var SceneStore = /*#__PURE__*/function () {
       scene.materials.forEach(function (mat) {
         return mat.freeze();
       });
-      scene.meshes.forEach(function (mesh) {
-        mesh.freezeWorldMatrix();
-        mesh.cullingStrategy = AbstractMesh.CULLINGSTRATEGY_OPTIMISTIC_INCLUSION_THEN_BSPHERE_ONLY;
-      });
-      scene.autoClear = false;
       scene.blockMaterialDirtyMechanism = true;
       return true;
     }, function () {
@@ -1054,10 +1060,18 @@ var SceneStore = /*#__PURE__*/function () {
       return '';
     }, 1);
     this._optimizer = new SceneOptimizer(scene, options);
-    this._hqRenderScript = JSON.parse(hqRenderScript);
-    this._utilStore = utilStore;
   }
   return _createClass(SceneStore, [{
+    key: "materialCache",
+    get: function get() {
+      return this._materialCache;
+    }
+  }, {
+    key: "modelIteration",
+    get: function get() {
+      return this._modelIteration;
+    }
+  }, {
     key: "jwt",
     get: function get() {
       return this._jwt;
@@ -1375,6 +1389,44 @@ var SceneStore = /*#__PURE__*/function () {
     set: function set(renderPipeline) {
       this._renderPipeline = renderPipeline;
     }
+  }, {
+    key: "renderLoop",
+    value: function renderLoop() {
+      var _this$controlRenderLo;
+      if (this.cameraTargetPosition.x == 0 && this.cameraTargetPosition.y == 0 && this.cameraTargetPosition.z == 0) this.setCameraTarget();
+      (_this$controlRenderLo = this.controlRenderLoop) === null || _this$controlRenderLo === void 0 || _this$controlRenderLo.call(this);
+      this.scene.render();
+    }
+  }, {
+    key: "runRenderLoop",
+    value: function runRenderLoop() {
+      var engine = this._scene.getEngine();
+      if (engine.activeRenderLoops.length != 0) return;
+      engine.runRenderLoop(this.renderLoop.bind(this));
+    }
+  }, {
+    key: "runRenderLoopIndefinitely",
+    value: function runRenderLoopIndefinitely() {
+      clearTimeout(this._renderLoopTimeoutId);
+      this.runRenderLoop();
+    }
+  }, {
+    key: "runRenderLoopForTime",
+    value: function runRenderLoopForTime(ms) {
+      var _this2 = this;
+      this.runRenderLoop();
+      clearTimeout(this._renderLoopTimeoutId);
+      this._renderLoopTimeoutId = setTimeout(function () {
+        _this2.stopRenderLoop();
+      }, ms);
+    }
+  }, {
+    key: "stopRenderLoop",
+    value: function stopRenderLoop() {
+      clearTimeout(this._renderLoopTimeoutId);
+      this._renderLoopTimeoutId = undefined;
+      this._scene.getEngine().stopRenderLoop();
+    }
   }, {
     key: "setResolution",
     value: function setResolution(gameCanvas, resolution) {
@@ -1392,6 +1444,40 @@ var SceneStore = /*#__PURE__*/function () {
       }
       this._scene.getEngine().resize();
     }
+  }, {
+    key: "checkMaterialCache",
+    value: function checkMaterialCache() {
+      // material cache can't go over amount x because it leads to performance issues
+      if (this._materialCache.length < 10) return;
+      var amountToDispose = this._materialCache.length - 11;
+      var disposableMaterials = this._materialCache.filter(function (m) {
+        return m.mat.getBindedMeshes().length == 0;
+      });
+      disposableMaterials = disposableMaterials.sort(function (dm) {
+        return dm.lastUsage;
+      });
+      for (var idx = 0; idx < amountToDispose; idx++) {
+        if (idx < disposableMaterials.length - 1) {
+          var _mat$baseTexture, _mat$metallicRoughnes, _mat$normalTexture;
+          var mat = disposableMaterials[idx].mat;
+          mat.dispose();
+          (_mat$baseTexture = mat.baseTexture) === null || _mat$baseTexture === void 0 || _mat$baseTexture.dispose();
+          (_mat$metallicRoughnes = mat.metallicRoughnessTexture) === null || _mat$metallicRoughnes === void 0 || _mat$metallicRoughnes.dispose();
+          (_mat$normalTexture = mat.normalTexture) === null || _mat$normalTexture === void 0 || _mat$normalTexture.dispose();
+          this._materialCache.splice(this._materialCache.indexOf(disposableMaterials[idx]), 1);
+        }
+      }
+    }
+  }, {
+    key: "addMaterialToCache",
+    value: function addMaterialToCache(materialCache) {
+      this._materialCache.push(materialCache);
+    }
+  }, {
+    key: "updateModelIteration",
+    value: function updateModelIteration() {
+      this._modelIteration = this._modelIteration + 1;
+    }
   }, {
     key: "init",
     value: function init(diva3durl, gameCanvas, viewpoint, resolution) {
@@ -1668,6 +1754,7 @@ function SelHandler (_ref) {
     sceneStore.selectedElement = elemName;
     uiStore.selectElem(elemName);
     onElSelected === null || onElSelected === void 0 || onElSelected(elem.parent.name, Number(elemName));
+    sceneStore.runRenderLoopForTime(1000);
   };
   return {
     onSelection: onSelection
@@ -1685,7 +1772,7 @@ function _arrayLikeToArray$5(r, a) { (null == a || a > r.length) && (a = r.lengt
 */
 
 var UIStore = /*#__PURE__*/function () {
-  function UIStore(scene, enableSSAO, utilStore, uiConfig, requestNewOverlayImage, _overlayImage, onElementCopy) {
+  function UIStore(scene, enableSSAO, _utilStore, uiConfig, requestNewOverlayImage, _overlayImage, onElementCopy, runRenderLoopForTime) {
     var _this = this;
     _classCallCheck(this, UIStore);
     _defineProperty(this, "_utilStore", void 0);
@@ -1708,38 +1795,53 @@ var UIStore = /*#__PURE__*/function () {
     _defineProperty(this, "_gridGui", void 0);
     _defineProperty(this, "_isStaticBg", void 0);
     _defineProperty(this, "_elementsInfo", void 0);
-    _defineProperty(this, "_selectedHl", void 0);
     _defineProperty(this, "_diffuseTexture", void 0);
     _defineProperty(this, "_plane", void 0);
     _defineProperty(this, "_selectedMeshes", []);
+    _defineProperty(this, "_isUnityComb", false);
+    _defineProperty(this, "_selectedHl", void 0);
+    _defineProperty(this, "_runRenderLoopForTime", void 0);
     _defineProperty(this, "updateOverlayImage", function (overlayImage) {
-      var _this$_diffuseTexture;
+      var _this$_diffuseTexture, _this$_runRenderLoopF;
       if (!overlayImage || !_this._scene || ((_this$_diffuseTexture = _this._diffuseTexture) === null || _this$_diffuseTexture === void 0 ? void 0 : _this$_diffuseTexture.url) == overlayImage.base64) return;
+      var utilStore = useUtilStoreContext();
+      if (!utilStore.updateCam) return;
+      (_this$_runRenderLoopF = _this._runRenderLoopForTime) === null || _this$_runRenderLoopF === void 0 || _this$_runRenderLoopF.call(_this, 2000);
       _this._isStaticBg = overlayImage.isStaticBg;
-      _this._diffuseTexture.updateURL(overlayImage.base64);
-      _this._plane.visibility = 1;
+      var tex = new Texture(overlayImage.base64, _this._scene, undefined, true, Texture.TRILINEAR_SAMPLINGMODE, function () {
+        _this._plane.material.diffuseTexture = tex;
+        _this._diffuseTexture.dispose();
+        _this._diffuseTexture = tex;
+      });
+      _this.fadeInOverlayImage(_this._plane.visibility == 1);
       _this._enableSSAO(false);
+      _this._plane.setEnabled(true);
     });
     this._scene = scene;
-    var plane = MeshBuilder.CreatePlane('overlayplane', {
-      size: 0.0047
-    }, scene);
+    var engine = this._scene.getEngine();
     var mat = new StandardMaterial('planeMat', scene);
-    this._diffuseTexture = new Texture('data:image/gif;base64,R0lGODlhAQABALMAAAAAAP///////////////////////////////////////////////////////////yH5BAEAAAEALAAAAAABAAEAAAQCMEQAOw==', scene);
+    this._diffuseTexture = new Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/ep3wWkAAAAASUVORK5CYII=', scene);
     mat.diffuseTexture = this._diffuseTexture;
     mat.emissiveTexture = this._diffuseTexture;
     mat.specularColor = Color3.Black();
-    this._plane = plane;
-    plane.material = mat;
-    var engine = this._scene.getEngine();
-    plane.scaling.x = engine.getRenderingCanvas().width / engine.getRenderingCanvas().height;
-    plane.position.z = 0.011;
-    plane.isPickable = false;
-    plane.parent = scene.activeCamera;
+    this._plane = MeshBuilder.CreatePlane('overlayplane', {
+      size: 0.0047
+    }, scene);
+    this._plane.setEnabled(false);
+    this._plane.material = mat;
+    this._plane.visibility = 0;
+    this._plane.scaling.x = engine.getRenderingCanvas().width / engine.getRenderingCanvas().height;
+    this._plane.position.z = 0.011;
+    this._plane.isPickable = false;
+    this._plane.parent = scene.activeCamera;
     this._selectedHl = new HighlightLayer('hl', this._scene);
     this._selectedHl.innerGlow = false;
+    this._selectedHl.outerGlow = true;
+    this._selectedHl.blurHorizontalSize = 1;
+    this._selectedHl.blurVerticalSize = 1;
+    this._selectedHl.mainTexture.samples = 4;
     this._enableSSAO = enableSSAO;
-    this._utilStore = utilStore;
+    this._utilStore = _utilStore;
     this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI');
     this._gui.layer.layerMask = 0x0fffffff;
     this._gui.renderScale = 1;
@@ -1756,10 +1858,11 @@ var UIStore = /*#__PURE__*/function () {
     }
     this._isStaticBg = _overlayImage === null || _overlayImage === void 0 ? void 0 : _overlayImage.isStaticBg;
     if (_overlayImage) {
-      this._diffuseTexture.updateURL(_overlayImage.base64);
-      this._plane.visibility = 1;
+      this._isUnityComb = true;
+      this.fadeInOverlayImage(true);
       this._enableSSAO(false);
     }
+    this._runRenderLoopForTime = runRenderLoopForTime;
   }
   return _createClass(UIStore, [{
     key: "isStaticBg",
@@ -1769,7 +1872,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "unityCombActive",
     get: function get() {
-      return !!this._plane;
+      return !!this._isUnityComb;
     }
   }, {
     key: "initSelectionHandler",
@@ -1793,19 +1896,42 @@ var UIStore = /*#__PURE__*/function () {
       };
     }
   }, {
-    key: "highlightObservable",
-    value: function highlightObservable(meshes) {
+    key: "fadeOutOverlayImage",
+    value: function fadeOutOverlayImage() {
+      this._plane.visibility = 0;
+      var root = this._scene.getTransformNodeByName('Root');
+      if (root) root.getChildMeshes().forEach(function (m) {
+        m.visibility = 1;
+        if (!m.material) return;
+        m.material.depthFunction = Constants.LESS;
+        m.material.disableColorWrite = false;
+      });
+    }
+  }, {
+    key: "fadeInOverlayImage",
+    value: function fadeInOverlayImage(shorter) {
       var _this3 = this;
-      meshes.forEach(function (m) {
-        if (_this3._plane.visibility == 1) {
-          m.material.depthFunction = Constants.ALWAYS;
-          m.material.disableColorWrite = true;
+      var startTime = performance.now();
+      var _animate = function animate() {
+        var elapsedTime = performance.now() - startTime;
+        var progress = Math.min(elapsedTime / (shorter ? 50 : 500), 1); // Normalize progress (0 to 1)
+
+        _this3._plane.visibility = progress;
+        if (progress < 1) {
+          requestAnimationFrame(_animate);
         } else {
-          m.visibility = 1;
-          m.material.depthFunction = Constants.LESS;
-          m.material.disableColorWrite = false;
+          //animation finished
+          var root = _this3._scene.getTransformNodeByName('Root');
+          if (root) root.getChildMeshes().forEach(function (m) {
+            m.visibility = 1;
+            if (!m.material) return;
+            m.material.depthFunction = Constants.ALWAYS;
+            m.material.disableColorWrite = true;
+          });
+          _this3._plane.setEnabled(true);
         }
-      });
+      };
+      _animate();
     }
   }, {
     key: "createGridGui",
@@ -1869,9 +1995,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "createPosNr",
     value: function createPosNr(elementInfo, element, isBoxPlanner) {
-      var _this5 = this,
-        _this$_utilStore$view,
-        _this$_utilStore$view2;
+      var _this5 = this;
       var guiElem = {
         elementId: elementInfo.elementId,
         elements: []
@@ -1916,16 +2040,25 @@ var UIStore = /*#__PURE__*/function () {
         guiElemRightBack.position = _pos;
       }
       var childMeshes = element.getChildMeshes();
-      this._scene.onBeforeRenderObservable.add(function () {
-        return _this5.highlightObservable(childMeshes);
+      childMeshes.forEach(function (m) {
+        if (_this5._plane.visibility == 1) {
+          m.material.depthFunction = Constants.ALWAYS;
+          m.material.disableColorWrite = true;
+        } else {
+          m.visibility = 1;
+          m.material.depthFunction = Constants.LESS;
+          m.material.disableColorWrite = false;
+        }
       });
       if (!elementInfo.active) {
         childMeshes.forEach(function (m) {
-          m.visibility = 0;
+          if (_this5._plane.visibility == 1) m.visibility = 0;
           if (!m.actionManager) m.actionManager = new ActionManager(_this5._scene);
           m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, function (ev) {
+            var _this5$_runRenderLoop;
+            (_this5$_runRenderLoop = _this5._runRenderLoopForTime) === null || _this5$_runRenderLoop === void 0 || _this5$_runRenderLoop.call(_this5, 1000);
             _this5._selectedHl.removeAllMeshes();
-            _this5._selectedMeshes.forEach(function (_m) {
+            if (_this5._plane.visibility == 1) _this5._selectedMeshes.forEach(function (_m) {
               return _m.visibility = 0;
             });
             element.getChildMeshes().forEach(function (_m) {
@@ -1934,8 +2067,10 @@ var UIStore = /*#__PURE__*/function () {
             });
           }));
           m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger, function (ev) {
+            var _this5$_runRenderLoop2;
+            (_this5$_runRenderLoop2 = _this5._runRenderLoopForTime) === null || _this5$_runRenderLoop2 === void 0 || _this5$_runRenderLoop2.call(_this5, 1000);
             _this5._selectedHl.removeAllMeshes();
-            element.getChildMeshes().forEach(function (_m) {
+            if (_this5._plane.visibility == 1) element.getChildMeshes().forEach(function (_m) {
               return _m.visibility = 0;
             });
             _this5._selectedMeshes.forEach(function (_m) {
@@ -1944,15 +2079,13 @@ var UIStore = /*#__PURE__*/function () {
             });
           }));
         });
-      }
-      if (elementInfo.active && (((_this$_utilStore$view = this._utilStore.viewHandler) === null || _this$_utilStore$view === void 0 ? void 0 : _this$_utilStore$view.tabGroupState.curTabGroup.type) == 'PLANNER' || ((_this$_utilStore$view2 = this._utilStore.viewHandler) === null || _this$_utilStore$view2 === void 0 ? void 0 : _this$_utilStore$view2.tabGroupState.curTabGroup.type) == 'OPTION')) {
+      } else {
         var _guiElemRightBack;
         this._selectedMeshes = childMeshes;
         this._selectedMeshes.forEach(function (_m) {
           _m.visibility = 1;
           _this5._selectedHl.addMesh(_m, Color3.Black());
         });
-        this._selectedHl.addExcludedMesh(this._plane);
         var dtarget = this._uiConfig.templateConfig == 'standard' ? new Ellipse('deleteEllipse') : new Rectangle('deleteEllipse');
         guiElem.elements.push(dtarget);
         dtarget.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
@@ -1972,6 +2105,7 @@ var UIStore = /*#__PURE__*/function () {
         this._gui.addControl(dtarget);
         dtarget.linkWithMesh((_guiElemRightBack = guiElemRightBack) !== null && _guiElemRightBack !== void 0 ? _guiElemRightBack : guiElemLeftBack);
       }
+      this._selectedHl.addExcludedMesh(this._plane);
       this._guiElements.push(guiElem);
     }
   }, {
@@ -2106,6 +2240,16 @@ var UIStore = /*#__PURE__*/function () {
         });
       });
     }
+  }, {
+    key: "deactivateHighlightLayer",
+    value: function deactivateHighlightLayer() {
+      this._selectedHl.outerGlow = false;
+    }
+  }, {
+    key: "activateHighlightLayer",
+    value: function activateHighlightLayer() {
+      this._selectedHl.outerGlow = true;
+    }
   }, {
     key: "clearGui",
     value: function clearGui() {
@@ -2118,22 +2262,23 @@ var UIStore = /*#__PURE__*/function () {
       this._scene.transformNodes.forEach(function (tN) {
         return tN.name.startsWith('guiElem_') && tN.dispose();
       });
-      this._selectedHl.removeAllMeshes();
     }
   }, {
     key: "onMove",
     value: function onMove() {
-      if (!this._plane) return;
-      this._plane.visibility = 0;
-      this._enableSSAO(true);
-      this._utilStore.updateCam = false;
+      if (!this._isUnityComb) return;
+      if (this._plane.visibility != 0) {
+        this._enableSSAO(true);
+        this.fadeOutOverlayImage();
+      }
+      this._utilStore.updateCam = false; // need to always update since can move again while image is waiting to be updated
     }
   }, {
     key: "requestNewOverlayImage",
     value: function requestNewOverlayImage(viewpoint, focusedElement, targetCameraPosition) {
       var _this9 = this;
       //this._overlayImage exists only when unity combi is enabled
-      if (!this._plane) return;
+      if (!this._isUnityComb) return;
       var elementId = undefined;
       var setId = undefined;
       var ob = this._scene.getTransformNodeByName(focusedElement.name);
@@ -2148,9 +2293,8 @@ var UIStore = /*#__PURE__*/function () {
       if (!this._latestViewpoint || this._latestViewpoint.isOutdated || Math.abs(this._latestViewpoint.pos.x - viewpoint.pos.x) > 0.05 || Math.abs(this._latestViewpoint.pos.y - viewpoint.pos.y) > 0.05 || Math.abs(this._latestViewpoint.pos.z - viewpoint.pos.z) > 0.05 || Math.abs(this._latestViewpoint.rot.x - viewpoint.rot.x) > 0.05 || Math.abs(this._latestViewpoint.rot.y - viewpoint.rot.y) > 0.05 || Math.abs(this._latestViewpoint.rot.z - viewpoint.rot.z) > 0.05) {
         this._timeoutId = setTimeout(function () {
           var _this9$_requestNewOve;
-          _this9._utilStore.addOutstandingImage();
           _this9._latestViewpoint = viewpoint;
-          console.log('requestNewOverlay Image');
+          _this9._utilStore.addOutstandingImageCount();
           (_this9$_requestNewOve = _this9._requestNewOverlayImage) === null || _this9$_requestNewOve === void 0 || _this9$_requestNewOve.call(_this9, viewpoint, {
             adjustZoomInUnity: false,
             onlyAdjustZoomBBChanged: false,
@@ -2161,7 +2305,7 @@ var UIStore = /*#__PURE__*/function () {
           _this9._utilStore.updateCam = true;
         }, 200);
       } else {
-        this._plane.visibility = 1;
+        this.fadeInOverlayImage(false);
       }
     }
   }]);
@@ -2223,7 +2367,7 @@ var UtilStore = /*#__PURE__*/function () {
   }, {
     key: "updateCam",
     get: function get() {
-      return this._updateCam && this._outstandingImageCount == 0;
+      return this._updateCam;
     },
     set: function set(doUpdateCam) {
       this._updateCam = doUpdateCam;
@@ -2237,15 +2381,21 @@ var UtilStore = /*#__PURE__*/function () {
     key: "onElementDeleted",
     value: function onElementDeleted(setId, elementId) {
       var _this$viewHandler;
-      this.addOutstandingImage();
+      this.addOutstandingImageCount();
       (_this$viewHandler = this.viewHandler) === null || _this$viewHandler === void 0 || _this$viewHandler.viewPlannerHandler.onElementDeleted(setId, elementId);
       this._updateCam = true;
     }
   }, {
-    key: "addOutstandingImage",
-    value: function addOutstandingImage() {
+    key: "addOutstandingImageCount",
+    value: function addOutstandingImageCount() {
       this._outstandingImageCount++;
     }
+  }, {
+    key: "subtractOutstandingImageCount",
+    value: function subtractOutstandingImageCount() {
+      if (this._outstandingImageCount == 0) return;
+      this._outstandingImageCount--;
+    }
   }, {
     key: "disableElementRows",
     value: function disableElementRows(element, cache) {
@@ -2389,7 +2539,7 @@ var unregisterContext = function unregisterContext() {
 var registerContext = function registerContext(scene, hqRenderScript, apiConfig, jwt, viewHandler, onMissingGeo, requestNewOverlayImage, overlayImage, uiConfig, updateCameraInformation) {
   var utilStore = new UtilStore(false, viewHandler);
   var sceneStore = new SceneStore(scene, hqRenderScript, utilStore, apiConfig, jwt, onMissingGeo, updateCameraInformation);
-  var uiStore = new UIStore(scene, sceneStore.enableSSAO.bind(sceneStore), utilStore, uiConfig, requestNewOverlayImage, overlayImage, viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.viewPlannerHandler.onElementCopy);
+  var uiStore = new UIStore(scene, sceneStore.enableSSAO.bind(sceneStore), utilStore, uiConfig, requestNewOverlayImage, overlayImage, viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.viewPlannerHandler.onElementCopy, sceneStore.runRenderLoopForTime.bind(sceneStore));
   return _context = {
     utilStore: utilStore,
     sceneStore: sceneStore,
@@ -2551,13 +2701,14 @@ var customMat = /*#__PURE__*/function () {
     var setDataRow,
       sceneStore,
       url,
-      mat,
+      _mat,
       res,
       parsedMat,
       baseTexture,
       mRTexture,
       nTexture,
       found,
+      mat,
       _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -2579,9 +2730,9 @@ var customMat = /*#__PURE__*/function () {
             }
           });
         case 11:
-          mat = _context.sent;
+          _mat = _context.sent;
           _context.next = 14;
-          return mat.json();
+          return _mat.json();
         case 14:
           res = _context.sent;
           parsedMat = PBRMetallicRoughnessMaterial.Parse(res, _customMat.scene, '');
@@ -2602,12 +2753,14 @@ var customMat = /*#__PURE__*/function () {
             path: _customMat.blob,
             sizeMb: 0
           });
+          parsedMat.depthFunction = Constants.ALWAYS;
+          parsedMat.disableColorWrite = true;
           return _context.abrupt("return", {
             mat: parsedMat,
             found: true
           });
-        case 29:
-          _context.prev = 29;
+        case 31:
+          _context.prev = 31;
           _context.t0 = _context["catch"](8);
           if (setDataRow) useUtilStoreContext().setAnalyzeDataRow({
             type: 'MAT',
@@ -2617,16 +2770,19 @@ var customMat = /*#__PURE__*/function () {
             path: _customMat.blob,
             sizeMb: 0
           });
-        case 32:
+        case 34:
+          mat = new PBRMetallicRoughnessMaterial(_customMat.name, _customMat.scene);
+          mat.depthFunction = Constants.ALWAYS;
+          mat.disableColorWrite = true;
           return _context.abrupt("return", {
-            mat: new PBRMetallicRoughnessMaterial(_customMat.name, _customMat.scene),
+            mat: mat,
             found: true
           });
-        case 33:
+        case 38:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[8, 29]]);
+    }, _callee, null, [[8, 31]]);
   }));
   return function customMat(_x) {
     return _ref.apply(this, arguments);
@@ -2708,7 +2864,7 @@ function _findAssets() {
             }));
             return _importGeo.apply(this, arguments);
           };
-          importGeo = function _importGeo2(_x13, _x14) {
+          importGeo = function _importGeo2(_x12, _x13) {
             return _importGeo.apply(this, arguments);
           };
           _unifyAndSetStdMats = function _unifyAndSetStdMats3() {
@@ -2734,7 +2890,7 @@ function _findAssets() {
                   case 8:
                     name = 'std_' + name;
                     _context.next = 11;
-                    return createOrGetMaterial(name, path, splittedName[0], true, sceneStore.scene, undefined, true, true);
+                    return createOrGetMaterial(name, path, splittedName[0], true, true, undefined, true);
                   case 11:
                     mat = _context.sent;
                     if (!mat.found) utilStore.setAnalyzeDataRow({
@@ -2796,7 +2952,7 @@ function _findAssets() {
             }));
             return _unifyAndSetStdMats.apply(this, arguments);
           };
-          unifyAndSetStdMats = function _unifyAndSetStdMats2(_x11, _x12) {
+          unifyAndSetStdMats = function _unifyAndSetStdMats2(_x10, _x11) {
             return _unifyAndSetStdMats.apply(this, arguments);
           };
           sceneStore = useSceneStoreContext();
@@ -2912,7 +3068,7 @@ function _findAssets() {
                   return _context4.abrupt("return", 1);
                 case 5:
                   _context4.next = 7;
-                  return createOrGetMaterial(mat.id + '_' + mat.name, mat.blob, mat.name, true, sceneStore.scene, {
+                  return createOrGetMaterial(mat.id + '_' + mat.name, mat.blob, mat.name, true, false, {
                     tileU: mat.tileU,
                     tileV: mat.tileV
                   }, true);
@@ -2921,7 +3077,8 @@ function _findAssets() {
                   _context4.t1 = [];
                   _context4.t2 = mat.name;
                   nwCache.material = {
-                    material: _context4.t0,
+                    mat: _context4.t0,
+                    isStdMat: false,
                     onElements: _context4.t1,
                     name: _context4.t2
                   };
@@ -2931,7 +3088,7 @@ function _findAssets() {
                   _context4.t3 = newCache;
                   _context4.t4 = mat.id;
                   _context4.next = 17;
-                  return createOrGetMaterial(mat.id + '_' + mat.name, mat.blob, mat.name, true, sceneStore.scene, {
+                  return createOrGetMaterial(mat.id + '_' + mat.name, mat.blob, mat.name, true, false, {
                     tileU: mat.tileU,
                     tileV: mat.tileV
                   }, true);
@@ -2940,9 +3097,10 @@ function _findAssets() {
                   _context4.t6 = [];
                   _context4.t7 = mat.name;
                   _context4.t8 = {
-                    material: _context4.t5,
+                    mat: _context4.t5,
                     onElements: _context4.t6,
-                    name: _context4.t7
+                    name: _context4.t7,
+                    isStdMat: false
                   };
                   _context4.t9 = {
                     id: _context4.t4,
@@ -2995,72 +3153,79 @@ function _findAssets() {
   }));
   return _findAssets.apply(this, arguments);
 }
-function createOrGetMaterial(_x3, _x4, _x5, _x6, _x7, _x8, _x9, _x10) {
+function createOrGetMaterial(_x3, _x4, _x5, _x6, _x7, _x8, _x9) {
   return _createOrGetMaterial.apply(this, arguments);
 }
 function _createOrGetMaterial() {
-  _createOrGetMaterial = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(name, blob, fileName, checkExisting, scene, tiling, setDataRow, isStdMat) {
-    var _iterator5, _step5, _mat, mat, material;
+  _createOrGetMaterial = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(name, blob, fileName, checkExisting, isStdMat, tiling, setDataRow) {
+    var sceneStore, _iterator5, _step5, cachedMaterial, mat, material;
     return _regeneratorRuntime.wrap(function _callee4$(_context6) {
       while (1) switch (_context6.prev = _context6.next) {
         case 0:
+          sceneStore = useSceneStoreContext();
           if (!checkExisting) {
-            _context6.next = 18;
+            _context6.next = 20;
             break;
           }
-          _iterator5 = _createForOfIteratorHelper$3(scene.materials);
-          _context6.prev = 2;
+          _iterator5 = _createForOfIteratorHelper$3(sceneStore.materialCache);
+          _context6.prev = 3;
           _iterator5.s();
-        case 4:
+        case 5:
           if ((_step5 = _iterator5.n()).done) {
-            _context6.next = 10;
+            _context6.next = 12;
             break;
           }
-          _mat = _step5.value;
-          if (!(name === _mat.name)) {
-            _context6.next = 8;
+          cachedMaterial = _step5.value;
+          if (!(name === cachedMaterial.mat.name)) {
+            _context6.next = 10;
             break;
           }
+          cachedMaterial.lastUsage = sceneStore.modelIteration;
           return _context6.abrupt("return", {
-            mat: _mat,
+            mat: cachedMaterial.mat,
             found: true
           });
-        case 8:
-          _context6.next = 4;
-          break;
         case 10:
-          _context6.next = 15;
+          _context6.next = 5;
           break;
         case 12:
-          _context6.prev = 12;
-          _context6.t0 = _context6["catch"](2);
+          _context6.next = 17;
+          break;
+        case 14:
+          _context6.prev = 14;
+          _context6.t0 = _context6["catch"](3);
           _iterator5.e(_context6.t0);
-        case 15:
-          _context6.prev = 15;
+        case 17:
+          _context6.prev = 17;
           _iterator5.f();
-          return _context6.finish(15);
-        case 18:
+          return _context6.finish(17);
+        case 20:
           mat = {
             isStdMat: !!isStdMat,
             blob: blob,
             name: name,
             fileName: fileName,
-            scene: scene,
+            scene: sceneStore.scene,
             tiling: tiling
           };
-          _context6.next = 21;
+          _context6.next = 23;
           return customMat(mat, setDataRow);
-        case 21:
+        case 23:
           material = _context6.sent;
+          sceneStore.addMaterialToCache({
+            mat: material.mat,
+            isStdMat: isStdMat,
+            lastUsage: sceneStore.modelIteration
+          });
           return _context6.abrupt("return", {
             mat: material.mat,
             found: material.found
           });
-        case 23:
+        case 26:
         case "end":
           return _context6.stop();
       }
-    }, _callee4, null, [[2, 12, 15, 18]]);
+    }, _callee4, null, [[3, 14, 17, 20]]);
   }));
   return _createOrGetMaterial.apply(this, arguments);
 }
@@ -3260,7 +3425,7 @@ function findMaterials(cache) {
           for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             var onNode = _step3.value;
             if (child.name.startsWith(onNode) || child.name.startsWith('geo_') && child.name.includes(onNode)) {
-              setMaterials(child, mat.material);
+              setMaterials(child, mat.mat);
             }
           }
         } catch (err) {
@@ -3332,7 +3497,7 @@ function shadow() {
     var lightf = new DirectionalLight('dirf', new Vector3(0, -0.436, -0.9), scene);
     var lightr = new DirectionalLight('dirr', new Vector3(0, -1, 0.3), scene);
     var lightl = new DirectionalLight('dirb', new Vector3(0.2, -1, 0.2), scene);
-    lightl.intensity = 1;
+    lightl.intensity = 2;
     lightf.intensity = 2.2;
     light.intensity = 1;
     lightr.intensity = 1;
@@ -3352,6 +3517,8 @@ function shadow() {
       z: 0
     });
     var std_mat = new PBRMetallicRoughnessMaterial('std_mat', scene);
+    std_mat.depthFunction = Constants.ALWAYS;
+    std_mat.disableColorWrite = true;
     std_mat.metallic = 0;
     scene.defaultMaterial = std_mat;
     var mat = new PBRMetallicRoughnessMaterial('white', scene);
@@ -3375,17 +3542,17 @@ var parser = /*#__PURE__*/function () {
         case 0:
           sceneStore = useSceneStoreContext();
           hasRendered = sceneStore.hasRendered, hqRenderScript = sceneStore.hqRenderScript, scene = sceneStore.scene, cache = sceneStore.cache, changedElements = sceneStore.changedElements;
-          utilStore = useUtilStoreContext();
-          useUIStoreContext(); //disable elementrows from old cache
+          utilStore = useUtilStoreContext(); //disable elementrows from old cache
           changedElements === null || changedElements === void 0 || (_changedElements$upda = changedElements.updatedElements) === null || _changedElements$upda === void 0 || _changedElements$upda.forEach(function (el) {
             return utilStore.disableElementRows(el.name, cache);
           });
-          _context.next = 7;
+          _context.next = 6;
           return findAssets(hqRenderScript.assets, cache);
-        case 7:
+        case 6:
           _yield$findAssets = _context.sent;
           cacheGroup = _yield$findAssets.cacheGroup;
           newCache = _yield$findAssets.newCache;
+          sceneStore.updateModelIteration();
           if (changedElements && changedElements.deletedElements && changedElements.deletedElements.length > 0) {
             changedElements.deletedElements.forEach(function (deletedElement) {
               var _scene$getTransformNo;
@@ -3419,7 +3586,8 @@ var parser = /*#__PURE__*/function () {
           }
           utilStore.setRTVAnalyzeData();
           deacCache(cacheGroup);
-        case 14:
+          sceneStore.checkMaterialCache();
+        case 15:
         case "end":
           return _context.stop();
       }
@@ -3432,7 +3600,7 @@ var parser = /*#__PURE__*/function () {
 
 var LOG = getLogger('ARViewer', 'RealTimeRenderData');
 function useRealTimeRenderData (_ref) {
-  var _sceneStore3;
+  var _sceneStore2;
   var jwt = _ref.jwt,
     actions = _ref.actions,
     apiConfig = _ref.apiConfig,
@@ -3450,7 +3618,7 @@ function useRealTimeRenderData (_ref) {
     renderInBackground = _ref.renderInBackground;
   var gameCanvas = useRef(null);
   var sceneStore = useSceneStoreContext();
-  var utilStore = useUtilStoreContext();
+  useUtilStoreContext();
   var gridStore = useGridStoreContext();
   var uiStore = useUIStoreContext();
   DracoCompression.Configuration = {
@@ -3514,15 +3682,16 @@ function useRealTimeRenderData (_ref) {
               eventId: 'BUILD_SCENE'
             });
             _context2.prev = 15;
-            _context2.next = 18;
+            uiStore.deactivateHighlightLayer();
+            _context2.next = 19;
             return parser();
-          case 18:
+          case 19:
             uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
             if (freePlacesOnGrids || plannedPlacesOnGrids) gridStore.getGrids(freePlacesOnGrids, plannedPlacesOnGrids);
-            _context2.next = 27;
+            _context2.next = 28;
             break;
-          case 22:
-            _context2.prev = 22;
+          case 23:
+            _context2.prev = 23;
             _context2.t0 = _context2["catch"](15);
             LOG.errorTransaction('BUILD_SCENE', 'RTS_0001', _context2.t0.message);
             LOG.error(new DivaError('Error building scene', {
@@ -3530,26 +3699,26 @@ function useRealTimeRenderData (_ref) {
               code: 'RTS_0001'
             }));
             sceneStore.isInitializing = false;
-          case 27:
+          case 28:
             if (callbacks.setGlb) {
               sceneStore.exportScene().then(function (res) {
                 var _callbacks$setGlb;
-                if (res) (_callbacks$setGlb = callbacks.setGlb) === null || _callbacks$setGlb === void 0 || _callbacks$setGlb.call(callbacks, URL.createObjectURL(res.glTFFiles['fileName.glb']));
+                if (res) (_callbacks$setGlb = callbacks.setGlb) === null || _callbacks$setGlb === void 0 || _callbacks$setGlb.call(callbacks, URL.createObjectURL(res.glTFFiles['fileName.glb']), res.glTFFiles['fileName.glb']);
               });
             } else {
               LOG.debug('callbacks.setGlb is undefined');
             }
             if (!sceneStore.hasRendered) {
-              sceneStore.scene.getEngine().runRenderLoop(renderLoop);
+              sceneStore.runRenderLoopIndefinitely();
               sceneStore.hasRendered = true;
             }
             sceneStore.scene.onAfterRenderObservable.add(onFirstFrame);
             LOG.successTransaction('BUILD_SCENE');
-          case 31:
+          case 32:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[15, 22]]);
+      }, _callee2, null, [[15, 23]]);
     }));
     return _onSceneReady.apply(this, arguments);
   }
@@ -3560,12 +3729,9 @@ function useRealTimeRenderData (_ref) {
     if (!overlayImage) actions.toggleLoading('buildScene', false, false);
     (_callbacks$onInitiali2 = callbacks.onInitialized) === null || _callbacks$onInitiali2 === void 0 || _callbacks$onInitiali2.call(callbacks);
     (_sceneStore = sceneStore) === null || _sceneStore === void 0 || _sceneStore.optimizeScene();
-  }
-  function renderLoop() {
-    var _sceneStore$controlRe, _sceneStore2;
-    if (!gameCanvas.current) sceneStore.scene.getEngine().dispose();
-    (_sceneStore$controlRe = (_sceneStore2 = sceneStore).controlRenderLoop) === null || _sceneStore$controlRe === void 0 || _sceneStore$controlRe.call(_sceneStore2);
-    sceneStore.scene.render();
+    setTimeout(function () {
+      return uiStore.activateHighlightLayer();
+    }, 500);
   }
 
   // trigger if gamecanvas did not update but renderjob
@@ -3590,37 +3756,41 @@ function useRealTimeRenderData (_ref) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               if (!gameCanvas.current) {
-                _context.next = 20;
+                _context.next = 23;
                 break;
               }
-              engine = new Engine(gameCanvas.current, true, {
+              _context.next = 3;
+              return EngineFactory.CreateAsync(gameCanvas.current, {
                 antialias: true,
                 stencil: true,
                 audioEngine: false
-              }, true);
+              });
+            case 3:
+              engine = _context.sent;
               engine.renderEvenInBackground = renderInBackground;
               engine.disablePerformanceMonitorInBackground = true;
               bScene = new Scene(engine, undefined);
+              bScene.clearColor = new Color4$1(255, 255, 255, 255);
               context = registerContext(bScene, renderjob, apiConfig, jwt, viewHandler, callbacks.onMissingGeo, callbacks.requestNewOverlayImage, overlayImage, uiConfig, callbacks.updateCameraInformation);
               sceneStore = context.sceneStore;
-              utilStore = context.utilStore;
+              context.utilStore;
               gridStore = context.gridStore;
               uiStore = context.uiStore;
               scene = bScene;
               if (!bScene.isReady()) {
-                _context.next = 16;
+                _context.next = 19;
                 break;
               }
-              _context.next = 14;
-              return onSceneReady();
-            case 14:
               _context.next = 17;
+              return onSceneReady();
+            case 17:
+              _context.next = 20;
               break;
-            case 16:
+            case 19:
               bScene.executeWhenReady(function () {
                 return onSceneReady();
               });
-            case 17:
+            case 20:
               resize = function resize() {
                 if (inBackground || !scene || !scene.getEngine()) return;
                 if (sceneStore.hasPlanned) sceneStore.doRenderControlLoop = true;
@@ -3640,9 +3810,9 @@ function useRealTimeRenderData (_ref) {
                   window.removeEventListener('resize', resize);
                 }
               });
-            case 20:
+            case 23:
               return _context.abrupt("return");
-            case 21:
+            case 24:
             case "end":
               return _context.stop();
           }
@@ -3654,14 +3824,11 @@ function useRealTimeRenderData (_ref) {
     asyncUseEffect();
   }, []);
   useEffect(function () {
-    if (overlayImage && uiStore) uiStore.updateOverlayImage(overlayImage);
-    // update cam pos for start viewpoints (hqr) could be the same, since it doesn't change when rotating
-  }, [overlayImage]);
-  useEffect(function () {
-    if (utilStore && viewpoint) {
-      updateCam(viewpoint, sceneStore.scene);
+    if (overlayImage && uiStore) {
+      uiStore.updateOverlayImage(overlayImage);
+      if (viewpoint) updateCam(viewpoint, sceneStore.scene);
     }
-  }, [viewpoint]);
+  }, [overlayImage]);
   useEffect(function () {
     if (sceneStore && elementsInfo) {
       var activeElement = elementsInfo.find(function (e) {
@@ -3671,13 +3838,13 @@ function useRealTimeRenderData (_ref) {
       uiStore.addElementsInfo(elementsInfo);
       uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
     }
-  }, [elementsInfo, (_sceneStore3 = sceneStore) === null || _sceneStore3 === void 0 ? void 0 : _sceneStore3.elements]);
+  }, [elementsInfo, (_sceneStore2 = sceneStore) === null || _sceneStore2 === void 0 ? void 0 : _sceneStore2.elements]);
   useEffect(function () {
     if (!sceneStore) return;
     if (inBackground) {
-      sceneStore.scene.getEngine().stopRenderLoop();
+      sceneStore.stopRenderLoop();
     } else if (sceneStore.hasRendered) {
-      sceneStore.scene.getEngine().runRenderLoop(renderLoop);
+      sceneStore.runRenderLoopIndefinitely();
     }
   }, [inBackground]);
   return {
@@ -3735,7 +3902,8 @@ var RealTimeRenderer = /*#__PURE__*/memo(function (props) {
         height: '100%',
         width: '100%',
         margin: 'auto',
-        display: 'block'
+        display: 'block',
+        backgroundColor: 'white'
       },
       className: canvas
     })