Merge pull request #1066 from mozilla/qa-stage

Hubs Cloud QA Update 2021-01-07

REMIXING.md

@@ -1,6 +1,6 @@
 ## Remixing
 
-Allowing remixing means that others can download, edit, change, and re-publish your Spoke scene as long as they give credit to the creators of the scene. If you allow allow remixing, you agree to license your scene under a [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode) license. We’ll provide you an opportunity to include the attribution information you want to include. This information will be associated with the scene, but not stored with you account.
+Allowing remixing means that others can download, edit, change, and re-publish your Spoke scene as long as they give credit to the creators of the scene. If you allow allow remixing, you agree to license your scene under a [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode) license. We’ll provide you an opportunity to include the attribution information you want to include. This information will be associated with the scene, but not stored with your account.
 
 You can change this setting at any time, by re-publishing your scene.
 

package.json

@@ -31,7 +31,7 @@
     "test": "concurrently --success \"first\" --kill-others \"yarn test-all\" \"yarn test-server\"",
     "test-server": "cross-env NODE_ENV=test webpack-dev-server --mode development --content-base ./test/fixtures",
     "test-all": "ava --verbose",
-    "test-ci": "ava --tap | tap-xunit > ./test/reports/ava.xml",
+    "test-ci": "ava --serial --tap | tap-xunit > ./test/reports/ava.xml",
     "unit-tests": "ava ./test/unit/**/*.test.js",
     "integration-tests": "concurrently --success \"first\" --kill-others \"ava ./test/integration\" \"yarn test-server\"",
     "update-test-snapshots": "concurrently --success \"first\" --kill-others \"ava -u\" \"yarn test-server\"",

src/editor/MeshCombinationGroup.js

@@ -131,7 +131,7 @@ export default class MeshCombinationGroup {
     }
 
     await asyncTraverse(rootObject, async object => {
-      if (isStatic(object) && object.isMesh) {
+      if (isStatic(object) && object.isMesh && object._combine !== false) {
         let added = false;
 
         for (const group of meshCombinationGroups) {

src/editor/nodes/EditorNodeMixin.js

@@ -208,6 +208,13 @@ export default function EditorNodeMixin(Object3DClass) {
       }
     }
 
+    /**
+     * Adds a GLTF component
+     * @param {String} name The component name to be replaced
+     * @param {Object} props The component properties to be set
+     * @param {boolean} params Parameters object
+     * @param {{THREE.Object3D} params.node The target Object3D element
+     */
     addGLTFComponent(name, props) {
       if (!this.userData.gltfExtensions) {
         this.userData.gltfExtensions = {};

src/editor/nodes/KitPieceNode.js

@@ -3,6 +3,7 @@ import Model from "../objects/Model";
 import { PropertyBinding } from "three";
 import { setStaticMode, StaticModes } from "../StaticMode";
 import cloneObject3D from "../utils/cloneObject3D";
+import { getComponents } from "../gltf/moz-hubs-components";
 import { isKitPieceNode, getComponent, getGLTFComponent, traverseGltfNode } from "../gltf/moz-hubs-components";
 import { RethrownError } from "../utils/errors";
 
@@ -28,17 +29,22 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
 
         node.collidable = !!json.components.find(c => c.name === "collidable");
         node.walkable = !!json.components.find(c => c.name === "walkable");
+        node.combine = !!json.components.find(c => c.name === "combine");
 
         const loopAnimationComponent = json.components.find(c => c.name === "loop-animation");
 
         if (loopAnimationComponent && loopAnimationComponent.props) {
-          const { clip, activeClipIndex } = loopAnimationComponent.props;
+          const { clip, activeClipIndices } = loopAnimationComponent.props;
 
-          if (activeClipIndex !== undefined) {
-            node.activeClipIndex = loopAnimationComponent.props.activeClipIndex;
-          } else if (clip !== undefined && node.model && node.model.animations) {
+          if (clip !== undefined && node.model && node.model.animations) {
             // DEPRECATED: Old loop-animation component stored the clip name rather than the clip index
-            node.activeClipIndex = node.model.animations.findIndex(animation => animation.name === clip);
+            const clipIndex = node.model.animations.findIndex(animation => animation.name === clip);
+
+            if (clipIndex !== -1) {
+              node.activeClipItems = node.getActiveItems([clipIndex]);
+            }
+          } else {
+            node.activeClipItems = node.getActiveItems(activeClipIndices);
           }
         }
 
@@ -60,6 +66,7 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
     this._canonicalUrl = "";
     this.collidable = true;
     this.walkable = true;
+    this.combine = true;
     this._kitId = null;
     this._pieceId = null;
     this.subPieces = [];
@@ -422,9 +429,9 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
       }
     };
 
-    if (this.activeClipIndex !== -1) {
+    if (this.activeClipIndices.length > 0) {
       components["loop-animation"] = {
-        activeClipIndex: this.activeClipIndex
+        activeClipIndices: this.activeClipIndices
       };
     }
 
@@ -436,6 +443,10 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
       components.walkable = {};
     }
 
+    if (this.combine) {
+      components.combine = {};
+    }
+
     return super.serialize(components);
   }
 
@@ -448,6 +459,7 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
     this._pieceId = source._pieceId;
     this.collidable = source.collidable;
     this.walkable = source.walkable;
+    this.combine = source.combine;
 
     // TODO update the sub-piece copy method
     if (this.model) {
@@ -502,19 +514,22 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
       receive: this.receiveShadow
     });
 
-    // TODO: Support exporting more than one active clip.
-    if (this.activeClip) {
-      const activeClipIndex = ctx.animations.indexOf(this.activeClip);
-
-      if (activeClipIndex === -1) {
-        throw new Error(
-          `Error exporting model "${this.name}" with url "${this._canonicalUrl}". Animation could not be found.`
-        );
-      } else {
-        this.addGLTFComponent("loop-animation", {
-          activeClipIndex: activeClipIndex
-        });
+    const clipIndices = this.activeClipIndices.map(index => {
+      return ctx.animations.indexOf(this.model.animations[index]);
+    });
+
+    this.model.traverse(child => {
+      const components = getComponents(child);
+
+      if (components && components["loop-animation"]) {
+        delete components["loop-animation"];
       }
+    });
+
+    if (clipIndices.length > 0) {
+      this.addGLTFComponent("loop-animation", {
+        activeClipIndices: clipIndices
+      });
     }
 
     if (this.model) {

src/editor/nodes/ModelNode.js

@@ -3,6 +3,7 @@ import Model from "../objects/Model";
 import EditorNodeMixin from "./EditorNodeMixin";
 import { setStaticMode, StaticModes } from "../StaticMode";
 import cloneObject3D from "../utils/cloneObject3D";
+import { getComponents } from "../gltf/moz-hubs-components";
 import { RethrownError } from "../utils/errors";
 import { getObjectPerfIssues, maybeAddLargeFileIssue } from "../utils/performance";
 
@@ -48,17 +49,22 @@ export default class ModelNode extends EditorNodeMixin(Model) {
 
         node.collidable = !!json.components.find(c => c.name === "collidable");
         node.walkable = !!json.components.find(c => c.name === "walkable");
+        node.combine = !!json.components.find(c => c.name === "combine");
 
         const loopAnimationComponent = json.components.find(c => c.name === "loop-animation");
 
         if (loopAnimationComponent && loopAnimationComponent.props) {
-          const { clip, activeClipIndex } = loopAnimationComponent.props;
+          const { clip, activeClipIndices } = loopAnimationComponent.props;
 
-          if (activeClipIndex !== undefined) {
-            node.activeClipIndex = loopAnimationComponent.props.activeClipIndex;
-          } else if (clip !== undefined && node.model && node.model.animations) {
+          if (clip !== undefined && node.model && node.model.animations) {
             // DEPRECATED: Old loop-animation component stored the clip name rather than the clip index
-            node.activeClipIndex = node.model.animations.findIndex(animation => animation.name === clip);
+            const clipIndex = node.model.animations.findIndex(animation => animation.name === clip);
+
+            if (clipIndex !== -1) {
+              node.activeClipItems = node.getActiveItems([clipIndex]);
+            }
+          } else {
+            node.activeClipItems = node.getActiveItems(activeClipIndices);
           }
         }
 
@@ -80,6 +86,7 @@ export default class ModelNode extends EditorNodeMixin(Model) {
     this._canonicalUrl = "";
     this.collidable = true;
     this.walkable = true;
+    this.combine = true;
     this.initialScale = 1;
     this.boundingBox = new Box3();
     this.boundingSphere = new Sphere();
@@ -315,9 +322,9 @@ export default class ModelNode extends EditorNodeMixin(Model) {
       }
     };
 
-    if (this.activeClipIndex !== -1) {
+    if (this.activeClipIndices.length > 0) {
       components["loop-animation"] = {
-        activeClipIndex: this.activeClipIndex
+        activeClipIndices: this.activeClipIndices
       };
     }
 
@@ -329,6 +336,10 @@ export default class ModelNode extends EditorNodeMixin(Model) {
       components.walkable = {};
     }
 
+    if (this.combine) {
+      components.combine = {};
+    }
+
     return super.serialize(components);
   }
 
@@ -348,6 +359,7 @@ export default class ModelNode extends EditorNodeMixin(Model) {
     this.attribution = source.attribution;
     this.collidable = source.collidable;
     this.walkable = source.walkable;
+    this.combine = source.combine;
     return this;
   }
 
@@ -358,19 +370,22 @@ export default class ModelNode extends EditorNodeMixin(Model) {
       receive: this.receiveShadow
     });
 
-    // TODO: Support exporting more than one active clip.
-    if (this.activeClip) {
-      const activeClipIndex = ctx.animations.indexOf(this.activeClip);
+    const clipIndices = this.activeClipIndices.map(index => {
+      return ctx.animations.indexOf(this.model.animations[index]);
+    });
+
+    this.model.traverse(child => {
+      const components = getComponents(child);
 
-      if (activeClipIndex === -1) {
-        throw new Error(
-          `Error exporting model "${this.name}" with url "${this._canonicalUrl}". Animation could not be found.`
-        );
-      } else {
-        this.addGLTFComponent("loop-animation", {
-          activeClipIndex: activeClipIndex
-        });
+      if (components && components["loop-animation"]) {
+        delete components["loop-animation"];
       }
+    });
+
+    if (clipIndices.length > 0) {
+      this.addGLTFComponent("loop-animation", {
+        activeClipIndices: clipIndices
+      });
     }
   }
 }

src/editor/nodes/SceneNode.js

@@ -138,6 +138,44 @@ function migrateV3ToV4(json) {
   return json;
 }
 
+const combineComponents = ["gltf-model", "kit-piece"];
+
+function migrateV4ToV5(json) {
+  json.version = 5;
+
+  for (const entityId in json.entities) {
+    if (!Object.prototype.hasOwnProperty.call(json.entities, entityId)) continue;
+
+    const entity = json.entities[entityId];
+
+    if (!entity.components) {
+      continue;
+    }
+
+    const animationComponent = entity.components.find(c => c.name === "loop-animation");
+
+    if (animationComponent) {
+      // Prior to V5 animation clips were stored in activeClipIndex as an integer
+      const { activeClipIndex } = animationComponent.props;
+      delete animationComponent.props.activeClipIndex;
+      // In V5+ activeClipIndices stores an array of integers. It may be undefined if migrating from a legacy scene where the
+      // clip property stores the animation clip name. We can't migrate this here so we do it in ModelNode and KitPieceNode.
+      animationComponent.props.activeClipIndices = activeClipIndex !== undefined ? [activeClipIndex] : [];
+    }
+
+    const hasCombineComponent = entity.components.find(c => combineComponents.indexOf(c.name) !== -1);
+
+    if (hasCombineComponent) {
+      entity.components.push({
+        name: "combine",
+        props: {}
+      });
+    }
+  }
+
+  return json;
+}
+
 export const FogType = {
   Disabled: "disabled",
   Linear: "linear",
@@ -166,6 +204,10 @@ export default class SceneNode extends EditorNodeMixin(Scene) {
       json = migrateV3ToV4(json);
     }
 
+    if (json.version === 4) {
+      json = migrateV4ToV5(json);
+    }
+
     const { root, metadata, entities } = json;
 
     let scene = null;
@@ -403,7 +445,7 @@ export default class SceneNode extends EditorNodeMixin(Scene) {
 
   serialize() {
     const sceneJson = {
-      version: 4,
+      version: 5,
       root: this.uuid,
       metadata: JSON.parse(JSON.stringify(this.metadata)),
       entities: {
@@ -577,11 +619,7 @@ export default class SceneNode extends EditorNodeMixin(Scene) {
 
     this.traverse(child => {
       if (child.isNode && child.type === "Model") {
-        const activeClip = child.activeClip;
-
-        if (activeClip) {
-          animations.push(child.activeClip);
-        }
+        animations.push(...child.clips);
       }
     });
 

src/editor/nodes/SpawnerNode.js

@@ -32,7 +32,9 @@ export default class SpawnerNode extends EditorNodeMixin(Model) {
   static async deserialize(editor, json, loadAsync, onError) {
     const node = await super.deserialize(editor, json);
 
-    const { src } = json.components.find(c => c.name === "spawner").props;
+    const { src, applyGravity } = json.components.find(c => c.name === "spawner").props;
+
+    node.applyGravity = !!applyGravity;
 
     loadAsync(node.load(src, onError));
 
@@ -47,6 +49,7 @@ export default class SpawnerNode extends EditorNodeMixin(Model) {
     this.boundingSphere = new Sphere();
     this.stats = defaultStats;
     this.gltfJson = null;
+    this.applyGravity = false;
   }
 
   // Overrides Model's src property and stores the original (non-resolved) url.
@@ -215,7 +218,8 @@ export default class SpawnerNode extends EditorNodeMixin(Model) {
   serialize() {
     return super.serialize({
       spawner: {
-        src: this._canonicalUrl
+        src: this._canonicalUrl,
+        applyGravity: this.applyGravity
       }
     });
   }
@@ -232,13 +236,18 @@ export default class SpawnerNode extends EditorNodeMixin(Model) {
       this._canonicalUrl = source._canonicalUrl;
     }
 
+    this.applyGravity = source.applyGravity;
+
     return this;
   }
 
   prepareForExport() {
     super.prepareForExport();
     this.addGLTFComponent("spawner", {
-      src: this._canonicalUrl
+      src: this._canonicalUrl,
+      mediaOptions: {
+        applyGravity: this.applyGravity
+      }
     });
     this.replaceObject();
   }