usd-gltf 0.0.1 → 0.2.0

package/src/convert/usd-material.js

@@ -6,9 +6,10 @@
 // and lets textures be referenced directly when glTF can express the result, or be repacked
 // (baked) into a new image when it can't, e.g. separate roughness and metallic maps.
 
-import { decodeImageAsync, encodePNG, imageMimeType } from '../image/index.js';
+import { decodeImageAsync, encodePNG, encodePNGAsync, imageMimeType, isGreyscaleImage } from '../image/index.js';
 import { multiply } from '../util/math.js';
 import { resolveAssetPath } from '../usd/stage.js';
+import { Budget, rethrowFatal } from '../limits.js';
 
 const WRAP = { repeat: 10497, mirror: 33648, clamp: 33071, black: 33071 };
 const CHANNEL = { r: 0, g: 1, b: 2, a: 3, x: 0, y: 1, z: 2, w: 3 };
@@ -68,9 +69,10 @@ function binary( a, b, op ) {
 
 export class MaterialConverter {
 
-	constructor( stage, builder, { log = () => {}, imageDecoder = null } = {} ) {
+	constructor( stage, builder, { log = () => {}, imageDecoder = null, budget = new Budget() } = {} ) {
 
 		this.stage = stage;
+		this.budget = budget;
 		this.builder = builder;
 		this.log = log;
 		this.imageDecoder = imageDecoder;
@@ -467,6 +469,7 @@ export class MaterialConverter {
 
 		} catch ( e ) {
 
+			rethrowFatal( e, this.budget );
 			this.log( `texture ${ file }: ${ e.message }` );
 
 		}
@@ -476,6 +479,20 @@ export class MaterialConverter {
 
 	}
 
+	async isGrey( file ) {
+
+		try {
+
+			return isGreyscaleImage( await this.stage.readAsset( file ) );
+
+		} catch {
+
+			return false;
+
+		}
+
+	}
+
 	decode( file ) {
 
 		if ( ! this.decoded.has( file ) ) {
@@ -484,10 +501,11 @@ export class MaterialConverter {
 
 				try {
 
-					return await decodeImageAsync( await this.stage.readAsset( file ), undefined, this.imageDecoder );
+					return await decodeImageAsync( await this.stage.readAsset( file ), undefined, this.imageDecoder, this.budget );
 
 				} catch ( e ) {
 
+					rethrowFatal( e, this.budget );
 					this.log( `decode ${ file }: ${ e.message }` );
 					return null;
 
@@ -562,8 +580,10 @@ export class MaterialConverter {
 		const tex = textured[ 0 ].term.tex;
 		const sameTexture = textured.every( ( s ) => s.term.tex.file === tex.file && s.term.tex.uv.name === tex.uv.name && JSON.stringify( s.term.tex.uv.transform ) === JSON.stringify( tex.uv.transform ) );
 
-		// direct use: each textured slot reads its own channel, no bias, scale expressible as a factor
-		const direct = sameTexture && textured.every( ( s ) => s.term.channel === s.out && Math.abs( s.term.bias ) < 1e-6 && ( allowFactor || Math.abs( s.term.scale - 1 ) < 1e-6 ) ) &&
+		// direct use: each textured slot reads its own channel (any colour channel of a grey image
+		// reads the same value), no bias, and a scale expressible as a factor
+		const grey = sameTexture && textured.some( ( s ) => s.term.channel !== s.out ) && await this.isGrey( tex.file );
+		const direct = sameTexture && textured.every( ( s ) => ( s.term.channel === s.out || ( grey && s.term.channel < 3 && s.out < 3 ) ) && Math.abs( s.term.bias ) < 1e-6 && ( allowFactor || Math.abs( s.term.scale - 1 ) < 1e-6 ) ) &&
 			slots.every( ( s ) => ! s || s.term.tex || s.ignoreConst || ( allowFactor && s.constOk ) );
 
 		if ( direct ) {
@@ -588,47 +608,64 @@ export class MaterialConverter {
 
 		}
 
+		const key = 'baked:' + slots.map( ( s ) => s ? `${ s.term.tex?.file }#${ s.term.channel }*${ s.term.scale }+${ s.term.bias }` : '-' ).join( ',' );
+		let imageIndex = this.images.get( key )?.index;
+
+		if ( imageIndex === undefined ) {
+
+			const image = this.bake( slots, textured, sources );
+			imageIndex = this.builder.addImage( await encodePNGAsync( image ), 'image/png', imageName( tex.file ) + '_packed' );
+			this.images.set( key, { index: imageIndex, mimeType: 'image/png' } );
+
+		}
+
+		return { info: this.textureInfo( imageIndex, tex, key ), factors: slots.map( () => 1 ) };
+
+	}
+
+	// Writes each slot's term into its output channel, resampling sources to the largest size.
+	// Only the channels glTF reads are stored: grey for a lone R, RGB, or RGBA when alpha is used.
+	bake( slots, textured, sources ) {
+
 		const width = Math.max( ...sources.map( ( s ) => s.width ) );
 		const height = Math.max( ...sources.map( ( s ) => s.height ) );
-		const out = new Uint8Array( width * height * 4 );
+		const used = slots.map( ( s, c ) => ( s ? c : - 1 ) ).filter( ( c ) => c >= 0 );
+		const channels = used.length === 1 && used[ 0 ] === 0 ? 1 : used.includes( 3 ) ? 4 : 3;
+		const out = new Uint8Array( width * height * channels );
 		const srcOf = new Map( textured.map( ( s, i ) => [ s, sources[ i ] ] ) );
 
-		for ( let c = 0; c < 4; c ++ ) {
+		for ( let c = 0; c < channels; c ++ ) {
 
 			const slot = slots.find( ( s ) => s && s.out === c );
 
-			if ( ! slot ) {
+			if ( ! slot || ! slot.term.tex ) {
 
-				for ( let i = c; i < out.length; i += 4 ) out[ i ] = 255;
+				const v = slot ? Math.round( clamp01( slot.term.bias ) * 255 ) : 255;
+				for ( let i = c; i < out.length; i += channels ) out[ i ] = v;
 				continue;
 
 			}
 
 			const { term } = slot;
-
-			if ( ! term.tex ) {
-
-				const v = Math.round( clamp01( term.bias ) * 255 );
-				for ( let i = c; i < out.length; i += 4 ) out[ i ] = v;
-				continue;
-
-			}
-
 			const src = srcOf.get( slot );
 			const max = src.bitDepth === 16 ? 65535 : 255;
-			const sc = Math.min( term.channel, src.channels - 1 );
 			const alphaMissing = term.channel === 3 && src.channels < 4 && src.channels !== 2;
-			const channel = src.channels === 2 && term.channel === 3 ? 1 : src.channels <= 2 && term.channel < 3 ? 0 : sc;
+			const channel = src.channels === 2 && term.channel === 3 ? 1 : src.channels <= 2 && term.channel < 3 ? 0 : Math.min( term.channel, src.channels - 1 );
 
-			for ( let y = 0; y < height; y ++ ) {
+			// output = clamp( raw / max * scale + bias ) * 255, as one multiply and add per pixel
+			const k = term.scale * 255 / max, b = term.bias * 255 + 0.5;
+			const xs = new Int32Array( width );
+			for ( let x = 0; x < width; x ++ ) xs[ x ] = Math.min( src.width - 1, Math.floor( x * src.width / width ) ) * src.channels + channel;
+			const data = src.data, sw = src.width * src.channels;
 
-				const sy = Math.min( src.height - 1, Math.floor( y * src.height / height ) );
+			for ( let y = 0, o = c; y < height; y ++ ) {
 
-				for ( let x = 0; x < width; x ++ ) {
+				const row = Math.min( src.height - 1, Math.floor( y * src.height / height ) ) * sw;
 
-					const sx = Math.min( src.width - 1, Math.floor( x * src.width / width ) );
-					const raw = alphaMissing ? 1 : src.data[ ( sy * src.width + sx ) * src.channels + channel ] / max;
-					out[ ( y * width + x ) * 4 + c ] = Math.round( clamp01( raw * term.scale + term.bias ) * 255 );
+				for ( let x = 0; x < width; x ++, o += channels ) {
+
+					const v = alphaMissing ? 255 * term.scale + b : data[ row + xs[ x ] ] * k + b;
+					out[ o ] = v <= 0 ? 0 : v >= 255 ? 255 : v | 0;
 
 				}
 
@@ -636,16 +673,7 @@ export class MaterialConverter {
 
 		}
 
-		const key = 'baked:' + slots.map( ( s ) => s ? `${ s.term.tex?.file }#${ s.term.channel }*${ s.term.scale }+${ s.term.bias }` : '-' ).join( ',' );
-		let imageIndex = this.images.get( key )?.index;
-		if ( imageIndex === undefined ) {
-
-			imageIndex = this.builder.addImage( encodePNG( { width, height, channels: 4, data: out } ), 'image/png', imageName( tex.file ) + '_packed' );
-			this.images.set( key, { index: imageIndex, mimeType: 'image/png' } );
-
-		}
-
-		return { info: this.textureInfo( imageIndex, tex, key ), factors: slots.map( () => 1 ) };
+		return { width, height, channels, data: out };
 
 	}
 
@@ -656,6 +684,7 @@ export class MaterialConverter {
 	 */
 	async convert( material, { doubleSided = false, vertexColors = false, variant = '' } = {} ) {
 
+		this.budget.check();
 		const key = material.path + ( doubleSided ? '|ds' : '' ) + ( variant ? '|' + variant : '' );
 		if ( this.materials.has( key ) ) return this.materials.get( key );
 

package/src/convert/usd-to-gltf.js

@@ -6,6 +6,7 @@ import { getXformOps, evaluateOps, xformSampleTimes } from '../usd/xform.js';
 import { MaterialConverter, gltfTextureTransform } from './usd-material.js';
 import { triangulateMesh, normalizeNormals } from './usd-mesh.js';
 import { generateShape } from './usd-shapes.js';
+import { Budget } from '../limits.js';
 import { compose, decompose, identity, invert, isIdentity, multiply, normalMatrix, transformDirection, transformPoint } from '../util/math.js';
 
 const SKIP_TYPES = new Set( [ 'Material', 'Shader', 'NodeGraph', 'GeomSubset', 'SkelAnimation', 'BlendShape', 'RenderSettings', 'RenderProduct', 'RenderVar', 'GeometryLight', 'DomeLight', 'Backdrop' ] );
@@ -14,14 +15,15 @@ const SHAPE_TYPES = new Set( [ 'Cube', 'Sphere', 'Cylinder', 'Cone', 'Capsule',
 
 export class USDToGLTF {
 
-	constructor( stage, { log = () => {}, materialVariants = true, debug = false, imageDecoder = null } = {} ) {
+	constructor( stage, { log = () => {}, materialVariants = true, debug = false, imageDecoder = null, budget = new Budget() } = {} ) {
 
 		this.stage = stage;
+		this.budget = budget;
 		this.log = log;
 		this.debug = debug; // records usd paths and time mapping in extras, for verification
 		this.materialVariants = materialVariants;
-		this.builder = new GLTFBuilder();
-		this.materials = new MaterialConverter( stage, this.builder, { log, imageDecoder } );
+		this.builder = new GLTFBuilder( 'usd-gltf', budget );
+		this.materials = new MaterialConverter( stage, this.builder, { log, imageDecoder, budget } );
 		this.json = this.builder.json;
 		this.meshCache = new Map();
 		this.primNodes = new Map(); // prim path -> node index (first instance)
@@ -101,6 +103,7 @@ export class USDToGLTF {
 
 	async convertPrim( prim, parentPrim ) {
 
+		this.budget.check();
 		if ( ! this.isRenderable( prim ) ) return null;
 
 		const node = { name: prim.name };
@@ -199,6 +202,7 @@ export class USDToGLTF {
 
 	async convertMesh( prim, nodeIndex ) {
 
+		this.budget.check();
 		const node = this.json.nodes[ nodeIndex ];
 		const skel = this.skinningFor( prim );
 
@@ -289,7 +293,7 @@ export class USDToGLTF {
 
 			const indices = data.vertexCount < 65536 ? Uint16Array.from( group.indices ) : Uint32Array.from( group.indices );
 			const primitive = { attributes: { ...attributes }, indices: this.builder.addAccessor( indices, 'SCALAR', { target: 34963 } ) };
-			const material = ( group.subset && this.boundMaterial( group.subset ) ) || this.defaultMaterial( prim ) || this.boundMaterial( prim );
+			const material = ( group.subset && ( this.defaultMaterial( group.subset ) || this.boundMaterial( group.subset ) ) ) || this.defaultMaterial( prim ) || this.boundMaterial( prim );
 
 			if ( material ) primitive.material = await this.materials.convert( material, { doubleSided, vertexColors } );
 			else primitive.material = this.materials.defaultMaterial( data.constantColor, data.constantOpacity, vertexColors, doubleSided );

package/src/gltf/document.js

@@ -2,6 +2,7 @@
 
 import { readGLB, writeGLB } from './glb.js';
 import { decodeMeshoptView } from './meshopt.js';
+import { Budget, checkSize } from '../limits.js';
 
 const COMPONENT_ARRAYS = {
 	5120: Int8Array,
@@ -14,6 +15,43 @@ const COMPONENT_ARRAYS = {
 
 export const TYPE_SIZES = { SCALAR: 1, VEC2: 2, VEC3: 3, VEC4: 4, MAT2: 4, MAT3: 9, MAT4: 16 };
 
+// Extensions an asset may require. Material extensions without a UsdPreviewSurface equivalent are
+// approximated and kept on the USD material for the way back, so every KHR_materials_* is accepted.
+const SUPPORTED_EXTENSIONS = new Set( [
+	'EXT_mesh_gpu_instancing', 'EXT_meshopt_compression', 'KHR_meshopt_compression', 'KHR_mesh_quantization',
+	'EXT_texture_webp', 'EXT_texture_avif', 'KHR_texture_transform', 'KHR_animation_pointer', 'KHR_lights_punctual',
+	'KHR_node_visibility', 'KHR_xmp_json_ld',
+] );
+
+/**
+ * The asset's required extensions that can't be converted (e.g. KHR_draco_mesh_compression, KHR_texture_basisu).
+ * @param {object} json
+ * @returns {string[]}
+ */
+export function unsupportedExtensions( json ) {
+
+	return ( json.extensionsRequired || [] ).filter( ( name ) => ! SUPPORTED_EXTENSIONS.has( name ) && ! name.startsWith( 'KHR_materials_' ) );
+
+}
+
+// Optional Draco needs uncompressed fallback data: without a bufferView or sparse values the
+// accessors would read as zeros.
+function checkDracoFallbacks( json ) {
+
+	( json.meshes || [] ).forEach( ( mesh, m ) => mesh.primitives.forEach( ( primitive, p ) => {
+
+		if ( ! primitive.extensions?.KHR_draco_mesh_compression ) return;
+		const used = [ ...Object.values( primitive.attributes ), primitive.indices ].filter( ( a ) => a !== undefined );
+		if ( used.some( ( a ) => json.accessors[ a ].bufferView === undefined && ! json.accessors[ a ].sparse ) ) {
+
+			throw new Error( `usd-gltf: mesh ${ m } primitive ${ p } is Draco compressed with no uncompressed fallback; KHR_draco_mesh_compression is not supported` );
+
+		}
+
+	} ) );
+
+}
+
 function decodeDataURI( uri ) {
 
 	const comma = uri.indexOf( ',' );
@@ -38,11 +76,12 @@ function decodeDataURI( uri ) {
  */
 export class GLTFDocument {
 
-	constructor( json, buffers, images ) {
+	constructor( json, buffers, images, budget = new Budget() ) {
 
 		this.json = json;
 		this.buffers = buffers; // Uint8Array per json.buffers entry
 		this.images = images; // { bytes, mimeType, name } per json.images entry
+		this.budget = budget;
 		this.accessorCache = new Map();
 		this.decodedViews = new Map(); // bufferView index -> bytes, for compressed views
 
@@ -52,9 +91,11 @@ export class GLTFDocument {
 
 		const decoded = this.decodedViews.get( index );
 		if ( decoded ) return decoded;
-		const view = this.json.bufferViews[ index ];
-		const buffer = this.buffers[ view.buffer ];
-		return buffer.subarray( view.byteOffset || 0, ( view.byteOffset || 0 ) + view.byteLength );
+		const view = this.json.bufferViews?.[ index ];
+		const buffer = view && this.buffers[ view.buffer ];
+		const start = view?.byteOffset || 0;
+		if ( ! buffer || ! ( start + view.byteLength <= buffer.length ) ) throw new Error( `usd-gltf: bufferView ${ index } is outside its buffer` );
+		return buffer.subarray( start, start + view.byteLength );
 
 	}
 
@@ -68,11 +109,16 @@ export class GLTFDocument {
 		const key = index + ( normalize ? 'n' : '' );
 		if ( this.accessorCache.has( key ) ) return this.accessorCache.get( key );
 
-		const accessor = this.json.accessors[ index ];
-		const ArrayType = COMPONENT_ARRAYS[ accessor.componentType ];
-		const itemSize = TYPE_SIZES[ accessor.type ];
+		const accessor = this.json.accessors?.[ index ];
+		const ArrayType = COMPONENT_ARRAYS[ accessor?.componentType ];
+		const itemSize = TYPE_SIZES[ accessor?.type ];
+		if ( ! ArrayType || ! itemSize ) throw new Error( `usd-gltf: accessor ${ index } is missing or has an invalid type` );
 		const count = accessor.count;
-		let array = new ArrayType( count * itemSize );
+		const stage = `accessor ${ index }`;
+		const size = count * itemSize * ArrayType.BYTES_PER_ELEMENT;
+		checkSize( size, stage );
+
+		let read = null;
 
 		if ( accessor.bufferView !== undefined ) {
 
@@ -88,6 +134,17 @@ export class GLTFDocument {
 			const columnStride = Math.ceil( rows * elementBytes / 4 ) * 4;
 			const packed = columns === 1 ? itemSize * elementBytes : columnStride * columns;
 			const stride = view.byteStride || packed;
+			if ( count > 0 && ! ( offset + stride * ( count - 1 ) + packed <= bytes.length ) ) throw new Error( `usd-gltf: ${ stage } reads past the end of its bufferView` );
+			read = { view, bytes, elementBytes, offset, columns, rows, columnStride, stride };
+
+		}
+
+		this.budget.decode( size, stage );
+		let array = new ArrayType( count * itemSize );
+
+		if ( read ) {
+
+			const { bytes, elementBytes, offset, columns, rows, columnStride, stride } = read;
 
 			const dv = new DataView( bytes.buffer, bytes.byteOffset, bytes.byteLength );
 			const getters = { 5120: 'getInt8', 5121: 'getUint8', 5122: 'getInt16', 5123: 'getUint16', 5125: 'getUint32', 5126: 'getFloat32' };
@@ -120,9 +177,16 @@ export class GLTFDocument {
 			const IndexType = COMPONENT_ARRAYS[ indices.componentType ];
 			const ib = this.bufferViewBytes( indices.bufferView );
 			const vb = this.bufferViewBytes( values.bufferView );
+			if ( ! IndexType || ! Number.isSafeInteger( n ) || n < 0 || n > count ) throw new Error( `usd-gltf: ${ stage } has an invalid sparse count` );
+			if ( ! ( ( indices.byteOffset || 0 ) + n * IndexType.BYTES_PER_ELEMENT <= ib.length && ( values.byteOffset || 0 ) + n * itemSize * ArrayType.BYTES_PER_ELEMENT <= vb.length ) ) throw new Error( `usd-gltf: ${ stage } sparse data is outside its bufferViews` );
 			const idx = new IndexType( ib.slice( indices.byteOffset || 0, ( indices.byteOffset || 0 ) + n * IndexType.BYTES_PER_ELEMENT ).buffer );
 			const vals = new ArrayType( vb.slice( values.byteOffset || 0, ( values.byteOffset || 0 ) + n * itemSize * ArrayType.BYTES_PER_ELEMENT ).buffer );
-			for ( let i = 0; i < n; i ++ ) for ( let c = 0; c < itemSize; c ++ ) array[ idx[ i ] * itemSize + c ] = vals[ i * itemSize + c ];
+			for ( let i = 0; i < n; i ++ ) {
+
+				if ( idx[ i ] >= count ) throw new Error( `usd-gltf: ${ stage } sparse index is out of range` );
+				for ( let c = 0; c < itemSize; c ++ ) array[ idx[ i ] * itemSize + c ] = vals[ i * itemSize + c ];
+
+			}
 
 		}
 
@@ -130,6 +194,7 @@ export class GLTFDocument {
 
 		if ( normalize && normalized ) {
 
+			this.budget.decode( array.length * 4, stage );
 			const out = new Float32Array( array.length );
 			const ct = accessor.componentType;
 			for ( let i = 0; i < array.length; i ++ ) {
@@ -154,7 +219,9 @@ export class GLTFDocument {
 	getFloats( index ) {
 
 		const { array, itemSize, count } = this.getAccessor( index );
-		return { array: array instanceof Float32Array ? array : Float32Array.from( array ), itemSize, count };
+		if ( array instanceof Float32Array ) return { array, itemSize, count };
+		this.budget.decode( array.length * 4, `accessor ${ index }` );
+		return { array: Float32Array.from( array ), itemSize, count };
 
 	}
 
@@ -165,13 +232,18 @@ export class GLTFDocument {
  * @param {Uint8Array} bytes
  * @param {{ resolver?: ( uri: string ) => Promise<Uint8Array>|Uint8Array }} [options] loads external uris (already decoded from URI escaping)
  */
-export async function readGLTF( bytes, { resolver = null } = {} ) {
+export async function readGLTF( bytes, { resolver = null, budget = new Budget() } = {} ) {
 
 	let json, bin = null;
+	bytes = plainBytes( bytes );
 
 	if ( bytes[ 0 ] === 0x67 && bytes[ 1 ] === 0x6C && bytes[ 2 ] === 0x54 && bytes[ 3 ] === 0x46 ) ( { json, bin } = readGLB( bytes ) );
 	else json = JSON.parse( new TextDecoder().decode( bytes ).replace( /^/, '' ) );
 
+	const unsupported = unsupportedExtensions( json );
+	if ( unsupported.length ) throw new Error( `usd-gltf: required extension${ unsupported.length > 1 ? 's' : '' } ${ unsupported.join( ', ' ) } not supported` );
+	checkDracoFallbacks( json );
+
 	async function load( uri ) {
 
 		if ( uri.startsWith( 'data:' ) ) return decodeDataURI( uri ).bytes;
@@ -179,7 +251,7 @@ export async function readGLTF( bytes, { resolver = null } = {} ) {
 		let path = uri;
 		try { path = decodeURIComponent( uri ); } catch { /* keep as is */ }
 		const data = await resolver( path );
-		return data instanceof Uint8Array ? data : new Uint8Array( data );
+		return plainBytes( data );
 
 	}
 
@@ -188,8 +260,9 @@ export async function readGLTF( bytes, { resolver = null } = {} ) {
 		if ( buffer.uri === undefined ) {
 
 			if ( i === 0 && bin ) return bin;
-			// e.g. EXT_meshopt_compression fallback buffers have no data
-			return new Uint8Array( buffer.byteLength );
+			// e.g. EXT_meshopt_compression fallback buffers: only read through decoded views, so they
+			// need no storage, and any other view into one fails its bounds check
+			return new Uint8Array( 0 );
 
 		}
 
@@ -197,12 +270,16 @@ export async function readGLTF( bytes, { resolver = null } = {} ) {
 
 	} ) );
 
-	const doc = new GLTFDocument( json, buffers, [] );
+	const doc = new GLTFDocument( json, buffers, [], budget );
 
 	( json.bufferViews || [] ).forEach( ( view, i ) => {
 
 		const ext = view.extensions?.KHR_meshopt_compression || view.extensions?.EXT_meshopt_compression;
-		if ( ext ) doc.decodedViews.set( i, decodeMeshoptView( ext, buffers ) );
+		if ( ! ext ) return;
+		const start = ext.byteOffset || 0;
+		if ( ! buffers[ ext.buffer ] || ! ( start + ext.byteLength <= buffers[ ext.buffer ].length ) ) throw new Error( `usd-gltf: bufferView ${ i } compressed data is outside its buffer` );
+		budget.decode( ext.count * ext.byteStride, `bufferView ${ i }` );
+		doc.decodedViews.set( i, decodeMeshoptView( ext, buffers ) );
 
 	} );
 
@@ -228,6 +305,14 @@ export async function readGLTF( bytes, { resolver = null } = {} ) {
 
 }
 
+// A plain Uint8Array view: a Node Buffer's slice() aliases its memory instead of copying, so data
+// read through .slice().buffer would be the wrong bytes.
+function plainBytes( data ) {
+
+	return ArrayBuffer.isView( data ) ? new Uint8Array( data.buffer, data.byteOffset, data.byteLength ) : new Uint8Array( data );
+
+}
+
 function guessMime( uri ) {
 
 	const ext = uri.split( '?' )[ 0 ].split( '.' ).pop().toLowerCase();
@@ -240,8 +325,9 @@ function guessMime( uri ) {
  */
 export class GLTFBuilder {
 
-	constructor( generator = 'usd-gltf' ) {
+	constructor( generator = 'usd-gltf', budget = new Budget() ) {
 
+		this.budget = budget;
 		this.json = { asset: { version: '2.0', generator }, scenes: [], nodes: [], meshes: [], materials: [], textures: [], images: [], samplers: [], accessors: [], bufferViews: [], buffers: [] };
 		this.chunks = [];
 		this.byteLength = 0;
@@ -262,6 +348,7 @@ export class GLTFBuilder {
 		const pad = ( 4 - ( this.byteLength % 4 ) ) % 4;
 		if ( pad ) { this.chunks.push( new Uint8Array( pad ) ); this.byteLength += pad; }
 
+		this.budget.output( this.byteLength + bytes.byteLength, 'glb buffer' );
 		const view = { buffer: 0, byteOffset: this.byteLength, byteLength: bytes.byteLength };
 		if ( target ) view.target = target;
 		this.chunks.push( bytes instanceof Uint8Array ? bytes : new Uint8Array( bytes.buffer, bytes.byteOffset, bytes.byteLength ) );
@@ -323,7 +410,9 @@ export class GLTFBuilder {
 
 	toGLB() {
 
-		const json = this.finalize();
+		const json = new TextEncoder().encode( JSON.stringify( this.finalize() ) );
+		const pad4 = ( n ) => Math.ceil( n / 4 ) * 4;
+		this.budget.output( 20 + pad4( json.byteLength ) + ( this.byteLength ? 8 + pad4( this.byteLength ) : 0 ), 'glb' );
 		const bin = new Uint8Array( this.byteLength );
 		let offset = 0;
 		for ( const chunk of this.chunks ) {

package/src/gltf/glb.js

@@ -68,13 +68,13 @@ export function readGLB( data ) {
 
 /**
  * Packs glTF JSON and an optional binary buffer into a GLB.
- * @param {object} json
+ * @param {object|Uint8Array} json the glTF JSON, or it already encoded as UTF-8
  * @param {Uint8Array|null} [bin]
  * @returns {Uint8Array}
  */
 export function writeGLB( json, bin = null ) {
 
-	const jsonBytes = encoder.encode( JSON.stringify( json ) );
+	const jsonBytes = json instanceof Uint8Array ? json : encoder.encode( JSON.stringify( json ) );
 	const jsonLength = pad4( jsonBytes.byteLength );
 	const binLength = bin ? pad4( bin.byteLength ) : 0;
 

package/src/image/index.js

@@ -37,6 +37,82 @@ export function imageMimeType( bytes ) {
 
 }
 
+/**
+ * Whether a PNG or JPEG stores a single grey channel, from its header.
+ * @param {Uint8Array} bytes
+ */
+export function isGreyscaleImage( bytes ) {
+
+	bytes = toBytes( bytes );
+	const type = imageMimeType( bytes );
+	if ( type === 'image/png' ) return bytes[ 25 ] === 0 || bytes[ 25 ] === 4; // IHDR colour type
+
+	if ( type === 'image/jpeg' ) {
+
+		// walk the markers to the frame header, whose component count follows the dimensions
+		for ( let o = 2; o + 9 < bytes.length; ) {
+
+			if ( bytes[ o ] !== 0xFF ) return false;
+			const marker = bytes[ o + 1 ];
+			if ( marker >= 0xC0 && marker <= 0xCF && marker !== 0xC4 && marker !== 0xC8 && marker !== 0xCC ) return bytes[ o + 9 ] === 1;
+			o += 2 + ( ( bytes[ o + 2 ] << 8 ) | bytes[ o + 3 ] );
+
+		}
+
+	}
+
+	return false;
+
+}
+
+/**
+ * Width, height and bytes per pixel of a PNG, JPEG or WebP from its header, or null.
+ * @param {Uint8Array} bytes
+ * @returns {{ width: number, height: number, pixelBytes: number }|null}
+ */
+export function imageSize( bytes ) {
+
+	bytes = toBytes( bytes );
+	const type = imageMimeType( bytes );
+	const be16 = ( o ) => ( bytes[ o ] << 8 ) | bytes[ o + 1 ];
+	const le16 = ( o ) => bytes[ o ] | ( bytes[ o + 1 ] << 8 );
+	const le24 = ( o ) => le16( o ) | ( bytes[ o + 2 ] << 16 );
+
+	if ( type === 'image/png' && bytes.length >= 26 ) {
+
+		const width = ( be16( 16 ) * 65536 ) + be16( 18 ), height = ( be16( 20 ) * 65536 ) + be16( 22 );
+		return { width, height, pixelBytes: bytes[ 24 ] === 16 ? 8 : 4 };
+
+	}
+
+	if ( type === 'image/jpeg' ) {
+
+		for ( let o = 2; o + 9 < bytes.length; ) {
+
+			if ( bytes[ o ] !== 0xFF ) return null;
+			const marker = bytes[ o + 1 ];
+			if ( marker >= 0xC0 && marker <= 0xCF && marker !== 0xC4 && marker !== 0xC8 && marker !== 0xCC ) return { width: be16( o + 7 ), height: be16( o + 5 ), pixelBytes: 4 };
+			o += 2 + be16( o + 2 );
+
+		}
+
+		return null;
+
+	}
+
+	if ( type === 'image/webp' && bytes.length >= 30 ) {
+
+		const chunk = String.fromCharCode( bytes[ 12 ], bytes[ 13 ], bytes[ 14 ], bytes[ 15 ] );
+		if ( chunk === 'VP8X' ) return { width: le24( 24 ) + 1, height: le24( 27 ) + 1, pixelBytes: 4 };
+		if ( chunk === 'VP8 ' ) return { width: le16( 26 ) & 0x3FFF, height: le16( 28 ) & 0x3FFF, pixelBytes: 4 };
+		if ( chunk === 'VP8L' ) { const b = bytes[ 21 ] | ( bytes[ 22 ] << 8 ) | ( bytes[ 23 ] << 16 ) | ( bytes[ 24 ] << 24 ); return { width: ( b & 0x3FFF ) + 1, height: ( ( b >>> 14 ) & 0x3FFF ) + 1, pixelBytes: 4 }; }
+
+	}
+
+	return null;
+
+}
+
 /**
  * Decodes a PNG, JPEG or WebP. The format is sniffed from the bytes; mimeType is only a fallback.
  * @param {Uint8Array|ArrayBuffer} bytes
@@ -57,6 +133,55 @@ export function decodeImage( bytes, mimeType ) {
 
 const hasNativeDecoder = typeof createImageBitmap === 'function' && typeof OffscreenCanvas === 'function';
 
+/**
+ * Encodes a PNG, with the platform's encoder where there is one (much faster) unless the image has
+ * partial transparency, which canvases store premultiplied.
+ * @param {{ width: number, height: number, channels: number, data: Uint8Array }} image 8 bit
+ * @returns {Promise<Uint8Array>}
+ */
+export async function encodePNGAsync( image ) {
+
+	const { width, height, channels, data } = image;
+	let opaque = channels !== 2 && channels !== 4;
+	if ( ! opaque ) {
+
+		opaque = true;
+		for ( let i = channels - 1; i < data.length; i += channels ) if ( data[ i ] !== 255 ) { opaque = false; break; }
+
+	}
+
+	if ( hasNativeDecoder && opaque && ( image.bitDepth ?? 8 ) === 8 ) {
+
+		try {
+
+			const rgba = new Uint8ClampedArray( width * height * 4 );
+			for ( let i = 0, n = width * height; i < n; i ++ ) {
+
+				const s = i * channels;
+				rgba[ i * 4 ] = data[ s ];
+				rgba[ i * 4 + 1 ] = data[ channels >= 3 ? s + 1 : s ];
+				rgba[ i * 4 + 2 ] = data[ channels >= 3 ? s + 2 : s ];
+				rgba[ i * 4 + 3 ] = 255;
+
+			}
+
+			const canvas = new OffscreenCanvas( width, height );
+			canvas.getContext( '2d' ).putImageData( new ImageData( rgba, width, height ), 0, 0 );
+			const blob = await canvas.convertToBlob( { type: 'image/png' } );
+			return new Uint8Array( await blob.arrayBuffer() );
+
+		} catch {
+
+			// fall through to the JavaScript encoder
+
+		}
+
+	}
+
+	return encodePNG( image );
+
+}
+
 /**
  * Decodes with the platform's image decoder where there is one (browsers and workers), which is
  * faster and supports more formats, falling back to the JavaScript decoders (Node).
@@ -64,10 +189,13 @@ const hasNativeDecoder = typeof createImageBitmap === 'function' && typeof Offsc
  * @param {Uint8Array} bytes
  * @param {string} [mimeType]
  * @param {( bytes: Uint8Array, mimeType?: string ) => Promise<object>|object} [decoder] overrides both
+ * @param {import('../limits.js').Budget} [budget] charged with the decoded size, from the header, before decoding
  */
-export async function decodeImageAsync( bytes, mimeType, decoder = null ) {
+export async function decodeImageAsync( bytes, mimeType, decoder = null, budget = null ) {
 
 	bytes = toBytes( bytes );
+	const size = budget && imageSize( bytes );
+	if ( size ) budget.decode( size.width * size.height * size.pixelBytes, 'image' );
 	if ( decoder ) return decoder( bytes, mimeType );
 	const type = imageMimeType( bytes ) || mimeType;