docs: Mesh skinning (#1978)

Author: reczkok

apps/typegpu-docs/package.json

@@ -20,6 +20,7 @@
     "@babel/standalone": "^7.28.6",
     "@dimforge/rapier2d-compat": "^0.19.3",
     "@loaders.gl/core": "^4.3.4",
+    "@loaders.gl/gltf": "^4.3.4",
     "@loaders.gl/obj": "^4.3.4",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-select": "^2.2.6",

apps/typegpu-docs/public/assets/mesh-skinning/DemoModel.glb

@@ -116,6 +116,7 @@ ${example.htmlFile.content}
       "wgpu-matrix": "${pnpmWorkspaceYaml.catalogs.example['wgpu-matrix']}",
       "@loaders.gl/core": "${typegpuDocsPackageJson.dependencies['@loaders.gl/core']}",
       "@loaders.gl/obj": "${typegpuDocsPackageJson.dependencies['@loaders.gl/obj']}",
+      "@loaders.gl/gltf": "${typegpuDocsPackageJson.dependencies['@loaders.gl/gltf']}",
       "three": "${pnpmWorkspaceYaml.catalogs.example.three}",
       "@typegpu/noise": "${typegpuNoisePackageJson.version}",
       "@typegpu/color": "${typegpuColorPackageJson.version}",

apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts

@@ -0,0 +1,98 @@
+import { quat, vec3 } from 'wgpu-matrix';
+import type { Animation, Quat, Vec3 } from './types.ts';
+
+export interface NodeTransform {
+  translation: Vec3;
+  hasTranslation: boolean;
+  rotation: Quat;
+  hasRotation: boolean;
+  scale: Vec3;
+  hasScale: boolean;
+}
+
+export type NodeTransformState = NodeTransform[];
+
+export function createNodeTransformState(nodeCount: number): NodeTransformState {
+  return Array.from({ length: nodeCount }, () => ({
+    translation: [0, 0, 0],
+    hasTranslation: false,
+    rotation: [0, 0, 0, 1],
+    hasRotation: false,
+    scale: [1, 1, 1],
+    hasScale: false,
+  }));
+}
+
+export function sampleAnimationInto(
+  animation: Animation | undefined,
+  time: number,
+  transforms: NodeTransformState,
+  touchedNodes: number[],
+): NodeTransformState {
+  for (const nodeIndex of touchedNodes) {
+    const transform = transforms[nodeIndex];
+    transform.hasTranslation = false;
+    transform.hasRotation = false;
+    transform.hasScale = false;
+  }
+  touchedNodes.length = 0;
+
+  if (!animation || animation.duration <= 0) {
+    return transforms;
+  }
+
+  const loopedTime = time % animation.duration;
+
+  for (const channel of animation.channels) {
+    const { input: times, output: values } = animation.samplers[channel.samplerIndex];
+    const components = channel.targetPath === 'rotation' ? 4 : 3;
+
+    let keyframeIndex = 0;
+    while (keyframeIndex < times.length - 2 && loopedTime >= times[keyframeIndex + 1]) {
+      keyframeIndex++;
+    }
+
+    const startTime = times[keyframeIndex];
+    const endTime = times[keyframeIndex + 1];
+    const alpha =
+      endTime > startTime
+        ? Math.max(0, Math.min(1, (loopedTime - startTime) / (endTime - startTime)))
+        : 0;
+
+    const start = keyframeIndex * components;
+    const end = (keyframeIndex + 1) * components;
+
+    const transform = transforms[channel.targetNode];
+    if (!transform.hasTranslation && !transform.hasRotation && !transform.hasScale) {
+      touchedNodes.push(channel.targetNode);
+    }
+
+    if (channel.targetPath === 'rotation') {
+      quat.slerp(
+        values.subarray(start, start + components),
+        values.subarray(end, end + components),
+        alpha,
+        transform.rotation,
+      );
+      transform.hasRotation = true;
+    } else if (channel.targetPath === 'translation') {
+      vec3.lerp(
+        values.subarray(start, start + components),
+        values.subarray(end, end + components),
+        alpha,
+        transform.translation,
+      );
+      transform.hasTranslation = true;
+    } else {
+      vec3.lerp(
+        values.subarray(start, start + components),
+        values.subarray(end, end + components),
+        alpha,
+        transform.scale,
+      );
+      transform.hasScale = true;
+    }
+  }
+
+  return transforms;
+}

apps/typegpu-docs/src/examples/simple/mesh-skinning/animation.ts

@@ -0,0 +1,37 @@
+<canvas data-fit-to-container></canvas>
+
+<style>
+  #attribution {
+    opacity: 1;
+    position: absolute;
+    bottom: 0.625rem;
+    left: 0.625rem;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    user-select: none;
+    pointer-events: auto;
+    transition: opacity 0.5s;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    white-space: nowrap;
+  }
+
+  #attribution a {
+    color: #87ceeb;
+    text-decoration: none;
+  }
+
+  #attribution a:hover {
+    text-decoration: underline;
+  }
+</style>
+
+<div id="attribution">
+  Mesh by
+  <a href="https://quaternius.com/packs/universalanimationlibrary2.html" target="_blank"
+    >Quaternius</a
+  >
+</div>