The GLTF format, or GL Transmission Format, is a popular 3d format for storing meshes and scenes. The file format follows an open standard and is supported across different platforms. It's liked because it's lightweight, easy to parse, and powerful!! IT supports a wide array of features like materials, textures, animations, and more, making it ideal for real-time applications and web use.
It's also supported by a lot of 3d modelling packages by default (e.g., Blender) - so you can download and start exporting/importing 3d files easily.
It's often referred to as the JPEG of 3D because it minimizes file size and runtime processing.
• Learn about the 3d format
• Develop vanilla loader/parser that does not depend on any libraries or external resources
• Implement a simple renderer/viewer
glTF File Format Nuts and Bolts in ....
Their are two main format version of the file:
• .gltf: This is a JSON file that contains the scene description. It references external binary data and textures.
The
.gltf
also comes in two variations - one with the binary content inlined as base64 and another with a link to a
.bin
file which contains the binnary data. The
.bin
file is usually in the same directory as the
.gltf
file. Their can be one or multiple '.bin' files with all sorts of binary information (vertex data, animations, skinning data etc).
• .glb: This is a binary version of the
.gltf
file. It packages the JSON and binary data together in a single file.
Structure
1. Scenes and Nodes: The scene is defined by an array of nodes, which are organized in a hierarchy. Nodes can have transformations relative to their parent nodes.
2. Meshes: Nodes reference meshes, which contain the geometry data (vertices, indices, etc.).
3. Materials: Meshes reference materials, which define the appearance (e.g., colors, textures).
4. Textures: Materials reference textures, which are images used for various purposes (diffuse, specular, etc.).
5. Buffers and Accessors: Binary data (e.g., mesh data, texture data) is stored in buffers, and accessors provide metadata about how to interpret this data.
6. Animations: Animation data for updating the nodes (e.g., timing, keyframes, transforms)
7. Skins: Skinning information for more advanced animation (e.g., skeleton/mesh which is deformed using transfomrs)
Textures Layout
Textures in glTF are referenced by materials and are stored as images. The layout includes:
• Images: The actual image files (e.g., PNG, JPEG).
• Samplers: Define how textures are sampled (e.g., filtering, wrapping).
• Texture Maps: These maps (diffuse, specular, etc.) are applied to materials.
You complete standalone loader and viewer written in Vanilla JavaScript is given below. You can access and try it out online (runs in a web-browser and does not depend on any external libraries or tools - LINK).
If you just want to jump in and work with a loader/viewer - the following is a complete working example. The code is in the WebGPU Lab - you can see the code on the left and the output on the right. It's a single file implementaton with the essential features for learning/using gltf files.
Some key points about the demo:
• Vanilla JS (single file)
• 3 main parts (loader class for loading/parsing gltf file), second part for dumping/displaying stats/information a third function (single ) function on the end for drawing the mesh/animation
• Supports meshes/animations/skinning (even see the animated skinned character/using bones/hierarchy)
• Execllent educational resource (learning about the file format - from the ground up)
• Really good thing about this example - is it includes a lot of the key features, such as skinning, animation, hierarchies, etc - it also shows how to manage them together (single file with a skinned mesh but also a terrain and animations)
The example code, official documentation and various examples - means it should be easy for you to implement it in any language and for any graphical output API (e.g., Python, C++, Pascal, ...).
