• Stars
    star
    1,318
  • Rank 35,514 (Top 0.8 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

glTF 2.0 SDK for JavaScript and TypeScript, on Web and Node.js.

glTF-Transform

Latest NPM release Minzipped size License Build Status Coverage

glTF 2.0 SDK for JavaScript and TypeScript, on Web and Node.js.

Introduction

glTF-Transform supports reading, editing, and writing 3D models in glTF 2.0 format. Unlike 3D modeling tools — which are ideal for artistic changes to geometry, materials, and animation — glTF-Transform provides fast, reproducible, and lossless control of the low-level details in a 3D model. The API automatically manages array indices and byte offsets, which would otherwise require careful management when editing files. These traits make it a good choice for bundling, splitting, or optimizing an existing model. It can also be used to apply quick fixes for common issues, to build a model procedurally, or to easily develop custom extensions on top of the glTF format. Because the core SDK is compatible with both Node.js and Web, glTF-Transform may be used to develop offline workflows and web applications alike.

Packages:

  • @gltf-transform/core: Core SDK, providing an expressive API to read, edit, and write glTF files.
  • @gltf-transform/extensions: Extensions (optional glTF features) for the Core SDK.
  • @gltf-transform/functions: Functions for common glTF modifications, written using the core API.
  • @gltf-transform/cli: Command-line interface (CLI) to apply functions to glTF files quickly or in batch.

Function symbol, f(📦) → 📦, where the argument and output are a box labeled 'glTF'.

Scripting API

Install the scripting packages:

npm install --save @gltf-transform/core @gltf-transform/extensions @gltf-transform/functions

Read and write glTF scenes with platform I/O utilities WebIO, NodeIO, or DenoIO:

import { Document, NodeIO } from '@gltf-transform/core';
import { ALL_EXTENSIONS } from '@gltf-transform/extensions';
import draco3d from 'draco3dgltf';

// Configure I/O.
const io = new NodeIO()
    .registerExtensions(ALL_EXTENSIONS)
    .registerDependencies({
        'draco3d.decoder': await draco3d.createDecoderModule(), // Optional.
        'draco3d.encoder': await draco3d.createEncoderModule(), // Optional.
    });

// Read from URL.
const document = await io.read('path/to/model.glb');

// Write to byte array (Uint8Array).
const glb = await io.writeBinary(document);

To perform changes to an existing glTF Document, import off-the-shelf scripts from the Functions package, or write your own using API classes like Material, Primitive, and Texture.

import { resample, prune, dedup, draco, textureCompress } from '@gltf-transform/functions';
import sharp from 'sharp'; // Node.js only.

await document.transform(
    // Losslessly resample animation frames.
    resample(),
    // Remove unused nodes, textures, or other data.
    prune(),
    // Remove duplicate vertex or texture data, if any.
    dedup(),
    // Compress mesh geometry with Draco.
    draco(),
    // Convert textures to WebP (Requires glTF Transform v3 and Node.js).
    textureCompress({
        encoder: sharp,
        targetFormat: 'webp',
        resize: [1024, 2024],
    }),
    // Custom transform.
    backfaceCulling({cull: true}),
);

// Custom transform: enable/disable backface culling.
function backfaceCulling(options) {
    return (document) => {
        for (const material of document.getRoot().listMaterials()) {
            material.setDoubleSided(!options.cull);
        }
    };
}

To learn how glTF-Transform works, and the architecture of the scripting API, start with Concepts. To try out the scripting API without installing anything, visit gltf.report/, load a glTF model, and open the Script tab.

Command-line API

Install the CLI, supported in Node.js v14+.

npm install --global @gltf-transform/cli

List available CLI commands:

gltf-transform --help

Optimize everything all at once:

gltf-transform optimize input.glb output.glb --texture-compress webp

Or pick and choose your optimizations, building a custom pipeline.

Compress mesh geometry with Draco or Meshoptimizer:

# Draco (compresses geometry).
gltf-transform draco input.glb output.glb --method edgebreaker

# Meshopt (compresses geometry, morph targets, and keyframe animation).
gltf-transform meshopt input.glb output.glb --level medium

Resize and compress textures with Sharp, or improve VRAM usage and performance with KTX2 and Basis Universal:

# Resize textures.
gltf-transform resize input.glb output.glb --width 1024 --height 1024

# Compress textures with WebP.
gltf-transform webp input.glb output.glb --slots "baseColor"

# Compress textures with KTX2 + Basis Universal codecs, UASTC and ETC1S.
gltf-transform uastc input.glb output1.glb \
    --slots "{normalTexture,occlusionTexture,metallicRoughnessTexture}" \
    --level 4 --rdo 4 --zstd 18 --verbose
gltf-transform etc1s output1.glb output2.glb --quality 255 --verbose

... and much more.

Credits

See Credits.

License

Copyright 2023, MIT License.

More Repositories

1

three-gltf-viewer

Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
JavaScript
2,060
star
2

three-pathfinding

Navigation mesh utilities for three.js, based on PatrolJS.
JavaScript
1,168
star
3

three-to-cannon

Convert a THREE.Mesh to a CANNON.Shape.
JavaScript
334
star
4

expression-eval

JavaScript expression parsing and evaluation.
TypeScript
194
star
5

msdf-bmfont-web

Web tool for creation of MSDF bitmap font spritesheets and JSON
JavaScript
137
star
6

simple-dropzone

A simple multi-file drag-and-drop input using vanilla JavaScript.
JavaScript
68
star
7

glTF-Procedural-Trees

Create procedural glTF 2.0 trees with proctree.js and three.js.
JavaScript
66
star
8

aframe-gamepad-controls

🎮 Gamepad controls for A-Frame VR.
JavaScript
66
star
9

aframe-inspector-plugin-recast

A-Frame Inspector plugin for creating navigation meshes.
JavaScript
64
star
10

glTF-Report-Feedback

Issues, feedback, and feature requests for the https://gltf.report website.
57
star
11

zstddec-wasm

ZSTD (Zstandard) decoder for Web and Node.js, using WebAssembly.
TypeScript
57
star
12

glTF-Transform-View

Syncs a glTF-Transform Document with a three.js scene graph.
TypeScript
49
star
13

aframe-proxy-controls

A-Frame component to proxy keyboard/gamepad controls between devices over WebRTC.
JavaScript
47
star
14

KTX-Parse

KTX 2.0 (.ktx2) parser and serializer.
TypeScript
47
star
15

three-filmic

Film emulsion-like rendering transforms for three.js
TypeScript
40
star
16

proxy-controls-server

Send keyboard/gamepad controls between devices, peer-to-peer, over WebRTC.
JavaScript
36
star
17

mikktspace-wasm

MikkTSpace vertex tangent calculation for JavaScript/TypeScript/Node.js, using Web Assembly.
JavaScript
32
star
18

tweakpane-plugin-thumbnail-list

Image thumbnail list plugin for Tweakpane
TypeScript
30
star
19

three-shadenodeloader

[EXPERIMENTAL] three.js loader for shaders created with Shade app for iOS
Lua
29
star
20

hex2dec

Arbitrary precision decimal↔️hexadecimal converter.
JavaScript
27
star
21

input-tokenizer

jQuery plugin that allows a user to type keywords, which will be broken up into tokens/tags and displayed, similarly to tagging a post on Tumblr or Stack-Overflow.
JavaScript
25
star
22

aframe-keyboard-controls

⌨️ Keyboard controls and input events for A-Frame VR.
JavaScript
23
star
23

ndarray-pixels

Convert ndarray ↔ image data, for Web and Node.js.
TypeScript
22
star
24

glTF-Browser-Extension

Adds preview button for glTF 2.0 models on GitHub.
JavaScript
16
star
25

webvr-experiments

JavaScript
16
star
26

property-graph

Base for creating objects that behave like a Property Graph
TypeScript
13
star
27

aframe-obj-loader-component

[Deprecated] A-Frame loader component for .OBJ models and .MTL materials.
11
star
28

three-color-grading

TypeScript
10
star
29

keyframe-resample-wasm

Resamples and optimizes keyframe data using WebAssembly.
TypeScript
10
star
30

greendoc

🌿 An adaptable system for generating documentation of TypeScript and JavaScript APIs.
TypeScript
9
star
31

KTX2-Samples

Collection of KTX2 sample textures, for testing and debugging.
Shell
8
star
32

typescript-library-template

Personal template for new TypeScript libraries.
JavaScript
8
star
33

github-contributions-scraper

Scrapes the GitHub contributions graph SVG and outputs JSON.
JavaScript
8
star
34

assemblyscript-library-template

Personal template for new AssemblyScript libraries.
TypeScript
6
star
35

ndarray-lanczos

Resize an ndarray with Lanczos resampling
TypeScript
5
star
36

circular-array

Simple circular array data structure, for storing a finite-length list of values
JavaScript
4
star
37

fp64-arithmetic

Testing FP64 arithmetic in GLSL on Apple GPUs.
JavaScript
4
star
38

blocks-sandbox

TypeScript
3
star
39

watch-exec

Runs a specified command when any files in the target directory change.
JavaScript
3
star
40

fbx2gltf-api

Dockerized API endpoint for FBX2glTF
JavaScript
2
star
41

THREE.MapControls

(DEPRECATED) THREE.js camera controls suitable for flat scenes — panning, zooming, and limited rotation.
JavaScript
2
star
42

2024-06-20_vite_lib_ts

Minimal reproduction of Vite library mode issue
TypeScript
2
star
43

glTF-Transform-View-Starter

TypeScript
2
star
44

stack-overflow-feed-bot

Posts links in Slack for each new Stack Overflow question with a given tag.
JavaScript
1
star