1

I'm working on a glTF; precisely I'm trying to animate a "static" mesh that I've created in Blender and exported in the glTF format in order to open it with a text editor and manipulate the JSON code obtained to animate the mesh.

In doing so, I'm following the logic used in this tutorial , where a triangle is animated by adding a new buffer, containing only data regarding time and rotation coordinates. Along with the new buffer, also the animations array, the bufferviews related to the new buffer, and the new accessors are added to animate the initial static triangle .

Right now, I'm trying to animate a static plane created in Blender and exported in the glTF format, and here there is its JSON. When I use the same data URI seen in the previously mentioned tutorial regarding the rotating triangle:

{ "byteLength": 100, "uri": "data:application/octet-stream;base64,AAAAAAAAgD4AAAA/AABAPwAAgD8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAD0/TQ/9P00PwAAAAAAAAAAAACAPwAAAAAAAAAAAAAAAPT9ND/0/TS/AAAAAAAAAAAAAAAAAACAPw==" }

I've been able to apply successfully that rotation to the plane. Here it can be seen the JSON manipulated with the addition of this new buffer and the related bufferviews, accesors, and animations array.

The problem is that, always following the same logic, I'm having hard times in creating animations different from the one that is used in the tutorial so, basically I think that the problem is how I write the raw animation data that I use to obtain a data URIs.
The procedure I'm using in creating those data URIs, consists of writing times and coordinates in a file saved with no extension (to have a generic binary data application/octet-stream) , and then converting this file in a data URI with an online converter .

Here you can see how I write the file to be converted in data URI that contains coordinates and time to be inserted in a buffer, and here you can see how the translation written in the previous link doesn't work in the initial glTF of the plane. How should I write those coordinates and time to be converted in data URI to be properly read and executed by the glTF?

I've even tried to separate time and coordinates by creating two different buffers, one referring to time and one referring to animation, to avoid the problem of making mistakes in setting the byteOffset property in the two accessors referring to animation and time. Here you can see the code of a translation applied to the same plane using the two new buffers referring to time and translation instead of just one buffer.
The structure of the starting file, later converted in data URI, containing information regarding time follows:

(0.0),
(0.25),
(0.5),
(0.75),
(1.0)

The structure of the starting file, later converted in data URI, containing the translation coordinates follows:

{ 0.0, 0.0, 0.0 },
{ 2.0, 0.0, 0.0 },
{ 6.0, 0.0, 0.0 },
{ 6.0, 2.0, 0.0 },
{ 8.0, 4.0, 0.0 }

Thanks in advance for your help :)

Ludovico
  • 11
  • 2

1 Answers1

3

Your data URI contains incorrect binary-encoded values, and your byteLengths are wrong.

This will produce the correct uri and byteLength

import base64, struct

times = [
    0.00,
    0.25,
    0.50,
    0.75,
    1.00,
]


locs = [
    0.0, 0.0, 0.0,
    2.0, 0.0, 0.0,
    6.0, 0.0, 0.0,
    6.0, 2.0, 0.0,
    8.0, 4.0, 0.0,
]


pack binary values


data = b""
for t in times:
    data += struct.pack("<f", t)
for x in locs:
    data += struct.pack("<f", x)


convert to data URI


encoded = base64.b64encode(data).decode("ascii")
uri = f"data:application/octet-stream;base64,{encoded}"


print(uri)
print(len(data))

If the result is inserted into your .gltf, it animates correctly.

scurest
  • 10,349
  • 13
  • 31