Question: How to create mesh animations ?

[sambaPython24]

Hey,
thank you for the work you put into this amazing tutorial.

I would like to animate a mesh

vertices = [(0.1,0.2,0.3), (0.1,0.3,0.4),...]
edges = [[1,0,1],[1,1,1],...]

and the single vertices change over time,e.g. ( (0.1,0.2,0.3) -> (0.05,0.3,0.4)). That means, each vertex of the mesh is changed
separately.

I have seen the simple rotation animation chapter as well as the chapters for animation and meshes but I can bring them together.
How would you do that?

[javagl]

That sounds like something that could be achived with Morph Targets. In that example, only a single vertex of the triangle is moved to a different position, to illustrate the data structures and computations behind that. But it would basically allow arbitrary changes to vertex positions, as long as the topology (indices) remain the same.

[sambaPython24]

@javagl Thank you for your answer. Also after having read the tutorial, it is quite difficult to understand, how to create such a file, where exactly to put the position of vertex and the.

Thank you for your answer. After reading the tutorial, I still find it quite difficult to understand how to create such a file and where exactly to place the vertex positions.

How did you create the file in the first place?

[javagl]

How did you create the file in the first place?

The one in the tutorial...? That was nearly 10 years ago, and the creation was a mix of manual twiddling of JSON in a text editor, and some "pragmatic code snippets" for creating the binary data.

If you intend to create such a file on your own, then this largely depends on what library you are using. On a code-agnostic level, for a simple case, the process could be described like this:

• Take your "default" vertex positions, and assign them as the POSITION accessor to the mesh primitive
• Take the "target" vertex positions, subtract the default positions(!), and assign the result as a POSITION morph target accessor to the primitive
• Animate the weights for that morph target, from 0.0 to 1.0, to move the positions from the "default" positions to the "target" positions

Note that you have to subtract the "default" positions from the "target" postitions to compute the morph target. The morph target stores the displacements from the "default" position.

(I tried to create some convenience functions for that, e.g. in this regression test in JglTF - without animations here. With other libraries (like glTF-Transform), it should also not be soooo hard. I don't know many other libraries for creating glTF from scratch, though - I know that there are some Python libraries for that, but I never used those...)

[javagl]

I just noticed that I once used the SimpleMorph sample asset as one test for https://github.com/javagl/gltfTransformifier

So the answer to the question of how to create that exact file with glTF-Transform is: Like this:

import fs from "fs";
import path from "path";
import { NodeIO } from '@gltf-transform/core';
import { Document } from '@gltf-transform/core';
import { Accessor } from '@gltf-transform/core';
import { Buffer as GltfBuffer } from '@gltf-transform/core';
import { ALL_EXTENSIONS } from "@gltf-transform/extensions";

async function run() {
  const document = new Document();
  const root = document.getRoot();
  
  // Buffers
  const buffer0 = document.createBuffer('');
  buffer0.setURI('simpleMorphGeometry.bin');
  
  const buffer1 = document.createBuffer('');
  buffer1.setURI('simpleMorphAnimation.bin');
  
  
  // Accessors
  // Accessor 0 of 6
  const accessor0 = document.createAccessor('');
  accessor0.setType('SCALAR');
  accessor0.setBuffer(buffer0);
  accessor0.setArray(new Uint16Array([
    0, 
    1, 
    2
  ]));
  
  // Accessor 1 of 6
  const accessor1 = document.createAccessor('');
  accessor1.setType('VEC3');
  accessor1.setBuffer(buffer0);
  accessor1.setArray(new Float32Array([
    0, 0, 0, 
    1, 0, 0, 
    0.5, 0.5, 0
  ]));
  
  // Accessor 2 of 6
  const accessor2 = document.createAccessor('');
  accessor2.setType('VEC3');
  accessor2.setBuffer(buffer0);
  accessor2.setArray(new Float32Array([
    0, 0, 0, 
    0, 0, 0, 
    -1, 1, 0
  ]));
  
  // Accessor 3 of 6
  const accessor3 = document.createAccessor('');
  accessor3.setType('VEC3');
  accessor3.setBuffer(buffer0);
  accessor3.setArray(new Float32Array([
    0, 0, 0, 
    0, 0, 0, 
    1, 1, 0
  ]));
  
  // Accessor 4 of 6
  const accessor4 = document.createAccessor('');
  accessor4.setType('SCALAR');
  accessor4.setBuffer(buffer1);
  accessor4.setArray(new Float32Array([
    0, 
    1, 
    2, 
    3, 
    4
  ]));
  
  // Accessor 5 of 6
  const accessor5 = document.createAccessor('');
  accessor5.setType('SCALAR');
  accessor5.setBuffer(buffer1);
  accessor5.setArray(new Float32Array([
    0, 
    0, 
    0, 
    1, 
    1, 
    1, 
    1, 
    0, 
    0, 
    0
  ]));
  
  
  // Meshes
  // Mesh 0 of 1
  const mesh0 = document.createMesh('');
  mesh0.setWeights([0.5,0.5]);
  const mesh0_primitive0 = document.createPrimitive();
  mesh0_primitive0.setMode(4)
  mesh0_primitive0.setIndices(accessor0);
  mesh0_primitive0.setAttribute('POSITION', accessor1);
  const mesh0_primitive0_target0 = document.createPrimitiveTarget('0');
  mesh0_primitive0_target0.setAttribute('POSITION', accessor2);
  mesh0_primitive0.addTarget(mesh0_primitive0_target0);
  const mesh0_primitive0_target1 = document.createPrimitiveTarget('1');
  mesh0_primitive0_target1.setAttribute('POSITION', accessor3);
  mesh0_primitive0.addTarget(mesh0_primitive0_target1);
  mesh0.addPrimitive(mesh0_primitive0);
  
  
  // Nodes - No children or skin information
  // Node 0 of 1
  const node0 = document.createNode('');
  node0.setTranslation([0,0,0]);
  node0.setRotation([0,0,0,1]);
  node0.setScale([1,1,1]);
  node0.setMatrix([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);
  node0.setMesh(mesh0);
  
  
  // Nodes - Children and skin information
  // Node 0 of 1
  
  
  // Animations
  // Animation 0 of 1
  const animation0 = document.createAnimation('');
  // Animation 0 sampler 0
  const animation0_sampler0 = document.createAnimationSampler('');
  animation0_sampler0.setInput(accessor4);
  animation0_sampler0.setOutput(accessor5);
  animation0_sampler0.setInterpolation('LINEAR');
  animation0.addSampler(animation0_sampler0);
  
  // Animation 0 channel 0
  const animation0_channel0 = document.createAnimationChannel('');
  animation0_channel0.setTargetNode(node0);
  animation0_channel0.setTargetPath('weights');
  animation0_channel0.setSampler(animation0_sampler0);
  animation0.addChannel(animation0_channel0);
  
  
  // Scenes
  // Scene 0 of 1
  const scene0 = document.createScene('');
  scene0.addChild(node0);
  
  
  root.setDefaultScene(scene0);
  
  
  // Consolidate into a single buffer
  const singleBuffer = root.listBuffers()[0];
  root.listAccessors().forEach((a: Accessor) => a.setBuffer(singleBuffer));
  root.listBuffers().forEach((b: GltfBuffer, index: number) => (index > 0 ? b.dispose() : null));
  
  const io = new NodeIO().registerExtensions(ALL_EXTENSIONS);
  const glb = await io.writeBinary(document);
  fs.writeFileSync('./generated/SimpleMorph.glb', glb)
}
run();

Yeah. It's as readable as auto-generated code usually is. But it's an example after all...

[sambaPython24]

Thank you for sharing that file but even after many attempts, I cannot rewrite that file in Python such that it is running properly. Is there any way for you to translate that to a low-level language such as Python ?

[javagl]

There are many languages and libraries. It you have an example, in the language of your choice, and with the library of your choice, that creates a single triangle (maybe animated), then maybe I'd have a look at how this could be tweaked for animated morph targets. (This is way out of the scope of what should be discussed in an issue of the tutorial - this is not a repository for random glTF development support - but maybe I'd have a look...)