mix animation

frontend/src/GLFTLoader.ts

@@ -259,7 +259,7 @@ export default class GLFTLoader {
             //5126 float
             //5123 ushort
             //5125  uint
-
+            //5121 ubyte
             let accessorIndices = this.accessors[primitive.indices]
             let indexData = this.getSlize(accessorIndices);
 
@@ -294,6 +294,21 @@ export default class GLFTLoader {
                 let tangentData = this.getSlize(tangentAccessor);
                 mesh.setTangents(new Float32Array(tangentData));
             }
+
+            if (primitive.attributes.WEIGHTS_0) {
+                let weightAccessor = this.accessors[primitive.attributes.WEIGHTS_0];
+                let weightData = this.getSlize(weightAccessor); //bytes
+
+                mesh.setWeights(new Float32Array(weightData));
+
+            }
+            if (primitive.attributes.JOINTS_0){
+                let jointAccessor = this.accessors[primitive.attributes.JOINTS_0];
+                let jointData = this.getSlize( jointAccessor);
+               let data = new Uint32Array(new Int8Array(jointData));
+               mesh.setJoints(data);
+            }
+
             this.meshes.push(mesh);
 
 

frontend/src/extras/FpsScreen.ts

@@ -13,7 +13,7 @@ export class FpsScreen extends Model{
         super(renderer,"fpsScreen");
         this.mesh = new Plane(renderer);
         this.material =new Material(this.renderer,this.label,new FpsShader(this.renderer,this.label));
-       
+
 
         this.material.uniforms.setTexture("text",renderer.texturesByLabel["7dig.png"])
         this.setPosition(-0.00,0.0,0.01)

frontend/src/lib/animation/Animation.ts

@@ -5,7 +5,7 @@ import Timer from "../Timer";
 
 export default class Animation extends ObjectGPU
 {
-    private channels: Array<AnimationChannel>=[] ;
+    public channels: Array<AnimationChannel>=[] ;
     private startTime :number=Number.MAX_VALUE;
     private stopTime :number=Number.MIN_VALUE;
     private time:number =0;

frontend/src/lib/animation/AnimationChannel.ts

@@ -1,14 +1,16 @@
 import Object3D from "../core/Object3D";
+import {Quaternion, Vector3} from "math.gl";
 
 export default class AnimationChannel{
     type: "translation"|"rotation"|"scale";
     startTime:number;
     stopTime:number;
     private interpolation: "STEP" | "LINEAR";
     private timeData: Array<number>;
-    protected target: Object3D;
+    public target: Object3D;
     private hasAnime: boolean=true;
     protected firstIndex: number;
+    public result:Quaternion|Vector3;
     constructor(type:"translation"|"rotation"|"scale",startTime:number,stopTime:number,interpolation:"STEP"|"LINEAR",timeData:Array<number>,target:Object3D) {
         this.type =type;
         this.startTime =startTime;
@@ -22,7 +24,9 @@ export default class AnimationChannel{
 
         }
     }
+    mix(other:Vector3|Quaternion,value:number){
 
+    }
     setTime(t: number) {
         if(!this.hasAnime)return;
         for(let i =0;i<this.timeData.length;i++){

frontend/src/lib/animation/AnimationChannelQuaternion.ts

@@ -1,10 +1,10 @@
 import AnimationChannel from "./AnimationChannel";
 import Object3D from "../core/Object3D";
-import {Quaternion} from "math.gl";
+import {Quaternion, Vector3} from "math.gl";
 
 export default class AnimationChannelQuaternion extends AnimationChannel{
     private data: Array<Quaternion>;
-    private result:Quaternion;
+
     constructor(type:"rotation",startTime:number,stopTime:number,interpolation:"STEP"|"LINEAR",timeData:Array<number>,target:Object3D) {
         super(type,startTime,stopTime,interpolation,timeData,target)
     }
@@ -18,10 +18,15 @@ export default class AnimationChannelQuaternion extends AnimationChannel{
         let fq = this.data[this.firstIndex];
         this.result.set(fq.x,fq.y,fq.z,fq.w);
 
+    }
+    mix(other:Quaternion,value:number){
+        let r =this.result as Quaternion;
+        r.slerp(other,value);
+
     }
     setToObj() {
       //  console.log("setRotation",this.result)
-
-       this.target.setRotation( this.result.x,this.result.y,this.result.z,this.result.w)
+        let r =this.result as Quaternion;
+       this.target.setRotation( r.x,r.y,r.z,r.w)
     }
 }

frontend/src/lib/animation/AnimationChannelVector3.ts

@@ -1,10 +1,10 @@
 import AnimationChannel from "./AnimationChannel";
 import Object3D from "../core/Object3D";
-import {Vector3} from "math.gl";
+import {Quaternion, Vector3} from "math.gl";
 
 export default class AnimationChannelVector3 extends AnimationChannel{
     private data: Array<Vector3>;
-    private result: Vector3;
+
 
     constructor(type:"translation"|"scale",startTime:number,stopTime:number,interpolation:"STEP"|"LINEAR",timeData:Array<number>,target:Object3D) {
         super(type,startTime,stopTime,interpolation,timeData,target)
@@ -23,10 +23,14 @@ export default class AnimationChannelVector3 extends AnimationChannel{
            this.target.setPosition(this.result.x,this.result.y,this.result.z)
         }
 
+    }
+    mix(other:Vector3,value:number){
+       (this.result as Vector3).lerp(other,value);
+
     }
     protected setForTime() {
         let fq = this.data[this.firstIndex];
-        this.result.set(fq.x,fq.y,fq.z);
+        (this.result as Vector3).set(fq.x,fq.y,fq.z);
 
     }
 

frontend/src/lib/animation/AnimationMixer.ts

@@ -14,7 +14,7 @@ export default class AnimationMixer{
     }
     onUI(){
         UI.pushWindow("Animation")
-       //this.mixValue =UI.LFloatSlider("mix",this.mixValue,0,1);
+       this.mixValue =UI.LFloatSlider("mix",this.mixValue,0,1);
         UI.popWindow()
     }
     update(){
@@ -34,6 +34,19 @@ export default class AnimationMixer{
             anime1.update()
             anime2.update()
 
+            for(let i=0;i<anime1.channels.length;i++)
+            {
+               if(anime1.channels[i].target != anime2.channels[i].target){
+                   console.log("fail");
+               }
+
+                   anime1.channels[i].mix(anime2.channels[i].result,this.mixValue)
+
+
+            }
+
+            anime1.set();
+
         }
 
     }

frontend/src/lib/core/Mesh.ts

@@ -38,7 +38,28 @@ export default class Mesh extends ObjectGPU {
     setUV0(uv0: Float32Array) {
         this.createBuffer(uv0, "aUV0");
     }
+    setWeights(weights: Float32Array) {
+        this.createBuffer(weights, "aWeights");
+    }
+    setJoints(data:Uint32Array) {
+        this.createBufferI(data, "aJoints");
+    }
+    createBufferI(data:Uint32Array, name: string) {
 
+        const buffer = this.device.createBuffer({
+            size: data.byteLength,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: true,
+        });
+        const dst = new Uint32Array(buffer.getMappedRange());
+        dst.set(data);
+
+        buffer.unmap();
+        buffer.label = "vertexBuffer_" + this.label + "_" + name;
+
+        this.buffers.push(buffer);
+        this.bufferMap.set(name, buffer);
+    }
     createBuffer(data: Float32Array, name: string) {
 
         const buffer = this.device.createBuffer({