super-three 0.172.0 → 0.173.1

package/examples/jsm/animation/CCDIKSolver.js

@@ -28,7 +28,7 @@ const _matrix = new Matrix4();
 
 /**
  * CCD Algorithm
- *  - https://sites.google.com/site/auraliusproject/ccd-algorithm
+ *  - https://web.archive.org/web/20221206080850/https://sites.google.com/site/auraliusproject/ccd-algorithm
  *
  * // ik parameter example
  * //
@@ -277,13 +277,14 @@ function setPositionOfBoneToAttributeArray( array, index, bone, matrixWorldInv )
 
 /**
  * Visualize IK bones
- *
- * @param {SkinnedMesh} mesh
- * @param {Array<Object>} iks
- * @param {number} sphereSize
  */
 class CCDIKHelper extends Object3D {
 
+	/**
+	 * @param {SkinnedMesh} mesh
+ 	 * @param {Array<Object>} [iks=[]]
+ 	 * @param {number} [sphereSize=0.25]
+	 */
 	constructor( mesh, iks = [], sphereSize = 0.25 ) {
 
 		super();

package/examples/jsm/capabilities/WebGPU.js

@@ -1,4 +1,4 @@
-let isAvailable = ( typeof navigator !== 'undefined'  && navigator.gpu !== undefined );
+let isAvailable = ( typeof navigator !== 'undefined' && navigator.gpu !== undefined );
 
 if ( typeof window !== 'undefined' && isAvailable ) {
 

package/examples/jsm/controls/ArcballControls.js

@@ -70,14 +70,18 @@ const _offset = new Vector3();
 const _gizmoMatrixStateTemp = new Matrix4();
 const _cameraMatrixStateTemp = new Matrix4();
 const _scalePointTemp = new Vector3();
-/**
- *
- * @param {Camera} camera Virtual camera used in the scene
- * @param {HTMLElement} domElement Renderer's dom element
- * @param {Scene} scene The scene to be rendered
- */
+
+const _EPS = 0.000001;
+
+
 class ArcballControls extends Controls {
 
+	/**
+	 *
+	 * @param {Camera} camera Virtual camera used in the scene
+	 * @param {HTMLElement?} [domElement=null] Renderer's dom element
+	 * @param {Scene?} [scene=null] The scene to be rendered
+	 */
 	constructor( camera, domElement = null, scene = null ) {
 
 		super( camera, domElement );
@@ -1100,9 +1104,9 @@ class ArcballControls extends Controls {
 
 	/**
 	 * Set a new mouse action by specifying the operation to be performed and a mouse/key combination. In case of conflict, replaces the existing one
-	 * @param {String} operation The operation to be performed ('PAN', 'ROTATE', 'ZOOM', 'FOV)
-	 * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
-	 * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
+	 * @param {'PAN'|'ROTATE'|'ZOOM'|'FOV'} operation The operation to be performed ('PAN', 'ROTATE', 'ZOOM', 'FOV')
+	 * @param {0|1|2|'WHEEL'} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
+	 * @param {'CTRL'|'SHIFT'|null} [key=null] The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
 	 * @returns {Boolean} True if the mouse action has been successfully added, false otherwise
 	 */
 	setMouseAction( operation, mouse, key = null ) {
@@ -1181,8 +1185,8 @@ class ArcballControls extends Controls {
 
 	/**
 	 * Remove a mouse action by specifying its mouse/key combination
-	 * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
-	 * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
+	 * @param {0|1|2|'WHEEL'} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches
+	 * @param {'CTRL'|'SHIFT'|null} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed
 	 * @returns {Boolean} True if the operation has been successfully removed, false otherwise
 	 */
 	unsetMouseAction( mouse, key = null ) {
@@ -1206,7 +1210,7 @@ class ArcballControls extends Controls {
 	 * Return the operation associated to a mouse/keyboard combination
 	 * @param {0|1|2|'WHEEL'} mouse Mouse button index (0, 1, 2) or 'WHEEL' for wheel notches
 	 * @param {'CTRL'|'SHIFT'|null} key Keyboard modifier
-	 * @returns {string|null} The operation if it has been found, null otherwise
+	 * @returns {'PAN'|'ROTATE'|'ZOOM'|'FOV'|null} The operation if it has been found, null otherwise
 	 */
 	getOpFromAction( mouse, key ) {
 
@@ -1246,7 +1250,7 @@ class ArcballControls extends Controls {
 	 * Get the operation associated to mouse and key combination and returns the corresponding FSA state
 	 * @param {0|1|2} mouse Mouse button index (0, 1, 2)
 	 * @param {'CTRL'|'SHIFT'|null} key Keyboard modifier
-	 * @returns {STATE|null} The FSA state obtained from the operation associated to mouse/keyboard combination
+	 * @returns {STATE?} The FSA state obtained from the operation associated to mouse/keyboard combination
 	 */
 	getOpStateFromAction( mouse, key ) {
 
@@ -1478,7 +1482,7 @@ class ArcballControls extends Controls {
 	 * Focus operation consist of positioning the point of interest in front of the camera and a slightly zoom in
 	 * @param {Vector3} point The point of interest
 	 * @param {Number} size Scale factor
-	 * @param {Number} amount Amount of operation to be completed (used for focus animations, default is complete full operation)
+	 * @param {Number} [amount=1] Amount of operation to be completed (used for focus animations, default is complete full operation)
 	 */
 	focus( point, size, amount = 1 ) {
 
@@ -1717,7 +1721,7 @@ class ArcballControls extends Controls {
 
 	/**
 	 * Set gizmos radius factor and redraws gizmos
-	 * @param {Float} value Value of radius factor
+	 * @param {Number} value Value of radius factor
 	 */
 	setTbRadius( value ) {
 
@@ -2324,7 +2328,7 @@ class ArcballControls extends Controls {
 	 *
 	 * @param {Vector2} cursor Cursor coordinates in NDC
 	 * @param {Camera} camera Virtual camera
-	 * @returns {Vector3|null} The point of intersection with the model, if exist, null otherwise
+	 * @returns {Vector3?} The point of intersection with the model, if exist, null otherwise
 	 */
 	unprojectOnObj( cursor, camera ) {
 
@@ -2485,7 +2489,7 @@ class ArcballControls extends Controls {
 	 * @param {Number} cursorX Cursor horizontal coordinate on screen
 	 * @param {Number} cursorY Cursor vertical coordinate on screen
 	 * @param {HTMLElement} canvas The canvas where the renderer draws its output
-	 * @param {Boolean} initialDistance If initial distance between camera and gizmos should be used for calculations instead of current (Perspective only)
+	 * @param {Boolean} [initialDistance=false] If initial distance between camera and gizmos should be used for calculations instead of current (Perspective only)
 	 * @returns {Vector3} The unprojected point on the trackball plane
 	 */
 	unprojectOnTbPlane( camera, cursorX, cursorY, canvas, initialDistance = false ) {
@@ -2600,8 +2604,6 @@ class ArcballControls extends Controls {
 
 	update() {
 
-		const EPS = 0.000001;
-
 		if ( this.target.equals( this._currentTarget ) === false ) {
 
 			this._gizmos.position.copy( this.target );	//for correct radius calculation
@@ -2627,7 +2629,7 @@ class ArcballControls extends Controls {
 			//check distance
 			const distance = this.object.position.distanceTo( this._gizmos.position );
 
-			if ( distance > this.maxDistance + EPS || distance < this.minDistance - EPS ) {
+			if ( distance > this.maxDistance + _EPS || distance < this.minDistance - _EPS ) {
 
 				const newDistance = MathUtils.clamp( distance, this.minDistance, this.maxDistance );
 				this.applyTransformMatrix( this.scale( newDistance / distance, this._gizmos.position ) );
@@ -2646,7 +2648,7 @@ class ArcballControls extends Controls {
 			const oldRadius = this._tbRadius;
 			this._tbRadius = this.calculateTbRadius( this.object );
 
-			if ( oldRadius < this._tbRadius - EPS || oldRadius > this._tbRadius + EPS ) {
+			if ( oldRadius < this._tbRadius - _EPS || oldRadius > this._tbRadius + _EPS ) {
 
 				const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
 				const newRadius = this._tbRadius / scale;

package/examples/jsm/exporters/GLTFExporter.js

@@ -191,7 +191,7 @@ class GLTFExporter {
 	/**
 	 * Parse scenes and generate GLTF output
 	 *
-	 * @param  {Scene|THREE.Scenes} input   Scene or Array of THREE.Scenes
+	 * @param  {Scene|Array<Scene>} input   Scene or Array of THREE.Scenes
 	 * @param  {Function} onDone  Callback on completed
 	 * @param  {Function} onError  Callback on errors
 	 * @param  {Object} options options
@@ -343,9 +343,10 @@ function isIdentityMatrix( matrix ) {
 
 /**
  * Get the min and max vectors from the given attribute
+ *
  * @param  {BufferAttribute} attribute Attribute to find the min/max in range from start to start + count
- * @param  {Integer} start
- * @param  {Integer} count
+ * @param  {Number} start Start index
+ * @param  {Number} count Range to cover
  * @return {Object} Object containing the `min` and `max` values (As an array of attribute.itemSize components)
  */
 function getMinMax( attribute, start, count ) {
@@ -399,8 +400,8 @@ function getMinMax( attribute, start, count ) {
  * Get the required size + padding for a buffer, rounded to the next 4-byte boundary.
  * https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#data-alignment
  *
- * @param {Integer} bufferSize The size the original buffer.
- * @returns {Integer} new buffer size with required padding.
+ * @param {Number} bufferSize The size the original buffer. Should be an integer.
+ * @returns {Number} new buffer size with required padding as an integer.
  *
  */
 function getPaddedBufferSize( bufferSize ) {
@@ -413,7 +414,7 @@ function getPaddedBufferSize( bufferSize ) {
  * Returns a buffer aligned to 4-byte boundary.
  *
  * @param {ArrayBuffer} arrayBuffer Buffer to pad
- * @param {Integer} paddingByte (Optional)
+ * @param {Number} [paddingByte=0] Should be an integer
  * @returns {ArrayBuffer} The same buffer if it's already aligned to 4-byte boundary or a new buffer
  */
 function getPaddedArrayBuffer( arrayBuffer, paddingByte = 0 ) {
@@ -545,8 +546,8 @@ class GLTFWriter {
 	/**
 	 * Parse scenes and generate GLTF output
 	 *
-	 * @param {Scene|THREE.Scenes} input   Scene or Array of THREE.Scenes
-	 * @param {Function} onDone  Callback on completed
+	 * @param {Scene|Array<Scene>} input Scene or Array of THREE.Scenes
+	 * @param {Function} onDone Callback on completed
 	 * @param {Object} options options
 	 */
 	async writeAsync( input, onDone, options = {} ) {
@@ -714,7 +715,7 @@ class GLTFWriter {
 	 *
 	 * @param  {Object} attribute
 	 * @param {boolean} [isRelativeCopy=false]
-	 * @return {Integer}
+	 * @return {Number} An integer
 	 */
 	getUID( attribute, isRelativeCopy = false ) {
 
@@ -968,7 +969,7 @@ class GLTFWriter {
 	/**
 	 * Process a buffer to append to the default one.
 	 * @param  {ArrayBuffer} buffer
-	 * @return {Integer}
+	 * @return {0}
 	 */
 	processBuffer( buffer ) {
 
@@ -990,7 +991,7 @@ class GLTFWriter {
 	 * @param  {number} componentType
 	 * @param  {number} start
 	 * @param  {number} count
-	 * @param  {number} target (Optional) Target usage of the BufferView
+	 * @param  {number?} target Target usage of the BufferView
 	 * @return {Object}
 	 */
 	processBufferView( attribute, componentType, start, count, target ) {
@@ -1144,7 +1145,7 @@ class GLTFWriter {
 	/**
 	 * Process and generate a BufferView from an image Blob.
 	 * @param {Blob} blob
-	 * @return {Promise<Integer>}
+	 * @return {Promise<Number>} An integer
 	 */
 	processBufferViewImage( blob ) {
 
@@ -1179,10 +1180,10 @@ class GLTFWriter {
 	/**
 	 * Process attribute to generate an accessor
 	 * @param  {BufferAttribute} attribute Attribute to process
-	 * @param  {THREE.BufferGeometry} geometry (Optional) Geometry used for truncated draw range
-	 * @param  {Integer} start (Optional)
-	 * @param  {Integer} count (Optional)
-	 * @return {Integer|null} Index of the processed accessor on the "accessors" array
+	 * @param  {THREE.BufferGeometry?} geometry Geometry used for truncated draw range
+	 * @param  {Number} [start=0]
+	 * @param  {Number} [count=Infinity]
+	 * @return {Number?} Index of the processed accessor on the "accessors" array
 	 */
 	processAccessor( attribute, geometry, start, count ) {
 
@@ -1277,10 +1278,10 @@ class GLTFWriter {
 	/**
 	 * Process image
 	 * @param  {Image} image to process
-	 * @param  {Integer} format of the image (RGBAFormat)
+	 * @param  {Number} format Identifier of the format (RGBAFormat)
 	 * @param  {Boolean} flipY before writing out the image
 	 * @param  {String} mimeType export format
-	 * @return {Integer}     Index of the processed texture in the "images" array
+	 * @return {Number}     Index of the processed texture in the "images" array
 	 */
 	processImage( image, format, flipY, mimeType = 'image/png' ) {
 
@@ -1417,7 +1418,7 @@ class GLTFWriter {
 	/**
 	 * Process sampler
 	 * @param  {Texture} map Texture to process
-	 * @return {Integer}     Index of the processed texture in the "samplers" array
+	 * @return {Number}      Index of the processed texture in the "samplers" array
 	 */
 	processSampler( map ) {
 
@@ -1439,7 +1440,7 @@ class GLTFWriter {
 	/**
 	 * Process texture
 	 * @param  {Texture} map Map to process
-	 * @return {Integer} Index of the processed texture in the "textures" array
+	 * @return {Promise<Number>} Index of the processed texture in the "textures" array
 	 */
 	async processTextureAsync( map ) {
 
@@ -1485,7 +1486,7 @@ class GLTFWriter {
 	/**
 	 * Process material
 	 * @param  {THREE.Material} material Material to process
-	 * @return {Integer|null} Index of the processed material in the "materials" array
+	 * @return {Promise<Number|null>} Index of the processed material in the "materials" array
 	 */
 	async processMaterialAsync( material ) {
 
@@ -1661,7 +1662,7 @@ class GLTFWriter {
 	/**
 	 * Process mesh
 	 * @param  {THREE.Mesh} mesh Mesh to process
-	 * @return {Integer|null} Index of the processed mesh in the "meshes" array
+	 * @return {Promise<Number|null>} Index of the processed mesh in the "meshes" array
 	 */
 	async processMeshAsync( mesh ) {
 
@@ -2066,7 +2067,7 @@ class GLTFWriter {
 	/**
 	 * Process camera
 	 * @param  {THREE.Camera} camera Camera to process
-	 * @return {Integer}      Index of the processed mesh in the "camera" array
+	 * @return {Number} Index of the processed mesh in the "camera" array
 	 */
 	processCamera( camera ) {
 
@@ -2267,7 +2268,7 @@ class GLTFWriter {
 	/**
 	 * Process Object3D node
 	 * @param  {THREE.Object3D} object Object3D to processNodeAsync
-	 * @return {Integer} Index of the node in the nodes list
+	 * @return {Promise<Number>} Index of the node in the nodes list
 	 */
 	async processNodeAsync( object ) {
 
@@ -2418,7 +2419,7 @@ class GLTFWriter {
 
 	/**
 	 * Creates a Scene to hold a list of objects and parse it
-	 * @param  {Array} objects List of objects to process
+	 * @param  {Array<THREE.Object3D>} objects List of objects to process
 	 */
 	async processObjectsAsync( objects ) {
 

package/examples/jsm/geometries/TextGeometry.js

@@ -33,20 +33,9 @@ class TextGeometry extends ExtrudeGeometry {
 
 			const shapes = font.generateShapes( text, parameters.size );
 
-			// translate parameters to ExtrudeGeometry API
-
-			if ( parameters.depth === undefined && parameters.height !== undefined ) {
-
-				console.warn( 'THREE.TextGeometry: .height is now depreciated. Please use .depth instead' ); // @deprecated, r163
-
-			}
-
-			parameters.depth = parameters.depth !== undefined ?
-				parameters.depth : parameters.height !== undefined ?
-					parameters.height : 50;
-
 			// defaults
 
+			if ( parameters.depth === undefined ) parameters.depth = 50;
 			if ( parameters.bevelThickness === undefined ) parameters.bevelThickness = 10;
 			if ( parameters.bevelSize === undefined ) parameters.bevelSize = 8;
 			if ( parameters.bevelEnabled === undefined ) parameters.bevelEnabled = false;

package/examples/jsm/interactive/InteractiveGroup.js

@@ -7,97 +7,154 @@ import {
 const _pointer = new Vector2();
 const _event = { type: '', data: _pointer };
 
+// TODO: Dispatch pointerevents too
+
+/**
+ * The XR events that are mapped to "standard" pointer events
+ */
+const _events = {
+	'move': 'mousemove',
+	'select': 'click',
+	'selectstart': 'mousedown',
+	'selectend': 'mouseup'
+};
+
 const _raycaster = new Raycaster();
 
 class InteractiveGroup extends Group {
 
-	listenToPointerEvents( renderer, camera ) {
+	constructor() {
+
+		super();
+
+		this.raycaster = new Raycaster();
 
-		const scope = this;
-		const raycaster = new Raycaster();
+		this.element = null;
+		this.camera = null;
 
-		const element = renderer.domElement;
+		this.controllers = [];
 
-		function onPointerEvent( event ) {
+		this._onPointerEvent = this.onPointerEvent.bind( this );
+		this._onXRControllerEvent = this.onXRControllerEvent.bind( this );
 
-			event.stopPropagation();
+	}
+
+	onPointerEvent( event ) {
 
-			const rect = renderer.domElement.getBoundingClientRect();
+		event.stopPropagation();
 
-			_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
-			_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
+		const rect = this.element.getBoundingClientRect();
 
-			raycaster.setFromCamera( _pointer, camera );
+		_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
+		_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
 
-			const intersects = raycaster.intersectObjects( scope.children, false );
+		this.raycaster.setFromCamera( _pointer, this.camera );
 
-			if ( intersects.length > 0 ) {
+		const intersects = this.raycaster.intersectObjects( this.children, false );
 
-				const intersection = intersects[ 0 ];
+		if ( intersects.length > 0 ) {
 
-				const object = intersection.object;
-				const uv = intersection.uv;
+			const intersection = intersects[ 0 ];
 
-				_event.type = event.type;
-				_event.data.set( uv.x, 1 - uv.y );
+			const object = intersection.object;
+			const uv = intersection.uv;
 
-				object.dispatchEvent( _event );
+			_event.type = event.type;
+			_event.data.set( uv.x, 1 - uv.y );
 
-			}
+			object.dispatchEvent( _event );
 
 		}
 
-		element.addEventListener( 'pointerdown', onPointerEvent );
-		element.addEventListener( 'pointerup', onPointerEvent );
-		element.addEventListener( 'pointermove', onPointerEvent );
-		element.addEventListener( 'mousedown', onPointerEvent );
-		element.addEventListener( 'mouseup', onPointerEvent );
-		element.addEventListener( 'mousemove', onPointerEvent );
-		element.addEventListener( 'click', onPointerEvent );
+	}
+
+	onXRControllerEvent( event ) {
+
+		const controller = event.target;
+
+		_raycaster.setFromXRController( controller );
+
+		const intersections = _raycaster.intersectObjects( this.children, false );
+
+		if ( intersections.length > 0 ) {
+
+			const intersection = intersections[ 0 ];
+
+			const object = intersection.object;
+			const uv = intersection.uv;
+
+			_event.type = _events[ event.type ];
+			_event.data.set( uv.x, 1 - uv.y );
+
+			object.dispatchEvent( _event );
+
+		}
 
 	}
 
-	listenToXRControllerEvents( controller ) {
+	listenToPointerEvents( renderer, camera ) {
 
-		const scope = this;
+		this.camera = camera;
+		this.element = renderer.domElement;
 
-		// TODO: Dispatch pointerevents too
+		this.element.addEventListener( 'pointerdown', this._onPointerEvent );
+		this.element.addEventListener( 'pointerup', this._onPointerEvent );
+		this.element.addEventListener( 'pointermove', this._onPointerEvent );
+		this.element.addEventListener( 'mousedown', this._onPointerEvent );
+		this.element.addEventListener( 'mouseup', this._onPointerEvent );
+		this.element.addEventListener( 'mousemove', this._onPointerEvent );
+		this.element.addEventListener( 'click', this._onPointerEvent );
 
-		const events = {
-			'move': 'mousemove',
-			'select': 'click',
-			'selectstart': 'mousedown',
-			'selectend': 'mouseup'
-		};
+	}
 
-		function onXRControllerEvent( event ) {
+	disconnectionPointerEvents() {
 
-			const controller = event.target;
+		if ( this.element !== null ) {
 
-			_raycaster.setFromXRController( controller );
+			this.element.removeEventListener( 'pointerdown', this._onPointerEvent );
+			this.element.removeEventListener( 'pointerup', this._onPointerEvent );
+			this.element.removeEventListener( 'pointermove', this._onPointerEvent );
+			this.element.removeEventListener( 'mousedown', this._onPointerEvent );
+			this.element.removeEventListener( 'mouseup', this._onPointerEvent );
+			this.element.removeEventListener( 'mousemove', this._onPointerEvent );
+			this.element.removeEventListener( 'click', this._onPointerEvent );
 
-			const intersections = _raycaster.intersectObjects( scope.children, false );
+		}
 
-			if ( intersections.length > 0 ) {
+	}
 
-				const intersection = intersections[ 0 ];
+	listenToXRControllerEvents( controller ) {
 
-				const object = intersection.object;
-				const uv = intersection.uv;
+		this.controllers.push( controller );
+		controller.addEventListener( 'move', this._onXRControllerEvent );
+		controller.addEventListener( 'select', this._onXRControllerEvent );
+		controller.addEventListener( 'selectstart', this._onXRControllerEvent );
+		controller.addEventListener( 'selectend', this._onXRControllerEvent );
 
-				_event.type = events[ event.type ];
-				_event.data.set( uv.x, 1 - uv.y );
+	}
+
+	disconnectXrControllerEvents() {
 
-				object.dispatchEvent( _event );
+		for ( const controller of this.controllers ) {
 
-			}
+			controller.removeEventListener( 'move', this._onXRControllerEvent );
+			controller.removeEventListener( 'select', this._onXRControllerEvent );
+			controller.removeEventListener( 'selectstart', this._onXRControllerEvent );
+			controller.removeEventListener( 'selectend', this._onXRControllerEvent );
 
 		}
 
-		controller.addEventListener( 'move', onXRControllerEvent );
-		controller.addEventListener( 'select', onXRControllerEvent );
-		controller.addEventListener( 'selectstart', onXRControllerEvent );
-		controller.addEventListener( 'selectend', onXRControllerEvent );
+	}
+
+	disconnect() {
+
+		this.disconnectionPointerEvents();
+		this.disconnectXrControllerEvents();
+
+		this.camera = null;
+		this.element = null;
+
+		this.controllers = [];
 
 	}
 

package/examples/jsm/libs/demuxer_mp4.js

@@ -0,0 +1,109 @@
+import MP4Box from 'https://cdn.jsdelivr.net/npm/mp4box@0.5.3/+esm';
+
+// From: https://w3c.github.io/webcodecs/samples/video-decode-display/
+
+// Wraps an MP4Box File as a WritableStream underlying sink.
+class MP4FileSink {
+  #setStatus = null;
+  #file = null;
+  #offset = 0;
+
+  constructor(file, setStatus) {
+    this.#file = file;
+    this.#setStatus = setStatus;
+  }
+
+  write(chunk) {
+    // MP4Box.js requires buffers to be ArrayBuffers, but we have a Uint8Array.
+    const buffer = new ArrayBuffer(chunk.byteLength);
+    new Uint8Array(buffer).set(chunk);
+
+    // Inform MP4Box where in the file this chunk is from.
+    buffer.fileStart = this.#offset;
+    this.#offset += buffer.byteLength;
+
+    // Append chunk.
+    this.#setStatus("fetch", (this.#offset / (1024 ** 2)).toFixed(1) + " MiB");
+    this.#file.appendBuffer(buffer);
+  }
+
+  close() {
+    this.#setStatus("fetch", "Done");
+    this.#file.flush();
+  }
+}
+
+// Demuxes the first video track of an MP4 file using MP4Box, calling
+// `onConfig()` and `onChunk()` with appropriate WebCodecs objects.
+export class MP4Demuxer {
+  #onConfig = null;
+  #onChunk = null;
+  #setStatus = null;
+  #file = null;
+
+  constructor(uri, {onConfig, onChunk, setStatus}) {
+    this.#onConfig = onConfig;
+    this.#onChunk = onChunk;
+    this.#setStatus = setStatus;
+
+    // Configure an MP4Box File for demuxing.
+    this.#file = MP4Box.createFile();
+    this.#file.onError = error => setStatus("demux", error);
+    this.#file.onReady = this.#onReady.bind(this);
+    this.#file.onSamples = this.#onSamples.bind(this);
+
+    // Fetch the file and pipe the data through.
+    const fileSink = new MP4FileSink(this.#file, setStatus);
+    fetch(uri).then(response => {
+      // highWaterMark should be large enough for smooth streaming, but lower is
+      // better for memory usage.
+      response.body.pipeTo(new WritableStream(fileSink, {highWaterMark: 2}));
+    });
+  }
+
+  // Get the appropriate `description` for a specific track. Assumes that the
+  // track is H.264, H.265, VP8, VP9, or AV1.
+  #description(track) {
+    const trak = this.#file.getTrackById(track.id);
+    for (const entry of trak.mdia.minf.stbl.stsd.entries) {
+      const box = entry.avcC || entry.hvcC || entry.vpcC || entry.av1C;
+      if (box) {
+        const stream = new MP4Box.DataStream(undefined, 0, MP4Box.DataStream.BIG_ENDIAN);
+        box.write(stream);
+        return new Uint8Array(stream.buffer, 8);  // Remove the box header.
+      }
+    }
+    throw new Error("avcC, hvcC, vpcC, or av1C box not found");
+  }
+
+  #onReady(info) {
+    this.#setStatus("demux", "Ready");
+    const track = info.videoTracks[0];
+
+    // Generate and emit an appropriate VideoDecoderConfig.
+    this.#onConfig({
+      // Browser doesn't support parsing full vp8 codec (eg: `vp08.00.41.08`),
+      // they only support `vp8`.
+      codec: track.codec.startsWith('vp08') ? 'vp8' : track.codec,
+      codedHeight: track.video.height,
+      codedWidth: track.video.width,
+      description: this.#description(track),
+    });
+
+    // Start demuxing.
+    this.#file.setExtractionOptions(track.id);
+    this.#file.start();
+  }
+
+  #onSamples(track_id, ref, samples) {
+    // Generate and emit an EncodedVideoChunk for each demuxed sample.
+    for (const sample of samples) {
+      this.#onChunk(new EncodedVideoChunk({
+        type: sample.is_sync ? "key" : "delta",
+        timestamp: 1e6 * sample.cts / sample.timescale,
+        duration: 1e6 * sample.duration / sample.timescale,
+        data: sample.data
+      }));
+    }
+  }
+}