viewport bouding size to 1.0 by default

Author: yorkie

src/living/helpers/babylonjs/InteractiveDynamicTexture.ts

@@ -225,7 +225,7 @@ export class InteractiveDynamicTexture extends BABYLON.DynamicTexture {
     if (this._started) {
       this.renderToTexture();
     }
-    window.requestAnimationFrame(this._onTextureFrame.bind(this));
+    requestAnimationFrame(this._onTextureFrame.bind(this));
   }
 
   private _onResize(): void {

src/living/nodes/HTMLMetaElement.ts

@@ -37,7 +37,13 @@ class ViewportMeta {
           viewport.userScalable = value === 'yes';
           break;
         case 'bounding-size':
-          viewport.boundingSize = parseFloat(value);
+          if (value === 'auto') {
+            viewport.boundingSize = 1.0;
+          } else if (value === 'unlimited') {
+            viewport.boundingSize = Infinity;
+          } else {
+            viewport.boundingSize = parseFloat(value);
+          }
           break;
         case 'depth':
           viewport.depth = parseFloat(value);
@@ -83,19 +89,10 @@ export default class HTMLMetaElementImpl extends HTMLElementImpl implements HTML
       return;
     }
     const viewportConfig = ViewportMeta.Parse(input);
-    this._ownerDocument.addEventListener('load', () => {
-      const spaceTransform = this._ownerDocument.space.asNativeType<BABYLON.TransformNode>();
-      const recommendedContentSize = this._hostObject.getRecommendedBoudingSize?.() || 1.0;
-      const targetSize = viewportConfig.boundingSize * recommendedContentSize;
-      this.#fitTo(spaceTransform, targetSize);
-    });
-  }
-
-  #fitTo(node: BABYLON.TransformNode, targetSize: number) {
-    const boundingVectors = node.getHierarchyBoundingVectors(true);
-    const totalSize = boundingVectors.max.subtract(boundingVectors.min);
-    const scalingFactor = Math.min(targetSize / totalSize.x, targetSize / totalSize.y, targetSize / totalSize.z);
-    node.scaling.multiplyInPlace(new BABYLON.Vector3(scalingFactor, scalingFactor, scalingFactor));
-    console.log('Fitting to', targetSize, totalSize, scalingFactor);
+    if (viewportConfig.boundingSize === Infinity) {
+      this._ownerDocument._disableSpaceFitting = true;
+    } else {
+      this._ownerDocument._spaceViewportBoundingSize = viewportConfig.boundingSize;
+    }
   }
 }

src/living/nodes/SpatialDocument.ts

@@ -415,7 +415,13 @@ export class SpatialDocumentImpl<T extends NativeDocument = NativeDocument> exte
         }
         Promise.all(waitlist).then(dispatchSpaceReadyEvent);
       }
-    });
+    }, { once: true });
+    this.addEventListener('spaceReady', () => {
+      if (!this._disableSpaceFitting) {
+        const recommendedContentSize = nativeDocument.getRecommendedBoudingSize?.() || 1.0;
+        this._fitSpaceTo(this._spaceViewportBoundingSize * recommendedContentSize);
+      }
+    }, { once: true });
 
     // Bypass the GOMContentLoaded event from the XSML document.
     nativeDocument.addEventListener('DOMContentLoaded', (event) => {
@@ -1258,6 +1264,21 @@ export class SpatialDocumentImpl<T extends NativeDocument = NativeDocument> exte
   _createAttribute(privateData: ConstructorParameters<typeof AttrImpl>[2]) {
     return new AttrImpl(this._hostObject, [], privateData);
   }
+
+  _disableSpaceFitting: boolean = false;
+  _spaceViewportBoundingSize: number = 1.0;
+
+  /**
+   * Fit the <space /> to the target size.
+   * @param targetSize 
+   */
+  _fitSpaceTo(targetSize: number) {
+    const targetNode = this._ownerDocument.space.asNativeType<BABYLON.TransformNode>();
+    const boundingVectors = targetNode.getHierarchyBoundingVectors(true);
+    const totalSize = boundingVectors.max.subtract(boundingVectors.min);
+    const scalingFactor = Math.min(targetSize / totalSize.x, targetSize / totalSize.y, targetSize / totalSize.z);
+    targetNode.scaling.multiplyInPlace(new BABYLON.Vector3(scalingFactor, scalingFactor, scalingFactor));
+  }
 }
 
 applyMixins(SpatialDocumentImpl, [DocumentOrShadowRootImpl, GlobalEventHandlersImpl, ParentNodeImpl]);

src/living/nodes/SpatialMeshElement.ts

@@ -2,8 +2,6 @@ import { NativeDocument } from '../../impl-interfaces';
 import DOMExceptionImpl from '../domexception';
 import { SpatialElement } from './SpatialElement';
 
-const defaultFitSize = 0.3;
-
 export default class SpatialMeshElement extends SpatialElement {
   private _cachedName: string;
 
@@ -34,7 +32,7 @@ export default class SpatialMeshElement extends SpatialElement {
   get fitSize(): number {
     const v = parseFloat(this.getAttribute('fit-size'));
     if (v <= 0 || v > 1 || isNaN(v)) {
-      return defaultFitSize;
+      return 0;
     } else {
       return v;
     }
@@ -75,7 +73,9 @@ export default class SpatialMeshElement extends SpatialElement {
     contentElement.asNativeType().parent = containerNode; // Set the parent of the content native node to be the container node.
 
     // Fit the content element to the size
-    this._fitTo(containerNode, this.fitSize);
+    if (this.fitSize > 0) {
+      this._fitTo(containerNode, this.fitSize);
+    }
     containerNode.rotate(BABYLON.Axis.Y, Math.PI, BABYLON.Space.LOCAL);
   }
 
@@ -86,7 +86,7 @@ export default class SpatialMeshElement extends SpatialElement {
     return assetsBundle.instantiate(selector, this._getName());
   }
 
-  private _fitTo(node: BABYLON.TransformNode, ratio: number = defaultFitSize) {
+  private _fitTo(node: BABYLON.TransformNode, ratio: number) {
     const boundingVectors = node.getHierarchyBoundingVectors(true);
     const totalSize = boundingVectors.max.subtract(boundingVectors.min);
     const scalingFactor = Math.min(ratio / totalSize.x, ratio / totalSize.y, ratio / totalSize.z);