@needle-tools/engine 2.24.0-pre

package/src/engine/extensions/KHR_animation_pointer.ts

@@ -0,0 +1,484 @@
+// /*
+
+// TOPICS/PROBLEMS:
+
+// - extensions might need a way to override PropertyBinding to find the right target objects
+// - animating emissiveMap.offset/repeat won't work, three only uses the main map UV transform for all textures
+// - lights can't be animated right now since there's no getDependency for them
+
+// */
+
+// import { getParam } from "../engine_utils";
+// import { PropertyBinding, AnimationClip, BufferAttribute, ColorKeyframeTrack, InterpolateDiscrete, InterpolateLinear, KeyframeTrack, Matrix3, NumberKeyframeTrack, Object3D, QuaternionKeyframeTrack, VectorKeyframeTrack, Material } from "three";
+// import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
+
+// const debug = getParam("debugkhranimation");
+// export const NEEDLE_KHR_ANIMATION_POINTER_NAME = "KHR_animation_pointer123";
+
+// // TBD: I'm adding
+
+// const extensionsArray = PropertyBinding["findNodeExtensions"];
+// if(extensionsArray){
+//     extensionsArray.push((node, path) => {
+//         if (path.startsWith(".nodes.")) {
+//             const sections = path.substring(1).split(".");
+//             let currentTarget: object | undefined;
+//             console.log(sections);
+//             for (let i = 1; i < sections.length; i++) {
+//                 const val: string = sections[i];
+//                 const isUUID = val.length == 36;
+//                 if (isUUID) {
+//                     currentTarget = node.getObjectByProperty("uuid", val);
+//                 }
+//                 else if (currentTarget && currentTarget[val]) {
+//                     const index = Number.parseInt(val);
+//                     let key: string | number = val;
+//                     if (index >= 0) key = index;
+//                     currentTarget = currentTarget[key];
+//                     if (debug)
+//                         console.log(currentTarget);
+//                 }
+//                 else {
+//                     currentTarget = find(node, x => x["sourceId"] === val);
+//                 }
+//             }
+//             // if (debug)
+//             console.log("NODE", path, currentTarget)
+//             return currentTarget;
+//         }
+//     });
+// }
+
+// function find(obj: THREE.Object3D, select: (obj: THREE.Object3D) => any): any {
+//     const cb = select(obj);
+//     if (cb === true) return obj;
+//     if (cb) return cb;
+//     for (let i = 0; i < obj.children.length; i++) {
+//         const child = obj.children[i];
+//         const res = find(child, select);
+//         if (res) return res;
+//     }
+//     return null;
+// }
+
+// const PATH_PROPERTIES = {
+//     position: 'position',
+//     scale: 'scale',
+//     translation: 'position',
+//     rotation: 'quaternion',
+//     weights: 'morphTargetInfluences'
+// };
+
+// const TARGET_TYPE = {
+//     node: 'node',
+//     material: 'material',
+//     light: 'light',
+// }
+
+// // Object.defineProperty(Object3D.prototype, 'components', {
+// //     get: function () { return this.userData.components; }
+// // });
+
+
+// const INTERPOLATION = {
+//     CUBICSPLINE: undefined, // We use a custom interpolant (GLTFCubicSplineInterpolation) for CUBICSPLINE tracks. Each
+//     // keyframe track will be initialized with a default interpolation type, then modified.
+//     LINEAR: InterpolateLinear,
+//     STEP: InterpolateDiscrete
+// };
+
+// export class KHR_animation_pointer implements GLTFLoaderPlugin {
+
+//     get name(): string {
+//         return NEEDLE_KHR_ANIMATION_POINTER_NAME;
+//     }
+
+//     private parser: GLTFParser;
+
+//     constructor(loader: GLTFParser) {
+//         this.parser = loader;
+//     }
+
+//     // this is just here to satisfy typescript
+//     // but actually loadAnimation exists and is called
+//     afterRoot(_result: GLTF) {
+//         return null;
+//     }
+
+//     async loadAnimation123(animationIndex: number) {
+//         const json = this.parser.json;
+//         const animationDef = json.animations[animationIndex];
+
+//         const pendingNodes: any = [];
+//         const pendingInputAccessors: any = [];
+//         const pendingOutputAccessors: any = [];
+//         const pendingSamplers: any = [];
+//         const pendingTargets: any = [];
+
+//         for (let i = 0, il = animationDef.channels.length; i < il; i++) {
+
+//             const channel = animationDef.channels[i];
+
+//             const sampler = animationDef.samplers[channel.sampler];
+//             const target = channel.target;
+//             // could be node ID or material ID
+//             let targetId: null | number = target.node !== undefined ? target.node : target.id; // NOTE: target.id is deprecated.
+//             const input = animationDef.parameters !== undefined ? animationDef.parameters[sampler.input] : sampler.input;
+//             const output = animationDef.parameters !== undefined ? animationDef.parameters[sampler.output] : sampler.output;
+
+//             let targetProperty: string | undefined = undefined;
+
+//             // check if this is a extension animation
+//             let type = TARGET_TYPE.node;
+//             const useExtension = target.extensions && target.extensions[NEEDLE_KHR_ANIMATION_POINTER_NAME];
+//             if (useExtension) {
+//                 const ext = target.extensions[NEEDLE_KHR_ANIMATION_POINTER_NAME];
+//                 let path: string = ext.pointer;
+//                 if (debug)
+//                     console.log("Original path: " + path);
+
+//                 if (!path) {
+//                     console.warn("Invalid path", ext, target);
+//                     continue;
+//                 }
+
+//                 if (path.startsWith("/materials/"))
+//                     type = TARGET_TYPE.material;
+
+//                 if (path.startsWith("/extensions/KHR_lights_punctual/lights/"))
+//                     type = TARGET_TYPE.light;
+
+//                 targetId = this.tryResolveNodeId(path, type);
+//                 if (targetId === null) {
+//                     console.warn("Failed resolving animation node id: " + targetId, path);
+//                     continue;
+//                 }
+
+//                 // TODO could be parsed better
+
+//                 switch (type) {
+//                     case TARGET_TYPE.material:
+//                         const pathIndex = ("/materials/" + targetId.toString() + "/").length;
+//                         const pathStart = path.substring(0, pathIndex);
+//                         targetProperty = path.substring(pathIndex);
+//                         // console.log("PROP", targetProperty, targetId, pathIndex);
+//                         switch (targetProperty) {
+//                             case "pbrMetallicRoughness/baseColorFactor":
+//                                 targetProperty = "color";
+//                                 break;
+//                             case "pbrMetallicRoughness/roughnessFactor":
+//                                 targetProperty = "roughness";
+//                                 break;
+//                             case "pbrMetallicRoughness/metallicFactor":
+//                                 targetProperty = "metalness";
+//                                 break;
+//                             case "pbrMetallicRoughness/emissiveFactor":
+//                                 targetProperty = "emissive";
+//                                 break;
+//                             case "extensions/KHR_materials_emissive_strength/emissiveStrength":
+//                                 targetProperty = "emissiveIntensity";
+//                                 break;
+//                             case "baseColorTexture/extensions/KHR_texture_transform/scale":
+//                                 targetProperty = "map/repeat";
+//                                 break;
+//                             case "baseColorTexture/extensions/KHR_texture_transform/offset":
+//                                 targetProperty = "map/offset";
+//                                 break;
+//                             case "emissiveTexture/extensions/KHR_texture_transform/scale":
+//                                 targetProperty = "emissiveMap/repeat";
+//                                 break;
+//                             case "emissiveTexture/extensions/KHR_texture_transform/offset":
+//                                 targetProperty = "emissiveMap/offset";
+//                                 break;
+//                         }
+//                         path = pathStart + targetProperty;
+//                         console.log("Path start", pathStart, "TargetProp", targetProperty, "Path", path);
+//                         break;
+//                     case TARGET_TYPE.node:
+//                         const pathIndexNode = ("/nodes/" + targetId.toString() + "/").length;
+//                         const pathStartNode = path.substring(0, pathIndexNode);
+//                         targetProperty = path.substring(pathIndexNode);
+//                         switch (targetProperty) {
+//                             case "translation":
+//                                 targetProperty = "position";
+//                                 break;
+//                             case "rotation":
+//                                 targetProperty = "quaternion";
+//                                 break;
+//                             case "scale":
+//                                 targetProperty = "scale";
+//                                 break;
+//                         }
+//                         path = pathStartNode + targetProperty;
+//                         break;
+//                     case TARGET_TYPE.light:
+//                         const pathIndexLight = ("/extensions/KHR_lights_punctual/lights/" + targetId.toString() + "/").length;
+//                         // const pathStartLight = path.substring(0, pathIndexLight);
+//                         targetProperty = path.substring(pathIndexLight);
+//                         switch (targetProperty) {
+//                             case "color":
+//                                 break;
+//                             case "intensity":
+//                                 break;
+//                         }
+//                         break;
+//                 }
+
+//                 if (path.includes("extensions/builtin_components"))
+//                     path = path.replace("extensions/builtin_components", "userData/components");
+
+//                 target.extensions[NEEDLE_KHR_ANIMATION_POINTER_NAME].path = path;
+//             }
+
+//             if (targetId === null) {
+//                 console.warn("Failed resolving animation node id: " + targetId, target);
+//                 continue;
+//             }
+
+//             // console.log("resolved name", targetId, type, targetProperty)
+
+
+//             let depPromise: any;
+//             if (type === TARGET_TYPE.node)
+//                 depPromise = this.parser.getDependency('node', targetId);
+//             else if (type === TARGET_TYPE.material)
+//                 depPromise = this.parser.getDependency('material', targetId);
+//             else if (type === TARGET_TYPE.light) {
+//                 // depPromise = this.parser.getDependency('light', targetId);
+//             }
+//             else
+//                 console.error("Unhandled type", type);
+//             pendingNodes.push(depPromise);
+
+//             pendingInputAccessors.push(this.parser.getDependency('accessor', input));
+//             pendingOutputAccessors.push(this.parser.getDependency('accessor', output));
+//             pendingSamplers.push(sampler);
+//             pendingTargets.push(target);
+
+//         }
+
+//         return Promise.all([
+
+//             Promise.all(pendingNodes),
+//             Promise.all(pendingInputAccessors),
+//             Promise.all(pendingOutputAccessors),
+//             Promise.all(pendingSamplers),
+//             Promise.all(pendingTargets),
+
+//         ]).then((dependencies) => {
+
+//             const nodes = dependencies[0];
+//             const inputAccessors = dependencies[1];
+//             const outputAccessors = dependencies[2];
+//             const samplers = dependencies[3];
+//             const targets = dependencies[4];
+
+//             const tracks: KeyframeTrack[] = [];
+
+//             for (let i = 0, il = nodes.length; i < il; i++) {
+
+//                 if (nodes[i] === undefined) continue; // unsupported types
+
+//                 const node = nodes[i];
+//                 const inputAccessor: BufferAttribute = inputAccessors[i];
+//                 const outputAccessor: BufferAttribute = outputAccessors[i];
+//                 const sampler = samplers[i];
+//                 const target: any = targets[i];
+
+//                 const ext = target.extensions;
+//                 let animatedPropertyPath = ext ? ext[NEEDLE_KHR_ANIMATION_POINTER_NAME]?.path : null;
+//                 if (animatedPropertyPath) {
+//                     animatedPropertyPath = animatedPropertyPath.replaceAll("/", ".");
+//                     // replace material ID by UUID
+//                     let parts = animatedPropertyPath.split('.');
+//                     node.sourceId = parts[2];
+//                     // parts[2] = node.uuid;
+//                     animatedPropertyPath = parts.join('.');
+//                     if (debug)
+//                         console.log(node, inputAccessor, outputAccessor, target, animatedPropertyPath);
+//                 }
+
+//                 if (node === undefined) continue;
+
+//                 if (node.updateMatrix) {
+//                     node.updateMatrix();
+//                     node.matrixAutoUpdate = true;
+//                 }
+
+//                 let TypedKeyframeTrack;
+
+//                 switch (PATH_PROPERTIES[target.path]) {
+
+//                     case PATH_PROPERTIES.weights:
+
+//                         TypedKeyframeTrack = NumberKeyframeTrack;
+//                         break;
+
+//                     case PATH_PROPERTIES.rotation:
+
+//                         TypedKeyframeTrack = QuaternionKeyframeTrack;
+//                         break;
+
+//                     case PATH_PROPERTIES.position:
+//                     case PATH_PROPERTIES.scale:
+
+//                         TypedKeyframeTrack = VectorKeyframeTrack;
+//                         break;
+
+//                     default:
+//                         switch (outputAccessor.itemSize) {
+//                             case 1:
+//                                 TypedKeyframeTrack = NumberKeyframeTrack;
+//                                 break;
+//                             case 2:
+//                             case 3:
+//                                 TypedKeyframeTrack = VectorKeyframeTrack;
+//                                 break;
+//                             case 4:
+//                                 TypedKeyframeTrack = ColorKeyframeTrack;
+//                                 break;
+//                         }
+//                         break;
+
+//                 }
+
+//                 const targetName = node.name ? node.name : node.uuid;
+
+//                 const interpolation = sampler.interpolation !== undefined ? INTERPOLATION[sampler.interpolation] : InterpolateLinear;
+
+//                 const targetNames: string[] = [];
+
+//                 if (PATH_PROPERTIES[target.path] === PATH_PROPERTIES.weights) {
+
+//                     node.traverse(function (object) {
+
+//                         if (object.morphTargetInfluences) {
+
+//                             targetNames.push(object.name ? object.name : object.uuid);
+
+//                         }
+
+//                     });
+
+//                 } else {
+
+//                     targetNames.push(targetName);
+
+//                 }
+
+//                 let outputArray = outputAccessor.array;
+
+//                 if (outputAccessor.normalized) {
+
+//                     // TODO: this function exists on GLTFLoader - we may be just able to call it from here
+//                     //@ts-ignore
+//                     const scale = getNormalizedComponentScale(outputArray.constructor);
+//                     const scaled = new Float32Array(outputArray.length);
+
+//                     for (let j = 0, jl = outputArray.length; j < jl; j++) {
+
+//                         scaled[j] = outputArray[j] * scale;
+
+//                     }
+
+//                     outputArray = scaled;
+
+//                 }
+
+//                 for (let j = 0, jl = targetNames.length; j < jl; j++) {
+
+//                     let targetPath = PATH_PROPERTIES[target.path];
+//                     const name = targetNames[j];
+//                     const trackName = animatedPropertyPath ?? (name + "." + targetPath);
+//                     console.log(trackName);
+//                     const track = new TypedKeyframeTrack(
+//                         trackName,
+//                         inputAccessor.array,
+//                         outputArray,
+//                         interpolation
+//                     );
+//                     // this is just to make animation component work in setup again (finding the correct gameObject)
+//                     track.__objectName = name;
+
+//                     // Override interpolation with custom factory method.
+//                     if (sampler.interpolation === 'CUBICSPLINE') {
+
+//                         console.warn("Cubic interpolation not supported for KHR_animation2 extension for now - TODO: copy from GLTFLoader")
+
+//                         // track.createInterpolant = function InterpolantFactoryMethodGLTFCubicSpline(result) {
+
+//                         //     // A CUBICSPLINE keyframe in glTF has three output values for each input value,
+//                         //     // representing inTangent, splineVertex, and outTangent. As a result, track.getValueSize()
+//                         //     // must be divided by three to get the interpolant's sampleSize argument.
+
+//                         //     const interpolantType = (this instanceof QuaternionKeyframeTrack) ? GLTFCubicSplineQuaternionInterpolant : GLTFCubicSplineInterpolant;
+
+//                         //     return new interpolantType(this.times, this.values, this.getValueSize() / 3, result);
+
+//                         // };
+
+//                         // // Mark as CUBICSPLINE. `track.getInterpolation()` doesn't support custom interpolants.
+//                         // track.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline = true;
+
+//                     }
+
+//                     tracks.push(track);
+
+//                 }
+
+//             }
+
+//             const name = animationDef.name ? animationDef.name : 'animation_' + animationIndex;
+//             const clip = new AnimationClip(name, undefined, tracks);
+//             return clip;
+//         });
+//     }
+
+//     private tryResolveNodeId(path: string, type: string): number | null {
+//         let name: string = "";
+//         if (type === "node") {
+//             name = path.substring("/nodes/".length);
+//         }
+//         else if (type === "material") {
+//             name = path.substring("/materials/".length);
+//         }
+//         name = name.substring(0, name.indexOf("/"));
+//         const index = Number.parseInt(name);
+//         return index;
+//     }
+
+//     // async afterRoot(result: GLTF): Promise<void> {
+//     //     const parser = result.parser;
+//     //     const ext = parser?.extensions;
+//     //     if (!ext) return;
+//     //     const hasExtension = ext[this.name];
+//     //     if (!hasExtension) return;
+
+//     //     if (result.animations?.length)
+//     //         console.log(result);
+
+//     //     if (hasExtension === true) {
+//     //         const data = parser.plugins[this.name];
+//     //         if (!data) return;
+//     //         const nodes = parser.json.nodes;
+//     //         // console.log(result);
+//     //         // for (let i = 0; i < nodes.length; i++) {
+//     //         //     const obj = await parser.getDependency('node', i);
+//     //         //     // this.nodeToObjectMap[i] = obj;
+//     //         // }
+//     //         for (let i = 0; i < nodes.length; i++) {
+//     //             const node = nodes[i];
+//     //             // console.log(node);
+//     //             // const index = i;
+//     //             const ext = node.extensions;
+//     //             if (!ext) continue;
+//     //             const data = ext[this.name];
+//     //             console.log(result);
+//     //             console.log(node, data);
+//     //         }
+//     //     }
+//     //     return;
+//     // }
+
+
+// }

package/src/engine/extensions/NEEDLE_animator_controller.ts

@@ -0,0 +1,68 @@
+// import { builtinComponentKeyName } from "../engine_constants";
+// import { AnimationClip, Object3D } from "three";
+// import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
+// import { EXTENSION_NAME as COMPONENT_EXTENSION_NAME } from "./NEEDLE_components";
+// import { AnimatorConditionMode, AnimatorControllerModel } from "./NEEDLE_animator_controller_model";
+
+// export const EXTENSION_NAME = "NEEDLE_animator_controller";
+
+
+// export class NEEDLE_animator_controller implements GLTFLoaderPlugin {
+
+//     get name(): string {
+//         return EXTENSION_NAME;
+//     }
+
+//     private parser: GLTFParser;
+
+//     constructor(parser: GLTFParser) {
+//         this.parser = parser;
+//         // console.log(this);
+//     }
+
+//     // private lastIndex: number = -1;
+//     afterRoot(result: GLTF): Promise<void> | null {
+//         for (const node of this.parser.json.nodes) {
+//             if (!node.extensions) continue;
+//             const ext = node.extensions[EXTENSION_NAME];
+//             this.assignAnimationClips(result.animations, ext);
+//             const componentsExt = node.extensions[COMPONENT_EXTENSION_NAME];
+//             if (ext && componentsExt) {
+//                 console.log(ext, componentsExt);
+//                 for (const comp of componentsExt[builtinComponentKeyName]) {
+//                     if (typeof comp["runtimeAnimatorController"] === "object") {
+//                         const guid = comp["runtimeAnimatorController"].guid;
+//                         if (guid === ext.guid) {
+//                             comp["runtimeAnimatorController"] = ext;
+//                         }
+//                     }
+//                 }
+//             }
+//         }
+//         return null;
+//     }
+
+//     private assignAnimationClips(clips: AnimationClip[], ext : AnimatorControllerModel) {
+//         if (!clips || clips.length <= 0) return;
+//         if (!ext || !ext.layers) return;
+//         for (const layer of ext.layers) {
+//             const sm = layer?.stateMachine;
+//             if(!sm?.states) continue;
+//             for(const state of sm.states) {
+//                 const motion = state.motion;
+//                 if(motion?.index >= 0) {
+//                     const clip = clips[motion.index];
+//                     if(clip) {
+//                         state.motion.clip = clip;
+//                     }
+//                 }
+//             }
+//         }
+//     }
+
+//     // private applyExtensionData(node: Object3D, ext: TimelineData) {
+
+//     //     console.log(node, ext);
+
+//     // }
+// }