@loaders.gl/gltf

What is @loaders.gl/gltf?

@loaders.gl/gltf is a part of the loaders.gl suite, designed to handle the loading, parsing, and processing of GLTF (GL Transmission Format) files. It provides utilities to work with 3D models and scenes, making it easier to integrate GLTF assets into web applications.

What are @loaders.gl/gltf's main functionalities?

Loading GLTF Files

This feature allows you to load GLTF files from a given URL. The `load` function from `@loaders.gl/core` is used in conjunction with the `GLTFLoader` to fetch and parse the GLTF file.

const { load } = require('@loaders.gl/core');
const { GLTFLoader } = require('@loaders.gl/gltf');

async function loadGLTF(url) {
  const data = await load(url, GLTFLoader);
  console.log(data);
}

loadGLTF('path/to/your/model.gltf');

Parsing GLTF Data

This feature allows you to parse GLTF data from an ArrayBuffer. The `parse` function from `@loaders.gl/core` is used with the `GLTFLoader` to convert the binary data into a usable format.

const { parse } = require('@loaders.gl/core');
const { GLTFLoader } = require('@loaders.gl/gltf');

async function parseGLTF(arrayBuffer) {
  const data = await parse(arrayBuffer, GLTFLoader);
  console.log(data);
}

// Assuming you have an ArrayBuffer of GLTF data
const arrayBuffer = new ArrayBuffer();
parseGLTF(arrayBuffer);

Handling GLB Files

This feature allows you to load GLB files, which are binary versions of GLTF files. The `load` function is used with the `GLTFLoader` and the `binary` option set to `true` to handle GLB files.

const { load } = require('@loaders.gl/core');
const { GLTFLoader } = require('@loaders.gl/gltf');

async function loadGLB(url) {
  const data = await load(url, GLTFLoader, { binary: true });
  console.log(data);
}

loadGLB('path/to/your/model.glb');

Other packages similar to @loaders.gl/gltf

three

Three.js is a popular JavaScript library for creating 3D graphics in the browser. It includes support for loading and parsing GLTF files through its `GLTFLoader` class. Compared to @loaders.gl/gltf, Three.js offers a more comprehensive suite of tools for rendering and manipulating 3D scenes.

babylonjs

Babylon.js is another powerful JavaScript framework for building 3D games and experiences. It also supports GLTF loading and parsing through its `GLTFFileLoader`. While Babylon.js is more focused on game development, @loaders.gl/gltf is more specialized in data loading and parsing.

gltf-pipeline

gltf-pipeline is a tool for optimizing GLTF files. It can be used to compress, optimize, and transform GLTF assets. While @loaders.gl/gltf focuses on loading and parsing, gltf-pipeline is more about post-processing and optimization of GLTF files.

README

@loaders.gl/gltf

loaders.gl is a collection of framework independent 3D and geospatial parsers and encoders.

This module contains loader and writers for the glTF format.

Changelog

v1.0.0-alpha.1

• Fix load-file bug and add unit test (#134)
• Fix broken GLB Parser getBuffer() (#133)
• Directory structure cleanup (#131)
• Use fetchFile instead of readFile (#132)
• Add loader registry (#129)
• Remove gltf attribute name map (#130)
• Core loader updates (#128)
• Add ArrowTableBatch class. Tests for streaming CSV->Arrow RecordBatch async iterator (#127)
• Add CSVLoader (fork of papaparse) (#125)
• Remove duplicated code and address comments (#126)
• API and test cleanup (#124)
• Add parser support for KHR_lights_punctual glTF extension (#123)
• Pass on the Vector docs (#122)
• Run lint/prettier after dev tools upgrade (#121)
• Arrow docs update (#120)
• Replace custom test runner with @luma.gl/test-utils (#117)
• Run lint on docs (#116)
• Replace dev scripts with ocular-dev-tools (#115)