Merge pull request #6183 from mozilla/CompatibleLoopAnimation

Fix bitECS loop-animation

src/components/gltf-model-plus.js

@@ -670,6 +670,122 @@ class GLTFMozTextureRGBE {
  }
 }
 
+// Mozilla Hubs loop-animation component has a problem in the spec.
+// The loop-animation component can refer to glTF.animations with
+// animation names but the glTF specification allows non-unique names
+// in glTF.animations so if there are multiple glTF.animations that
+// have the same name no one can know what glTF.animations a
+// loop-component using that names refers to.
+// This plugin converts animation names in the component to
+// animation indices to avoid the problem.
+// The old loop-animation component handler (without bitECS) seems
+// to assume that multiple glTF.animations that have the same name
+// have the same animation data and loop-component refers to the
+// first glTF.animation of the ones having the same name. This
+// plugin follows the assumption for the compatibility.
+// Refer to https://github.com/mozilla/hubs/pull/6153 for details.
+// TODO: Deprecate the loop-animation animation reference with name
+class GLTFHubsLoopAnimationComponent {
+ constructor(parser) {
+ this.parser = parser;
+ this.name = "MOZ_hubs_components.loop-animation";
+ }
+
+ beforeRoot() {
+ const json = this.parser.json;
+
+ if (json.animations === undefined) {
+ return;
+ }
+
+ // TODO: Optimize if needed
+ const findAnimation = name => {
+ for (let animationIndex = 0; animationIndex < json.animations.length; animationIndex++) {
+ const animationDef = json.animations[animationIndex];
+ if (animationDef.name === name) {
+ return animationIndex;
+ }
+ }
+ return null;
+ };
+
+ // TODO: Optimize if needed
+ const collectNodeIndices = (nodeIndex, nodeIndices) => {
+ nodeIndices.add(nodeIndex);
+ const nodeDef = json.nodes[nodeIndex];
+
+ if (nodeDef.children !== undefined) {
+ for (const child of nodeDef.children) {
+ collectNodeIndices(child, nodeIndices);
+ }
+ }
+
+ return nodeIndices;
+ };
+
+ const clonedAnimations = [];
+
+ for (let nodeIndex = 0; nodeIndex < json.nodes.length; nodeIndex++) {
+ const nodeDef = json.nodes[nodeIndex];
+
+ if (nodeDef.extensions?.MOZ_hubs_components?.["loop-animation"] !== undefined) {
+ const extensionDef = nodeDef.extensions.MOZ_hubs_components["loop-animation"];
+
+ if (extensionDef.clip === undefined || extensionDef.clip === "") {
+ continue;
+ }
+
+ // Converts .clip (name based) to .activeClipIndices (index based).
+ // Assumes that .activeClipIndices is undefined
+ // if .clip is defined
+
+ const clipNames = extensionDef.clip.split(",");
+ const activeClipIndices = [];
+ const nodeIndices = collectNodeIndices(nodeIndex, new Set());
+
+ for (const clipName of clipNames) {
+ const animationIndex = findAnimation(clipName);
+
+ if (animationIndex === null) {
+ continue;
+ }
+
+ const clonedAnimation = structuredClone(json.animations[animationIndex]);
+ let updated = false;
+
+ for (const channel of clonedAnimation.channels) {
+ if (channel.target.node !== undefined && !nodeIndices.has(channel.target.node)) {
+ // The old loop-animation handler (without bitECS) seems to retarget
+ // the loop-animation component root node if traget node is unfound
+ // under the loop-animation component root node.
+ // Here follows it for the compatibility, not sure if it's the best approach.
+ // Another approach may be to find a glTF.animation that is likely for
+ // this node. It may be guessed with target node.
+ channel.target.node = nodeIndex;
+ updated = true;
+ }
+ }
+
+ if (updated) {
+ // Retargetted so need to add a new glTF.animation.
+ activeClipIndices.push(json.animations.length + clonedAnimations.length);
+ clonedAnimations.push(clonedAnimation);
+ } else {
+ activeClipIndices.push(animationIndex);
+ }
+ }
+
+ extensionDef.activeClipIndices = activeClipIndices;
+ delete extensionDef.clip;
+ }
+ }
+
+ for (const animation of clonedAnimations) {
+ json.animations.push(animation);
+ }
+ }
+}
+
 export async function loadGLTF(src, contentType, onProgress, jsonPreprocessor) {
  let gltfUrl = src;
  let fileMap;
@@ -689,6 +805,7 @@ export async function loadGLTF(src, contentType, onProgress, jsonPreprocessor) {
  .register(parser => new GLTFHubsLightMapExtension(parser))
  .register(parser => new GLTFHubsTextureBasisExtension(parser))
  .register(parser => new GLTFMozTextureRGBE(parser, new RGBELoader().setDataType(THREE.HalfFloatType)))
+ .register(parser => new GLTFHubsLoopAnimationComponent(parser))
  .register(
  parser =>
  new GLTFLodExtension(parser, {