@babylonjs/loaders 5.25.0 → 5.26.0

package/glTF/2.0/glTFLoader.js

@@ -4,6 +4,7 @@ import { Color3 } from "@babylonjs/core/Maths/math.color.js";
 import { Tools } from "@babylonjs/core/Misc/tools.js";
 import { Camera } from "@babylonjs/core/Cameras/camera.js";
 import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera.js";
+import { AnimationKeyInterpolation } from "@babylonjs/core/Animations/animationKey.js";
 import { AnimationGroup } from "@babylonjs/core/Animations/animationGroup.js";
 import { Bone } from "@babylonjs/core/Bones/bone.js";
 import { Skeleton } from "@babylonjs/core/Bones/skeleton.js";
@@ -20,6 +21,27 @@ import { GLTFFileLoader, GLTFLoaderState, GLTFLoaderCoordinateSystemMode, GLTFLo
 import { DecodeBase64UrlToBinary, IsBase64DataUrl, LoadFileError } from "@babylonjs/core/Misc/fileTools.js";
 import { Logger } from "@babylonjs/core/Misc/logger.js";
 import { BoundingInfo } from "@babylonjs/core/Culling/boundingInfo.js";
+import { nodeAnimationData } from "./glTFLoaderAnimation.js";
+// https://stackoverflow.com/a/48218209
+function mergeDeep(...objects) {
+    const isObject = (obj) => obj && typeof obj === "object";
+    return objects.reduce((prev, obj) => {
+        Object.keys(obj).forEach((key) => {
+            const pVal = prev[key];
+            const oVal = obj[key];
+            if (Array.isArray(pVal) && Array.isArray(oVal)) {
+                prev[key] = pVal.concat(...oVal);
+            }
+            else if (isObject(pVal) && isObject(oVal)) {
+                prev[key] = mergeDeep(pVal, oVal);
+            }
+            else {
+                prev[key] = oVal;
+            }
+        });
+        return prev;
+    }, {});
+}
 /**
  * Helper class for working with arrays when loading the glTF asset
  */
@@ -49,26 +71,6 @@ export class ArrayItem {
         }
     }
 }
-// https://stackoverflow.com/a/48218209
-function mergeDeep(...objects) {
-    const isObject = (obj) => obj && typeof obj === "object";
-    return objects.reduce((prev, obj) => {
-        Object.keys(obj).forEach((key) => {
-            const pVal = prev[key];
-            const oVal = obj[key];
-            if (Array.isArray(pVal) && Array.isArray(oVal)) {
-                prev[key] = pVal.concat(...oVal);
-            }
-            else if (isObject(pVal) && isObject(oVal)) {
-                prev[key] = mergeDeep(pVal, oVal);
-            }
-            else {
-                prev[key] = oVal;
-            }
-        });
-        return prev;
-    }, {});
-}
 /**
  * The glTF 2.0 loader
  */
@@ -1114,6 +1116,7 @@ export class GLTFLoader {
         babylonCamera._parentContainer = this._assetContainer;
         this._babylonScene._blockEntityCollection = false;
         babylonCamera.ignoreParentScaling = true;
+        camera._babylonCamera = babylonCamera;
         babylonCamera.rotation = new Vector3(0, Math.PI, 0);
         switch (camera.type) {
             case "perspective" /* PERSPECTIVE */: {
@@ -1146,8 +1149,6 @@ export class GLTFLoader {
         GLTFLoader.AddPointerMetadata(babylonCamera, context);
         this._parent.onCameraLoadedObservable.notifyObservers(babylonCamera);
         assign(babylonCamera);
-        // register the camera to be used later.
-        camera._babylonCamera = babylonCamera;
         this.logClose();
         return Promise.all(promises).then(() => {
             return babylonCamera;
@@ -1177,32 +1178,190 @@ export class GLTFLoader {
      * @returns A promise that resolves with the loaded Babylon animation group when the load is complete
      */
     loadAnimationAsync(context, animation) {
-        // turn everything into pointer
-        for (const channel of animation.channels) {
-            if (channel.target.path == "pointer" /* POINTER */) {
-                continue;
-            }
-            // decorate the channel with a KHR_animation_pointer extension.
-            channel.target.extensions = channel.target.extensions || {};
-            channel.target.extensions.KHR_animation_pointer = {
-                pointer: `/nodes/${channel.target.node}/${channel.target.path}`,
-            };
-            channel.target.path = "pointer" /* POINTER */;
-            delete channel.target.node;
-            // ensure to declare extension used.
-            this._gltf.extensionsUsed = this._gltf.extensionsUsed || [];
-            if (this._gltf.extensionsUsed.indexOf(GLTFLoader._KHRAnimationPointerName) === -1) {
-                this._gltf.extensionsUsed.push(GLTFLoader._KHRAnimationPointerName);
-            }
+        const promise = this._extensionsLoadAnimationAsync(context, animation);
+        if (promise) {
+            return promise;
         }
-        // create the animation group to be passed to extension.
         this._babylonScene._blockEntityCollection = !!this._assetContainer;
         const babylonAnimationGroup = new AnimationGroup(animation.name || `animation${animation.index}`, this._babylonScene);
         babylonAnimationGroup._parentContainer = this._assetContainer;
         this._babylonScene._blockEntityCollection = false;
         animation._babylonAnimationGroup = babylonAnimationGroup;
-        const promise = this._extensionsLoadAnimationAsync(context, animation);
-        return promise ?? Promise.resolve(animation._babylonAnimationGroup);
+        const promises = new Array();
+        ArrayItem.Assign(animation.channels);
+        ArrayItem.Assign(animation.samplers);
+        for (const channel of animation.channels) {
+            promises.push(this._loadAnimationChannelAsync(`${context}/channels/${channel.index}`, context, animation, channel, (babylonTarget, babylonAnimation) => {
+                babylonTarget.animations = babylonTarget.animations || [];
+                babylonTarget.animations.push(babylonAnimation);
+                babylonAnimationGroup.addTargetedAnimation(babylonAnimation, babylonTarget);
+            }));
+        }
+        return Promise.all(promises).then(() => {
+            babylonAnimationGroup.normalize(0);
+            return babylonAnimationGroup;
+        });
+    }
+    /**
+     * @hidden
+     * Loads a glTF animation channel.
+     * @param context The context when loading the asset
+     * @param animationContext The context of the animation when loading the asset
+     * @param animation The glTF animation property
+     * @param channel The glTF animation channel property
+     * @param onLoad Called for each animation loaded
+     * @returns A void promise that resolves when the load is complete
+     */
+    _loadAnimationChannelAsync(context, animationContext, animation, channel, onLoad) {
+        const promise = this._extensionsLoadAnimationChannelAsync(context, animationContext, animation, channel, onLoad);
+        if (promise) {
+            return promise;
+        }
+        if (channel.target.node == undefined) {
+            return Promise.resolve();
+        }
+        const targetNode = ArrayItem.Get(`${context}/target/node`, this._gltf.nodes, channel.target.node);
+        // Ignore animations that have no animation targets.
+        if ((channel.target.path === "weights" /* WEIGHTS */ && !targetNode._numMorphTargets) ||
+            (channel.target.path !== "weights" /* WEIGHTS */ && !targetNode._babylonTransformNode)) {
+            return Promise.resolve();
+        }
+        let properties;
+        switch (channel.target.path) {
+            case "translation" /* TRANSLATION */: {
+                properties = nodeAnimationData.translation;
+                break;
+            }
+            case "rotation" /* ROTATION */: {
+                properties = nodeAnimationData.rotation;
+                break;
+            }
+            case "scale" /* SCALE */: {
+                properties = nodeAnimationData.scale;
+                break;
+            }
+            case "weights" /* WEIGHTS */: {
+                properties = nodeAnimationData.weights;
+                break;
+            }
+            default: {
+                throw new Error(`${context}/target/path: Invalid value (${channel.target.path})`);
+            }
+        }
+        const targetInfo = {
+            target: targetNode,
+            properties: properties,
+        };
+        return this._loadAnimationChannelFromTargetInfoAsync(context, animationContext, animation, channel, targetInfo, onLoad);
+    }
+    /**
+     * @hidden
+     * Loads a glTF animation channel.
+     * @param context The context when loading the asset
+     * @param animationContext The context of the animation when loading the asset
+     * @param animation The glTF animation property
+     * @param channel The glTF animation channel property
+     * @param targetInfo The glTF target and properties
+     * @param onLoad Called for each animation loaded
+     * @returns A void promise that resolves when the load is complete
+     */
+    _loadAnimationChannelFromTargetInfoAsync(context, animationContext, animation, channel, targetInfo, onLoad) {
+        const fps = this.parent.targetFps;
+        const invfps = 1 / fps;
+        const sampler = ArrayItem.Get(`${context}/sampler`, animation.samplers, channel.sampler);
+        return this._loadAnimationSamplerAsync(`${animationContext}/samplers/${channel.sampler}`, sampler).then((data) => {
+            let numAnimations = 0;
+            // Extract the corresponding values from the read value.
+            // GLTF values may be dispatched to several Babylon properties.
+            // For example, baseColorFactor [`r`, `g`, `b`, `a`] is dispatched to
+            // - albedoColor as Color3(`r`, `g`, `b`)
+            // - alpha as `a`
+            for (const property of targetInfo.properties) {
+                const stride = property.getStride(targetInfo.target);
+                const input = data.input;
+                const output = data.output;
+                const keys = new Array(input.length);
+                let outputOffset = 0;
+                switch (data.interpolation) {
+                    case "STEP" /* STEP */: {
+                        for (let index = 0; index < input.length; index++) {
+                            const value = property.getValue(targetInfo.target, output, outputOffset, 1);
+                            outputOffset += stride;
+                            keys[index] = {
+                                frame: input[index] * fps,
+                                value: value,
+                                interpolation: AnimationKeyInterpolation.STEP,
+                            };
+                        }
+                        break;
+                    }
+                    case "CUBICSPLINE" /* CUBICSPLINE */: {
+                        for (let index = 0; index < input.length; index++) {
+                            const inTangent = property.getValue(targetInfo.target, output, outputOffset, invfps);
+                            outputOffset += stride;
+                            const value = property.getValue(targetInfo.target, output, outputOffset, 1);
+                            outputOffset += stride;
+                            const outTangent = property.getValue(targetInfo.target, output, outputOffset, invfps);
+                            outputOffset += stride;
+                            keys[index] = {
+                                frame: input[index] * fps,
+                                inTangent: inTangent,
+                                value: value,
+                                outTangent: outTangent,
+                            };
+                        }
+                        break;
+                    }
+                    case "LINEAR" /* LINEAR */: {
+                        for (let index = 0; index < input.length; index++) {
+                            const value = property.getValue(targetInfo.target, output, outputOffset, 1);
+                            outputOffset += stride;
+                            keys[index] = {
+                                frame: input[index] * fps,
+                                value: value,
+                            };
+                        }
+                        break;
+                    }
+                }
+                if (outputOffset > 0) {
+                    const name = `${animation.name || `animation${animation.index}`}_channel${channel.index}_${numAnimations}`;
+                    property.buildAnimations(targetInfo.target, name, fps, keys, (babylonAnimatable, babylonAnimation) => {
+                        ++numAnimations;
+                        onLoad(babylonAnimatable, babylonAnimation);
+                    });
+                }
+            }
+        });
+    }
+    _loadAnimationSamplerAsync(context, sampler) {
+        if (sampler._data) {
+            return sampler._data;
+        }
+        const interpolation = sampler.interpolation || "LINEAR" /* LINEAR */;
+        switch (interpolation) {
+            case "STEP" /* STEP */:
+            case "LINEAR" /* LINEAR */:
+            case "CUBICSPLINE" /* CUBICSPLINE */: {
+                break;
+            }
+            default: {
+                throw new Error(`${context}/interpolation: Invalid value (${sampler.interpolation})`);
+            }
+        }
+        const inputAccessor = ArrayItem.Get(`${context}/input`, this._gltf.accessors, sampler.input);
+        const outputAccessor = ArrayItem.Get(`${context}/output`, this._gltf.accessors, sampler.output);
+        sampler._data = Promise.all([
+            this._loadFloatAccessorAsync(`/accessors/${inputAccessor.index}`, inputAccessor),
+            this._loadFloatAccessorAsync(`/accessors/${outputAccessor.index}`, outputAccessor),
+        ]).then(([inputData, outputData]) => {
+            return {
+                input: inputData,
+                interpolation: interpolation,
+                output: outputData,
+            };
+        });
+        return sampler._data;
     }
     /**
      * Loads a glTF buffer.
@@ -1746,7 +1905,6 @@ export class GLTFLoader {
     /**
      * Adds a JSON pointer to the metadata of the Babylon object at `<object>.metadata.gltf.pointers`.
      * @param babylonObject the Babylon object with metadata
-     * @param babylonObject.metadata
      * @param pointer the JSON pointer
      */
     static AddPointerMetadata(babylonObject, pointer) {
@@ -2003,6 +2161,9 @@ export class GLTFLoader {
     _extensionsLoadAnimationAsync(context, animation) {
         return this._applyExtensions(animation, "loadAnimation", (extension) => extension.loadAnimationAsync && extension.loadAnimationAsync(context, animation));
     }
+    _extensionsLoadAnimationChannelAsync(context, animationContext, animation, channel, onLoad) {
+        return this._applyExtensions(animation, "loadAnimationChannel", (extension) => extension._loadAnimationChannelAsync && extension._loadAnimationChannelAsync(context, animationContext, animation, channel, onLoad));
+    }
     _extensionsLoadSkinAsync(context, node, skin) {
         return this._applyExtensions(skin, "loadSkin", (extension) => extension._loadSkinAsync && extension._loadSkinAsync(context, node, skin));
     }
@@ -2096,10 +2257,6 @@ export class GLTFLoader {
         this._parent._endPerformanceCounter(counterName);
     }
 }
-/** @internal */
-// note : KHR_animation_pointer is used to load animation in ALL case, turning everything
-// into pointer. This is the reason why this value is located here.
-GLTFLoader._KHRAnimationPointerName = "KHR_animation_pointer";
 GLTFLoader._RegisteredExtensions = {};
 /**
  * The default glTF sampler.