@combeenation/3d-viewer 12.0.0-alpha4 → 12.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@combeenation/3d-viewer",
-  "version": "12.0.0-alpha4",
+  "version": "12.0.0-beta2",
   "description": "Combeenation 3D Viewer",
   "homepage": "https://github.com/Combeenation/3d-viewer#readme",
   "bugs": {
@@ -51,6 +51,7 @@
     "@babylonjs/loaders": "6.27.1",
     "@babylonjs/materials": "6.27.1",
     "@babylonjs/node-editor": "6.27.1",
+    "@babylonjs/node-geometry-editor": "6.27.1",
     "@babylonjs/serializers": "6.27.1",
     "eventemitter3": "4.0.7",
     "gsap": "3.11.2",

package/src/api/classes/element.ts

@@ -304,7 +304,7 @@ export class Element extends VariantParameterizable {
   /**
    * Draws a `ImageBitmap` or `OffscreenCanvas` onto a `paintable` defined via {@link PaintableDefinition}.
    */
-  public drawPaintable(paintable: string, imageSource: CanvasImageSource): Element {
+  public drawPaintable(paintable: string, imageSource: HTMLImageElement): Element {
     // node and material checks and preperation
     const node = this.getPaintableNode(paintable);
     if (!(node instanceof AbstractMesh)) {

package/src/api/classes/viewer.ts

@@ -7,6 +7,7 @@ import { TagManager } from '../manager/tagManager';
 import { VariantInstanceManager } from '../manager/variantInstanceManager';
 import { SpecStorage } from '../store/specStorage';
 import { backgroundDomeName, envHelperMetadataName } from '../util/babylonHelper';
+import { getIsScaledDownDevice } from '../util/deviceHelper';
 import { debounce, loadJson } from '../util/resourceHelper';
 import { getCustomCbnBabylonLoaderPlugin } from '../util/sceneLoaderHelper';
 import { replaceDots } from '../util/stringHelper';
@@ -97,6 +98,15 @@ export class Viewer extends EventBroadcaster {
             stencil: true,
             xrCompatible: false,
           },
+          // important for visual quality on iOS devices, this setting will set the hardware scaling proportional to the
+          // devices pixel ratio
+          adaptToDeviceRatio: true,
+          // limit texture size on iOS devices by default, in this way models (and AR exports) tend to work smoothly
+          // 1024 px should still be fine on mobiles
+          limitTextureSize: {
+            devices: 'iPhone',
+            size: 1024,
+          },
         },
         scene: {
           globals: {},
@@ -359,6 +369,7 @@ export class Viewer extends EventBroadcaster {
       // load additional packages for certain inspector features like "node material editor"
       // this is done after showing the debug layer to save time
       await import(/* webpackChunkName: "node-material-editor" */ '@babylonjs/node-editor');
+      await import(/* webpackChunkName: "node-geometry-editor" */ '@babylonjs/node-geometry-editor');
 
       return true;
     } else {
@@ -715,8 +726,16 @@ The inspector can only be used in development builds.`);
     const engine = new Engine(
       this.canvas as HTMLCanvasElement,
       sceneJson.engine?.antialiasing ?? false,
-      sceneJson.engine?.options
+      sceneJson.engine?.options,
+      sceneJson.engine?.adaptToDeviceRatio ?? false
     );
+
+    const isScaledDownDevice = getIsScaledDownDevice();
+    if (isScaledDownDevice) {
+      // reduce texture size if required
+      engine.getCaps().maxTextureSize = (sceneJson.engine!.limitTextureSize as LimitTextureSizeConfig).size;
+    }
+
     const scene = await sceneSetup(engine, sceneJson);
     if (sceneJson.meshPicking) {
       new HighlightLayer('default', scene);

package/src/api/internal/sceneSetup.ts

@@ -60,10 +60,15 @@ const processGround = async function (
  * @param scene
  */
 const defaultCamera = async function (scene: Scene): Promise<Camera> {
-  return await processCamera(scene, 'default_camera', {
+  const camera = (await processCamera(scene, 'default_camera', {
     type: 'arc',
     active: true,
-  });
+  })) as ArcRotateCamera;
+
+  // disables camera centering on double click
+  camera.useInputToRestoreState = false;
+
+  return camera;
 };
 
 /**

package/src/api/manager/gltfExportManager.ts

@@ -1,10 +1,15 @@
-import { Node as BjsNode, Color3, InstancedMesh, PBRMaterial, Vector3 } from '../../index';
 import { Viewer } from '../classes/viewer';
 import { injectMetadata } from '../util/babylonHelper';
+import { getIsScaledDownDevice } from '../util/deviceHelper';
 import { bakeGeometryOfMesh, createMeshFromInstancedMesh, resetTransformation } from '../util/geometryHelper';
 import { isNodeIncludedInExclusionList } from '../util/structureHelper';
+import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
+import { RenderTargetTexture } from '@babylonjs/core/Materials/Textures/renderTargetTexture';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import { Node as BjsNode } from '@babylonjs/core/node';
 import { GLTF2Export } from '@babylonjs/serializers/glTF/2.0/glTFSerializer';
 
 export class GltfExportManager {
@@ -15,18 +20,34 @@ export class GltfExportManager {
   };
   protected static readonly _EXPORT_ROOT_NAME = '__export_root__';
 
-  protected constructor(protected viewer: Viewer) {}
+  protected _maxTextureSize: number;
+
+  protected constructor(protected viewer: Viewer) {
+    // store initial max texture size, so that we can restore it in the post processing
+    this._maxTextureSize = viewer.engine.getCaps().maxTextureSize;
+  }
 
   public static async create(viewer: Viewer): Promise<GltfExportManager> {
     return new GltfExportManager(viewer);
   }
 
-  public async exportGlb(filename = 'glb-export.glb', excluded?: ExcludedGeometryList) {
-    await this._exportPreProcess(excluded);
+  /**
+   * Exports selected nodes to a file.
+   * @param filename Optional name of the exported .GLB file.
+   * @param optimizeForAR Adjusts the exported GLB so that known issues get automatically fixed, this
+   *                      is mostly targeting Apples .usdz format.
+   * @param excluded Optional list of geometry (meshes, elements, variants,...) to be excluded from the export.
+   */
+  public async exportGlb(filename = 'glb-export.glb', optimizeForAR: boolean = false, excluded?: ExcludedGeometryList) {
+    await this._exportPreProcess(optimizeForAR, excluded);
 
-    const glbData = await GLTF2Export.GLBAsync(this.viewer.scene, 'dummy', this._gltfExportOptions());
+    const glbData = await GLTF2Export.GLBAsync(
+      this.viewer.scene,
+      'dummy',
+      GltfExportManager._gltfExportOptions(optimizeForAR, excluded)
+    );
 
-    await this._exportPostProcess();
+    await this._exportPostProcess(optimizeForAR);
 
     const resBlob = glbData.glTFFiles['dummy.glb'];
     // check if result is valid, according to the typings this could also be a string
@@ -41,32 +62,87 @@ export class GltfExportManager {
     }
   }
 
-  public async exportGltfToFile(filename: string, excluded?: ExcludedGeometryList) {
-    await this._exportPreProcess(excluded);
-
-    const gltf = await GLTF2Export.GLTFAsync(this.viewer.scene, filename, this._gltfExportOptions());
+  /**
+   * Exports selected nodes to GLTF. This may result in more than one file, since textures are exported seperately.
+   * @param filename Name of the main (text-based) .GLTF file referring to separate texture files.
+   * @param optimizeForAR Adjusts the exported GLB so that known issues get automatically fixed, this
+   *                      is mostly targeting Apples .usdz format.
+   * @param excluded Optional list of geometry (meshes, elements, variants,...) to be excluded from the export.
+   */
+  public async exportGltfToFile(filename: string, optimizeForAR: boolean = false, excluded?: ExcludedGeometryList) {
+    await this._exportPreProcess(optimizeForAR, excluded);
+
+    const gltf = await GLTF2Export.GLTFAsync(
+      this.viewer.scene,
+      filename,
+      GltfExportManager._gltfExportOptions(optimizeForAR, excluded)
+    );
     gltf.downloadFiles();
 
-    this._exportPostProcess();
+    this._exportPostProcess(optimizeForAR);
   }
 
-  public async exportGlbToFile(filename: string, excluded?: ExcludedGeometryList) {
-    await this._exportPreProcess(excluded);
-
-    const glb = await GLTF2Export.GLBAsync(this.viewer.scene, filename, this._gltfExportOptions());
+  /**
+   * Exports selected nodes to GLB. This results in one binary file.
+   * @param filename Name of the main (text-based) .GLTF file referring to seperate texture files.
+   * @param optimizeForAR Adjusts the exported GLB so that known issues get automatically fixed, this
+   *                      is mostly targeting Apples .usdz format.
+   * @param excluded Optional list of geometry (meshes, elements, variants,...) to be excluded from the export.
+   */
+  public async exportGlbToFile(filename: string, optimizeForAR: boolean = false, excluded?: ExcludedGeometryList) {
+    await this._exportPreProcess(optimizeForAR, excluded);
+
+    const glb = await GLTF2Export.GLBAsync(
+      this.viewer.scene,
+      filename,
+      GltfExportManager._gltfExportOptions(optimizeForAR, excluded)
+    );
     glb.downloadFiles();
 
-    await this._exportPostProcess();
+    await this._exportPostProcess(optimizeForAR);
   }
 
-  protected async _exportPreProcess(excluded?: ExcludedGeometryList): Promise<void> {
+  /**
+   * Prepares scene for GLB export.
+   * This is very important for AR exports, since we have to do a lot of conversions to satisfy Apples .usdz format.
+   */
+  protected async _exportPreProcess(optimizeForAR: boolean, excluded?: ExcludedGeometryList): Promise<void> {
+    if (!optimizeForAR) {
+      // actually nothing to do if AR optimization is not required
+      return;
+    }
+
+    // pause rendering, since we are altering the active scene, which should not be visible to the user
     this.viewer.pauseRendering();
 
-    // handle materials
-    this.viewer.scene.materials
-      .filter(material => this._shouldReplaceMaterial(material))
-      .forEach(material => this._createRefractionMaterialReplacement(material as PBRMaterial));
+    // exchange materials if required
+    // the AR export should never contain textures larger than 1024 px:
+    // - iOS devices will crash most likely when trying to access AR endpoints with such files
+    // - file size will be reduced, which leads to faster loading times
+    // - textures > 1024 px shouldn't make a difference on mobiles anyway
+    // we don't have to rescale anything if are already on a downscaled device, since the textures are already <= 1024
+    // also we have to be very cautios with copying textures on these devices, since we are potentially very limited
+    // with the available memory
+    const isScaledDownDevice = getIsScaledDownDevice();
+    if (!isScaledDownDevice) {
+      // the idea is to re-create all textures with a smaller texture size
+      // we have to exchange all materials for this to work
+      this.viewer.engine.clearInternalTexturesCache();
+      this.viewer.engine.getCaps().maxTextureSize = 1024;
+
+      this.viewer.scene.materials
+        .filter(material => material instanceof PBRMaterial)
+        .forEach(material => GltfExportManager._exchangeMaterial(material as PBRMaterial));
+    }
 
+    // since Babylon.js v6 the conversion to right handed GLB coordinate system is done differently
+    // previously the geometry itself has been altered, now they negate the scaling of all root nodes
+    // this is an issue for us, since we will receive this negated scalings in the exported GLB, which leads to issues
+    // on iOS devices
+    // we fix that by adding a top level root node with a negative scaling as well
+    // the exporter just removes this node as he detects a "noop root node" (implementation details of Babylon.js)
+    // everything beneath this node remains untouched
+    // TODO BJS Update: Test AR export on iPhones as well and double check if we still need this special logic
     const exportRootNode = new TransformNode(GltfExportManager._EXPORT_ROOT_NAME, this.viewer.scene);
     exportRootNode.scaling = new Vector3(-1, 1, 1);
     injectMetadata(exportRootNode!, {
@@ -74,30 +150,31 @@ export class GltfExportManager {
       [GltfExportManager._METADATA_PROPS.deleteAfterExport]: true,
     });
 
-    // handle nodes
+    // create clones of each node (recursively), optionally exchange with cloned materials and mark these nodes for the
+    // export
     this.viewer.scene.rootNodes
       .filter(rootNode => rootNode.name !== GltfExportManager._EXPORT_ROOT_NAME)
       .forEach(rootNode => this._prepareNodeForExport(rootNode, exportRootNode, excluded));
 
     // bake transformation of all meshes, so that no negative scalings are left
     // it's important that this is done AFTER instanced meshes have been converted (_prepareNodeForExport)
-    this.viewer.scene.meshes
-      .filter(mesh => !!mesh.metadata?.[GltfExportManager._METADATA_PROPS.exportNode])
-      .forEach(mesh => bakeGeometryOfMesh(mesh as Mesh));
+    this._getNodesMarkedForExport(true).forEach(mesh => bakeGeometryOfMesh(mesh as Mesh));
 
     // reset transformation of all "TransformNodes", which couldn't be handled by the geometry baking algorithm
     // it's important that this is done AFTER all geometries have been baked
-    [...this.viewer.scene.transformNodes, ...this.viewer.scene.meshes]
-      .filter(
-        node =>
-          !!node.metadata?.[GltfExportManager._METADATA_PROPS.exportNode] &&
-          node.name !== GltfExportManager._EXPORT_ROOT_NAME
-      )
-      .forEach(node => resetTransformation(node as TransformNode));
+    this._getNodesMarkedForExport().forEach(node => resetTransformation(node as TransformNode));
   }
 
-  protected async _exportPostProcess(): Promise<void> {
-    // dispose all nodes and materials that have only been created for the export
+  /**
+   * Cleans up scene after export
+   */
+  protected async _exportPostProcess(optimizeForAR: boolean): Promise<void> {
+    if (!optimizeForAR) {
+      // nothing to do, since no changes have been made without AR optimizations
+      return;
+    }
+
+    // dispose all nodes, materials and textures that have only been created for the export
     this.viewer.scene.rootNodes
       .filter(rootNode => rootNode.metadata?.[GltfExportManager._METADATA_PROPS.deleteAfterExport])
       .forEach(rootNode => rootNode.dispose());
@@ -106,43 +183,45 @@ export class GltfExportManager {
       .filter(mat => !!mat.metadata?.[GltfExportManager._METADATA_PROPS.deleteAfterExport])
       .forEach(material => material.dispose(false, false));
 
-    this.viewer.resumeRendering();
-  }
+    this.viewer.scene.textures
+      .filter(texture => !!texture.metadata?.[GltfExportManager._METADATA_PROPS.deleteAfterExport])
+      .forEach(texture => texture.dispose());
 
-  protected _gltfExportOptions(): IExportOptions {
-    return {
-      shouldExportNode: function (node: BjsNode) {
-        return !!node.metadata?.[GltfExportManager._METADATA_PROPS.exportNode];
-      },
-    };
+    // reset engines max texture size and resume rendering
+    this.viewer.engine.getCaps().maxTextureSize = this._maxTextureSize;
+    this.viewer.resumeRendering();
   }
 
+  /**
+   * Creates a clone of the node which should be used for the export.
+   * Also switches to the cloned material if required.
+   */
   protected _prepareNodeForExport(node: BjsNode, clonedParent: TransformNode, excluded?: ExcludedGeometryList) {
-    if (!this._shouldExportNode(node, excluded)) {
+    if (!GltfExportManager._shouldExportNode(node, excluded)) {
       return;
     }
 
     // from here on we only have TransformNodes
     const transformNode = node as TransformNode;
 
-    // clone original node and create unique name (via uniqueId)
-    const newNodeName = `${transformNode.name}_${transformNode.uniqueId}`;
+    // clone original node and create unique name (via uniqueId) for the export
+    const clonedNodeName = `${transformNode.name}_${transformNode.uniqueId}`;
     const clonedNode =
       transformNode instanceof InstancedMesh
-        ? createMeshFromInstancedMesh(transformNode, newNodeName, clonedParent)
-        : transformNode.clone(newNodeName, clonedParent, true)!;
+        ? createMeshFromInstancedMesh(transformNode, clonedNodeName, clonedParent)
+        : transformNode.clone(clonedNodeName, clonedParent, true)!;
 
     // exchange material
     if (clonedNode instanceof Mesh) {
       const exchangeWithMaterial =
         clonedNode.material?.metadata?.[GltfExportManager._METADATA_PROPS.exchangeMaterialWith];
       if (exchangeWithMaterial) {
-        clonedNode.material = this.viewer.scene.getMaterialByName(exchangeWithMaterial);
+        clonedNode.material = this.viewer.scene.getMaterialByUniqueID(exchangeWithMaterial);
       }
     }
 
     // signalize that this is a cloned node
-    injectMetadata(clonedNode!, {
+    injectMetadata(clonedNode, {
       [GltfExportManager._METADATA_PROPS.exportNode]: true,
       [GltfExportManager._METADATA_PROPS.deleteAfterExport]: true,
     });
@@ -152,10 +231,54 @@ export class GltfExportManager {
     childs.forEach(child => this._prepareNodeForExport(child, clonedNode, excluded));
   }
 
-  protected _shouldExportNode(node: BjsNode, excluded?: ExcludedGeometryList): boolean {
+  /**
+   * Help function for receiving all nodes that are marked for the export
+   */
+  protected _getNodesMarkedForExport(meshesOnly?: boolean) {
+    const nodes: TransformNode[] = [...this.viewer.scene.meshes];
+    if (!meshesOnly) {
+      nodes.push(...this.viewer.scene.transformNodes);
+    }
+
+    const filteredNodes = nodes.filter(
+      node =>
+        !!node.metadata?.[GltfExportManager._METADATA_PROPS.exportNode] &&
+        // in the desired use cases we want to exclude the export root node
+        // maybe add a parameter if we have to include it in certain scenarios in the future
+        node.name !== GltfExportManager._EXPORT_ROOT_NAME
+    );
+
+    return filteredNodes;
+  }
+
+  /**
+   * Defines options for the export.
+   * We don't allow the user to overwrite certain settings, since we rely on properties like `removeNoopRootNodes` to
+   * stay `true` in order to make the AR export work.
+   * We could theoretically allow it if AR optimization is not desired, but this may confuse the user.
+   */
+  protected static _gltfExportOptions(optimizeForAR: boolean, excluded?: ExcludedGeometryList): IExportOptions {
+    return {
+      shouldExportNode: function (node: BjsNode) {
+        if (optimizeForAR) {
+          // we explicitely marked nodes, that should be exported in AR mode
+          return !!node.metadata?.[GltfExportManager._METADATA_PROPS.exportNode];
+        } else {
+          // use the default export node check (enabled state, exclusion list, etc...)
+          return GltfExportManager._shouldExportNode(node, excluded);
+        }
+      },
+    };
+  }
+
+  /**
+   * Checks if a node should be available in the export
+   */
+  protected static _shouldExportNode(node: BjsNode, excluded?: ExcludedGeometryList): boolean {
     if (!(node instanceof TransformNode)) {
       return false;
     }
+    // TODO: think of adding "BackgroundHelper" and nodes with "infiniteDistance" here as well, at least in AR mode
     if (node.name === Viewer.BOUNDING_BOX_NAME) {
       return false;
     }
@@ -169,36 +292,25 @@ export class GltfExportManager {
     return true;
   }
 
-  protected _shouldReplaceMaterial(material: Material): boolean {
-    if (!(material instanceof PBRMaterial)) {
-      return false;
-    }
-    if (!material.subSurface.isRefractionEnabled) {
-      return false;
-    }
-    if (material.transparencyMode !== PBRMaterial.PBRMATERIAL_OPAQUE) {
-      return false;
-    }
-
-    return true;
-  }
-
   /**
-   * Create an export-friendly replacement material for a material using refraction.
+   * Creates a clone of the material which should be used for the export.
+   * This is mostly required for recreating textures with lower sizes.
+   * Also refraction fixes will be applied.
    */
-  protected _createRefractionMaterialReplacement(material: PBRMaterial) {
+  protected static _exchangeMaterial(material: Material) {
     const newName = `${material.name}_clone`;
-
-    const clonedMaterial = material.clone(newName);
-    clonedMaterial.refractionTexture = null;
-    clonedMaterial.metallicReflectanceTexture = null;
-    clonedMaterial.alpha = 0.7;
-    clonedMaterial.albedoColor = new Color3(0.3, 0.3, 0.3);
-    clonedMaterial.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHABLEND;
-    clonedMaterial.metallic = 0.65;
-    clonedMaterial.roughness = 0.15;
-
-    injectMetadata(material, { [GltfExportManager._METADATA_PROPS.exchangeMaterialWith]: newName });
+    const clonedMaterial = material.clone(newName)!;
+
+    // mark all exported textures, so that they will be deleted after the export
+    // CAUTION: disposing `RenderTargetTextures` will leave the scene in a "not ready" state
+    // I haven't found a solution for this in a certain time, so I'd just leave the in the scene, there are not used
+    // anyway since their parent material is disposed
+    clonedMaterial
+      .getActiveTextures()
+      .filter(texture => !(texture instanceof RenderTargetTexture))
+      .forEach(texture => injectMetadata(texture, { [GltfExportManager._METADATA_PROPS.deleteAfterExport]: true }));
+
+    injectMetadata(material, { [GltfExportManager._METADATA_PROPS.exchangeMaterialWith]: clonedMaterial.uniqueId });
     injectMetadata(clonedMaterial, { [GltfExportManager._METADATA_PROPS.deleteAfterExport]: true });
   }
 }

package/src/api/util/babylonHelper.ts

@@ -176,7 +176,7 @@ const cloneTransformNodeMaterial = function (
  * @param deep
  * @param metadata
  */
-const injectMetadata = function (object: Node | Material, metadata: {}, deep: boolean = true) {
+const injectMetadata = function (object: Node | Material | BaseTexture, metadata: {}, deep: boolean = true) {
   object.metadata = merge({}, object.metadata, metadata);
   if (deep && object instanceof TransformNode) {
     const children = object.getChildTransformNodes(true);
@@ -832,14 +832,14 @@ const reportDuplicateNodeNames = function (nodeNames: string[]): void {
 
 const drawPaintableOnMaterial = function (
   material: Material,
-  imageSource: CanvasImageSource,
+  imageSource: HTMLImageElement,
   scene: Scene,
   options?: PaintableOptions
 ) {
   // always take width and height from image source, scaling is done with uvScale properties
   const widthAndHeight = {
-    width: imageSource.width as number,
-    height: imageSource.height as number,
+    width: imageSource.width,
+    height: imageSource.height,
   };
 
   const texture = new DynamicTexture(`${material.id}.paintable_texture`, widthAndHeight, scene);

package/src/api/util/deviceHelper.ts

@@ -0,0 +1,31 @@
+import { SpecStorage } from '../store/specStorage';
+
+/**
+ * Checks if the current device is an iPhone
+ */
+const getIsIPhone = () => {
+  const isIPhone = /iPhone/.test(navigator.userAgent);
+
+  return isIPhone;
+};
+
+/**
+ * Checks if the current device is "scaled down", as defined in the Spec
+ */
+const getIsScaledDownDevice = () => {
+  const sceneJson = SpecStorage.get<SceneJson>('scene');
+
+  if (!sceneJson.engine?.limitTextureSize) {
+    // no down scaling defined
+    return false;
+  }
+
+  // check device
+  const deviceFits =
+    sceneJson.engine.limitTextureSize.devices === 'all' ||
+    (sceneJson.engine.limitTextureSize.devices === 'iPhone' && getIsIPhone());
+
+  return deviceFits;
+};
+
+export { getIsIPhone, getIsScaledDownDevice };

package/src/api/util/geometryHelper.ts

@@ -1,13 +1,16 @@
 import { VertexBuffer } from '@babylonjs/core/Buffers/buffer';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
-import { type Geometry } from '@babylonjs/core/Meshes';
+import type { Geometry } from '@babylonjs/core/Meshes/geometry';
 import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import type { MorphTarget } from '@babylonjs/core/Morph';
+import type { MorphTarget } from '@babylonjs/core/Morph/morphTarget';
 import { MorphTargetManager } from '@babylonjs/core/Morph/morphTargetManager';
 import type { FloatArray } from '@babylonjs/core/types';
 
+/**
+ * Creates a "standard" mesh from an instanced mesh, by cloning the source mesh and applying transformation data
+ */
 const createMeshFromInstancedMesh = function (
   instancedMesh: InstancedMesh,
   newName: string,
@@ -32,6 +35,10 @@ const createMeshFromInstancedMesh = function (
   return newMesh;
 };
 
+/**
+ * Removes transformation data from the mesh and stores it in the geometry, which is called "baking".
+ * Also considers the geometry change from morph targets.
+ */
 const bakeGeometryOfMesh = function (mesh: Mesh) {
   if (!mesh.geometry) {
     // no geometry available, nothing to do
@@ -60,6 +67,16 @@ const bakeGeometryOfMesh = function (mesh: Mesh) {
   mesh.bakeCurrentTransformIntoVertices();
 };
 
+/**
+ * Resets transformation to initial state
+ */
+const resetTransformation = function (node: TransformNode) {
+  node.position = new Vector3(0, 0, 0);
+  node.rotation = new Vector3(0, 0, 0);
+  node.rotationQuaternion = null;
+  node.scaling = new Vector3(1, 1, 1);
+};
+
 /**
  * @param kind morph targets can affect various vertices kinds, whereas "position" is the most common one
  * still other kinds (like normals or tangents) can be affected as well and can be provided on this input
@@ -108,11 +125,4 @@ const _getVerticesDataFromMorphTarget = function (kind: string, morphTarget: Mor
   return null;
 };
 
-const resetTransformation = function (node: TransformNode) {
-  node.position = new Vector3(0, 0, 0);
-  node.rotation = new Vector3(0, 0, 0);
-  node.rotationQuaternion = null;
-  node.scaling = new Vector3(1, 1, 1);
-};
-
 export { createMeshFromInstancedMesh, bakeGeometryOfMesh, resetTransformation };

package/src/api/util/globalTypes.ts

@@ -193,6 +193,15 @@ type SceneJson = {
   engine?: {
     antialiasing?: boolean;
     options?: EngineOptions;
+    adaptToDeviceRatio?: boolean;
+    /**
+     * Possibility to limit the size of textures when getting loaded by the engine.
+     * Activating this feature potentially saves a lot of memory and can be used to avoid crashes when loading expensive
+     * models on weaker devices.
+     * In praxis this has been an issue with iPhones a lot, therefore it's possible to activate this feature for iPhones
+     * only as well.
+     */
+    limitTextureSize?: LimitTextureSizeConfig | false;
   };
   scene: SceneDefinition;
   animations?: AnimationDefinitions;
@@ -204,6 +213,11 @@ type SceneJson = {
   cloneMaterialsOnMutation?: boolean;
 };
 
+type LimitTextureSizeConfig = {
+  size: 512 | 1024;
+  devices: 'iPhone' | 'all';
+};
+
 /**
  * Extends the `SceneJson` by removing the optional flag from some properties which surely exist in the auto generated
  * spec
@@ -468,26 +482,6 @@ type AnimationDefinitions = {
  */
 type AnimationDefinition = GSAPTweenVars & { shortestWay?: boolean };
 
-/**
- * Extends Babylon.js's {@link IExportOptions} by some viewer specific settings
- */
-interface IExportOptionsExtended extends IExportOptions {
-  /**
-   * Refraction textures get lost when exporting the scene to GLB.\
-   * The short explanation is that refraction is calculated by "RenderTargetTexture", which is created in real time from
-   * the camera perspective. This data is not available in the GLB export, therefore the texture gets removed.\
-   * However if `exchangeRefractionMaterials` is set, a fallback material with a similar look is exported instead. This
-   * fallback material solves the refraction with a combination of certain color, roughness, metallic and transparency
-   * mode settings.
-   */
-  exchangeRefractionMaterials?: boolean;
-  /**
-   * iOS devices crash when exporting textures which are larger than 1024.\
-   * If this flag is set, then all textures will be limited to a maximum texture size of 1024.
-   */
-  limitTextureSize?: boolean;
-}
-
 type SpecGenerationData = {
   name: string;
   url: string;

package/src/api/util/structureHelper.ts

@@ -10,7 +10,11 @@ import { Tags } from '@babylonjs/core/Misc/tags';
  * @param list list of excluded geometry
  * @returns boolean based on whether node (or one of its parents) was found in list
  */
-const isNodeIncludedInExclusionList = function (node: TransformNode, list: ExcludedGeometryList): boolean {
+const isNodeIncludedInExclusionList = function (
+  node: TransformNode,
+  list: ExcludedGeometryList,
+  skipParentCheck?: boolean
+): boolean {
   const checkNode = (inputNode: TransformNode, nodeToCheck: TransformNode) => {
     return inputNode.name === nodeToCheck.name;
   };
@@ -48,7 +52,7 @@ const isNodeIncludedInExclusionList = function (node: TransformNode, list: Exclu
   };
 
   let isExcluded = list.some(geometryToExclude => check(geometryToExclude, node));
-  if (!isExcluded && node.parent instanceof TransformNode) {
+  if (!isExcluded && !skipParentCheck && node.parent instanceof TransformNode) {
     isExcluded = isNodeIncludedInExclusionList(node.parent, list);
   }