@crystaldesign/real-time-viewer 25.8.0-beta.3 → 25.8.0-beta.30

package/build/esm/index.js

@@ -20,7 +20,6 @@ import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
 import { SSAO2RenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssao2RenderingPipeline';
 import '@babylonjs/core/Rendering/geometryBufferRendererSceneComponent';
 import '@babylonjs/core/Rendering/prePassRendererSceneComponent';
-import { UniversalCamera } from '@babylonjs/core/Cameras/universalCamera';
 import { PBRMetallicRoughnessMaterial } from '@babylonjs/core/Materials/PBR/pbrMetallicRoughnessMaterial';
 import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
 import { Tools, Observable, WebRequest } from '@babylonjs/core/Misc';
@@ -47,8 +46,9 @@ import { Matrix as Matrix$1, Vector3 as Vector3$1 } from '@babylonjs/core/Maths/
 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';
+import { LoadAssetContainerAsync } from '@babylonjs/core/Loading/';
 import '@babylonjs/loaders/glTF/2.0/';
+import { UniversalCamera } from '@babylonjs/core/Cameras/universalCamera';
 import { jsx } from 'react/jsx-runtime';
 
 (function() {
@@ -867,7 +867,7 @@ var lightning = function lightning(diva3durl, scene, cams, sceneStore) {
   environmentTexture.rotationY = 1.45;
   scene.environmentTexture = environmentTexture;
   scene.createDefaultSkybox(environmentTexture);
-  scene.environmentIntensity = 1;
+  scene.environmentIntensity = 1.2;
   scene.getMaterialByName('skyBox').alpha = 0;
   var ssao = new SSAO2RenderingPipeline('ssao', scene, {
     ssaoRatio: 0.5,
@@ -876,7 +876,7 @@ var lightning = function lightning(diva3durl, scene, cams, sceneStore) {
   }, cams);
   ssao.radius = 1.25;
   ssao.epsilon = 0.002;
-  ssao.totalStrength = 0.7;
+  ssao.totalStrength = .7;
   ssao.bilateralTolerance = 0.1;
   ssao.base = 0;
   ssao.expensiveBlur = true;
@@ -890,109 +890,6 @@ var lightning = function lightning(diva3durl, scene, cams, sceneStore) {
   sceneStore.ssao = ssao;
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function createCams(scene, viewpoint) {
-  var _useUtilStoreContext = useUtilStoreContext(),
-    vector3ToBVector3 = _useUtilStoreContext.vector3ToBVector3,
-    degreesToRadians = _useUtilStoreContext.degreesToRadians;
-  function createCam(_ref) {
-    var name = _ref.name,
-      pos = _ref.pos,
-      rot = _ref.rot,
-      isEnabled = _ref.isEnabled,
-      parent = _ref.parent,
-      target = _ref.target;
-    var existingCam = scene.getCameraByName(name);
-    if (existingCam) return existingCam;
-    var camera = new UniversalCamera(name, pos, scene);
-    camera.rotation = degreesToRadians(rot);
-    camera.minZ = 0.1;
-    camera.maxZ = 30;
-    camera.fov = 0.418879;
-    if (isEnabled) scene.activeCamera = camera;
-    if (parent) camera.parent = parent;
-    var canvas = scene.getEngine().getRenderingCanvas();
-    camera.inputs.clear();
-    camera.inputs.removeByType('FreeCameraKeyboardMoveInput');
-    camera.inputs.removeByType('FreeCameraMouseInput');
-    camera.inputs.add(GetCameraControls(camera));
-    // only control the current active Cam
-    if (isEnabled) {
-      camera.attachControl(canvas, true);
-    }
-    if (target) camera.target = target;
-    return camera;
-  }
-  function createDefaultCam() {
-    return [createCam({
-      name: 'defaultCam',
-      isEnabled: true,
-      pos: new Vector3(4.5, 2.2, 8),
-      rot: new Vector3(7.75, -150, 0),
-      parent: undefined
-    })];
-  }
-  if (scene.activeCamera) return [scene.activeCamera];
-  if (!viewpoint) return createDefaultCam();
-  return [createCam({
-    name: 'defaultCam',
-    isEnabled: true,
-    pos: vector3ToBVector3(viewpoint.pos).multiply(new Vector3(-0.01, 0.01, 0.01)),
-    rot: vector3ToBVector3(_objectSpread$1(_objectSpread$1({}, viewpoint.rot), {}, {
-      x: -viewpoint.rot.x
-    })),
-    target: vector3ToBVector3(viewpoint.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01)),
-    parent: undefined
-  })];
-}
-function updateCam(camera, scene) {
-  var _sceneStore$updateCam;
-  if (camera.pos.x == 0 && camera.pos.y == 0 && camera.pos.z == 0) return;
-  var utilStore = useUtilStoreContext();
-  var sceneStore = useSceneStoreContext();
-  var cam = scene.getCameraByName('defaultCam');
-  if (!cam) {
-    var _cam = createCams(scene, camera)[0];
-    sceneStore.targetCameraPosition = _cam.position;
-    sceneStore.cameraTargetPosition = _cam.target;
-    return;
-  }
-  if (camera.pos.x == cam.position.x && camera.pos.y == cam.position.y && camera.pos.z == camera.pos.z) return;
-  var position = utilStore.vector3ToBVector3(camera.pos).multiply(new Vector3(-0.01, 0.01, 0.01));
-  var rotation = utilStore.degreesToRadians(utilStore.vector3ToBVector3(_objectSpread$1(_objectSpread$1({}, camera.rot), {}, {
-    x: -camera.rot.x
-  })));
-  var target = utilStore.vector3ToBVector3(camera.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01));
-  cam.position = position;
-  cam.rotation = rotation;
-  cam.setTarget(target);
-  sceneStore.targetCameraPosition = position;
-  sceneStore.cameraTargetPosition = target;
-  (_sceneStore$updateCam = sceneStore.updateCameraInformation) === null || _sceneStore$updateCam === void 0 || _sceneStore$updateCam.call(sceneStore, {
-    horiFov: cam.fov * 180 / Math.PI,
-    lensShiftX: 0,
-    lensShiftY: 0,
-    name: cam.name,
-    pos: {
-      x: position.x,
-      y: position.y,
-      z: position.z
-    },
-    rot: {
-      x: rotation.x * 180 / Math.PI,
-      y: rotation.y * 180 / Math.PI,
-      z: rotation.z * 180 / Math.PI
-    },
-    targetPos: {
-      x: target.x,
-      y: target.y,
-      z: target.z
-    },
-    vertFov: cam.fov * 180 / Math.PI
-  });
-}
-
 function shadow() {
   var _useSceneStoreContext = useSceneStoreContext(),
     hasRendered = _useSceneStoreContext.hasRendered,
@@ -1001,17 +898,24 @@ function shadow() {
     degreesToRadians = _useUtilStoreContext.degreesToRadians;
   if (!hasRendered && !scene.getMeshByName('ground')) {
     var light = new DirectionalLight('dirl', new Vector3(-1, 0, 0), scene);
-    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;
-    lightf.intensity = 2.2;
+    var lightf = new DirectionalLight('dirf', new Vector3(-.55, 0, -.85), scene);
+    var lightl = new DirectionalLight('dirb', new Vector3(0, 0, 1), scene);
+    var topLight = new DirectionalLight('dirt', new Vector3(0, -1, 0), scene);
+    lightl.intensity = .5;
+    lightf.intensity = 2;
     light.intensity = 1;
-    lightr.intensity = 1;
-    light.position = new Vector3(-2, 5, 0);
-    lightf.position = new Vector3(2, 5, 0);
-    lightr.position = new Vector3(0, 5, -2);
-    lightl.position = new Vector3(0, 5, -2);
+    topLight.intensity = 1.5;
+    lightl.range = 5;
+    lightl.falloffType = 1;
+    topLight.range = 5;
+    topLight.falloffType = 1;
+    lightf.range = 5;
+    lightf.falloffType = 1;
+    light.range = 5;
+    light.falloffType = 1;
+    light.position = new Vector3(-2, 3, 0);
+    lightf.position = new Vector3(2, 3, 0);
+    lightl.position = new Vector3(0, 3, -2);
     var ground = MeshBuilder.CreatePlane('ground', {
       width: 100,
       height: 100
@@ -1027,12 +931,9 @@ function shadow() {
     std_mat.metallic = 0;
     scene.defaultMaterial = std_mat;
     var mat = new PBRMetallicRoughnessMaterial('white', scene);
-    mat.metallic = 0.05;
+    mat.metallic = 0;
     mat.roughness = 1;
-    mat._environmentIntensity = 0;
-    mat.clearCoat.isEnabled = true;
-    mat.clearCoat.intensity = 1;
-    mat.subSurface.isTranslucencyEnabled = true;
+    mat.emissiveColor = Color3.White();
     ground.material = mat;
   }
 }
@@ -1453,7 +1354,7 @@ var SceneStore = /*#__PURE__*/function () {
     key: "runRenderLoop",
     value: function runRenderLoop() {
       var engine = this._scene.getEngine();
-      if (engine.activeRenderLoops.length != 0) return;
+      if (this && engine.activeRenderLoops.length != 0) return;
       engine.runRenderLoop(this.renderLoop.bind(this));
     }
   }, {
@@ -1466,8 +1367,8 @@ var SceneStore = /*#__PURE__*/function () {
     key: "runRenderLoopForTime",
     value: function runRenderLoopForTime(ms) {
       var _this2 = this;
-      this.runRenderLoop();
       clearTimeout(this._renderLoopTimeoutId);
+      this.runRenderLoop();
       this._renderLoopTimeoutId = setTimeout(function () {
         _this2.stopRenderLoop();
       }, ms);
@@ -1500,7 +1401,7 @@ var SceneStore = /*#__PURE__*/function () {
     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;
+      if (this._materialCache.length < 5) return;
       var amountToDispose = this._materialCache.length - 11;
       var disposableMaterials = this._materialCache.filter(function (m) {
         return m.mat.getBindedMeshes().length == 0;
@@ -1510,15 +1411,13 @@ var SceneStore = /*#__PURE__*/function () {
       });
       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();
+          if (!mat.isReady()) return; //disposing the material before it's compilation causes issues (HOLZ_WENGE LUECK) not compiled because on no mesh
+          mat.dispose(true, true);
           this._materialCache.splice(this._materialCache.indexOf(disposableMaterials[idx]), 1);
         }
       }
+      this._scene.resetCachedMaterial();
     }
   }, {
     key: "addMaterialToCache",
@@ -1536,9 +1435,8 @@ var SceneStore = /*#__PURE__*/function () {
       shadow();
       Tools.fallbackTexture = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // blank white image
       this.setResolution(gameCanvas, resolution);
-      var cams = createCams(this._scene, viewpoint);
-      this._targetCameraPosition = cams[0].position;
-      lightning(diva3durl, this._scene, cams, this);
+      this._targetCameraPosition = this._scene.activeCamera.position;
+      lightning(diva3durl, this._scene, this._scene.cameras, this);
     }
   }, {
     key: "setRoot",
@@ -1859,7 +1757,6 @@ var UIStore = /*#__PURE__*/function () {
     _defineProperty(this, "updateOverlayImage", function (overlayImage) {
       var _this$_diffuseTexture;
       if (!overlayImage || !_this._scene || ((_this$_diffuseTexture = _this._diffuseTexture) === null || _this$_diffuseTexture === void 0 ? void 0 : _this$_diffuseTexture.url) == overlayImage.base64) return;
-      if (!_this._scene.activeCamera) createCams(_this._scene, undefined);
       var utilStore = useUtilStoreContext();
       if (!utilStore || !utilStore.updateCam) return;
       _this._isStaticBg = overlayImage.isStaticBg;
@@ -1898,13 +1795,12 @@ var UIStore = /*#__PURE__*/function () {
     shaderMat.setVector2("scale", new Vector2(1, 1)); // adjust scale here
     shaderMat.alpha = 1;
     shaderMat.backFaceCulling = true;
-    this._diffuseTexture.anisotropicFilteringLevel = 16;
-    this._diffuseTexture.updateSamplingMode(Texture.TRILINEAR_SAMPLINGMODE);
 
     // Get aspect ratio of the current screen
     this._plane = MeshBuilder.CreatePlane('overlayplane', {
       size: 1
     }, scene);
+    this._plane.visibility = 0;
     this._plane.setEnabled(false);
     this._plane.material = shaderMat;
     this._shaderMat = shaderMat;
@@ -1938,6 +1834,7 @@ var UIStore = /*#__PURE__*/function () {
     }
     this._isStaticBg = _overlayImage === null || _overlayImage === void 0 ? void 0 : _overlayImage.isStaticBg;
     if (_overlayImage) {
+      this._plane.visibility = 1;
       this._isUnityComb = true;
       this._enableSSAO(false);
       if (_overlayImage.isStaticBg) this.fadeInOverlayImage(true);
@@ -2006,6 +1903,12 @@ var UIStore = /*#__PURE__*/function () {
         } else {
           //animation finished
           _this3._enableSSAO(false);
+          var size = _this3._diffuseTexture.getSize();
+          var engine = _this3._scene.getEngine();
+          var ratio = size.width / size.height;
+          var engineRatio = engine.getRenderWidth() / engine.getRenderHeight();
+          _this3._shaderMat.setVector2("scale", new Vector2(1 / (engineRatio / ratio), 1)); // adjust scale here */
+
           var root = _this3._scene.getTransformNodeByName('Root');
           if (root) root.getChildMeshes().forEach(function (m) {
             m.visibility = 0;
@@ -2076,15 +1979,10 @@ var UIStore = /*#__PURE__*/function () {
       // if rendering is cached it gets updated before resize is triggered, so check if the image is already correct
       var size = this._diffuseTexture.getSize();
       var engine = this._scene.getEngine();
-      if (Math.round(size.width / size.height * 100) / 100 != Math.round(engine.getRenderWidth() / engine.getRenderHeight() * 100) / 100) {
-        if (!this._isStaticBg) {
-          this.fadeOutOverlayImage();
-        } else {
-          var ratio = size.width / size.height;
-          var engineRatio = engine.getRenderWidth() / engine.getRenderHeight();
-          this._shaderMat.setVector2("scale", new Vector2(1 / (engineRatio / ratio), 1)); // adjust scale here */
-        }
-      }
+      engine.resize();
+      var ratio = size.width / size.height;
+      var engineRatio = engine.getRenderWidth() / engine.getRenderHeight();
+      this._shaderMat.setVector2("scale", new Vector2(1 / (engineRatio / ratio), 1)); // adjust scale here */
       this._gui.dispose();
       this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI', true, this._scene);
       this._gui.renderScale = 1;
@@ -2107,7 +2005,7 @@ var UIStore = /*#__PURE__*/function () {
     value: function pointerOverElement(element) {
       var _this$_runRenderLoopF,
         _this5 = this;
-      this.unityCombActive && ((_this$_runRenderLoopF = this._runRenderLoopForTime) === null || _this$_runRenderLoopF === void 0 ? void 0 : _this$_runRenderLoopF.call(this, 1000));
+      this.unityCombActive && ((_this$_runRenderLoopF = this._runRenderLoopForTime) === null || _this$_runRenderLoopF === void 0 ? void 0 : _this$_runRenderLoopF.call(this, 5000));
       this._selectedHl.removeAllMeshes();
       this._selectedHl.addExcludedMesh(this._plane);
       if (this._plane.visibility == 1) this._selectedMeshes.forEach(function (_m) {
@@ -2123,7 +2021,7 @@ var UIStore = /*#__PURE__*/function () {
     value: function pointerOutElement(element) {
       var _this$_runRenderLoopF2,
         _this6 = this;
-      this.unityCombActive && ((_this$_runRenderLoopF2 = this._runRenderLoopForTime) === null || _this$_runRenderLoopF2 === void 0 ? void 0 : _this$_runRenderLoopF2.call(this, 1000));
+      this.unityCombActive && ((_this$_runRenderLoopF2 = this._runRenderLoopForTime) === null || _this$_runRenderLoopF2 === void 0 ? void 0 : _this$_runRenderLoopF2.call(this, 5000));
       this._selectedHl.removeAllMeshes();
       this._selectedHl.addExcludedMesh(this._plane);
       if (this._plane.visibility == 1) element.getChildMeshes().forEach(function (_m) {
@@ -2147,7 +2045,7 @@ var UIStore = /*#__PURE__*/function () {
       var bbox = element.getHierarchyBoundingVectors();
       var guiElemLeftBack = null;
       var guiElemRightBack = null;
-      if (!isBoxPlanner && elementInfo.selectable) {
+      if (!isBoxPlanner && elementInfo.selectable && this._uiConfig.templateConfig != 'hidden') {
         guiElemLeftBack = new TransformNode('guiElem_' + elementInfo.elementId, this._scene);
         var forward = element.getDirection(Vector3.Forward()).normalize();
         var left = element.getDirection(Vector3.Left()).normalize();
@@ -2944,7 +2842,7 @@ var customMat = /*#__PURE__*/function () {
             sizeMb: 0
           });
         case 31:
-          mat = new PBRMetallicRoughnessMaterial(_customMat.name, _customMat.scene);
+          mat = new PBRMetallicRoughnessMaterial(_customMat.name, sceneStore.scene);
           return _context.abrupt("return", {
             mat: mat,
             found: true
@@ -2992,9 +2890,7 @@ function _findAssets() {
                     size = 0;
                     _context2.prev = 4;
                     _context2.next = 7;
-                    return SceneLoader.ImportMeshAsync(null, path, geo.name + '.glb', sceneStore.scene, function (progress) {
-                      size = progress.total;
-                    });
+                    return LoadAssetContainerAsync(path + geo.name + '.glb', sceneStore.scene);
                   case 7:
                     result = _context2.sent;
                     utilStore.setAnalyzeDataRow({
@@ -3045,7 +2941,7 @@ function _findAssets() {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
                     if (!geo.material) {
-                      _context.next = 20;
+                      _context.next = 22;
                       break;
                     }
                     splittedName = geo.material.name.split('.');
@@ -3074,7 +2970,13 @@ function _findAssets() {
                       geo: geo.name
                     });
                     geo.material = mat.mat;
-                    oldMat = sceneStore.scene.getMaterialByUniqueID(oldMatId);
+                    oldMat = sceneStore.scene.getMaterialByUniqueId(oldMatId);
+                    if (oldMat) {
+                      _context.next = 17;
+                      break;
+                    }
+                    return _context.abrupt("return");
+                  case 17:
                     _iterator3 = _createForOfIteratorHelper$3(oldMat.getBindedMeshes());
                     try {
                       for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
@@ -3086,40 +2988,40 @@ function _findAssets() {
                     } finally {
                       _iterator3.f();
                     }
-                    oldMat.dispose();
-                    _context.next = 37;
+                    oldMat.dispose(true, true);
+                    _context.next = 39;
                     break;
-                  case 20:
+                  case 22:
                     _iterator4 = _createForOfIteratorHelper$3(geo.getChildMeshes());
-                    _context.prev = 21;
+                    _context.prev = 23;
                     _iterator4.s();
-                  case 23:
+                  case 25:
                     if ((_step4 = _iterator4.n()).done) {
-                      _context.next = 29;
+                      _context.next = 31;
                       break;
                     }
                     child = _step4.value;
-                    _context.next = 27;
+                    _context.next = 29;
                     return unifyAndSetStdMats(child, iln);
-                  case 27:
-                    _context.next = 23;
-                    break;
                   case 29:
-                    _context.next = 34;
+                    _context.next = 25;
                     break;
                   case 31:
-                    _context.prev = 31;
-                    _context.t0 = _context["catch"](21);
+                    _context.next = 36;
+                    break;
+                  case 33:
+                    _context.prev = 33;
+                    _context.t0 = _context["catch"](23);
                     _iterator4.e(_context.t0);
-                  case 34:
-                    _context.prev = 34;
+                  case 36:
+                    _context.prev = 36;
                     _iterator4.f();
-                    return _context.finish(34);
-                  case 37:
+                    return _context.finish(36);
+                  case 39:
                   case "end":
                     return _context.stop();
                 }
-              }, _callee, null, [[21, 31, 34, 37]]);
+              }, _callee, null, [[23, 33, 36, 39]]);
             }));
             return _unifyAndSetStdMats.apply(this, arguments);
           };
@@ -3412,8 +3314,8 @@ function _createOrGetMaterial() {
 function _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$2(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$2(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$2(r, a) : void 0; } }
 function _arrayLikeToArray$2(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buildScene = function buildScene(_ref) {
   var _sceneStore$elements;
   var startNode = _ref.startNode,
@@ -3440,7 +3342,7 @@ var buildScene = function buildScene(_ref) {
           })) === null || _cachedAssets$find === void 0 || (_cachedAssets$find = _cachedAssets$find.geo) === null || _cachedAssets$find === void 0 || _cachedAssets$find.onElements.push(curElement); // TODO
           var geo = mesh.clone('geo_' + mesh.name, parentNode);
           geo.position = new Vector3(curGeo.pos.x / 100, curGeo.pos.y / 100, -curGeo.pos.z / 100);
-          geo.rotation = utilStore.degreesToRadians(_objectSpread(_objectSpread({}, curGeo.rot), {}, {
+          geo.rotation = utilStore.degreesToRadians(_objectSpread$1(_objectSpread$1({}, curGeo.rot), {}, {
             x: hqsGeo.isIDM3D ? 90 - curGeo.rot.x : curGeo.rot.x
           }));
           geo.setEnabled(true);
@@ -3723,7 +3625,9 @@ var parser = /*#__PURE__*/function () {
           }
           utilStore.setRTVAnalyzeData();
           deacCache(cacheGroup);
-          sceneStore.checkMaterialCache();
+          sceneStore.scene.executeWhenReady(function () {
+            return sceneStore.checkMaterialCache();
+          });
         case 15:
         case "end":
           return _context.stop();
@@ -3735,9 +3639,112 @@ var parser = /*#__PURE__*/function () {
   };
 }();
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function createCams(scene, viewpoint) {
+  var _useUtilStoreContext = useUtilStoreContext(),
+    vector3ToBVector3 = _useUtilStoreContext.vector3ToBVector3,
+    degreesToRadians = _useUtilStoreContext.degreesToRadians;
+  function createCam(_ref) {
+    var name = _ref.name,
+      pos = _ref.pos,
+      rot = _ref.rot,
+      isEnabled = _ref.isEnabled,
+      parent = _ref.parent,
+      target = _ref.target;
+    var existingCam = scene.getCameraByName(name);
+    if (existingCam) return existingCam;
+    var camera = new UniversalCamera(name, pos, scene);
+    camera.rotation = degreesToRadians(rot);
+    camera.minZ = 0.1;
+    camera.maxZ = 30;
+    camera.fov = 0.418879;
+    if (isEnabled) scene.activeCamera = camera;
+    if (parent) camera.parent = parent;
+    var canvas = scene.getEngine().getRenderingCanvas();
+    camera.inputs.clear();
+    camera.inputs.removeByType('FreeCameraKeyboardMoveInput');
+    camera.inputs.removeByType('FreeCameraMouseInput');
+    camera.inputs.add(GetCameraControls(camera));
+    // only control the current active Cam
+    if (isEnabled) {
+      camera.attachControl(canvas, true);
+    }
+    if (target) camera.target = target;
+    return camera;
+  }
+  function createDefaultCam() {
+    return [createCam({
+      name: 'defaultCam',
+      isEnabled: true,
+      pos: new Vector3(4.5, 2.2, 8),
+      rot: new Vector3(7.75, -150, 0),
+      parent: undefined
+    })];
+  }
+  if (scene.activeCamera) return [scene.activeCamera];
+  if (!viewpoint) return createDefaultCam();
+  return [createCam({
+    name: 'defaultCam',
+    isEnabled: true,
+    pos: vector3ToBVector3(viewpoint.pos).multiply(new Vector3(-0.01, 0.01, 0.01)),
+    rot: vector3ToBVector3(_objectSpread(_objectSpread({}, viewpoint.rot), {}, {
+      x: -viewpoint.rot.x
+    })),
+    target: vector3ToBVector3(viewpoint.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01)),
+    parent: undefined
+  })];
+}
+function updateCam(camera, scene) {
+  var _sceneStore$updateCam;
+  if (camera.pos.x == 0 && camera.pos.y == 0 && camera.pos.z == 0) return;
+  var utilStore = useUtilStoreContext();
+  var sceneStore = useSceneStoreContext();
+  var cam = scene.getCameraByName('defaultCam');
+  if (!cam) {
+    var _cam = createCams(scene, camera)[0];
+    sceneStore.targetCameraPosition = _cam.position;
+    sceneStore.cameraTargetPosition = _cam.target;
+    return;
+  }
+  if (camera.pos.x == cam.position.x && camera.pos.y == cam.position.y && camera.pos.z == camera.pos.z) return;
+  var position = utilStore.vector3ToBVector3(camera.pos).multiply(new Vector3(-0.01, 0.01, 0.01));
+  var rotation = utilStore.degreesToRadians(utilStore.vector3ToBVector3(_objectSpread(_objectSpread({}, camera.rot), {}, {
+    x: -camera.rot.x
+  })));
+  var target = utilStore.vector3ToBVector3(camera.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01));
+  cam.position = position;
+  cam.rotation = rotation;
+  cam.setTarget(target);
+  sceneStore.targetCameraPosition = position;
+  sceneStore.cameraTargetPosition = target;
+  (_sceneStore$updateCam = sceneStore.updateCameraInformation) === null || _sceneStore$updateCam === void 0 || _sceneStore$updateCam.call(sceneStore, {
+    horiFov: cam.fov * 180 / Math.PI,
+    lensShiftX: 0,
+    lensShiftY: 0,
+    name: cam.name,
+    pos: {
+      x: position.x,
+      y: position.y,
+      z: position.z
+    },
+    rot: {
+      x: rotation.x * 180 / Math.PI,
+      y: rotation.y * 180 / Math.PI,
+      z: rotation.z * 180 / Math.PI
+    },
+    targetPos: {
+      x: target.x,
+      y: target.y,
+      z: target.z
+    },
+    vertFov: cam.fov * 180 / Math.PI
+  });
+}
+
 var LOG = getLogger('ARViewer', 'RealTimeRenderData');
 function useRealTimeRenderData (_ref) {
-  var _sceneStore2;
+  var _sceneStore3;
   var jwt = _ref.jwt,
     actions = _ref.actions,
     apiConfig = _ref.apiConfig,
@@ -3850,7 +3857,7 @@ function useRealTimeRenderData (_ref) {
             if (!sceneStore.hasRendered) {
               sceneStore.hasRendered = true;
             }
-            sceneStore.runRenderLoopIndefinitely();
+            sceneStore.runRenderLoopForTime(5000);
             sceneStore.scene.onAfterRenderObservable.add(onFirstFrame);
             LOG.successTransaction('BUILD_SCENE');
           case 34:
@@ -3877,22 +3884,28 @@ function useRealTimeRenderData (_ref) {
   if (gameCanvas.current && sceneStore && sceneStore.scene.getEngine()) {
     var _queueRerender = function queueRerender() {
       if (sceneStore.isInitializing) setTimeout(_queueRerender, 150);else {
-        if (sceneStore.scene.isReady()) onSceneReady();else sceneStore.scene.executeWhenReady(function () {
-          return onSceneReady();
-        });
+        if (sceneStore.scene) {
+          if (sceneStore.scene.isReady()) onSceneReady();else sceneStore.scene.executeWhenReady(function () {
+            return onSceneReady();
+          });
+        }
       }
     };
     _queueRerender();
   }
   useEffect(function () {
-    var babylonScene = undefined;
-    var babylonEngine = undefined;
-    function init() {
+    var _sceneStore;
+    if ((_sceneStore = sceneStore) !== null && _sceneStore !== void 0 && (_sceneStore = _sceneStore.scene) !== null && _sceneStore !== void 0 && _sceneStore.getEngine() && sceneStore.scene.getEngine().getRenderingCanvas() == null && gameCanvas.current) {
+      sceneStore.scene.getEngine()._renderingCanvas = gameCanvas.current;
+    }
+  }, [gameCanvas.current]);
+  useEffect(function () {
+    function init(_x) {
       return _init.apply(this, arguments);
     }
     function _init() {
-      _init = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var context;
+      _init = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(enginePromise) {
+        var babylonEngine, babylonScene, context;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -3902,43 +3915,45 @@ function useRealTimeRenderData (_ref) {
               }
               return _context.abrupt("return");
             case 2:
-              _context.next = 4;
-              return EngineFactory.CreateAsync(gameCanvas.current, {
-                antialias: true,
-                stencil: true,
-                audioEngine: false,
-                adaptToDeviceRatio: true
-              });
+              if (!sceneStore) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
             case 4:
+              _context.next = 6;
+              return enginePromise;
+            case 6:
               babylonEngine = _context.sent;
               babylonEngine.renderEvenInBackground = renderInBackground;
               babylonEngine.disablePerformanceMonitorInBackground = true;
               babylonScene = new Scene(babylonEngine, undefined);
               babylonScene.clearColor = new Color4(255, 255, 255, 255);
               context = registerContext(babylonScene, renderjob, apiConfig, jwt, viewHandler, callbacks.onMissingGeo, callbacks.requestNewOverlayImage, overlayImage, uiConfig, callbacks.updateCameraInformation, !!isMobile);
+              createCams(babylonScene, viewpoint);
               sceneStore = context.sceneStore;
               utilStore = context.utilStore;
               gridStore = context.gridStore;
               uiStore = context.uiStore;
               if (!babylonScene.isReady()) {
-                _context.next = 19;
+                _context.next = 22;
                 break;
               }
-              _context.next = 17;
-              return onSceneReady();
-            case 17:
               _context.next = 20;
+              return onSceneReady();
+            case 20:
+              _context.next = 23;
               break;
-            case 19:
+            case 22:
               babylonScene.executeWhenReady(function () {
                 return onSceneReady();
               });
-            case 20:
+            case 23:
               if (window && gameCanvas.current) {
                 window.addEventListener('resize', resize);
                 new ResizeObserver(resize).observe(gameCanvas.current);
               }
-            case 21:
+            case 24:
             case "end":
               return _context.stop();
           }
@@ -3947,16 +3962,28 @@ function useRealTimeRenderData (_ref) {
       return _init.apply(this, arguments);
     }
     var resize = function resize() {
-      var _sceneStore;
-      if (inBackground || !((_sceneStore = sceneStore) !== null && _sceneStore !== void 0 && _sceneStore.scene) || !sceneStore.scene.getEngine() || !sceneStore.scene.isReady()) return;
+      var _sceneStore2;
+      if (inBackground || !((_sceneStore2 = sceneStore) !== null && _sceneStore2 !== void 0 && _sceneStore2.scene) || !sceneStore.scene.getEngine() || !sceneStore.scene.isReady()) return;
       sceneStore.runRenderLoopIndefinitely();
       sceneStore.scene.getEngine().resize(true);
       uiStore.resize();
       uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
     };
-    init();
+    if (!gameCanvas.current) return;
+    var enginePrmise = EngineFactory.CreateAsync(gameCanvas.current, {
+      antialias: true,
+      stencil: true,
+      audioEngine: false,
+      adaptToDeviceRatio: true,
+      useHighPrecisionFloats: true,
+      preserveDrawingBuffer: true
+    });
+    init(enginePrmise);
     return function () {
-      if (babylonEngine || babylonScene) {
+      enginePrmise.then(function (e) {
+        return e.dispose();
+      });
+      if (sceneStore && sceneStore.scene) {
         unregisterContext();
         sceneStore.scene.dispose();
         if (window) {
@@ -3968,7 +3995,7 @@ function useRealTimeRenderData (_ref) {
   useEffect(function () {
     if (overlayImage && uiStore && gameCanvas.current && sceneStore && sceneStore.scene.getEngine()) {
       if (!utilStore.updateCam) return;
-      sceneStore.runRenderLoopForTime(1000);
+      sceneStore.runRenderLoopForTime(5000);
       shadow(); // make sure the lighting is set up otherwise the image has a wrong color
       uiStore.updateOverlayImage(overlayImage);
       if (viewpoint) updateCam(viewpoint, sceneStore.scene);
@@ -3978,9 +4005,9 @@ function useRealTimeRenderData (_ref) {
     if (sceneStore && elementsInfo && gameCanvas.current && sceneStore.scene.getEngine()) {
       uiStore.addElementsInfo(elementsInfo);
       uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
-      sceneStore.runRenderLoopForTime(1000);
+      sceneStore.runRenderLoopForTime(5000);
     }
-  }, [elementsInfo, (_sceneStore2 = sceneStore) === null || _sceneStore2 === void 0 ? void 0 : _sceneStore2.elements]);
+  }, [elementsInfo, (_sceneStore3 = sceneStore) === null || _sceneStore3 === void 0 ? void 0 : _sceneStore3.elements]);
   useEffect(function () {
     if (!gameCanvas.current || !sceneStore) return;
     if (inBackground) {