GLTS

Like glTF, but for procedural Three.js assets.

A .glts file is a small TypeScript script that builds a scene with ordinary Three.js code. GLTSLoader fetches and runs it and gives you a native THREE.Scene that you can add anywhere, update every frame, hot reload, and dispose.

Use GLTS when an asset is easier to write as code than to model: procedural geometry, parametric or animated props, or assets written by AI coding agents. Assets can load other assets, share code through helper modules, be instanced like a Three.js InstancedMesh, import npm packages, and bring their own preview staging and render settings.

GLTS runs scripts as code, not in a sandbox. Only load scripts you trust.

pnpm add @drawcall/glts three

Usage

A script builds its asset in the scene it imports:

// public/crystal.glts
import * as THREE from "three/webgpu"
import { disposeRecursive, onDispose, onFrame, scene } from "@drawcall/glts"

const crystal = new THREE.Mesh(new THREE.IcosahedronGeometry(), new THREE.MeshNormalMaterial())
scene.add(crystal)

onFrame((delta) => {
  crystal.rotation.y += delta
})

onDispose(() => disposeRecursive(scene))

The app loads it like any other Three.js asset and renders with WebGPU:

import { GLTSLoader } from "@drawcall/glts"
import * as THREE from "three/webgpu"

const renderer = new THREE.WebGPURenderer({ canvas })
await renderer.init()

const loader = new GLTSLoader(new THREE.LoadingManager())
const crystal = await loader.loadAsync("/crystal.glts")
scene.add(crystal)

const timer = new THREE.Timer()
renderer.setAnimationLoop((time) => {
  timer.update(time)
  crystal.update(timer.getDelta())
  renderer.render(scene, camera)
})

In a Vite app, add glts() from @drawcall/glts/vite to the plugins: public scripts then load precompiled and share the app's packages.

CLI

Render a .glts asset to PNG or export it to GLB (Node.js 22.18+ or 24.11+):

npx drawcall glts render asset.glts -o preview.png
npx drawcall glts render asset.glts -o views.png --views '[[{"camera":"+x"},{"camera":"persp"}]]'
npx drawcall glts export asset.glts -o asset.glb

Rendering uses @drawcall/webgpu, with or without a GPU, and includes preview staging; in Node.js, render(file, options) from @drawcall/glts/node returns the same PNG as bytes. Export excludes it and writes supported geometry, materials, textures, skins, and explicit animation clips; procedural frame callbacks remain in the .glts file.

Agent skill

Everything else (helpers, composition, instancing, rendering, reload, packages, and the Vite plugin) is documented in the GLTS skill. Install it for your coding agent:

npx skills add drawcall-ai/glts --skill glts

The skill also ships inside the @drawcall/glts npm package at skills/glts/SKILL.md, so skills-npm links it automatically from node_modules, at the version you have installed.