Convert Figma logo to code with AI

KhronosGroup logoglTF

glTF – Runtime 3D Asset Delivery

7,123
1,134
7,123
242

Top Related Projects

10,727

The official Open-Asset-Importer-Library Repository. Loads 40+ 3D-file-formats into one unified and clean data structure.

101,622

JavaScript 3D Library.

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

17,590

Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2

5,989

Universal Scene Description

The DirectX Tool Kit (aka DirectXTK) is a collection of helper classes for writing DirectX 11.x code in C++

Quick Overview

glTF (GL Transmission Format) is a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications. Developed by the Khronos Group, it is designed to be a "JPEG of 3D," providing a common, extensible format for 3D content that can be easily consumed by a wide range of applications and platforms.

Pros

  • Efficient and fast loading of 3D content
  • Widely supported across various 3D applications and engines
  • Extensible format allowing for custom data and features
  • Compact file size compared to other 3D formats

Cons

  • Limited support for advanced rendering techniques in the core specification
  • May require additional extensions for specific use cases
  • Learning curve for developers new to 3D graphics
  • Some legacy 3D applications may not support glTF natively

Code Examples

As glTF is a file format specification rather than a code library, there are no direct code examples. However, here are some examples of how you might work with glTF files using popular libraries:

Using Three.js to load a glTF model:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('path/to/model.gltf', (gltf) => {
  scene.add(gltf.scene);
}, undefined, (error) => {
  console.error('An error occurred loading the model:', error);
});

Using the official glTF-Validator:

const validator = await import('@gltf-validator/gltf-validator');
const result = await validator.validateBytes(new Uint8Array(glTFData));
console.log(result.issues);

Getting Started

To get started with glTF:

  1. Choose a 3D modeling software that supports glTF export (e.g., Blender, Maya, 3ds Max).
  2. Create or import your 3D model.
  3. Export the model as a .gltf or .glb file.
  4. Use a glTF-compatible viewer or integrate the model into your application using a library that supports glTF (e.g., Three.js, Babylon.js).

For developers:

  1. Install a glTF loader for your preferred 3D engine or framework.
  2. Load the glTF file using the appropriate method for your chosen library.
  3. Render the loaded 3D content in your application.

Competitor Comparisons

10,727

The official Open-Asset-Importer-Library Repository. Loads 40+ 3D-file-formats into one unified and clean data structure.

Pros of assimp

  • Supports a wide range of 3D file formats (40+)
  • Provides a unified API for loading and processing various 3D asset types
  • Offers post-processing capabilities for mesh optimization and scene manipulation

Cons of assimp

  • Larger library size and potentially slower performance due to its broad support
  • May introduce unnecessary complexity for projects focused on a single file format
  • Less specialized for modern real-time 3D applications compared to glTF

Code Comparison

assimp:

Assimp::Importer importer;
const aiScene* scene = importer.ReadFile("model.obj", aiProcess_Triangulate);
if (scene) {
    // Process the loaded scene
}

glTF:

tinygltf::Model model;
tinygltf::TinyGLTF loader;
std::string err;
loader.LoadASCIIFromFile(&model, &err, "model.gltf");
if (!err.empty()) {
    // Handle error
}

Summary

assimp is a versatile library for importing various 3D file formats, offering broad support and post-processing capabilities. However, it may be overkill for projects focused on modern, efficient 3D asset pipelines. glTF, on the other hand, is specifically designed for real-time rendering and efficient transmission of 3D content, making it more suitable for web and mobile applications. The choice between the two depends on the specific requirements of your project and the range of file formats you need to support.

101,622

JavaScript 3D Library.

Pros of three.js

  • Full-featured 3D graphics library for web applications
  • Extensive documentation and large community support
  • Includes a wide range of built-in geometries, materials, and effects

Cons of three.js

  • Larger file size and potentially higher performance overhead
  • Steeper learning curve for beginners
  • Less focused on standardization and cross-platform compatibility

Code Comparison

three.js:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

glTF:

{
  "scene": 0,
  "scenes": [{"nodes": [0]}],
  "nodes": [{"mesh": 0}],
  "meshes": [{
    "primitives": [{
      "attributes": {"POSITION": 0},
      "indices": 1
    }]
  }]
}

The three.js example shows how to set up a basic 3D scene with a camera and renderer, while the glTF example demonstrates a simple JSON structure for describing 3D assets. three.js provides a complete rendering solution, whereas glTF focuses on standardizing 3D asset format for efficient transmission and loading across different platforms and applications.

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Pros of Babylon.js

  • Full-featured 3D engine with built-in physics, audio, and animation systems
  • Extensive documentation and active community support
  • Cross-platform compatibility, including WebGL, WebGPU, and native platforms

Cons of Babylon.js

  • Larger file size and potentially higher performance overhead
  • Steeper learning curve for beginners due to its comprehensive feature set
  • Less flexibility for custom rendering pipelines compared to lower-level APIs

Code Comparison

glTF (JSON structure):

{
  "asset": { "version": "2.0" },
  "scene": 0,
  "scenes": [{ "nodes": [0] }],
  "nodes": [{ "mesh": 0 }],
  "meshes": [{ "primitives": [{ "attributes": { "POSITION": 0 } }] }]
}

Babylon.js (JavaScript):

const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);

While glTF is a file format for 3D content, Babylon.js is a full 3D engine. glTF focuses on efficient transmission and loading of 3D assets, while Babylon.js provides a complete framework for creating and rendering 3D scenes, including support for glTF import.

17,590

Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2

Pros of Filament

  • Comprehensive real-time physically based rendering (PBR) engine
  • Cross-platform support for Android, iOS, Windows, macOS, and Linux
  • Optimized for mobile devices with a focus on performance

Cons of Filament

  • Steeper learning curve due to its complexity and low-level nature
  • Less widespread adoption compared to glTF
  • More focused on rendering, while glTF is a versatile 3D asset format

Code Comparison

glTF (JSON structure):

{
  "asset": { "version": "2.0" },
  "scene": 0,
  "scenes": [{ "nodes": [0] }],
  "nodes": [{ "mesh": 0 }],
  "meshes": [{ "primitives": [{ "attributes": { "POSITION": 0 } }] }]
}

Filament (C++ API usage):

Engine* engine = Engine::create();
Renderer* renderer = engine->createRenderer();
Scene* scene = engine->createScene();
View* view = engine->createView();
Camera* camera = engine->createCamera();

glTF is a file format standard for 3D assets, while Filament is a rendering engine. glTF focuses on efficient transmission and loading of 3D content, whereas Filament provides a complete rendering solution. glTF has broader industry support and is easier to integrate, while Filament offers more control over the rendering process and is optimized for mobile platforms.

5,989

Universal Scene Description

Pros of OpenUSD

  • More comprehensive scene description format, supporting complex hierarchies and relationships
  • Better suited for large-scale production pipelines and collaborative workflows
  • Supports time-based animation and layering of scene elements

Cons of OpenUSD

  • Steeper learning curve due to its complexity and extensive feature set
  • Larger file sizes and potentially slower processing times for simple scenes
  • Less widespread adoption compared to glTF, especially in real-time applications

Code Comparison

OpenUSD example:

from pxr import Usd, UsdGeom

stage = Usd.Stage.CreateNew("example.usda")
xformPrim = UsdGeom.Xform.Define(stage, "/hello")
spherePrim = UsdGeom.Sphere.Define(stage, "/hello/world")
stage.Save()

glTF example:

const gltf = {
  scene: 0,
  scenes: [{ nodes: [0] }],
  nodes: [{ mesh: 0 }],
  meshes: [{ primitives: [{ attributes: { POSITION: 0 }, indices: 1 }] }],
  bufferViews: [/* ... */],
  accessors: [/* ... */],
  buffers: [/* ... */]
};

OpenUSD offers a more expressive and hierarchical approach, while glTF provides a simpler, more compact representation better suited for real-time 3D applications.

The DirectX Tool Kit (aka DirectXTK) is a collection of helper classes for writing DirectX 11.x code in C++

Pros of DirectXTK

  • Comprehensive toolkit for DirectX development, offering a wide range of utilities and helpers
  • Actively maintained by Microsoft, ensuring compatibility with latest Windows and DirectX versions
  • Includes high-level abstractions for common graphics tasks, simplifying DirectX programming

Cons of DirectXTK

  • Limited to DirectX and Windows platforms, lacking cross-platform support
  • Steeper learning curve compared to glTF, especially for beginners in graphics programming
  • Focuses on low-level graphics programming, while glTF is more about 3D asset interchange

Code Comparison

DirectXTK (C++):

auto device = GetD3DDevice();
auto context = GetD3DDeviceContext();
CommonStates states(device);
SpriteBatch spriteBatch(context);

glTF (JSON):

{
  "asset": { "version": "2.0" },
  "scene": 0,
  "scenes": [{ "nodes": [0] }],
  "nodes": [{ "mesh": 0 }]
}

DirectXTK provides C++ classes for DirectX development, while glTF uses JSON to describe 3D scenes and models. DirectXTK is more focused on rendering and graphics programming, whereas glTF is primarily used for 3D asset interchange and scene description across various platforms and applications.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Join glTF Discord Join the forums Join the Slack group

glTF™ (GL Transmission Format) is a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications. glTF minimizes both the size of 3D assets, and the runtime processing needed to unpack and use those assets. glTF defines an extensible, common publishing format for 3D content tools and services that streamlines authoring workflows and enables interoperable use of content across the industry.

Specification

NOTE as of September 23, 2021, the glTF 2.0 Specification has been moved to AsciiDoc markup format.

Please provide spec feedback by submitting issues. For technical or art workflow questions, or to showcase your work, join the glTF forum. For quick questions, use the #gltf channel in the Khronos Group Slack.

Quickstart

Overview

From github.com/javagl/gltfOverview/ | PDF | hardcopy | Khronos reference cards
Japanese translation by Takuto Takahashi

For developers

For artists

Preview tools

Contents

glTF Tools

Tools, applications and libraries for working with glTF can be found in the glTF Project Explorer.

Resources

  • glTF-Generator-Registry - An open registry of tools that create glTF assets, along with structured metadata such as links to documentation and bug trackers.

Formats Built on glTF

  • 3D Tiles - An open standard for streaming and rendering massive heterogenous 3D content.
  • VRM - A 3D avatar format for VR applications.

Stack Overflow

Presentations and Articles

Intros

Tutorials

All Presentations and Articles


We believe the true usefulness of glTF goes beyond the spec itself; it is an ecosystem of tools, documentation, and extensions contributed by the community. You are encouraged to get involved!