Demo

Caution

Only can compress .glb file now.
Will be support .gltf soon.

Introduce

Optimize glTF.
Draco compress and convert texture to WebP.

Using glTF-Transform and webp-converter-browser

Install

# If you want to use CLI
npm install --global gltf-optimizer

# npm
npm install gltf-optimizer

# yarn
yarn add gltf-optimizer

# pnpm
pnpm add gltf-optimizer

# bun
bun add gltf-optimizer

# If you install and use browser side
cp node_modules/gltf-optimizer/draco3d/* ./<your_static_path>/

Usage

import { optimizer } from 'gltf-optimizer'

// ...

// node (backend side)
const glb = fs.readFileSync('./target.glb')
const optimized = await optimizer.node(glb, { /* options */ })
fs.writeFileSync('./compressed.glb', optimized)

// browser (frontend side)
const optimized = await optimizer.web(glb, { /* options */ })
// if using get-file-using-a-tag (https://github.com/juunini/get-file-using-a-tag)
download({ fileName: 'compressed.glb', arrayBuffer: optimized })

Usage(CLI)

gltf-optimizer -i model.glb
gltf-optimizer -i model.glb -o ./output

Command-Line Flags

| Flag | Description | Required | |-|-|-| | --help, -h | Display help | No | | --input, -i | Path to the glTF or glb file. | :white_check_mark: Yes | | --output, -o | Output path of the glTF or glb file. Separate resources will be saved to the same directory. | No, default ./ | | --emissiveStrength | Emissive strength of the glTF file. | No, default 1.0 | | --draco.method | edgebreaker or sequential | No, default edgebreaker | | --weld.tolerance | Tolerance, as a fraction of primitive AABB, used when merging similar vertices. | No, default 0.0001 | | --simplify.enabled | Enable/disable vertex simplification. | No, default true | | --simplify.ratio | Target ratio (0-1) of vertices to keep. | No, default 0.75 | | --simplify.error | Limit on error, as a fraction of mesh radius. | No, default 0.01 | | --texture.resize.resolution | Maximum width/height to enforce, preserving aspect ratio. For example, a 4096x8192 texture, resized with limit [2048, 2048] will be reduced to 1024x2048. | No, default 1024 | | --texture.resize.filter | Resampling filter method. LANCZOS3 is sharper, LANCZOS2 is smoother. | No, default LANCZOS3 |