Feature: Animation

src/accessor.js

@@ -1,5 +1,6 @@
 import { WebGl } from './webgl.js';
 import { GltfObject } from './gltf_object.js';
+import { jsToGlSlice} from './utils.js';
 
 class gltfAccessor extends GltfObject
 {
@@ -14,7 +15,7 @@ class gltfAccessor extends GltfObject
         this.type = undefined;
         this.max = undefined;
         this.min = undefined;
-        this.sparse = undefined;
+        this.sparse = undefined; // CURRENTLY UNSUPPORTED
         this.name = undefined;
 
         // non gltf
@@ -33,37 +34,38 @@ class gltfAccessor extends GltfObject
         {
             const bufferView = gltf.bufferViews[this.bufferView];
             const buffer = gltf.buffers[bufferView.buffer];
-            const byteOffset = bufferView.byteOffset;
+            const byteOffset = this.byteOffset + bufferView.byteOffset;
 
+            const componentSize = this.getComponentSize();
             let componentCount = this.getComponentCount();
-            if (bufferView.byteStride !== 0)
+
+            if(bufferView.byteStride !== 0)
             {
-                componentCount = bufferView.byteStride / this.getComponentSize();
+                componentCount = bufferView.byteStride / componentSize;
             }
 
-            const arrayOffsetLength = this.byteOffset / this.getComponentSize();
-            const arrayLength = arrayOffsetLength + this.count * componentCount;
+            const arrayLength = this.count * componentCount;
 
             switch (this.componentType)
             {
-            case WebGl.context.BYTE:
-                this.typedView = new Int8Array(buffer.buffer, byteOffset, arrayLength);
-                break;
-            case WebGl.context.UNSIGNED_BYTE:
-                this.typedView = new Uint8Array(buffer.buffer, byteOffset, arrayLength);
-                break;
-            case WebGl.context.SHORT:
-                this.typedView = new Int16Array(buffer.buffer, byteOffset, arrayLength);
-                break;
-            case WebGl.context.UNSIGNED_SHORT:
-                this.typedView = new Uint16Array(buffer.buffer, byteOffset, arrayLength);
-                break;
-            case WebGl.context.UNSIGNED_INT:
-                this.typedView = new Uint32Array(buffer.buffer, byteOffset, arrayLength);
-                break;
-            case WebGl.context.FLOAT:
-                this.typedView = new Float32Array(buffer.buffer, byteOffset, arrayLength);
-                break;
+                case WebGl.context.BYTE:
+                    this.typedView = new Int8Array(buffer.buffer, byteOffset, arrayLength);
+                    break;
+                case WebGl.context.UNSIGNED_BYTE:
+                    this.typedView = new Uint8Array(buffer.buffer, byteOffset, arrayLength);
+                    break;
+                case WebGl.context.SHORT:
+                    this.typedView = new Int16Array(buffer.buffer, byteOffset, arrayLength);
+                    break;
+                case WebGl.context.UNSIGNED_SHORT:
+                    this.typedView = new Uint16Array(buffer.buffer, byteOffset, arrayLength);
+                    break;
+                case WebGl.context.UNSIGNED_INT:
+                    this.typedView = new Uint32Array(buffer.buffer, byteOffset, arrayLength);
+                    break;
+                case WebGl.context.FLOAT:
+                    this.typedView = new Float32Array(buffer.buffer, byteOffset, arrayLength);
+                    break;
             }
         }
 
@@ -75,6 +77,65 @@ class gltfAccessor extends GltfObject
         return this.typedView;
     }
 
+    getDeinterlacedView(gltf)
+    {
+        if (this.filteredView !== undefined)
+        {
+            return this.filteredView;
+        }
+
+        if (this.bufferView !== undefined)
+        {
+            const bufferView = gltf.bufferViews[this.bufferView];
+            const buffer = gltf.buffers[bufferView.buffer];
+            const byteOffset = this.byteOffset + bufferView.byteOffset;
+
+            const componentSize = this.getComponentSize();
+            const componentCount = this.getComponentCount();
+            const arrayLength = this.count * componentCount;
+
+            let stride = bufferView.byteStride !== 0 ? bufferView.byteStride : componentCount * componentSize;
+            let dv = new DataView(buffer.buffer, byteOffset, this.count * stride);
+
+            let func = 'getFloat32';
+            switch (this.componentType)
+            {
+                case WebGl.context.BYTE:
+                    this.filteredView = new Int8Array(arrayLength);
+                    func = 'getInt8';
+                    break;
+                case WebGl.context.UNSIGNED_BYTE:
+                    this.filteredView = new Uint8Array(arrayLength);
+                    func = 'getUint8';
+                    break;
+                case WebGl.context.SHORT:
+                    this.filteredView = new Int16Array(arrayLength);
+                    func = 'getInt16';
+                    break;
+                case WebGl.context.UNSIGNED_SHORT:
+                    this.filteredView = new Uint16Array(arrayLength);
+                    func = 'getUint16';
+                    break;
+                case WebGl.context.UNSIGNED_INT:
+                    this.filteredView = new Uint32Array(arrayLength);
+                    func = 'getUint32';
+                    break;
+                case WebGl.context.FLOAT:
+                    this.filteredView = new Float32Array(arrayLength);
+                    func = 'getFloat32';
+                    break;
+            }
+
+            for(let i = 0; i < arrayLength; ++i)
+            {
+                let offset = Math.floor(i/componentCount) * stride + (i % componentCount) * componentSize;
+                this.filteredView[i] = dv[func](offset, true);
+            }
+        }
+
+        return this.filteredView;
+    }
+
     getComponentCount()
     {
         return CompononentCount.get(this.type);

src/animation.js

@@ -0,0 +1,71 @@
+import { GltfObject } from './gltf_object.js';
+import { objectsFromJsons } from './utils.js';
+import { gltfAnimationChannel, InterpolationPath } from './channel.js';
+import { gltfAnimationSampler } from './animation_sampler.js';
+import { gltfInterpolator } from './interpolator.js';
+
+class gltfAnimation extends GltfObject
+{
+    constructor()
+    {
+        super();
+        this.channels = [];
+        this.samplers = [];
+
+        // not gltf
+        this.interpolators = [];
+    }
+
+    fromJson(jsonAnimation)
+    {
+        this.channels = objectsFromJsons(jsonAnimation.channels, gltfAnimationChannel);
+        this.samplers = objectsFromJsons(jsonAnimation.samplers, gltfAnimationSampler);
+
+        if(this.channels === undefined)
+        {
+            console.error("No channel data found for skin");
+            return;
+        }
+
+        for(let i = 0; i < this.channels.length; ++i)
+        {
+            this.interpolators.push(new gltfInterpolator());
+        }
+    }
+
+    advance(gltf, totalTime)
+    {
+        if(this.channels === undefined)
+        {
+            return;
+        }
+
+        for(let i = 0; i < this.interpolators.length; ++i)
+        {
+            const channel = this.channels[i];
+            const sampler = this.samplers[channel.sampler];
+            const interpolator = this.interpolators[i];
+
+            const node = gltf.nodes[channel.target.node];
+
+            switch(channel.target.path)
+            {
+                case InterpolationPath.TRANSLATION:
+                    node.applyTranslation(interpolator.interpolate(gltf, channel, sampler, totalTime, 3));
+                    break;
+                case InterpolationPath.ROTATION:
+                    node.applyRotation(interpolator.interpolate(gltf, channel, sampler, totalTime, 4));
+                    break;
+                case InterpolationPath.SCALE:
+                    node.applyScale(interpolator.interpolate(gltf, channel, sampler, totalTime, 3));
+                    break;
+                case InterpolationPath.WEIGHTS:
+                    let mesh = gltf.meshes[node.mesh];
+                    mesh.weights = interpolator.interpolate(gltf, channel, sampler, totalTime, mesh.weights.length);
+                    break;
+            }
+        }
+    }
+}
+
+export { gltfAnimation };

src/animation_sampler.js

@@ -0,0 +1,21 @@
+import { GltfObject } from './gltf_object.js';
+
+class gltfAnimationSampler extends GltfObject
+{
+    constructor()
+    {
+        super();
+        this.input = undefined;
+        this.interpolation = undefined;
+        this.output = undefined;
+    }
+}
+
+const InterpolationModes =
+{
+    LINEAR: "LINEAR",
+    STEP: "STEP",
+    CUBICSPLINE: "CUBICSPLINE"
+};
+
+export { gltfAnimationSampler, InterpolationModes };

src/camera.js

@@ -31,9 +31,10 @@ class gltfCamera extends GltfObject
     {
         super.initGl(gltf);
 
+        let cameraIndex = undefined;
         for (let i = 0; i < gltf.nodes.length; i++)
         {
-            const cameraIndex = gltf.nodes[i].camera;
+            cameraIndex = gltf.nodes[i].camera;
             if (cameraIndex === undefined)
             {
                 continue;
@@ -45,6 +46,11 @@ class gltfCamera extends GltfObject
                 break;
             }
         }
+
+        if(this.node === undefined)
+        {
+            console.error("Invalid node for camera " + cameraIndex);
+        }
     }
 
     fromJson(jsonCamera)
@@ -62,7 +68,7 @@ class gltfCamera extends GltfObject
         }
     }
 
-    sortNodesByDepth(nodes, gltf)
+    sortNodesByDepth(gltf, nodes)
     {
         // precompute the distances to avoid their computation during sorting
         const sortedNodes = [];

src/channel.js

@@ -0,0 +1,21 @@
+import { GltfObject } from './gltf_object.js';
+
+class gltfAnimationChannel extends GltfObject
+{
+    constructor()
+    {
+        super();
+        this.target = {node: undefined, path: undefined};
+        this.sampler = undefined;
+    }
+}
+
+const InterpolationPath =
+{
+    TRANSLATION: "translation",
+    ROTATION: "rotation",
+    SCALE: "scale",
+    WEIGHTS: "weights"
+};
+
+export { gltfAnimationChannel, InterpolationPath };

src/gltf.js

@@ -13,6 +13,8 @@ import { gltfTexture } from './texture.js';
 import { initGlForMembers, objectsFromJsons, objectFromJson } from './utils';
 import { gltfAsset } from './asset.js';
 import { GltfObject } from './gltf_object.js';
+import { gltfAnimation } from './animation.js';
+import { gltfSkin } from './skin.js';
 
 class glTF extends GltfObject
 {
@@ -33,6 +35,8 @@ class glTF extends GltfObject
         this.buffers = [];
         this.bufferViews = [];
         this.materials = [];
+        this.animations = [];
+        this.skins = [];
         this.path = file;
     }
 
@@ -58,6 +62,8 @@ class glTF extends GltfObject
         this.nodes = objectsFromJsons(json.nodes, gltfNode);
         this.lights = objectsFromJsons(getJsonLightsFromExtensions(json.extensions), gltfLight);
         this.images = objectsFromJsons(json.images, gltfImage);
+        this.animations = objectsFromJsons(json.animations, gltfAnimation);
+        this.skins = objectsFromJsons(json.skins, gltfSkin);
 
         this.materials.push(gltfMaterial.createDefault());
         this.samplers.push(gltfSampler.createDefault());