feat(GLTFReader): add GLTFReader

Author: daker

Sources/IO/Geometry/GLTFReader/Animation/AnimationClip.js

@@ -0,0 +1,14 @@
+class AnimationClip {
+  constructor(name) {
+    this.name = name;
+    this.tracks = [];
+    this.duration = -1;
+  }
+
+  addTrack(track) {
+    this.tracks.push(track);
+    this.duration = Math.max(this.duration, track.duration);
+  }
+}
+
+export default AnimationClip;

Sources/IO/Geometry/GLTFReader/Animation/AnimationMixer.js

@@ -0,0 +1,97 @@
+/* eslint-disable no-case-declarations */
+/* eslint-disable class-methods-use-this */
+import { quat } from 'gl-matrix';
+
+class AnimationMixer {
+  constructor() {
+    this.animations = new Map();
+    this.activeAnimations = new Map();
+  }
+
+  addAnimation(animation) {
+    this.animations.set(animation.name, animation);
+  }
+
+  play(name, weight = 1.0) {
+    const animation = this.animations.get(name);
+    if (animation) {
+      this.activeAnimations.set(name, { animation, time: 0, weight });
+    }
+  }
+
+  stop(name) {
+    this.activeAnimations.delete(name);
+  }
+
+  stopAll() {
+    this.activeAnimations.clear();
+  }
+
+  update(deltaTime) {
+    this.activeAnimations.forEach(({ animation, time, weight }, name) => {
+      const newTime = (time + deltaTime) % animation.duration;
+      this.activeAnimations.set(name, { animation, time: newTime, weight });
+
+      animation.tracks.forEach((track) => {
+        const value = track.getValue(newTime);
+        this.applyTrackValueToTarget(track.target, track.path, value, weight);
+      });
+    });
+  }
+
+  applyTrackValueToTarget(target, path, value, weight) {
+    switch (path) {
+      case 'translation':
+        target.setPosition(value[0], value[1], value[2]);
+        break;
+      case 'rotation':
+        // Convert quaternion to axis-angle representation
+        const axisAngle = this.quaternionToAxisAngle(value);
+        // Apply rotation using rotateWXYZ
+        target.rotateWXYZ(
+          axisAngle[3],
+          axisAngle[0],
+          axisAngle[1],
+          axisAngle[2]
+        );
+        break;
+      case 'scale':
+        target.setScale(value[0], value[1], value[2]);
+        break;
+      default:
+        console.warn(`Unsupported animation path: ${path}`);
+    }
+  }
+
+  quaternionToAxisAngle(q) {
+    // Ensure the quaternion is normalized
+    const nq = quat.normalize(quat.create(), q);
+
+    // Calculate the angle
+    const angle = 2 * Math.acos(nq[3]);
+
+    // Calculate the axis
+    const s = Math.sqrt(1 - nq[3] * nq[3]);
+    let x;
+    let y;
+    let z;
+    if (s < 0.001) {
+      // If s is close to zero, the angle is close to 0 or 180 degrees
+      // In this case, any axis perpendicular to [0, 0, 1] will do
+      x = 1;
+      y = 0;
+      z = 0;
+    } else {
+      x = nq[0] / s;
+      y = nq[1] / s;
+      z = nq[2] / s;
+    }
+
+    // Convert angle to degrees
+    const angleDegrees = angle * (180 / Math.PI);
+
+    return [x, y, z, angleDegrees];
+  }
+}
+
+export default AnimationMixer;

Sources/IO/Geometry/GLTFReader/Animation/AnimationTrack.js

@@ -0,0 +1,78 @@
+/* eslint-disable operator-assignment */
+/* eslint-disable no-param-reassign */
+import { quat, vec3 } from 'gl-matrix';
+
+class AnimationTrack {
+  constructor(target, path, times, values, interpolation) {
+    this.target = target;
+    this.path = path;
+    this.times = times;
+    this.values = values;
+    this.interpolation = interpolation;
+    this.duration = times[times.length - 1];
+    this.componentsPerValue = this.getComponentsPerValue();
+  }
+
+  getComponentsPerValue() {
+    switch (this.path) {
+      case 'translation':
+      case 'scale':
+        return 3;
+      case 'rotation':
+        return 4;
+      default:
+        console.warn(`Unsupported animation path: ${this.path}`);
+        return 0;
+    }
+  }
+
+  getValue(time) {
+    time = time % this.duration; // Loop the animation
+
+    let i = 1;
+    for (; i < this.times.length; i++) {
+      if (this.times[i] > time) break;
+    }
+    i--;
+
+    const t = (time - this.times[i]) / (this.times[i + 1] - this.times[i]);
+
+    const startIndex = i * this.componentsPerValue;
+    const endIndex = (i + 1) * this.componentsPerValue;
+
+    const value1 = this.values.subarray(
+      startIndex,
+      startIndex + this.componentsPerValue
+    );
+    const value2 = this.values.subarray(
+      endIndex,
+      endIndex + this.componentsPerValue
+    );
+
+    switch (this.interpolation) {
+      case 'STEP':
+        return value1;
+      case 'CUBICSPLINE':
+        console.warn('Cubic spline interpolation not implemented');
+        return this.linearInterpolate(value1, value2, t);
+      case 'LINEAR':
+      default:
+        return this.linearInterpolate(value1, value2, t);
+    }
+  }
+
+  linearInterpolate(a, b, t) {
+    switch (this.path) {
+      case 'translation':
+      case 'scale':
+        return vec3.lerp(vec3.create(), a, b, t);
+      case 'rotation':
+        return quat.slerp(quat.create(), a, b, t);
+      default:
+        console.warn(`Unsupported animation path: ${this.path}`);
+        return null;
+    }
+  }
+}
+
+export default AnimationTrack;

Sources/IO/Geometry/GLTFReader/Animation/index.js

@@ -0,0 +1,9 @@
+import AnimationClip from './AnimationClip';
+import AnimationMixer from './AnimationMixer';
+import AnimationTrack from './AnimationTrack';
+
+export default {
+  AnimationClip,
+  AnimationMixer,
+  AnimationTrack,
+};

Sources/IO/Geometry/GLTFReader/Contants.js

@@ -0,0 +1,80 @@
+export const BINARY_HEADER_MAGIC = 'glTF';
+export const BINARY_HEADER_LENGTH = 12;
+export const BINARY_CHUNK_TYPES = { JSON: 0x4e4f534a, BIN: 0x004e4942 };
+
+export const COMPONENTS = {
+  SCALAR: 1,
+  VEC2: 2,
+  VEC3: 3,
+  VEC4: 4,
+  MAT2: 4,
+  MAT3: 9,
+  MAT4: 16,
+};
+
+export const BYTES = {
+  5120: 1, // BYTE
+  5121: 1, // UNSIGNED_BYTE
+  5122: 2, // SHORT
+  5123: 2, // UNSIGNED_SHORT
+  5125: 4, // UNSIGNED_INT
+  5126: 4, // FLOAT
+};
+
+export const MODES = {
+  GL_POINTS: 0,
+  GL_LINES: 1,
+  GL_LINE_LOOP: 2,
+  GL_LINE_STRIP: 3,
+  GL_TRIANGLES: 4,
+  GL_TRIANGLE_STRIP: 5,
+  GL_TRIANGLE_FAN: 6,
+};
+
+export const ARRAY_TYPES = {
+  5120: Int8Array,
+  5121: Uint8Array,
+  5122: Int16Array,
+  5123: Uint16Array,
+  5125: Uint32Array,
+  5126: Float32Array,
+};
+
+export const GL_SAMPLER = {
+  NEAREST: 9728,
+  LINEAR: 9729,
+  NEAREST_MIPMAP_NEAREST: 9984,
+  LINEAR_MIPMAP_NEAREST: 9985,
+  NEAREST_MIPMAP_LINEAR: 9986,
+  LINEAR_MIPMAP_LINEAR: 9987,
+  REPEAT: 10497,
+  CLAMP_TO_EDGE: 33071,
+  MIRRORED_REPEAT: 33648,
+  TEXTURE_MAG_FILTER: 10240,
+  TEXTURE_MIN_FILTER: 10241,
+  TEXTURE_WRAP_S: 10242,
+  TEXTURE_WRAP_T: 10243,
+};
+
+export const DEFAULT_SAMPLER = {
+  magFilter: GL_SAMPLER.NEAREST,
+  minFilter: GL_SAMPLER.LINEAR_MIPMAP_LINEAR,
+  wrapS: GL_SAMPLER.REPEAT,
+  wrapT: GL_SAMPLER.REPEAT,
+};
+
+export const semanticAttributeMap = {
+  NORMAL: 'normal',
+  POSITION: 'position',
+  TEXCOORD_0: 'texcoord0',
+  TEXCOORD_1: 'texcoord1',
+  WEIGHTS_0: 'weight',
+  JOINTS_0: 'joint',
+  COLOR_0: 'color',
+};
+
+export const alphaMode = {
+  OPAQUE: 'OPAQUE',
+  MASK: 'MASK',
+  BLEND: 'BLEND',
+};

Sources/IO/Geometry/GLTFReader/Decoder.js

@@ -0,0 +1,61 @@
+import BinaryHelper from 'vtk.js/Sources/IO/Core/BinaryHelper';
+import {
+  BINARY_CHUNK_TYPES,
+  BINARY_HEADER_LENGTH,
+  BINARY_HEADER_MAGIC,
+} from './Contants';
+
+function parseGLB(data) {
+  let json;
+  let buffer;
+
+  const headerView = new DataView(data, 0, BINARY_HEADER_LENGTH);
+
+  const header = {
+    magic: BinaryHelper.arrayBufferToString(new Uint8Array(data, 0, 4)),
+    version: headerView.getUint32(4, true),
+    length: headerView.getUint32(8, true),
+  };
+
+  if (header.magic !== BINARY_HEADER_MAGIC) {
+    throw new Error('Unsupported glTF-Binary header.');
+  } else if (header.version < 2.0) {
+    throw new Error('Unsupported legacy binary file detected.');
+  }
+
+  const chunkView = new DataView(data, BINARY_HEADER_LENGTH);
+  let chunkIndex = 0;
+
+  while (chunkIndex < chunkView.byteLength) {
+    const chunkLength = chunkView.getUint32(chunkIndex, true);
+    chunkIndex += 4;
+
+    const chunkType = chunkView.getUint32(chunkIndex, true);
+    chunkIndex += 4;
+
+    if (chunkType === BINARY_CHUNK_TYPES.JSON) {
+      const contentArray = new Uint8Array(
+        data,
+        BINARY_HEADER_LENGTH + chunkIndex,
+        chunkLength
+      );
+      json = BinaryHelper.arrayBufferToString(contentArray);
+    } else if (chunkType === BINARY_CHUNK_TYPES.BIN) {
+      const byteOffset = BINARY_HEADER_LENGTH + chunkIndex;
+      const binaryChunk = new Uint8Array(data, byteOffset, chunkLength);
+      buffer = binaryChunk.buffer;
+    }
+
+    chunkIndex += chunkLength;
+  }
+
+  if (!json) {
+    throw new Error('glTF-Binary: JSON content not found.');
+  }
+  if (!buffer) {
+    throw new Error('glTF-Binary: Binary chunk not found.');
+  }
+  return { json, buffer };
+}
+
+export default parseGLB;