Using gLTF-Transform on a client side webpage

[evanmcarlson]

Hello!

I have created an application that dynamically downloads 3D models using the Sketchfab API and loads them to Three.js using GLTFLoader on a standard client-side webpage.

I'd like to run the models through the same pipeline as gltf.report to optimize textures to 512x512 before loading them with GLTFLoader, but I'm having trouble finding a CDN url or minified version of @gltf-transform/functions.

Any suggestions on how to load the library on a client-side webpage with a script tag would be much appreciated!

[donmccurdy]

Hi! The only distribution methods I'm "officially" supporting are this GitHub repository and the NPM package. There are lots of CDNs that re-host what they find on NPM, but most of them do not support packages with dependencies. So my strong recommendation, whenever possible, is to use a bundler (webpack, parcel, rollup, vite, etc.) to build your application and its dependencies. For gltf.report I use webpack, vite is also a great choice for web apps.

That said — if you needed to use a CDN, then skypack is probably the best in terms of dependency management:

import { Document, WebIO } from 'https://cdn.skypack.dev/@gltf-transform/core';
import { KHRONOS_EXTENSIONS } from 'https://cdn.skypack.dev/@gltf-transform/extensions';
import { textureResize } from 'https://cdn.skypack.dev/@gltf-transform/functions';

const io = new WebIO()
	.registerExtensions(KHRONOS_EXTENSIONS);
  
const document = new Document(); // or import your model here

await document.transform(
	textureResize({size: [1024, 1024]})
);

const glb = await io.writeBinary(document);

new GLTFLoader().parse(glb.buffer, '', (gltf) => {
 ...
});

Ideally you'd want to use "pinned" URLs, see the Skypack docs: https://docs.skypack.dev/skypack-cdn/api-reference/pinned-urls-optimized

Unpkg is also popular, but you'd need to set up Import Maps manually for every dependency-of-a-dependency.