@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

• Bump ocular-gatsby (#167)
• Move bundle.js into src (keep module roots clean) (#169)
• Centralize node support (#162)
• Bump luma (#141)
• GLB Parser start on arbitrary byteOffset (#163)
• Move the no longer maintained text-encoder module into core (#161)
• Minor cleanup (#159)
• Fill in some arrow docs (#158)
• Working example (#157)
• Remove arraybuffer-loader (#156)
• Add gltf example and integrate into website (#155)
• @loaders.gl/images - module refactor (#152)
• Fix Draco loader attribute types (#154)
• Add scripts (#153)