@bubo-squared/gyroview 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 What changed for a page using the package, newest first. Until 1.0, a minor version may change
 the API.
 
+## 0.4.2 (2026-10-02)
+
+What a page may notice:
+
+- Dragging, pinching or turning the wheel over a playing recording draws the picture once per
+  animation frame: in Safari, a fast mouse no longer slows the recording down. A change of the
+  view, the view mode, the quality or the exposure matching shows at the next animation frame
+  rather than at the call (ADR 0035).
+- Opening a recording keeps the page busy for less time: its gyro is read and integrated in two
+  thirds of the time.
+- Playing takes less of the page's main thread: the download plans what to fetch every few
+  mebibytes rather than at every frame (ADR 0036).
+- A bundle that includes the package is smaller: mediabunny's demuxers for formats other than
+  MP4 and QuickTime are left out. The standalone module is about 40 KB smaller compressed.
+
+## 0.4.1 (2026-10-01)
+
+What a page may notice:
+
+- An Insta360 X4 Air recording is stabilized about the right axes: its IMU frame is measured
+  (ADR 0009) where it was assumed. The `ready` event's `imuFrame` is
+  `{ name: 'X4 Air', isVerified: true }` where it was the unverified aligned frame, and the load
+  no longer warns (`recording-degraded`) that the IMU frame has not been verified on a recording.
+- A camera is given a measured IMU frame only by its whole model name: a model whose name merely
+  begins with a measured camera's, such as a later "X5 Pro", gets the unverified frame and its
+  warning until a recording of it is measured.
+
 ## 0.4.0 (2026-10-01)
 
 New:

package/README.md

@@ -40,15 +40,15 @@ times a second while playing, as a media element's does; `frame` comes with ever
 drawn.
 
 A page without a bundler loads the standalone file, which has Three.js and mediabunny inside
-(about 280 KB compressed) and registers the element; it exports what the package does:
+(about 260 KB compressed) and registers the element; it exports what the package does:
 
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@bubo-squared/gyroview@0.3/dist/standalone.js"
+  src="https://cdn.jsdelivr.net/npm/@bubo-squared/gyroview@0.4/dist/standalone.js"
 ></script>
 <script type="module">
-  import { inspectRecording } from 'https://cdn.jsdelivr.net/npm/@bubo-squared/gyroview@0.3/dist/standalone.js';
+  import { inspectRecording } from 'https://cdn.jsdelivr.net/npm/@bubo-squared/gyroview@0.4/dist/standalone.js';
 </script>
 ```
 

package/dist/packages/adapters/mediabunny/src/MediabunnyCodecReader.js

@@ -2,9 +2,15 @@ import { GyroViewError, isAbortError } from "../../../core/src/shared/errors/Gyr
 import "../../../core/src/index.js";
 import { audioConfigurationOf, videoConfigurationOf } from "./decoderConfigurations.js";
 import { trackColourOf } from "./trackColour.js";
-import { ALL_FORMATS, BufferSource, Input } from "mediabunny";
+import { BufferSource, Input, MP4, QTFF } from "mediabunny";
 //#region ../../packages/adapters/mediabunny/src/MediabunnyCodecReader.ts
 /**
+* The movie bytes are an ISO BMFF file's type and movie boxes, whatever its brand: with only
+* these two formats named, a page's bundle leaves out mediabunny's other demuxers, a third of
+* its weight.
+*/
+var MOVIE_FORMATS = [MP4, QTFF];
+/**
 * CodecReader over mediabunny: opens the file type and movie boxes as a file of their own, in
 * memory, and tells each track's decoder configuration. mediabunny reads a sample only for a
 * video codec without its configuration box; the samples are not there, so that track is
@@ -13,7 +19,7 @@ import { ALL_FORMATS, BufferSource, Input } from "mediabunny";
 var MediabunnyCodecReader = class {
 	async read(movieBytes) {
 		const input = new Input({
-			formats: ALL_FORMATS,
+			formats: MOVIE_FORMATS,
 			source: new BufferSource(movieBytes)
 		});
 		try {

package/dist/packages/adapters/three/src/ThreeFrameRenderer.js

@@ -5,6 +5,7 @@ import { aspectOf } from "../../../core/src/domain/view/screenLayout.js";
 import { DEFAULT_FRAMING } from "../../../core/src/domain/view/Framing.js";
 import { viewModeRulesFor } from "../../../core/src/domain/view/viewModes.js";
 import "../../../core/src/index.js";
+import { DRAW_AT_ONCE } from "./drawSchedules.js";
 import { MatrixCorrections } from "./matrixCorrections.js";
 import { SAMPLING_STRATEGIES } from "./samplingStrategies.js";
 import { applyLensGain, applyPicture, applyShaderSampling, applyStabilization, createRendererUniforms } from "./rendererUniforms.js";
@@ -58,7 +59,10 @@ var ThreeFrameRenderer = class {
 		ensureDrawable(setup);
 		const renderer = createRenderer(canvas, opening.options);
 		try {
-			return assembleParts(renderer, setup, opening.pictures);
+			return {
+				...assembleParts(renderer, setup, opening.pictures),
+				drawSchedule: opening.options.drawSchedule ?? DRAW_AT_ONCE
+			};
 		} catch (error) {
 			renderer.dispose();
 			throw error;
@@ -71,17 +75,17 @@ var ThreeFrameRenderer = class {
 		this.ensureLive();
 		this.framing = framing;
 		this.applyFraming();
-		this.render();
+		this.redraw();
 	}
 	setViewMode(mode) {
 		this.ensureLive();
 		this.viewMode = mode;
 		this.applyFraming();
-		this.render();
+		this.redraw();
 	}
 	/**
-	* The frames standing on screen are uploaded again with the new filters and mip chain, so the
-	* change shows at once, even while paused.
+	* The frames standing on screen are uploaded again with the new filters and mip chain at the
+	* next draw, so the change shows even while paused.
 	*/
 	setQuality(quality) {
 		this.ensureLive();
@@ -91,12 +95,12 @@ var ThreeFrameRenderer = class {
 			if (this.hasFrames) texture.needsUpdate = true;
 		}
 		applyShaderSampling(this.parts.uniforms, strategy);
-		this.render();
+		this.redraw();
 	}
 	setLensGains(gains) {
 		this.ensureLive();
 		for (const [lensIndex, gain] of gains.entries()) applyLensGain(this.parts.uniforms, lensIndex, gain);
-		this.render();
+		this.redraw();
 	}
 	/**
 	* The meter leaves this renderer's list when disposed; the renderer disposes those still live
@@ -130,7 +134,7 @@ var ThreeFrameRenderer = class {
 		}
 		this.parts.matrixCorrections.follow(frames.map((frame) => frame.handle));
 		this.hasFrames = true;
-		this.render();
+		this.drawNow();
 	}
 	/**
 	* Matches the drawing buffer to a new element size, in device pixels.
@@ -139,11 +143,12 @@ var ThreeFrameRenderer = class {
 		this.ensureLive();
 		this.parts.renderer.setSize(size.width, size.height, false);
 		this.applyFraming();
-		this.render();
+		this.drawNow();
 	}
 	dispose() {
 		if (this.isDisposed) return;
 		this.isDisposed = true;
+		this.parts.drawSchedule.cancel();
 		this.canvas.removeEventListener("webglcontextrestored", this.onContextRestored);
 		for (const meter of this.meters) meter.dispose();
 		this.parts.seamProof.dispose();
@@ -176,9 +181,11 @@ var ThreeFrameRenderer = class {
 		this.meters.add(kept);
 		return kept;
 	}
-	render() {
-		if (!this.hasFrames) return;
-		this.parts.renderer.render(this.parts.scene, this.parts.camera);
+	/**
+	* Draws the picture again for a changed setting, when the draw schedule says.
+	*/
+	redraw() {
+		this.parts.drawSchedule.request(this.draw);
 	}
 	ensureLive() {
 		ensureInvariant(!this.isDisposed, "the renderer has been disposed");
@@ -189,7 +196,19 @@ var ThreeFrameRenderer = class {
 	* uploads the frames on screen again.
 	*/
 	onContextRestored = () => {
-		this.render();
+		this.redraw();
+	};
+	/**
+	* Draws now what a draw asked for of the schedule would have drawn, which then has nothing left
+	* to draw.
+	*/
+	drawNow() {
+		this.parts.drawSchedule.cancel();
+		this.draw();
+	}
+	draw = () => {
+		if (!this.hasFrames) return;
+		this.parts.renderer.render(this.parts.scene, this.parts.camera);
 	};
 	/**
 	* Asks the view mode what to draw for the framing on this canvas, and switches to that

package/dist/packages/adapters/three/src/drawSchedules.js

@@ -0,0 +1,13 @@
+//#region ../../packages/adapters/three/src/drawSchedules.ts
+/**
+* Draws every change at once, for whoever reads the canvas right after a change, as the tests
+* and the measurements do.
+*/
+var DRAW_AT_ONCE = {
+	request: (draw) => {
+		draw();
+	},
+	cancel: () => {}
+};
+//#endregion
+export { DRAW_AT_ONCE };

package/dist/packages/adapters/three/src/index.js

@@ -1,2 +1,3 @@
+import "./drawSchedules.js";
 import { ThreeFrameRenderer } from "./ThreeFrameRenderer.js";
 export { ThreeFrameRenderer };

package/dist/packages/core/src/application/download/FileDownload.js

@@ -10,10 +10,12 @@ import { planDownloads } from "../../domain/download/planDownloads.js";
 var EVERY_BYTE = ByteRange.of(0, Number.MAX_SAFE_INTEGER);
 /**
 * One file of a recording downloaded while it plays (ADR 0029): the only reader of its bytes.
-* Its cursors say where the readers of its tracks stand; whenever that changes, or a range comes
-* whole, it plans anew, once per turn, what to ask for, give up and let go of, and hands each
-* waiting cursor its sample once the bytes have come. A range that failed is not asked for again
-* until a cursor opens, a seek or a replay, lest a failing server be asked without end.
+* Its cursors say where the readers of its tracks stand. It plans anew, once per turn, what to
+* ask for, give up and let go of when a cursor opens, closes or waits for bytes no transfer
+* brings, once the cursors have moved on by the policy's replan bytes (ADR 0036), when a range
+* comes whole or fails, and when reading ahead starts; it hands each waiting cursor its sample
+* once the bytes have come. A range that failed is not asked for again until a cursor opens, a
+* seek or a replay, lest a failing server be asked without end.
 */
 var FileDownload = class {
 	parts;
@@ -26,6 +28,10 @@ var FileDownload = class {
 	anchor;
 	isReadingAhead = false;
 	isPlanDue = false;
+	/**
+	* What the readers have taken since the last plan.
+	*/
+	takenSincePlan = 0;
 	isDisposed = false;
 	constructor(parts) {
 		this.parts = parts;
@@ -101,8 +107,12 @@ var FileDownload = class {
 		return {
 			bytesOf: (range) => this.store.bytesOf(range),
 			failureOf: (range) => this.failures.find((failed) => failed.range.overlaps(range))?.error,
-			changed: () => {
-				this.schedulePlan();
+			movedOn: (length) => {
+				this.takenSincePlan += length;
+				if (this.takenSincePlan >= this.parts.policy.replanBytes) this.schedulePlan();
+			},
+			waiting: (range) => {
+				if (!this.transfers.isBringing(range)) this.schedulePlan();
 			},
 			closed: (cursor) => {
 				this.cursors.delete(cursor);
@@ -141,6 +151,7 @@ var FileDownload = class {
 		for (const cursor of this.cursors) cursor.fail(EVERY_BYTE, error);
 	}
 	plan() {
+		this.takenSincePlan = 0;
 		const decisions = planDownloads({
 			cursors: this.positions(),
 			held: this.store.held,

package/dist/packages/core/src/application/download/SampleCursor.js

@@ -37,7 +37,7 @@ var SampleCursor = class {
 		const bytes = this.host.bytesOf(range);
 		if (bytes) return Promise.resolve(this.take(bytes));
 		const failure = this.host.failureOf(range);
-		return failure === void 0 ? this.waitForBytes() : Promise.reject(failure);
+		return failure === void 0 ? this.waitForBytes(range) : Promise.reject(failure);
 	}
 	/**
 	* Bytes came: hands the awaited sample on if they were its.
@@ -65,19 +65,19 @@ var SampleCursor = class {
 		this.waiter = void 0;
 		this.host.closed(this);
 	}
-	waitForBytes() {
+	waitForBytes(range) {
 		return new Promise((resolve, reject) => {
 			this.waiter = {
 				resolve,
 				reject
 			};
-			this.host.changed();
+			this.host.waiting(range);
 		});
 	}
 	take(bytes) {
 		const sample = this.next;
 		this.next += 1;
-		this.host.changed();
+		this.host.movedOn(bytes.byteLength);
 		return {
 			sample,
 			bytes

package/dist/packages/core/src/application/download/Transfers.js

@@ -17,6 +17,13 @@ var Transfers = class {
 			remaining: remainingOf(transfer)
 		}));
 	}
+	/**
+	* Whether every byte of `range` has come or is coming in one range still streaming.
+	*/
+	isBringing(range) {
+		for (const transfer of this.running.values()) if (transfer.block.range.contains(range)) return true;
+		return false;
+	}
 	start(range) {
 		const transfer = {
 			id: this.nextId,

package/dist/packages/core/src/domain/download/DownloadPolicy.js

@@ -15,6 +15,13 @@ var REQUESTS_IN_FLIGHT = 2;
 var BRIDGED_GAP_MEBIBYTES = 1;
 var REFILL_FRACTION = .25;
 /**
+* Planning walks every sample in the window, a few thousand on a fast recording; made for each
+* sample read, it took more of the main thread than drawing the frames (ADR 0036). Sixteen plans
+* a refill keep a top-up within a sixteenth of a refill of falling due, and make about a dozen
+* plans a second on the X5's recordings where there were 170.
+*/
+var REPLANS_PER_REFILL = 16;
+/**
 * Long enough that a link slower than the recording plays in stretches rather than frame by
 * frame, short enough that the wait does not feel like a stop.
 */
@@ -25,6 +32,7 @@ var RESUME_SECONDS = 4;
 function downloadPolicyFor(file, fileCount) {
 	const bytesPerSecond = file.size / file.duration;
 	const aheadBytes = Math.min(Math.round(AHEAD_SECONDS * bytesPerSecond), MOST_AHEAD_MEBIBYTES * MEBIBYTE / fileCount);
+	const refillBytes = Math.round(aheadBytes * REFILL_FRACTION);
 	return {
 		aheadSeconds: seconds(AHEAD_SECONDS),
 		aheadBytes,
@@ -33,7 +41,8 @@ function downloadPolicyFor(file, fileCount) {
 		requestSize: REQUEST_MEBIBYTES * MEBIBYTE,
 		requestsInFlight: REQUESTS_IN_FLIGHT,
 		bridgedGap: BRIDGED_GAP_MEBIBYTES * MEBIBYTE,
-		refillBytes: Math.round(aheadBytes * REFILL_FRACTION),
+		refillBytes,
+		replanBytes: Math.round(refillBytes / REPLANS_PER_REFILL),
 		resumeSeconds: seconds(RESUME_SECONDS)
 	};
 }

package/dist/packages/core/src/domain/format/records/gyro/SampleColumns.js

@@ -19,10 +19,17 @@ var SampleColumns = class {
 		this.accelerations = new Float32Array(capacity * 3);
 		this.angularVelocities = new Float32Array(capacity * 3);
 	}
+	/**
+	* Component by component: `set` from an array of three takes a generic path several times
+	* slower, once per sample of an hour-long record.
+	*/
 	push(sample) {
+		const base = this.length * 3;
 		this.recordedTimes[this.length] = sample.captureTime;
-		this.accelerations.set(sample.acceleration, this.length * 3);
-		this.angularVelocities.set(sample.angularVelocity, this.length * 3);
+		for (let axis = 0; axis < 3; axis += 1) {
+			this.accelerations[base + axis] = sample.acceleration[axis] ?? NaN;
+			this.angularVelocities[base + axis] = sample.angularVelocity[axis] ?? NaN;
+		}
 		this.length += 1;
 	}
 	/**

package/dist/packages/core/src/domain/motion/gyro/GyroTrack.js

@@ -38,14 +38,24 @@ var GyroTrack = class {
 	}
 	sampleAt(index) {
 		ensureIndexInRange(index, this.length, "gyro sample");
-		const base = index * 3;
 		return {
 			captureTime: microseconds(this.captureTimeStore[index] ?? 0),
-			acceleration: this.vectorAt(this.accelerationStore, base),
-			angularVelocity: this.vectorAt(this.angularVelocityStore, base)
+			acceleration: this.vectorAt(this.accelerationStore, index),
+			angularVelocity: this.vectorAt(this.angularVelocityStore, index)
 		};
 	}
-	vectorAt(store, base) {
+	/**
+	* A sample's angular velocity alone, for the loops over every sample that need nothing else.
+	*/
+	angularVelocityAt(index) {
+		ensureIndexInRange(index, this.length, "gyro sample");
+		return this.vectorAt(this.angularVelocityStore, index);
+	}
+	/**
+	* The vector at an index already checked.
+	*/
+	vectorAt(store, index) {
+		const base = index * 3;
 		return [
 			store[base] ?? NaN,
 			store[base + 1] ?? NaN,

package/dist/packages/core/src/domain/motion/imu/ImuFrame.js

@@ -102,6 +102,11 @@ var X5_IMU_FRAME = measuredImuFrame("X5", QUARTER_TURN_ABOUT_LATERAL);
 */
 var X6_IMU_FRAME = measuredImuFrame("X6", QUARTER_TURN_ABOUT_LATERAL);
 /**
+* Measured on one X4 Air recording (ADR 0009): the X5's arrangement again, which the ranking puts
+* first, the aligned frame third.
+*/
+var X4_AIR_IMU_FRAME = measuredImuFrame("X4 Air", QUARTER_TURN_ABOUT_LATERAL);
+/**
 * Until a recording proves otherwise, the IMU is assumed aligned with the body.
 */
 var ALIGNED_IMU_FRAME = assumedImuFrame("aligned (unverified)", [
@@ -109,13 +114,21 @@ var ALIGNED_IMU_FRAME = assumedImuFrame("aligned (unverified)", [
 	"y",
 	"z"
 ]);
-var IMU_FRAMES_BY_MODEL = [["Insta360 X5", X5_IMU_FRAME], ["Insta360 X6", X6_IMU_FRAME]];
+/**
+* Keyed by the whole model name: a name that extends a measured one ("X4 Air" of "X4", an "X5
+* Pro") is another camera, unmeasured until a recording of it is ranked.
+*/
+var IMU_FRAMES_BY_MODEL = /* @__PURE__ */ new Map([
+	["Insta360 X4 Air", X4_AIR_IMU_FRAME],
+	["Insta360 X5", X5_IMU_FRAME],
+	["Insta360 X6", X6_IMU_FRAME]
+]);
 /**
 * The IMU frame for a recording, chosen from the camera model the file names. A starting point
 * the recording's own data can be checked against with the ranking test, never the last word.
 */
 function imuFrameFor(hints) {
-	return IMU_FRAMES_BY_MODEL.find(([prefix]) => hints.model?.startsWith(prefix))?.[1] ?? ALIGNED_IMU_FRAME;
+	return IMU_FRAMES_BY_MODEL.get(hints.model?.trim() ?? "") ?? ALIGNED_IMU_FRAME;
 }
 //#endregion
-export { ALIGNED_IMU_FRAME, X5_IMU_FRAME, X6_IMU_FRAME, assumedImuFrame, imuFrameFor, isProperRotation, toBodyFrame };
+export { ALIGNED_IMU_FRAME, X4_AIR_IMU_FRAME, X5_IMU_FRAME, X6_IMU_FRAME, assumedImuFrame, imuFrameFor, isProperRotation, toBodyFrame };

package/dist/packages/core/src/domain/motion/orientation/OrientationTrack.js

@@ -1,5 +1,5 @@
 import { ensureInvariant } from "../../../shared/errors/GyroViewError.js";
-import { seconds } from "../../../shared/units/time.js";
+import { microseconds, seconds } from "../../../shared/units/time.js";
 import { ZERO_VECTOR3, addVectors, isFiniteVector, scaleVector, subtractVectors } from "../../../shared/math/Vector3.js";
 import { clamp } from "../../../shared/math/clamp.js";
 import { toBodyFrame } from "../imu/ImuFrame.js";
@@ -107,7 +107,7 @@ var OrientationTrack = class OrientationTrack {
 * lookup's binary search holds.
 */
 function sampleVideoTimes(gyro, clock) {
-	return Float64Array.from({ length: gyro.length }, (_unused, index) => clock.gyroVideoTimeOf(gyro.sampleAt(index).captureTime));
+	return gyro.captureTimes.map((captureTime) => clock.gyroVideoTimeOf(microseconds(captureTime)));
 }
 function finiteSample(gyro, index) {
 	const sample = gyro.sampleAt(index);

package/dist/packages/core/src/domain/motion/orientation/estimateGyroBias.js

@@ -18,7 +18,7 @@ var FALLBACK_INTERVAL = secondsToMicroseconds(seconds(1));
 function stillestWindow(gyro, frame, length) {
 	const interval = microsecondsToSeconds(gyro.meanSampleInterval ?? FALLBACK_INTERVAL);
 	const size = Math.max(1, Math.min(gyro.length, Math.round(length / interval)));
-	const magnitudes = Float64Array.from({ length: gyro.length }, (_unused, index) => magnitudeOf(toBodyFrame(frame, gyro.sampleAt(index).angularVelocity)));
+	const magnitudes = rateMagnitudesOf(gyro, frame);
 	let windowSum = 0;
 	for (let index = 0; index < size; index += 1) windowSum += magnitudes[index] ?? 0;
 	let best = {
@@ -38,6 +38,14 @@ function stillestWindow(gyro, frame, length) {
 	};
 }
 /**
+* How fast the body turns at each sample, in radians per second.
+*/
+function rateMagnitudesOf(gyro, frame) {
+	const magnitudes = new Float64Array(gyro.length);
+	for (let index = 0; index < gyro.length; index += 1) magnitudes[index] = magnitudeOf(toBodyFrame(frame, gyro.angularVelocityAt(index)));
+	return magnitudes;
+}
+/**
 * The mean of one vector quantity over a window of samples, in the body frame.
 */
 function meanOverWindow({ gyro, frame }, window, quantity) {

package/dist/packages/core/src/shared/binary/ByteReader.js

@@ -10,6 +10,11 @@ var FLOAT64_SIZE = 8;
 var IS_LITTLE_ENDIAN = true;
 var IS_BIG_ENDIAN = false;
 /**
+* The safe integer range as big integers, made once: a gyro record reads a stamp per sample.
+*/
+var MIN_SAFE_BIGINT = BigInt(Number.MIN_SAFE_INTEGER);
+var MAX_SAFE_BIGINT = BigInt(Number.MAX_SAFE_INTEGER);
+/**
 * Bounds-checked reads over a byte array: little-endian for Insta360's records, big-endian for
 * ISO BMFF boxes. Every read is positional, so callers express the layouts they parse as named
 * offsets rather than as a moving cursor.
@@ -84,7 +89,7 @@ var ByteReader = class {
 		return Array.from(this.bytesAt(offset, length), (byte) => String.fromCodePoint(byte)).join("");
 	}
 	toSafeNumber(value, offset) {
-		if (!(value >= BigInt(Number.MIN_SAFE_INTEGER) && value <= BigInt(Number.MAX_SAFE_INTEGER))) throw new GyroViewError("binary-unsafe-integer", `64-bit integer at offset ${offset} (${value.toString()}) exceeds the safe integer range`);
+		if (!(value >= MIN_SAFE_BIGINT && value <= MAX_SAFE_BIGINT)) throw new GyroViewError("binary-unsafe-integer", `64-bit integer at offset ${offset} (${value.toString()}) exceeds the safe integer range`);
 		return Number(value);
 	}
 	ensureAvailable(offset, length) {

package/dist/packages/core/src/shared/math/Quaternion.js

@@ -62,7 +62,7 @@ function conjugateQuaternion(q) {
 }
 function normalizeQuaternion(q) {
 	const [x, y, z, w] = q;
-	const length = Math.hypot(x, y, z, w);
+	const length = Math.sqrt(x * x + y * y + z * z + w * w);
 	return length === 0 ? IDENTITY_QUATERNION : [
 		x / length,
 		y / length,

package/dist/packages/core/src/shared/math/Vector3.js

@@ -4,8 +4,12 @@ var ZERO_VECTOR3 = [
 	0,
 	0
 ];
+/**
+* The square root of the squares, not `Math.hypot`: several times slower in V8, it guards against
+* overflow no reading or direction here comes near, and gyro integration takes a million of these.
+*/
 function magnitudeOf(vector) {
-	return Math.hypot(vector[0], vector[1], vector[2]);
+	return Math.sqrt(dotProduct(vector, vector));
 }
 function dotProduct(a, b) {
 	return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];

package/dist/packages/player/src/composition/AnimationFrameDraws.js

@@ -0,0 +1,38 @@
+import { ANIMATION_FRAMES } from "./animationFrames.js";
+//#region ../../packages/player/src/composition/AnimationFrameDraws.ts
+/**
+* Draws a renderer's changed settings once at the next animation frame, however many changes
+* come before it (ADR 0035): the screen shows one picture a frame, and WebKit hands the page
+* every pointer move of a drag, thousands a second from a fast mouse, which drawn one by one
+* leave no time for the frames of the recording. One schedule serves one renderer.
+*/
+var AnimationFrameDraws = class {
+	frames;
+	pendingDraw;
+	handle;
+	constructor(frames = ANIMATION_FRAMES) {
+		this.frames = frames;
+	}
+	/**
+	* The latest draw asked for is the one drawn.
+	*/
+	request(draw) {
+		const isFrameRequested = this.pendingDraw !== void 0;
+		this.pendingDraw = draw;
+		if (!isFrameRequested) this.handle = this.frames.request(this.drawPending);
+	}
+	cancel() {
+		this.pendingDraw = void 0;
+		if (this.handle === void 0) return;
+		this.frames.cancel(this.handle);
+		this.handle = void 0;
+	}
+	drawPending = () => {
+		const draw = this.pendingDraw;
+		this.pendingDraw = void 0;
+		this.handle = void 0;
+		draw?.();
+	};
+};
+//#endregion
+export { AnimationFrameDraws };

package/dist/packages/player/src/composition/animationFrames.js

@@ -0,0 +1,9 @@
+//#region ../../packages/player/src/composition/animationFrames.ts
+var ANIMATION_FRAMES = {
+	request: (callback) => requestAnimationFrame(callback),
+	cancel: (handle) => {
+		cancelAnimationFrame(handle);
+	}
+};
+//#endregion
+export { ANIMATION_FRAMES };

package/dist/packages/player/src/composition/buildPipeline.js

@@ -12,6 +12,7 @@ import { MediaSourceAudioClock } from "../../../adapters/mse-audio/src/MediaSour
 import "../../../adapters/mse-audio/src/index.js";
 import { ThreeFrameRenderer } from "../../../adapters/three/src/ThreeFrameRenderer.js";
 import "../../../adapters/three/src/index.js";
+import { AnimationFrameDraws } from "./AnimationFrameDraws.js";
 import { Disposables } from "./Disposables.js";
 var DECODE_PIPELINE_OPTIONS = {
 	maxPendingPackets: 4,
@@ -53,10 +54,11 @@ async function buildPipeline(parts) {
 }
 /**
 * The GPU stitcher on the host canvas, behind the stabilizing sink when there is a gyro, behind
-* gain matching, which measures what the stitcher drew.
+* gain matching, which measures what the stitcher drew. A change of the view or the gains is
+* drawn once at the next animation frame, where a frame presented in it draws it anyway.
 */
 function drawingFor(parts, disposables) {
-	const renderer = ThreeFrameRenderer.create(parts.host.canvas, stitchingSetupOf(parts.opened));
+	const renderer = ThreeFrameRenderer.create(parts.host.canvas, stitchingSetupOf(parts.opened), { drawSchedule: new AnimationFrameDraws() });
 	disposables.add(() => {
 		renderer.dispose();
 	});

package/dist/packages/player/src/player/FrameLoop.js

@@ -1,10 +1,5 @@
+import { ANIMATION_FRAMES } from "../composition/animationFrames.js";
 //#region ../../packages/player/src/player/FrameLoop.ts
-var ANIMATION_FRAMES = {
-	request: (callback) => requestAnimationFrame(callback),
-	cancel: (handle) => {
-		cancelAnimationFrame(handle);
-	}
-};
 /**
 * Calls `tick` once per animation frame between {@link start} and {@link stop}.
 */