feat: add Python ML services (CPU mode) with model download

Dockerfile

@@ -1,7 +1,8 @@
 ###############################################################################
-# STARRY HuggingFace Space — Lightweight Deployment
+# STARRY HuggingFace Space — Full Deployment with ML Predictors (CPU mode)
 # nginx (reverse proxy) + omr-service (Fastify) + cluster-server (NestJS)
-# No ML predictors — prediction features are disabled
+# + 7 Python ML predictors via supervisord (layout, gauge, mask, semantic,
+#   loc, ocr, brackets)
 ###############################################################################
 
 FROM node:20-slim
@@ -13,13 +14,33 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     postgresql postgresql-client \
     nginx \
     tini \
-    python3 make g++ pkg-config \
+    python3 python3-pip make g++ pkg-config \
     libzmq3-dev libfontconfig1 curl \
+    supervisor \
     && rm -rf /var/lib/apt/lists/*
 
 # Install tsx globally
 RUN npm install -g tsx
 
+# --- Python ML deps (CPU-only PyTorch + TensorFlow) ---
+RUN pip install --no-cache-dir --break-system-packages \
+    "numpy>=1.26.0,<2.0.0" \
+    torch torchvision \
+    --index-url https://download.pytorch.org/whl/cpu
+
+RUN pip install --no-cache-dir --break-system-packages \
+    "numpy>=1.26.0,<2.0.0" \
+    tensorflow-cpu \
+    tf_keras \
+    "opencv-python-headless<4.11" \
+    Pillow>=8.0.0 \
+    PyYAML>=5.4.0 \
+    pyzmq>=22.0.0 \
+    msgpack>=1.0.0
+
+ENV TF_USE_LEGACY_KERAS=1
+ENV PYTHONUNBUFFERED=1
+
 # --- node user already has UID 1000 in node:20-slim ---
 # Ensure home directory exists
 RUN mkdir -p /home/node && chown node:node /home/node
@@ -88,13 +109,20 @@ RUN ln -sf /home/node/app/backend/omr-service/node_modules /home/node/app/backen
 # --- Root tsconfig ---
 COPY --chown=node tsconfig.json ./
 
+# --- Python ML services ---
+COPY --chown=node backend/python-services/ ./backend/python-services/
+
+# --- Supervisord config ---
+COPY --chown=node supervisord.conf ./supervisord.conf
+
 # --- Config files ---
 COPY --chown=node docker-entrypoint.sh ./docker-entrypoint.sh
 COPY --chown=node nginx.conf /etc/nginx/nginx.conf
 RUN chmod +x docker-entrypoint.sh
 
 # Directories
-RUN mkdir -p /tmp/starry-uploads && chown node:node /tmp/starry-uploads
+RUN mkdir -p /tmp/starry-uploads /home/node/log/supervisor /home/node/run /home/node/app/models \
+    && chown -R node:node /tmp/starry-uploads /home/node/log /home/node/run /home/node/app/models
 
 USER node
 

backend/libs/PyProcessor.ts

@@ -0,0 +1,58 @@
+import { getPortPromise } from 'portfinder';
+import { Options, PythonShell } from 'python-shell';
+import { defaultsDeep } from 'lodash';
+import ZeroClient, { Logger } from './ZeroClient';
+
+export default class PyProcessor extends ZeroClient {
+	private readonly scriptPath: string;
+	private readonly options: Options;
+	private pyShell: PythonShell;
+
+	private retryCount: number = 0;
+	private retryDelay: number = 3000;
+
+	constructor(scriptPath: string, options: Options = {}, logger: Logger = console) {
+		super(logger);
+		this.scriptPath = scriptPath;
+		this.options = options;
+	}
+
+	async bind(port?: string | number) {
+		const freePort =
+			port ||
+			(await getPortPromise({
+				port: 12022,
+				stopPort: 12122,
+			}));
+
+		// "./streamPredictor.py", "--inspect"
+		const options = defaultsDeep(
+			{
+				args: [...(this.options.args || []), '-p', `${freePort}`],
+			},
+			this.options
+		);
+
+		this.logger.info(`[python-shell]: starting python shell. path: ${this.scriptPath}`);
+
+		this.pyShell = new PythonShell(this.scriptPath, options);
+
+		this.pyShell.stdout.on('data', (data) => this.logger.info(data));
+
+		this.pyShell.on('pythonError', (err) => this.logger.error(`[python-shell]: ${this.scriptPath} pythonError:`, err));
+		this.pyShell.on('stderr', (err) => this.logger.error(`[python-shell]: ${this.scriptPath} stderr:`, err));
+		this.pyShell.on('error', (err) => this.logger.error(`[python-shell]: ${this.scriptPath} error:`, err));
+		this.pyShell.on('close', () => {
+			// python子进程关闭事件
+			if (this.retryCount < 5) {
+				this.retryCount++;
+				this.logger.info(`[python-shell]: ${this.scriptPath} will retry ${this.retryCount}th time after 3 seconds`);
+				setTimeout(() => {
+					this.bind();
+				}, this.retryDelay);
+			}
+		});
+
+		super.bind(`tcp://127.0.0.1:${freePort}`);
+	}
+}

backend/libs/ZeroClient.ts

@@ -0,0 +1,85 @@
+import { pack, unpack } from 'msgpackr';
+import { Request } from 'zeromq';
+import { AsyncQueue } from './async-queue';
+
+interface Response {
+	code: number;
+	msg: string;
+	data?: any;
+}
+
+export interface Logger {
+	info: (...data: any[]) => void;
+	error: (...data: any[]) => void;
+}
+
+type PyArgs = any[];
+type PyKwargs = Record<string, any>;
+
+export default class ZeroClient {
+	logger: Logger;
+	private socket: Request;
+	private queue: AsyncQueue = new AsyncQueue();
+
+	private url: string;
+
+	constructor(logger: Logger = console) {
+		this.logger = logger;
+	}
+
+	bind(url?: string) {
+		url && (this.url = url);
+		this.socket = new Request({
+			sendTimeout: 15e3,
+			receiveTimeout: 300e3,
+		});
+
+		this.socket.connect(this.url);
+	}
+
+	private __request(payload) {
+		let retryTimes = 0;
+
+		const req = async (data) => {
+			try {
+				if (this.socket.closed) this.bind();
+				return await this.socket.send(pack(data)).then(() => this.socket.receive());
+			} catch (err) {
+				if (retryTimes < 2) {
+					retryTimes++;
+					console.log(`请求失败，${err.stack}`);
+					console.error(`3s后重试第${retryTimes}次`);
+					this.socket.close();
+					await new Promise((resolve) => setTimeout(resolve, 3000));
+					return req(data);
+				} else {
+					throw err;
+				}
+			}
+		};
+
+		return req(payload);
+	}
+
+	async request(method: string, args: PyArgs | PyKwargs = null, kwargs: PyKwargs = null): Promise<any> {
+		const [args_, kwargs_] = Array.isArray(args) ? [args, kwargs] : [undefined, args];
+		const msg: any = { method };
+		if (args_) msg.args = args_;
+		if (kwargs_) msg.kwargs = kwargs_;
+
+		return this.queue.addTask([
+			async (opt) => {
+				const [result] = await this.__request(opt);
+
+				const obj = unpack(result) as Response;
+
+				if (obj.code === 0) {
+					return obj.data;
+				} else {
+					return Promise.reject(obj.msg);
+				}
+			},
+			msg,
+		]);
+	}
+}

backend/libs/adminSolutionStore.ts

@@ -0,0 +1,95 @@
+import { SolutionStore } from './store';
+import { RegulationSolution } from '../../src/starry';
+import getSign from '../../src/utils/request/createSign';
+import * as asyncAtom from '../../src/utils/asyncAtom';
+
+const getHeaders = (method: string = 'get', data: any = {}): Record<string, string> => {
+	const headers = {
+		stmp: Date.now(),
+		sess: '654a591de5d3a4b0',
+		ver: 512,
+		orn: '(X11;$Linux x86_64$android$1.0.0$torchTrain',
+		sign: '',
+		size: 0,
+		dst: '',
+		type: 1,
+		lang: 'zh_CN',
+		seq: 0,
+		code: 0,
+		ext: 'CN',
+		desc: '',
+	} as any;
+	headers.sign = getSign({ method, data, requestHeader: headers });
+
+	return headers;
+};
+
+export default class AdminSolutionStore implements SolutionStore {
+	env: string;
+	host: string;
+	fetch: typeof fetch;
+
+	constructor(options: { env: string; host: string; fetch: typeof fetch }) {
+		Object.assign(this, options);
+	}
+
+	post(path, { data }: any): Promise<any> {
+		const headers = getHeaders('post', data);
+		headers['content-type'] = 'application/json;charset=UTF-8';
+
+		return this.fetch(this.host + path, {
+			method: 'post',
+			headers,
+			body: JSON.stringify(data),
+		}).then((res) => res.json());
+	}
+
+	async batchGet(keys: string[]): Promise<RegulationSolution[]> {
+		const solutions = (
+			await this.post('/torch/musicSet/manage/cache/batchGet', {
+				data: {
+					env: this.env,
+					nameList: keys,
+				},
+			})
+		).data as RegulationSolution[];
+		//console.log('AdminSolutionStore.batchGet:', solutions);
+
+		return Promise.all(solutions);
+	}
+
+	async get(key: string): Promise<RegulationSolution> {
+		const solution = (await this.post('/torch/musicSet/manage/cache/batchGet', {
+			data: {
+				env: this.env,
+				nameList: [key],
+			},
+		}).then((res) => res.data[0])) as RegulationSolution;
+		//console.log('AdminSolutionStore.get:', key, solution);
+
+		return solution;
+	}
+
+	async set(key: string, value: RegulationSolution) {
+		const request = () =>
+			this.post('/torch/musicSet/manage/cache/set', {
+				data: {
+					env: this.env,
+					name: key,
+					value: value,
+				},
+			}).catch((err) => console.warn('failed to set solution:', key, err));
+		asyncAtom.queue(this, request);
+
+		//console.log('AdminSolutionStore.set:', key, res.ok);
+	}
+
+	/*remove(key: string) {
+		return request.post('/torch/musicSet/manage/cache/delete', {
+			data: {
+				env: this.env,
+				name: key,
+			},
+		});
+	}*/
+}

backend/libs/async-queue.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from 'events';
+
+interface DSPromiseOption {
+	timeout?: number;
+}
+
+export function destructPromise<T>(
+	options: DSPromiseOption = {}
+): [promise: Promise<T>, resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void] {
+	const { timeout } = options;
+	let rs: (value: T | PromiseLike<T>) => void;
+	let rj: (reason: any) => void;
+
+	return [
+		new Promise((resolve, reject) => {
+			rs = resolve;
+			rj = reject;
+
+			if (timeout >= 0) setTimeout(rj, timeout, 'timeout');
+		}),
+		rs,
+		rj,
+	];
+}
+
+type AsyncTask = [fn: (data: any) => Promise<any>, payload: any, resolve: (data: any) => void, reject: (reason: any) => void];
+
+export class AsyncQueue extends EventEmitter {
+	private working = false;
+
+	tasks: AsyncTask[];
+
+	constructor() {
+		super();
+		this.working = false;
+		this.tasks = [];
+		process.nextTick(() => {
+			this.emit('idle');
+		});
+	}
+
+	private async _digest(item: AsyncTask) {
+		this.working = true;
+
+		const [taskFn, payload, resolve, reject] = item;
+		await taskFn(payload).then(resolve, reject);
+
+		if (this.tasks.length > 0) {
+			await this._digest(this.tasks.shift());
+		} else {
+			this.working = false;
+			this.emit('idle');
+		}
+	}
+
+	/**
+	 * 添加队列任务
+	 * @param task
+	 * @param options
+	 */
+	addTask(task: [AsyncTask[0], AsyncTask[1]], { timeout = 600000 }: { timeout?: number } = {}): Promise<any> {
+		const [promise, resolve, reject] = destructPromise({ timeout });
+
+		if (this.working) {
+			this.tasks.push([...task, resolve, reject]);
+		} else {
+			this._digest([...task, resolve, reject]);
+		}
+
+		return promise;
+	}
+}

backend/libs/beadPicker.ts

@@ -0,0 +1,22 @@
+import * as starry from '../../src/starry';
+import OnnxBeadPicker from '../../src/utils/onnxBeadPicker';
+
+const loadBeadPickers = (path: string, seqs: number[] = [32, 64, 128, 512]): Promise<starry.BeadPicker[]> => {
+	return Promise.all(
+		seqs.map(async (n_seq) => {
+			let loading: any;
+
+			const url = path.replace(/seq\d+/, `seq${n_seq}`);
+			const picker = new OnnxBeadPicker(url, {
+				n_seq,
+				usePivotX: true,
+				onLoad: (p) => (loading = p),
+			});
+			await loading;
+
+			return picker;
+		})
+	);
+};
+
+export { loadBeadPickers };

backend/libs/browserComponents.ts

@@ -0,0 +1,2 @@
+globalThis.btoa = (str) => Buffer.from(str, 'binary').toString('base64');
+globalThis.atob = (str) => Buffer.from(str, 'base64').toString('binary');

backend/libs/gauge-renderer-three.ts

@@ -0,0 +1,161 @@
+import { Canvas, loadImage } from 'skia-canvas';
+import * as THREE from './three/Three';
+import gl from 'gl';
+
+// threejs内部使用了OffscreenCanvas
+(globalThis as any).OffscreenCanvas = (globalThis as any).OffscreenCanvas || Canvas;
+
+const cc = <T>(a: T[][]): T[] => {
+	const result: T[] = [];
+	for (const x of a) {
+		for (const e of x) result.push(e);
+	}
+
+	return result;
+};
+
+class GLCanvas {
+	ctx: ReturnType<typeof gl>;
+	width: number = 256;
+	height: number = 192;
+
+	resizeBuffer: number[];
+
+	constructor(width: number, height: number) {
+		this.width = width;
+		this.height = height;
+	}
+
+	getContext(type, options) {
+		if (type === 'webgl') {
+			this.ctx = this.ctx || gl(this.width, this.height, options);
+
+			return this.ctx;
+		}
+
+		return null as WebGLRenderingContext;
+	}
+
+	addEventListener(evt: 'webglcontextlost') {}
+
+	removeEventListener(evt: any) {}
+
+	async toBuffer() {
+		const pixels = new Uint8Array(this.width * this.height * 4);
+		this.ctx.readPixels(0, 0, this.width, this.height, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, pixels);
+
+		const canvas = new Canvas(this.width, this.height);
+		const ctx = canvas.getContext('2d');
+		ctx.putImageData({ data: new Uint8ClampedArray(pixels), width: this.width, height: this.height }, 0, 0);
+
+		return canvas.toBuffer('png');
+	}
+}
+
+export const renderGaugeImage = async (sourceURL: string | Buffer, gaugeURL: string | Buffer, baseY: number) => {
+	const source = await loadImage(sourceURL);
+	const gauge = await loadImage(gaugeURL);
+	const { width: gaugeWidth, height: gaugeHeight } = gauge;
+	const { width: srcWidth, height: srcHeight } = source;
+
+	let width: number = 256;
+	let height: number = 192;
+
+	if (width !== srcWidth || height !== srcHeight) {
+		if (Number.isFinite(gaugeWidth)) {
+			width = gaugeWidth;
+		} else {
+			width = Math.round((height * srcWidth) / srcHeight);
+		}
+	}
+
+	const camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0.1, 10);
+	camera.position.set(0, 0, 1);
+	camera.up.set(0, 1, 0);
+	camera.lookAt(0, 0, 0);
+
+	const ctx = new Canvas(gaugeWidth, gaugeHeight).getContext('2d');
+	ctx.drawImage(gauge, 0, 0);
+	const { data: buff } = ctx.getImageData(0, 0, gaugeWidth, gaugeHeight);
+
+	const xFactor = width / gaugeWidth;
+
+	baseY = Math.round(Number.isFinite(baseY) ? baseY : gaugeHeight / 2);
+	baseY = Math.max(0, Math.min(gaugeHeight - 1, baseY));
+
+	const propertyArray = Array(gaugeHeight)
+		.fill(null)
+		.map((_, y) =>
+			Array(gaugeWidth)
+				.fill(null)
+				.map((_, x) => ({
+					uv: [(x + 0.5) / gaugeWidth, 1 - (y + 0.5) / gaugeHeight],
+					position: [(x - gaugeWidth / 2) * xFactor, (buff[(y * gaugeWidth + x) * 4] + buff[(y * gaugeWidth + x) * 4 + 2] / 256 - 128) / xFactor, 0],
+				}))
+		);
+
+	// integral X by K
+	for (let y = baseY; y > 0; --y) {
+		for (let x = 0; x < gaugeWidth; ++x)
+			propertyArray[y - 1][x].position[0] = propertyArray[y][x].position[0] - ((buff[(y * gaugeWidth + x) * 4 + 1] - 128) * xFactor) / 127;
+	}
+	for (let y = baseY + 1; y < gaugeHeight; ++y) {
+		for (let x = 0; x < gaugeWidth; ++x)
+			propertyArray[y][x].position[0] = propertyArray[y - 1][x].position[0] + ((buff[((y - 1) * gaugeWidth + x) * 4 + 1] - 128) * xFactor) / 127;
+	}
+
+	const uvs = cc(cc(propertyArray).map((p) => p.uv));
+	const positions = cc(cc(propertyArray).map((p) => p.position));
+
+	const geometry = new THREE.BufferGeometry();
+	geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+	geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+
+	const faces = Array(gaugeHeight - 1)
+		.fill(null)
+		.map((_, y) =>
+			Array(gaugeWidth - 1)
+				.fill(null)
+				.map((_, x) => [
+					y * gaugeWidth + x,
+					y * gaugeWidth + x + 1,
+					(y + 1) * gaugeWidth + x,
+					(y + 1) * gaugeWidth + x,
+					(y + 1) * gaugeWidth + x + 1,
+					y * gaugeWidth + x + 1,
+				])
+		);
+	const indices = cc(cc(faces));
+	geometry.setIndex(indices);
+
+	const material = new THREE.MeshBasicMaterial({
+		side: THREE.DoubleSide,
+		map: new THREE.Texture(source),
+	});
+	material.map.needsUpdate = true;
+	material.needsUpdate = true;
+
+	const scene = new THREE.Scene();
+	const plane = new THREE.Mesh(geometry, material);
+	scene.add(plane);
+
+	const glCanvas = new GLCanvas(width, height);
+
+	const renderer = new THREE.WebGLRenderer({
+		antialias: true,
+		canvas: glCanvas as any,
+		alpha: false,
+	});
+
+	renderer.render(scene, camera);
+
+	renderer.dispose();
+
+	return {
+		buffer: await glCanvas.toBuffer(),
+		size: {
+			width,
+			height,
+		},
+	};
+};

backend/libs/predictJianpuPages.ts

@@ -0,0 +1,443 @@
+import { Canvas, Image, loadImage } from 'skia-canvas';
+import sha1 from 'sha1';
+import { WeakLRUCache } from 'weak-lru-cache';
+import * as starry from '../../src/starry';
+import { LayoutResult, PyClients } from './predictors';
+import { constructSystem, convertImage } from './util';
+import { SemanticGraph } from '../../src/starry';
+
+globalThis.OffscreenCanvas = (globalThis as any).OffscreenCanvas || Canvas;
+globalThis.Image = globalThis.Image || Image;
+globalThis.btoa = globalThis.btoa || ((str: string) => Buffer.from(str, 'binary').toString('base64'));
+
+const STAFF_PADDING_LEFT = 32;
+
+const MAX_PAGE_WIDTH = 1200;
+
+const GAUGE_VISION_SPEC = {
+	viewportHeight: 256,
+	viewportUnit: 8,
+};
+
+const MASK_VISION_SPEC = {
+	viewportHeight: 192,
+	viewportUnit: 8,
+};
+
+const SEMANTIC_VISION_SPEC = {
+	viewportHeight: 192,
+	viewportUnit: 8,
+};
+
+interface OMRStat {
+	cost: number; // in milliseconds
+	pagesCost: number; // in milliseconds
+	pages: number;
+}
+
+interface OMRSummary {
+	costTotal: number; // in milliseconds
+	costPerPage: number; // in milliseconds
+	pagesTotal: number;
+	scoreN: number;
+}
+
+/**
+ * 为布局识别的图片标准化处理
+ * @param image
+ * @param width
+ */
+function scaleForLayout(image: Image, width: number): Canvas {
+	let height = (image.height / image.width) * width;
+
+	const canvas = new Canvas(width, height);
+	const ctx = canvas.getContext('2d');
+
+	ctx.drawImage(image, 0, 0, width, (width * image.height) / image.width);
+
+	return canvas;
+}
+
+/**
+ * 根据所有图像的检测结果设置合适的全局页面尺寸
+ * @param score
+ * @param detections
+ * @param outputWidth
+ */
+function setGlobalPageSize(score: starry.Score, detections: LayoutResult[], outputWidth: number) {
+	const sizeRatios = detections
+		.filter((s) => s && s.detection)
+		.map((v, k) => {
+			const staffInterval = Math.min(...v.detection.areas.filter((area) => area.staves?.middleRhos?.length).map((x) => x.staves.interval));
+
+			const sourceSize = v.sourceSize;
+			return {
+				...v,
+				index: k,
+				vw: sourceSize.width / staffInterval, // 页面宽度（逻辑单位）
+				hwr: sourceSize.height / sourceSize.width, // 页面高宽比
+			};
+		});
+
+	if (!sizeRatios.length) {
+		throw new Error('empty result');
+	}
+
+	const maxVW = sizeRatios.sort((a, b) => b.vw - a.vw)[0];
+	const maxAspect = Math.max(...sizeRatios.map((r) => r.hwr));
+
+	score.unitSize = outputWidth / maxVW.vw;
+
+	// 页面显示尺寸
+	score.pageSize = {
+		width: outputWidth,
+		height: outputWidth * maxAspect,
+	};
+}
+
+const batchTask = (fn: () => Promise<any>) => fn();
+const concurrencyTask = (fns: (() => Promise<any>)[]) => Promise.all(fns.map((fn) => fn()));
+
+const shootStaffImage = async (
+	system: starry.System,
+	staffIndex: number,
+	{ paddingLeft = 0, scaling = 1, spec }: { paddingLeft?: number; scaling?: number; spec: { viewportHeight: number; viewportUnit: number } }
+): Promise<Canvas> => {
+	if (!system || !system.backgroundImage) return null;
+
+	const staff = system.staves[staffIndex];
+	if (!staff) return null;
+
+	const middleUnits = spec.viewportHeight / spec.viewportUnit / 2;
+
+	const width = system.imagePosition.width * spec.viewportUnit;
+	const height = system.imagePosition.height * spec.viewportUnit;
+	const x = system.imagePosition.x * spec.viewportUnit + paddingLeft;
+	const y = (system.imagePosition.y - (staff.top + staff.staffY - middleUnits)) * spec.viewportUnit;
+
+	const canvas = new Canvas(Math.round(width + x) * scaling, spec.viewportHeight * scaling);
+	const context = canvas.getContext('2d');
+	context.fillStyle = 'white';
+	context.fillRect(0, 0, canvas.width, canvas.height);
+	context.drawImage(await loadImage(system.backgroundImage), x * scaling, y * scaling, width * scaling, height * scaling);
+
+	return canvas;
+	// .substr(22);	// remove the prefix of 'data:image/png;base64,'
+};
+
+/**
+ * 根据布局检测结果进行截图
+ * @param score
+ * @param pageCanvas
+ * @param page
+ * @param detection
+ */
+async function shootImageByDetection({
+	page,
+	score,
+	pageCanvas,
+}: {
+	score: starry.Score;
+	page: starry.Page;
+	pageCanvas: Canvas; // 原始图片绘制好的canvas
+}) {
+	if (!page?.layout?.areas?.length) {
+		return null;
+	}
+
+	page.width = score.pageSize.width / score.unitSize;
+	page.height = score.pageSize.height / score.unitSize;
+
+	const correctCanvas = new Canvas(pageCanvas.width, pageCanvas.height);
+	const ctx = correctCanvas.getContext('2d');
+
+	ctx.save();
+
+	const { width, height } = correctCanvas;
+	const [a, b, c, d] = page.source.matrix;
+
+	ctx.setTransform(a, b, c, d, (-1 / 2) * width + (1 / 2) * a * width + (1 / 2) * b * height, (-1 / 2) * height + (1 / 2) * c * width + (1 / 2) * d * height);
+
+	ctx.drawImage(pageCanvas, 0, 0);
+
+	ctx.restore();
+
+	const interval = page.source.interval;
+
+	page.layout.areas.map((area, systemIndex) => {
+		console.assert(area.staves?.middleRhos?.length, '[shootImageByDetection] empty area:', area);
+
+		const data = ctx.getImageData(area.x, area.y, area.width, area.height);
+
+		const canvas = new Canvas(area.width, area.height);
+
+		const context = canvas.getContext('2d');
+		// context.rotate(-area.staves.theta);
+		context.putImageData(data, 0, 0);
+
+		const detection = area.staves;
+		const size = { width: area.width, height: area.height };
+
+		const sourceCenter = {
+			x: pageCanvas.width / 2 / interval,
+			y: pageCanvas.height / 2 / interval,
+		};
+
+		const position = {
+			x: (area.x + area.staves.phi1) / interval - sourceCenter.x + page.width / 2,
+			y: area.y / interval - sourceCenter.y + page.height / 2,
+		};
+
+		page.systems[systemIndex] = constructSystem({
+			page,
+			backgroundImage: canvas.toBufferSync('png'),
+			detection,
+			imageSize: size,
+			position,
+		});
+	});
+
+	return correctCanvas;
+}
+
+async function shootStaffBackgroundImage({ system, staff, staffIndex }: { system: starry.System; staff: starry.Staff; staffIndex: number }) {
+	const sourceCanvas = await shootStaffImage(system, staffIndex, {
+		paddingLeft: STAFF_PADDING_LEFT,
+		spec: SEMANTIC_VISION_SPEC,
+	});
+
+	staff.backgroundImage = sourceCanvas.toBufferSync('png');
+
+	staff.imagePosition = {
+		x: -STAFF_PADDING_LEFT / SEMANTIC_VISION_SPEC.viewportUnit,
+		y: staff.staffY - SEMANTIC_VISION_SPEC.viewportHeight / 2 / SEMANTIC_VISION_SPEC.viewportUnit,
+		width: sourceCanvas.width / SEMANTIC_VISION_SPEC.viewportUnit,
+		height: sourceCanvas.height / SEMANTIC_VISION_SPEC.viewportUnit,
+	};
+}
+
+/**
+ * 单个staff的变形矫正
+ * @param system
+ * @param staff
+ * @param staffIndex
+ * @param gaugeImage
+ * @param pyClients
+ */
+async function gaugeStaff({
+	system,
+	staff,
+	staffIndex,
+	gaugeImage,
+	pyClients,
+}: {
+	system: starry.System;
+	staff: starry.Staff;
+	staffIndex: number;
+	gaugeImage: Buffer;
+	pyClients: PyClients;
+}) {
+	const sourceCanvas = await shootStaffImage(system, staffIndex, {
+		paddingLeft: STAFF_PADDING_LEFT,
+		spec: GAUGE_VISION_SPEC,
+		scaling: 2,
+	});
+
+	const sourceBuffer = sourceCanvas.toBufferSync('png');
+
+	const baseY = (system.middleY - (staff.top + staff.staffY)) * GAUGE_VISION_SPEC.viewportUnit + GAUGE_VISION_SPEC.viewportHeight / 2;
+
+	const { buffer, size } = await pyClients.predictScoreImages('gaugeRenderer', [sourceBuffer, gaugeImage, baseY]);
+
+	staff.backgroundImage = buffer;
+
+	staff.imagePosition = {
+		x: -STAFF_PADDING_LEFT / GAUGE_VISION_SPEC.viewportUnit,
+		y: staff.staffY - GAUGE_VISION_SPEC.viewportHeight / 2 / GAUGE_VISION_SPEC.viewportUnit,
+		width: size.width / GAUGE_VISION_SPEC.viewportUnit,
+		height: size.height / GAUGE_VISION_SPEC.viewportUnit,
+	};
+
+	staff.maskImage = null;
+}
+
+/**
+ * 单个staff的降噪
+ * @param staff
+ * @param staffIndex
+ * @param maskImage
+ */
+async function maskStaff({ staff, staffIndex, maskImage }: { staff: starry.Staff; staffIndex: number; maskImage: Buffer }) {
+	const img = await loadImage(maskImage);
+
+	staff.maskImage = maskImage;
+	staff.imagePosition = {
+		x: -STAFF_PADDING_LEFT / MASK_VISION_SPEC.viewportUnit,
+		y: staff.staffY - MASK_VISION_SPEC.viewportHeight / 2 / MASK_VISION_SPEC.viewportUnit,
+		width: img.width / MASK_VISION_SPEC.viewportUnit,
+		height: img.height / MASK_VISION_SPEC.viewportUnit,
+	};
+}
+
+/**
+ * 单个staff的语义识别
+ * @param score
+ * @param staffIndex
+ * @param system
+ * @param staff
+ * @param graph
+ */
+async function semanticStaff({
+	score,
+	staffIndex,
+	system,
+	staff,
+	graph,
+}: {
+	score: starry.Score;
+	staffIndex: number;
+	system: starry.System;
+	staff: starry.Staff;
+	graph: SemanticGraph;
+}) {
+	graph.offset(-STAFF_PADDING_LEFT / SEMANTIC_VISION_SPEC.viewportUnit, 0);
+
+	system.assignSemantics(staffIndex, graph);
+
+	staff.assignSemantics(graph);
+	staff.clearPredictedTokens();
+
+	score.assembleSystem(system, score.settings?.semanticConfidenceThreshold || 1);
+}
+
+function replacePageImages(page: starry.Page, onReplaceImageKey: (src: string) => any) {
+	const tasks = [
+		[page.source, 'url'],
+		...page.systems
+			.map((system) => {
+				return [
+					[system, 'backgroundImage'],
+					...system.staves
+						.map((staff) => [
+							[staff, 'backgroundImage'],
+							[staff, 'maskImage'],
+						])
+						.flat(),
+				];
+			})
+			.flat(),
+	];
+
+	tasks.map(([target, key]: [any, string]) => {
+		target[key] = onReplaceImageKey(target[key]);
+	});
+}
+
+export type TaskProgress = { total?: number; finished?: number };
+
+export interface OMRPage {
+	url: string | Buffer;
+	key?: string;
+	layout?: LayoutResult;
+	renew?: boolean;
+	enableGauge?: boolean;
+}
+
+export interface ProgressState {
+	layout?: TaskProgress;
+	text?: TaskProgress;
+	gauge?: TaskProgress;
+	mask?: TaskProgress;
+	semantic?: TaskProgress;
+	regulate?: TaskProgress;
+	brackets?: TaskProgress;
+}
+
+class OMRProgress {
+	state: ProgressState = {};
+
+	onChange: (evt: ProgressState) => void;
+
+	constructor(onChange: (evt: ProgressState) => void) {
+		this.onChange = onChange;
+	}
+
+	setTotal(stage: keyof ProgressState, total: number) {
+		this.state[stage] = this.state[stage] || {
+			total,
+			finished: 0,
+		};
+	}
+
+	increase(stage: keyof ProgressState, step = 1) {
+		const info: TaskProgress = this.state[stage] || {
+			finished: 0,
+		};
+		info.finished += step;
+
+		this.onChange(this.state);
+	}
+}
+
+type SourceImage = string | Buffer;
+
+export interface OMROption {
+	outputWidth?: number;
+	title?: string; // 曲谱标题
+	pageStore?: {
+		has?: (key: string) => Promise<Boolean>;
+		get: (key: string) => Promise<string>;
+		set: (key: string, val: string) => Promise<void>;
+	};
+	renew?: boolean;
+	processes?: (keyof ProgressState)[]; // 选择流程
+	onProgress?: (progress: ProgressState) => void;
+	onReplaceImage?: (src: SourceImage) => Promise<string>; // 替换所有图片地址，用于上传或者格式转换
+}
+
+const lruCache = new WeakLRUCache();
+
+// 默认store
+const pageStore = {
+	async get(key: string) {
+		return lruCache.getValue(key) as string;
+	},
+	async set(key: string, val: string) {
+		lruCache.setValue(key, val);
+	},
+};
+
+/**
+ * 默认将图片转换为webp格式的base64字符串
+ * @param src
+ */
+const onReplaceImage = async (src: SourceImage) => {
+	if (src instanceof Buffer || (typeof src === 'string' && (/^https?:\/\//.test(src) || /^data:image\//.test(src)))) {
+		const webpBuffer = (await convertImage(src)).buffer;
+		return `data:image/webp;base64,${webpBuffer.toString('base64')}`;
+	}
+
+	return src;
+};
+
+/**
+ * 识别所有图片
+ * @param pyClients
+ * @param images
+ * @param option
+ */
+export const predictPages = async (
+	pyClients: PyClients,
+	images: OMRPage[],
+	option: OMROption = { outputWidth: 1200, pageStore, onReplaceImage }
+): Promise<{ score: starry.Score; omitPages: number[]; stat: OMRStat }> => {
+	// return {
+	// 	score,
+	// 	omitPages,
+	// 	stat: {
+	// 		cost: t3 - t0,
+	// 		pagesCost: t2 - t1,
+	// 		pages: n_page,
+	// 	},
+	// };
+};

backend/libs/predictPages.ts

@@ -0,0 +1,887 @@
+import sha1 from 'sha1';
+import { Canvas, Image, loadImage } from 'skia-canvas';
+import { WeakLRUCache } from 'weak-lru-cache';
+import * as starry from '../../src/starry';
+import { SemanticGraph } from '../../src/starry';
+import { LayoutResult, PyClients } from './predictors';
+import { constructSystem, convertImage } from './util';
+
+globalThis.OffscreenCanvas = (globalThis as any).OffscreenCanvas || Canvas;
+(globalThis as any).Image = (globalThis as any).Image || Image;
+globalThis.btoa = globalThis.btoa || ((str: string) => Buffer.from(str, 'binary').toString('base64'));
+
+const STAFF_PADDING_LEFT = 32;
+
+const MAX_PAGE_WIDTH = 1200;
+
+const GAUGE_VISION_SPEC = {
+	viewportHeight: 256,
+	viewportUnit: 8,
+};
+
+const MASK_VISION_SPEC = {
+	viewportHeight: 192,
+	viewportUnit: 8,
+};
+
+const SEMANTIC_VISION_SPEC = {
+	viewportHeight: 192,
+	viewportUnit: 8,
+};
+
+interface OMRStat {
+	cost: number; // in milliseconds
+	pagesCost: number; // in milliseconds
+	pages: number;
+}
+
+interface OMRSummary {
+	costTotal: number; // in milliseconds
+	costPerPage: number; // in milliseconds
+	pagesTotal: number;
+	scoreN: number;
+}
+
+/**
+ * 为布局识别的图片标准化处理
+ * @param image
+ * @param width
+ */
+function scaleForLayout(image: Image, width: number): Canvas {
+	let height = (image.height / image.width) * width;
+
+	const canvas = new Canvas(width, height);
+	const ctx = canvas.getContext('2d');
+
+	ctx.drawImage(image, 0, 0, width, (width * image.height) / image.width);
+
+	return canvas;
+}
+
+/**
+ * 根据所有图像的检测结果设置合适的全局页面尺寸
+ * @param score
+ * @param detections
+ * @param outputWidth
+ */
+function setGlobalPageSize(score: starry.Score, detections: LayoutResult[], outputWidth: number) {
+	const sizeRatios = detections
+		.filter((s) => s && s.detection && s.detection.areas?.length)
+		.map((v, k) => {
+			const staffInterval = Math.min(...v.detection.areas.filter((area) => area.staves?.middleRhos?.length).map((x) => x.staves.interval));
+
+			const sourceSize = v.sourceSize;
+			return {
+				...v,
+				index: k,
+				vw: sourceSize.width / staffInterval, // 页面宽度（逻辑单位）
+				hwr: sourceSize.height / sourceSize.width, // 页面高宽比
+			};
+		});
+
+	if (!sizeRatios.length) {
+		throw new Error('empty result');
+	}
+
+	const maxVW = sizeRatios.sort((a, b) => b.vw - a.vw)[0];
+	const maxAspect = Math.max(...sizeRatios.map((r) => r.hwr));
+
+	score.unitSize = outputWidth / maxVW.vw;
+
+	// 页面显示尺寸
+	score.pageSize = {
+		width: outputWidth,
+		height: outputWidth * maxAspect,
+	};
+}
+
+const batchTask = (fn: () => Promise<any>) => fn();
+const concurrencyTask = (fns: (() => Promise<any>)[]) => Promise.all(fns.map((fn) => fn()));
+
+const shootStaffImage = async (
+	system: starry.System,
+	staffIndex: number,
+	{ paddingLeft = 0, scaling = 1, spec }: { paddingLeft?: number; scaling?: number; spec: { viewportHeight: number; viewportUnit: number } }
+): Promise<Canvas> => {
+	if (!system || !system.backgroundImage) return null;
+
+	const staff = system.staves[staffIndex];
+	if (!staff) return null;
+
+	const middleUnits = spec.viewportHeight / spec.viewportUnit / 2;
+
+	const width = system.imagePosition.width * spec.viewportUnit;
+	const height = system.imagePosition.height * spec.viewportUnit;
+	const x = system.imagePosition.x * spec.viewportUnit + paddingLeft;
+	const y = (system.imagePosition.y - (staff.top + staff.staffY - middleUnits)) * spec.viewportUnit;
+
+	const canvas = new Canvas(Math.round(width + x) * scaling, spec.viewportHeight * scaling);
+	const context = canvas.getContext('2d');
+	context.fillStyle = 'white';
+	context.fillRect(0, 0, canvas.width, canvas.height);
+	context.drawImage(await loadImage(system.backgroundImage), x * scaling, y * scaling, width * scaling, height * scaling);
+
+	return canvas;
+	// .substr(22);	// remove the prefix of 'data:image/png;base64,'
+};
+
+/**
+ * 根据布局检测结果进行截图
+ * @param score
+ * @param pageCanvas
+ * @param page
+ * @param detection
+ */
+async function shootImageByDetection({
+	page,
+	score,
+	pageCanvas,
+}: {
+	score: starry.Score;
+	page: starry.Page;
+	pageCanvas: Canvas; // 原始图片绘制好的canvas
+}) {
+	if (!page?.layout?.areas?.length) {
+		return null;
+	}
+
+	page.width = score.pageSize.width / score.unitSize;
+	page.height = score.pageSize.height / score.unitSize;
+
+	const correctCanvas = new Canvas(pageCanvas.width, pageCanvas.height);
+	const ctx = correctCanvas.getContext('2d');
+
+	ctx.save();
+
+	const { width, height } = correctCanvas;
+	const [a, b, c, d] = page.source.matrix;
+
+	ctx.setTransform(a, b, c, d, (-1 / 2) * width + (1 / 2) * a * width + (1 / 2) * b * height, (-1 / 2) * height + (1 / 2) * c * width + (1 / 2) * d * height);
+
+	ctx.drawImage(pageCanvas, 0, 0);
+
+	ctx.restore();
+
+	const interval = page.source.interval;
+
+	page.layout.areas.map((area, systemIndex) => {
+		console.assert(area.staves?.middleRhos?.length, '[shootImageByDetection] empty area:', area);
+
+		const data = ctx.getImageData(area.x, area.y, area.width, area.height);
+
+		const canvas = new Canvas(area.width, area.height);
+
+		const context = canvas.getContext('2d');
+		// context.rotate(-area.staves.theta);
+		context.putImageData(data, 0, 0);
+
+		const detection = area.staves;
+		const size = { width: area.width, height: area.height };
+
+		const sourceCenter = {
+			x: pageCanvas.width / 2 / interval,
+			y: pageCanvas.height / 2 / interval,
+		};
+
+		const position = {
+			x: (area.x + area.staves.phi1) / interval - sourceCenter.x + page.width / 2,
+			y: area.y / interval - sourceCenter.y + page.height / 2,
+		};
+
+		page.systems[systemIndex] = constructSystem({
+			page,
+			backgroundImage: canvas.toBufferSync('png'),
+			detection,
+			imageSize: size,
+			position,
+		});
+	});
+
+	return correctCanvas;
+}
+
+async function shootStaffBackgroundImage({ system, staff, staffIndex }: { system: starry.System; staff: starry.Staff; staffIndex: number }) {
+	const sourceCanvas = await shootStaffImage(system, staffIndex, {
+		paddingLeft: STAFF_PADDING_LEFT,
+		spec: SEMANTIC_VISION_SPEC,
+	});
+
+	staff.backgroundImage = sourceCanvas.toBufferSync('png');
+
+	staff.imagePosition = {
+		x: -STAFF_PADDING_LEFT / SEMANTIC_VISION_SPEC.viewportUnit,
+		y: staff.staffY - SEMANTIC_VISION_SPEC.viewportHeight / 2 / SEMANTIC_VISION_SPEC.viewportUnit,
+		width: sourceCanvas.width / SEMANTIC_VISION_SPEC.viewportUnit,
+		height: sourceCanvas.height / SEMANTIC_VISION_SPEC.viewportUnit,
+	};
+}
+
+/**
+ * 单个staff的变形矫正
+ * @param system
+ * @param staff
+ * @param staffIndex
+ * @param gaugeImage
+ * @param pyClients
+ */
+async function gaugeStaff({
+	system,
+	staff,
+	staffIndex,
+	gaugeImage,
+	pyClients,
+}: {
+	system: starry.System;
+	staff: starry.Staff;
+	staffIndex: number;
+	gaugeImage: Buffer;
+	pyClients: PyClients;
+}) {
+	const sourceCanvas = await shootStaffImage(system, staffIndex, {
+		paddingLeft: STAFF_PADDING_LEFT,
+		spec: GAUGE_VISION_SPEC,
+		scaling: 2,
+	});
+
+	const sourceBuffer = sourceCanvas.toBufferSync('png');
+
+	const baseY = (system.middleY - (staff.top + staff.staffY)) * GAUGE_VISION_SPEC.viewportUnit + GAUGE_VISION_SPEC.viewportHeight / 2;
+
+	const { buffer, size } = await pyClients.predictScoreImages('gaugeRenderer', [sourceBuffer, gaugeImage, baseY]);
+
+	staff.backgroundImage = buffer;
+
+	staff.imagePosition = {
+		x: -STAFF_PADDING_LEFT / GAUGE_VISION_SPEC.viewportUnit,
+		y: staff.staffY - size.height / 2 / GAUGE_VISION_SPEC.viewportUnit,
+		width: size.width / GAUGE_VISION_SPEC.viewportUnit,
+		height: size.height / GAUGE_VISION_SPEC.viewportUnit,
+	};
+
+	staff.maskImage = null;
+}
+
+/**
+ * 单个staff的降噪
+ * @param staff
+ * @param staffIndex
+ * @param maskImage
+ */
+async function maskStaff({ staff, staffIndex, maskImage }: { staff: starry.Staff; staffIndex: number; maskImage: Buffer }) {
+	const img = await loadImage(maskImage);
+
+	staff.maskImage = maskImage;
+	staff.imagePosition = {
+		x: -STAFF_PADDING_LEFT / MASK_VISION_SPEC.viewportUnit,
+		y: staff.staffY - MASK_VISION_SPEC.viewportHeight / 2 / MASK_VISION_SPEC.viewportUnit,
+		width: img.width / MASK_VISION_SPEC.viewportUnit,
+		height: img.height / MASK_VISION_SPEC.viewportUnit,
+	};
+}
+
+/**
+ * 单个staff的语义识别
+ * @param score
+ * @param staffIndex
+ * @param system
+ * @param staff
+ * @param graph
+ */
+async function semanticStaff({
+	score,
+	staffIndex,
+	system,
+	staff,
+	graph,
+}: {
+	score: starry.Score;
+	staffIndex: number;
+	system: starry.System;
+	staff: starry.Staff;
+	graph: SemanticGraph;
+}) {
+	graph.offset(-STAFF_PADDING_LEFT / SEMANTIC_VISION_SPEC.viewportUnit, 0);
+
+	system.assignSemantics(staffIndex, graph);
+
+	staff.assignSemantics(graph);
+	staff.clearPredictedTokens();
+
+	score.assembleSystem(system, score.settings?.semanticConfidenceThreshold || 1);
+}
+
+function replacePageImages(page: starry.Page, onReplaceImageKey: (src: string) => any) {
+	const tasks = [
+		[page.source, 'url'],
+		...page.systems
+			.map((system) => {
+				return [
+					[system, 'backgroundImage'],
+					...system.staves
+						.map((staff) => [
+							[staff, 'backgroundImage'],
+							[staff, 'maskImage'],
+						])
+						.flat(),
+				];
+			})
+			.flat(),
+	];
+
+	tasks.map(([target, key]: [any, string]) => {
+		target[key] = onReplaceImageKey(target[key]);
+	});
+}
+
+export type TaskProgress = { total?: number; finished?: number };
+
+export interface OMRPage {
+	url: string | Buffer;
+	key?: string;
+	layout?: LayoutResult;
+	renew?: boolean;
+	enableGauge?: boolean;
+}
+
+export interface ProgressState {
+	layout?: TaskProgress;
+	text?: TaskProgress;
+	gauge?: TaskProgress;
+	mask?: TaskProgress;
+	semantic?: TaskProgress;
+	regulate?: TaskProgress;
+	brackets?: TaskProgress;
+}
+
+class OMRProgress {
+	state: ProgressState = {};
+
+	onChange: (evt: ProgressState) => void;
+
+	constructor(onChange: (evt: ProgressState) => void) {
+		this.onChange = onChange;
+	}
+
+	setTotal(stage: keyof ProgressState, total: number) {
+		this.state[stage] = this.state[stage] || {
+			total,
+			finished: 0,
+		};
+	}
+
+	increase(stage: keyof ProgressState, step = 1) {
+		const info: TaskProgress = this.state[stage] || {
+			finished: 0,
+		};
+		info.finished += step;
+
+		this.onChange(this.state);
+	}
+}
+
+type SourceImage = string | Buffer;
+
+export interface OMROption {
+	outputWidth?: number;
+	title?: string; // 曲谱标题
+	pageStore?: {
+		has?: (key: string) => Promise<Boolean>;
+		get: (key: string) => Promise<string>;
+		set: (key: string, val: string) => Promise<void>;
+	};
+	renew?: boolean;
+	processes?: (keyof ProgressState)[]; // 选择流程
+	onProgress?: (progress: ProgressState) => void;
+	onReplaceImage?: (src: SourceImage) => Promise<string>; // 替换所有图片地址，用于上传或者格式转换
+}
+
+const lruCache = new WeakLRUCache();
+
+// 默认store
+const pageStore = {
+	async get(key: string) {
+		return lruCache.getValue(key) as string;
+	},
+	async set(key: string, val: string) {
+		lruCache.setValue(key, val);
+	},
+};
+
+/**
+ * 默认将图片转换为webp格式的base64字符串
+ * @param src
+ */
+const onReplaceImage = async (src: SourceImage) => {
+	if (src instanceof Buffer || (typeof src === 'string' && (/^https?:\/\//.test(src) || /^data:image\//.test(src)))) {
+		const webpBuffer = (await convertImage(src)).buffer;
+		return `data:image/webp;base64,${webpBuffer.toString('base64')}`;
+	}
+
+	return src;
+};
+
+/**
+ * 识别所有图片
+ * @param pyClients
+ * @param images
+ * @param option
+ */
+export const predictPages = async (
+	pyClients: PyClients,
+	images: OMRPage[],
+	option: OMROption = { outputWidth: 1200, pageStore, onReplaceImage }
+): Promise<{ score: starry.Score; omitPages: number[]; stat: OMRStat }> => {
+	const logger = pyClients.logger;
+
+	option.outputWidth = option.outputWidth || 1200;
+	option.pageStore = option.pageStore || pageStore;
+	option.onReplaceImage = option.onReplaceImage || onReplaceImage;
+
+	option.processes =
+		Array.isArray(option.processes) && option.processes.length > 0 ? option.processes : ['layout', 'text', 'gauge', 'mask', 'semantic', 'brackets'];
+	const progress: OMRProgress = new OMRProgress(option.onProgress);
+
+	const t0 = Date.now();
+
+	// 预处理删除不合法区域
+	images.forEach((image) => {
+		if (image.layout?.detection) {
+			image.layout.detection.areas = image.layout.detection?.areas?.filter((a) => a?.staves?.middleRhos?.length > 0);
+		} else {
+			delete image.layout;
+		}
+	});
+
+	const score = new starry.Score({
+		title: option?.title,
+		stavesCount: 2,
+		paperOptions: {
+			raggedLast: true,
+			raggedLastBottom: true,
+		},
+		headers: {},
+		instrumentDict: {},
+		settings: {
+			enabledGauge: option.processes.includes('gauge'),
+			semanticConfidenceThreshold: 1,
+		},
+	});
+
+	logger.info(`[predictor]: download_source_images-${images.length}`);
+
+	// 原始拍摄图
+	const originalImages: Image[] = await Promise.all(images.map((img) => loadImage(img.url as any)));
+
+	logger.info(`[predictor]: source_images_downloaded-${images.length}`);
+
+	//const INPUT_IMAGE_WIDTH = images.filter((x) => x?.layout?.interval)?.[0]?.layout?.sourceSize?.width;
+
+	/******************************* 布局识别 start *************************/
+	// 输入给布局检测的图
+	const pageCanvasList: Canvas[] = originalImages.map((img, index) => scaleForLayout(img, images[index]!.layout?.sourceSize?.width ?? img.width));
+
+	progress.setTotal('layout', originalImages.length);
+	progress.setTotal('text', originalImages.length);
+
+	const detections = await Promise.all(
+		pageCanvasList.map(async (cvs, key) => {
+			if (!images[key].layout) return (await pyClients.predictScoreImages('layout', [cvs.toBufferSync('png')]))?.[0];
+
+			// reinforce layout from front-end if no gauge
+			if (!images[key].enableGauge && images[key]?.layout?.detection?.areas?.length)
+				return (await pyClients.predictScoreImages('layout$reinforce', [cvs.toBufferSync('png')], [images[key].layout]))?.[0];
+
+			return images[key].layout;
+		})
+	);
+
+	detections.forEach((page) => {
+		page.detection.areas = page.detection?.areas?.filter((a) => a?.staves?.middleRhos?.length > 0);
+	});
+
+	const imageURLMap = new Map<SourceImage, string>();
+	const collectImage = async (source: SourceImage): Promise<void> => {
+		const url = await option.onReplaceImage(source);
+		imageURLMap.set(source, url);
+	};
+
+	// 根据所有页面的宽高比决定全局显示尺寸
+	setGlobalPageSize(score, detections, option.outputWidth);
+
+	async function createPage(detect, pageIndex) {
+		const { url, key, layout, enableGauge } = images[pageIndex];
+
+		const pageKey = sha1(JSON.stringify({ key: key || url, layout, enableGauge }));
+
+		const cachedPageJson = await option.pageStore.get(pageKey);
+
+		const omit = !option.renew && ((cachedPageJson && !images[pageIndex].renew) || !detect.detection.areas?.length);
+
+		const page = (score.pages[pageIndex] =
+			omit && cachedPageJson
+				? starry.recoverJSON<starry.Page>(cachedPageJson, starry)
+				: new starry.Page({
+						source: {
+							name: key || (typeof url === 'string' && /https?:\/\//.test(url) ? url : null),
+							size: 0,
+							url,
+							crop: {
+								unit: '%',
+								x: 0,
+								y: 0,
+								width: 100,
+								height: 100,
+							},
+							dimensions: detect.sourceSize,
+							matrix: [Math.cos(detect.theta), -Math.sin(detect.theta), Math.sin(detect.theta), Math.cos(detect.theta), 0, 0],
+							interval: detect.interval,
+							needGauge: images[pageIndex].enableGauge,
+						},
+						layout: detect.detection,
+				  }));
+
+		const correctCanvas = omit
+			? null
+			: await shootImageByDetection({
+					score,
+					page,
+					pageCanvas: pageCanvasList[pageIndex],
+			  });
+
+		progress.increase('layout');
+
+		return {
+			page,
+			omit,
+			hash: pageKey,
+			correctCanvas,
+		};
+	}
+
+	const systemsCount = detections.reduce((acc, x) => acc + (x.detection.areas?.length ?? 0), 0);
+	const stavesCount = detections.reduce((acc, x) => acc + (x.detection.areas?.reduce?.((a, y) => a + (y.staves?.middleRhos?.length ?? 0), 0) ?? 0), 0);
+
+	progress.setTotal('gauge', stavesCount);
+	progress.setTotal('mask', stavesCount);
+	progress.setTotal('semantic', stavesCount);
+	progress.setTotal('brackets', systemsCount);
+
+	const allTasks = [];
+
+	const omitPages = [];
+
+	const t1 = Date.now();
+
+	let n_page = 0;
+
+	for (const pageIndex of detections.keys()) {
+		const pageTasks = [];
+
+		const { page, correctCanvas, omit, hash } = await createPage(detections[pageIndex], pageIndex);
+
+		pageTasks.push(collectImage(page.source.url));
+		pageTasks.push(...page.systems.map((system) => collectImage(system.backgroundImage)));
+
+		logger.info(`[predictor]: check_cache_pageIndex-${pageIndex} omit: ${omit}`);
+		if (omit) {
+			omitPages.push(pageIndex);
+		} else {
+			const staves = page.systems
+				.map((system, systemIndex) => system.staves.map((staff, staffIndex) => ({ pageIndex, systemIndex, staffIndex, page, system, staff })))
+				.flat(1);
+
+			await concurrencyTask([
+				/******************************* 括号检测 start *************************/
+				async () => {
+					if (!option.processes.includes('brackets')) return;
+
+					const detection = page.layout;
+					const interval = page.source.interval;
+
+					const startTime = Date.now();
+
+					const bracketImages = page.systems.map((system, systemIndex) => {
+						const {
+							x,
+							y,
+							staves: { middleRhos, phi1 },
+						} = detection.areas[systemIndex];
+
+						const topMid = middleRhos[0];
+						const bottomMid = middleRhos[middleRhos.length - 1];
+
+						const sourceRect = {
+							x: x + phi1 - 4 * interval,
+							y: y + topMid - 4 * interval,
+							width: 8 * interval,
+							height: bottomMid - topMid + 8 * interval,
+						};
+
+						const OUTPUT_INTERVAL = 8;
+
+						const canvas = new Canvas(OUTPUT_INTERVAL * 8, (sourceRect.height / interval) * OUTPUT_INTERVAL);
+
+						const context = canvas.getContext('2d');
+						context.drawImage(correctCanvas, sourceRect.x, sourceRect.y, sourceRect.width, sourceRect.height, 0, 0, canvas.width, canvas.height);
+
+						// console.log(pageIndex, systemIndex, JSON.stringify(sourceRect), correctCanvas.width, correctCanvas.height)
+						// const pctx = canvas.getContext('2d')
+						// pctx.strokeStyle = 'red'
+						// pctx.fillStyle = 'rgba(255, 0, 0, 0.2)'
+						// pctx.fillRect(sourceRect.x, sourceRect.y, sourceRect.width, sourceRect.height)
+						// const area = detections[pageIndex].detection.areas[systemIndex]
+						// pctx.strokeStyle = 'green'
+						// pctx.fillStyle = 'rgba(0, 255, 0, 0.1)'
+						// pctx.fillRect(area.x, area.y, area.width, area.height)
+						// pctx.fillRect(area.x, area.y, area.width, area.height)
+						// require('fs').writeFile(`test--system-${systemIndex}.png`, canvas.toBufferSync('png'), () => {})
+						// require('fs-extra').writeFile(`test--brackets-${pageIndex}-${systemIndex}.png`, canvas.toBufferSync('png'))
+
+						return {
+							system,
+							buffer: canvas.toBufferSync('png'),
+						};
+					});
+
+					logger.info(`[predictor]: brackets js [pageIndex-${pageIndex}] duration: ${Date.now() - startTime}`);
+
+					const bracketsRes = await pyClients.predictScoreImages('brackets', { buffers: bracketImages.map((x) => x.buffer) });
+					progress.increase('brackets', bracketImages.length);
+
+					bracketImages.forEach(({ system }, index) => {
+						if (bracketsRes[index]) {
+							system.bracketsAppearance = bracketsRes[index];
+						}
+					});
+				},
+				/******************************* 括号检测 end *************************/
+
+				/******************************* 文本识别 start *************************/
+				async () => {
+					if (!option.processes.includes('text')) return;
+
+					try {
+						const startTime = Date.now();
+
+						// await require('fs-extra').writeFile(`test--text-location-${pageIndex}.png`, correctCanvas.toBufferSync('png'))
+						const bufferForText = correctCanvas.toBufferSync('png');
+
+						const resultLoc = await pyClients.predictScoreImages('textLoc', [bufferForText]);
+
+						const location = resultLoc[0].filter((box) => box.score > 0);
+
+						if (location.length > 0) {
+							const [resultOCR] = await pyClients.predictScoreImages('textOcr', {
+								buffers: [bufferForText],
+								location,
+							});
+
+							page.assignTexts(resultOCR.areas, resultOCR.imageSize);
+							page.assemble();
+						}
+
+						logger.info(`[predictor]: text js [pageIndex-${pageIndex}] duration: ${Date.now() - startTime}`);
+
+						progress.increase('text');
+
+						if (!option.title) {
+							const coverTexts: {
+								confidence: number;
+								fontSize: number;
+								id: string;
+								text: string;
+								textType: 'Title' | 'Author';
+								type: starry.TokenType;
+								width_: number;
+								x: number;
+								y: number;
+							}[] = score.pages[0].tokens as any;
+
+							if (Array.isArray(coverTexts) && coverTexts.length > 0) {
+								const [titleToken] = coverTexts
+									.filter((x) => x.type === starry.TokenType.Text && x.textType === 'Title')
+									.sort((a, b) => b.fontSize - a.fontSize);
+
+								if (titleToken) {
+									score.title = titleToken.text;
+								}
+							}
+						}
+					} catch (err) {
+						logger.error(`[predictor]: text js [pageIndex-${pageIndex}] ${JSON.stringify(err)}`);
+					}
+				},
+				/******************************* 文本识别 end *************************/
+				async () => {
+					/******************************* 变形矫正 start *************************/
+					await batchTask(async () => {
+						const disableGauge = !option.processes.includes('gauge') || images[pageIndex].enableGauge === false;
+
+						if (!disableGauge) {
+							const gaugeRes = await pyClients.predictScoreImages(
+								'gauge',
+								await Promise.all(
+									staves.map(async ({ staffIndex, system }) => {
+										const startTime = Date.now();
+										const sourceCanvas = await shootStaffImage(system, staffIndex, {
+											paddingLeft: STAFF_PADDING_LEFT,
+											spec: GAUGE_VISION_SPEC,
+										});
+
+										logger.info(`[predictor]: gauge js shoot [page-${pageIndex}, staff-${staffIndex}] duration: ${Date.now() - startTime}`);
+
+										return sourceCanvas.toBufferSync('png');
+									})
+								)
+							);
+
+							for (const [index, { system, staff, pageIndex, staffIndex }] of staves.entries()) {
+								const startTime = Date.now();
+
+								logger.info(`[predictor]: gauge js [page-${pageIndex}, staff-${staffIndex}] start..`);
+								await gaugeStaff({
+									pyClients,
+									system,
+									staff,
+									staffIndex,
+									gaugeImage: gaugeRes[index].image,
+								});
+								logger.info(`[predictor]: gauge js [page-${pageIndex}, staff-${staffIndex}] duration: ${Date.now() - startTime}`);
+
+								progress.increase('gauge');
+
+								pageTasks.push(collectImage(staff.backgroundImage));
+							}
+						} else {
+							for (const [_, { system, staff, staffIndex }] of staves.entries()) {
+								await shootStaffBackgroundImage({
+									system,
+									staff,
+									staffIndex,
+								});
+								pageTasks.push(collectImage(staff.backgroundImage));
+							}
+						}
+					});
+					/******************************* 变形矫正 end *************************/
+
+					await concurrencyTask([
+						/******************************* 降噪 start *************************/
+						async () => {
+							if (!option.processes.includes('mask')) return;
+
+							const maskRes = await pyClients.predictScoreImages(
+								'mask',
+								staves.map(({ staff }) => staff.backgroundImage as Buffer)
+							);
+
+							for (const [index, { staff, staffIndex }] of staves.entries()) {
+								const startTime = Date.now();
+
+								await maskStaff({
+									staff,
+									staffIndex,
+									maskImage: maskRes[index].image,
+								});
+
+								logger.info(`[predictor]: mask js [page-${pageIndex}, ${index}, staff-${staffIndex}] duration: ${Date.now() - startTime}`);
+								progress.increase('mask');
+
+								pageTasks.push(collectImage(staff.maskImage));
+							}
+						},
+						/******************************* 降噪 end *************************/
+
+						/******************************* 语义识别 start *************************/
+						async () => {
+							if (!option.processes.includes('semantic')) return;
+
+							const semanticRes = starry.recoverJSON<starry.SemanticGraph[]>(
+								await pyClients.predictScoreImages(
+									'semantic',
+									staves.map(({ staff }) => staff.backgroundImage as Buffer)
+								),
+								starry
+							);
+
+							staves.forEach(({ system }) => system.clearTokens());
+
+							for (const [index, { staffIndex, system, staff }] of staves.entries()) {
+								const startTime = Date.now();
+
+								await semanticStaff({
+									score,
+									system,
+									staff,
+									staffIndex,
+									graph: semanticRes[index],
+								});
+
+								logger.info(
+									`[predictor]: semantic js [page-${pageIndex}, system-${system.index}, staff-${staff.index}] duration: ${
+										Date.now() - startTime
+									}`
+								);
+								progress.increase('semantic');
+							}
+						},
+						/******************************* 语义识别 end *************************/
+					]);
+				},
+			]);
+
+			++n_page;
+		}
+
+		allTasks.push(
+			Promise.all(pageTasks).then(() => {
+				replacePageImages(page, (src) => imageURLMap.get(src));
+				logger.info(`[predictor]: pageStore set: [${pageIndex}]`);
+				return option.pageStore.set(hash, JSON.stringify(page));
+			})
+		);
+	}
+
+	const t2 = Date.now();
+
+	await Promise.all(allTasks);
+
+	logger.info(`[predictor]: inferenceStaffLayout: ${score.title}, [${score.systems.length}]`);
+
+	score.inferenceStaffLayout();
+
+	logger.info(`[predictor]: done: ${score.title}`);
+
+	// correct semantic ids
+	score.assemble();
+
+	const t3 = Date.now();
+
+	return {
+		score,
+		omitPages,
+		stat: {
+			cost: t3 - t0,
+			pagesCost: t2 - t1,
+			pages: n_page,
+		},
+	};
+};
+
+export const abstractOMRStats = (stats: OMRStat[]): OMRSummary => {
+	const { costTotal, pagesCostTotal, pagesTotal } = stats.reduce(
+		(sum, stat) => ({
+			costTotal: sum.costTotal + stat.cost,
+			pagesCostTotal: sum.pagesCostTotal + stat.pagesCost,
+			pagesTotal: sum.pagesTotal + stat.pages,
+		}),
+		{ costTotal: 0, pagesCostTotal: 0, pagesTotal: 0 }
+	);
+
+	return {
+		costTotal,
+		costPerPage: pagesTotal ? costTotal / pagesTotal : null,
+		pagesTotal,
+		scoreN: stats.length,
+	};
+};

backend/libs/predictors.ts

@@ -0,0 +1,139 @@
+import ZeroClient, { Logger } from './ZeroClient';
+import * as starry from '../../src/starry';
+import PyProcessor from './PyProcessor';
+import { destructPromise } from './async-queue';
+import { getPort } from 'portfinder';
+import util from 'util';
+import { Options } from 'python-shell';
+
+const getPortPromise = util.promisify(getPort);
+
+export interface LayoutResult {
+	detection: starry.PageLayout;
+	theta: number;
+	interval: number;
+	sourceSize?: {
+		width: number;
+		height: number;
+	};
+}
+
+export interface PredictorInterface {
+	layout: (streams: Buffer[]) => LayoutResult[];
+	layout$reinforce: (streams: Buffer[], baseLayouts: LayoutResult[]) => LayoutResult[];
+	gauge: (streams: Buffer[]) => {
+		image: Buffer;
+	}[];
+	mask: (streams: Buffer[]) => {
+		image: Buffer;
+	}[];
+	semantic: (streams: Buffer[]) => any[];
+	textLoc: (streams: Buffer[]) => any[];
+	textOcr: (params: { buffers: Buffer[]; location: any[] }) => any[];
+	brackets: (params: { buffers: Buffer[] }) => any[];
+	topo: (params: { clusters: starry.EventCluster[] }) => any[];
+	gaugeRenderer: (params: [Buffer, Buffer, number]) => { buffer: Buffer; size: { width: number; height: number } };
+	jianpu: (params: { buffers: Buffer[] }) => any[];
+	// [source: Buffer, gauge: Buffer, baseY: number]
+}
+
+type PredictorType = keyof PredictorInterface;
+
+export type PyClientsConstructOptions = Partial<Record<PredictorType, Options | string>>;
+
+export class PyClients {
+	clients = new Map<string, Promise<ZeroClient>>();
+
+	constructor(public readonly options: PyClientsConstructOptions, public readonly logger: Logger = console) {}
+
+	async getClient(type: PredictorType) {
+		if (this.clients.has(type)) {
+			return this.clients.get(type);
+		}
+
+		const [promise, resolve, reject] = destructPromise<ZeroClient>();
+
+		const opt = this.options[type];
+
+		if (!opt) {
+			throw new Error(`no config for client \`${type}\` found`);
+		}
+
+		try {
+			if (typeof opt === 'string') {
+				const client = new ZeroClient();
+				client.bind(opt);
+				resolve(client);
+			} else {
+				const { scriptPath, ...option } = opt;
+				const client = new PyProcessor(scriptPath, option, this.logger);
+				await client.bind(`${await getPortPromise()}`);
+				resolve(client);
+			}
+
+			this.logger.info(`PyClients: ${type} started`);
+		} catch (err) {
+			this.logger.error(`PyClients: ${type} start fail: ${JSON.stringify(err)}`);
+			reject(err);
+		}
+
+		this.clients.set(type, promise);
+
+		return promise;
+	}
+
+	async checkHost(type: PredictorType): Promise<string> {
+		const client = await this.getClient(type);
+
+		return client.request('checkHost');
+	}
+
+	async warmup() {
+		const opts = Object.keys(this.options) as PredictorType[];
+		await Promise.all(opts.map((type) => this.getClient(type)));
+	}
+
+	/**
+	 * 模型预测
+	 * @param type layout | mask | gauge | semantic
+	 * @param args
+	 */
+	async predictScoreImages<T extends PredictorType>(type: T, ...args: Parameters<PredictorInterface[T]>): Promise<ReturnType<PredictorInterface[T]>> {
+		const clientType = type.split('$')[0] as PredictorType;
+		const client = await this.getClient(clientType);
+		let res = null;
+
+		this.logger.info(`[predictor]: ${type} py start..`);
+		const start = Date.now();
+
+		switch (type) {
+			case 'layout':
+				res = await client.request('predictDetection', args);
+				break;
+			case 'layout$reinforce':
+				res = await client.request('predictReinforce', args);
+				break;
+			case 'gauge':
+			case 'mask':
+				res = await client.request('predict', args, { by_buffer: true });
+				break;
+			case 'semantic':
+			case 'textLoc':
+				res = await client.request('predict', args);
+				break;
+			case 'textOcr':
+			case 'brackets':
+			case 'topo':
+			case 'gaugeRenderer':
+			case 'jianpu':
+				res = await client.request('predict', ...args);
+				break;
+			default:
+				this.logger.error(`[predictor]: no predictor ${type}`);
+		}
+
+		this.logger.info(`[predictor]: ${type} py duration: ${Date.now() - start}ms`);
+
+		return res;
+	}
+}

backend/libs/regulation.ts

@@ -0,0 +1,350 @@
+import * as starry from '../../src/starry';
+import { PyClients } from './predictors';
+import { Logger } from './ZeroClient';
+import { SpartitoMeasure, EditableMeasure, evaluateMeasure } from '../../src/starry';
+import { EquationPolicy } from '../../src/starry/spartitoMeasure';
+import { genMeasureRectifications } from '../../src/starry/measureRectification';
+import { SolutionStore, DefaultSolutionStore, SaveIssueMeasure } from './store';
+export * from './regulationBead';
+
+globalThis.btoa = globalThis.btoa || ((str) => Buffer.from(str, 'binary').toString('base64'));
+
+const RECTIFICATION_SEARCH_ITERATIONS = parseInt(process.env.RECTIFICATION_SEARCH_ITERATIONS || '30');
+const BASE_QUOTA_FACTOR = parseInt(process.env.BASE_QUOTA_FACTOR || '40');
+const RECTIFICATION_QUOTA_FACTOR = parseInt(process.env.RECTIFICATION_QUOTA_FACTOR || '80');
+
+const MATRIXH_INTERPOLATION_K = 0.9;
+
+interface SolveMeasureOptions {
+	solver?: (...args: any[]) => any;
+	quotaMax?: number;
+	quotaFactor?: number;
+	solutionStore?: SolutionStore;
+	ignoreCache?: boolean;
+	logger?: Logger;
+}
+
+const computeQuota = (n: number, factor: number, limit: number) =>
+	Math.min(Math.ceil((n + 1) * factor * Math.log(n + 2)), Math.ceil(limit * Math.min(1, (24 / (n + 1)) ** 2)));
+
+interface BaseRegulationStat {
+	cached: number;
+	computed: number;
+	solved: number;
+}
+
+async function solveMeasures(
+	measures: SpartitoMeasure[],
+	{ solver, quotaMax = 1000, quotaFactor = BASE_QUOTA_FACTOR, solutionStore = DefaultSolutionStore, ignoreCache = false, logger }: SolveMeasureOptions = {}
+): Promise<BaseRegulationStat> {
+	let cached = 0;
+	let solved = 0;
+
+	logger?.info(`[solveMeasures] begin, measure total: ${measures.length}.`);
+
+	await Promise.all(
+		measures.map(async (measure) => {
+			if (!ignoreCache) {
+				const solution = await solutionStore.get(measure.regulationHash);
+				if (solution) {
+					measure.applySolution(solution);
+					++cached;
+					return;
+				}
+			}
+
+			const quota = computeQuota(measure.events.length, quotaFactor, quotaMax);
+
+			await measure.regulate({
+				policy: 'equations',
+				quota,
+				solver,
+			});
+
+			const stat = evaluateMeasure(measure);
+			if (!stat.error) solutionStore.set(measure.regulationHash0, { ...measure.asSolution(), priority: -measure?.solutionStat?.loss! });
+			if (stat.perfect) ++solved;
+
+			logger?.info(
+				`[solveMeasures] measure[${measure.measureIndex}/${measures.length}] regulated: ${stat.perfect ? 'solved' : stat.error ? 'error' : 'issue'}, ${
+					measure.regulationHash
+				}`
+			);
+		})
+	);
+
+	logger?.info(`[solveMeasures] ${cached}/${measures.length} cache hit, ${solved} solved.`);
+
+	return {
+		cached,
+		computed: measures.length - cached,
+		solved,
+	};
+}
+
+const solveMeasuresWithRectifications = async (
+	measure: SpartitoMeasure,
+	{ solver, quotaMax = 4000 }: SolveMeasureOptions
+): Promise<starry.RegulationSolution> => {
+	let best = evaluateMeasure(measure);
+	let bestSolution: starry.RegulationSolution = measure.asSolution();
+	const quota = computeQuota(measure.events.length, RECTIFICATION_QUOTA_FACTOR, quotaMax);
+	let n_rec = 0;
+
+	// @ts-ignore
+	for (const rec of genMeasureRectifications(measure)) {
+		const solution = await EquationPolicy.regulateMeasureWithRectification(measure, rec, { solver, quota });
+
+		const testMeasure = measure.deepCopy() as SpartitoMeasure;
+		testMeasure.applySolution(solution);
+		const result = evaluateMeasure(testMeasure);
+
+		if (
+			result.perfect > best.perfect ||
+			result.error < best.error ||
+			(!result.error && result.perfect >= best.perfect && solution.priority! > bestSolution.priority!)
+		) {
+			best = result;
+			bestSolution = solution;
+		}
+
+		if (result.perfect) break;
+
+		++n_rec;
+		if (n_rec > RECTIFICATION_SEARCH_ITERATIONS) break;
+	}
+
+	return bestSolution;
+};
+
+interface RegulateWithTopoOption {
+	solutionStore: SolutionStore;
+	pyClients: PyClients;
+	solver: (...args: any[]) => any;
+	onSaveIssueMeasure?: SaveIssueMeasure;
+}
+
+interface RegulateMaybeWithTopoOption {
+	solutionStore: SolutionStore;
+	pyClients?: PyClients;
+	solver: (...args: any[]) => any;
+	onSaveIssueMeasure?: SaveIssueMeasure;
+}
+
+interface RegulateSimpleOption {
+	solutionStore: SolutionStore;
+	solver: (...args: any[]) => any;
+	logger?: Logger;
+	quotaMax?: number;
+	quotaFactor?: number;
+}
+
+interface TopoRegulationStat {
+	solved: number;
+	issue: number;
+	fatal: number;
+}
+
+async function doRegulateWithTopo(
+	score: starry.Score,
+	{ pyClients, solver, solutionStore = DefaultSolutionStore, onSaveIssueMeasure }: RegulateWithTopoOption
+): Promise<TopoRegulationStat> {
+	pyClients.logger.info(`[RegulateWithTopo] regulate score: ${score.title}, measures: ${score.spartito!.measures.length}`);
+
+	const issueMeasures = score.spartito!.measures.filter((measure) => {
+		const stat = evaluateMeasure(measure);
+		return !stat.perfect;
+	});
+	pyClients.logger.info(`[RegulateWithTopo] basic issues: ${issueMeasures.length}`);
+
+	if (issueMeasures.length === 0) {
+		return {
+			solved: 0,
+			issue: 0,
+			fatal: 0,
+		};
+	}
+
+	const clusters = ([] as starry.EventCluster[]).concat(...issueMeasures.map((measure) => measure.createClusters()));
+	const results = await pyClients.predictScoreImages('topo', { clusters });
+	console.assert(results.length === clusters.length, 'prediction number mismatch:', clusters.length, results.length);
+
+	clusters.forEach((cluster, index) => {
+		const result = results[index];
+		console.assert(result, 'no result for cluster:', cluster.index);
+
+		cluster.assignPrediction(result);
+	});
+
+	issueMeasures.forEach((measure) => {
+		const cs = clusters.filter((c) => c.index === measure.measureIndex);
+		measure.applyClusters(cs);
+
+		// intepolate matrixH
+		const { matrixH } = EquationPolicy.estiamteMeasure(measure);
+		matrixH.forEach((row, i) =>
+			row.forEach((v, j) => {
+				measure.matrixH[i][j] = measure.matrixH[i][j] * MATRIXH_INTERPOLATION_K + v * (1 - MATRIXH_INTERPOLATION_K);
+			})
+		);
+	});
+
+	const solvedIndices: number[] = [];
+	const errorIndices: number[] = [];
+
+	// rectification search
+	await Promise.all(
+		issueMeasures.map(async (measure) => {
+			const hash = measure.regulationHash0;
+			const solution = await solveMeasuresWithRectifications(measure, { solver });
+			if (solution) {
+				measure.applySolution(solution);
+				solutionStore.set(hash, solution);
+				solutionStore.set(measure.regulationHash, measure.asSolution());
+				pyClients.logger.info(`[RegulateWithTopo] solutionStore set: ${measure.measureIndex}, ${hash}, ${measure.regulationHash}`);
+			}
+
+			const stat = evaluateMeasure(measure);
+			onSaveIssueMeasure?.({
+				measureIndex: measure.measureIndex,
+				measure: new EditableMeasure(measure),
+				status: stat.error ? 2 : 1,
+			});
+			if (stat.perfect) solvedIndices.push(measure.measureIndex);
+			else if (stat.error) errorIndices.push(measure.measureIndex);
+		})
+	);
+
+	const n_issues = issueMeasures.length - solvedIndices.length - errorIndices.length;
+	pyClients.logger.info(`[RegulateWithTopo] score: ${score.title}, solved/issue/fatal: ${solvedIndices.length}/${n_issues}/${errorIndices.length}`);
+	if (solvedIndices.length) pyClients.logger.info(`[RegulateWithTopo] solved measures: ${solvedIndices.join(', ')}`);
+	if (errorIndices.length) pyClients.logger.info(`[RegulateWithTopo] error measures: ${errorIndices.join(', ')}`);
+
+	return {
+		solved: solvedIndices.length,
+		issue: n_issues,
+		fatal: errorIndices.length,
+	};
+}
+
+interface RegulationStat {
+	baseCost: number; // in milliseconds
+	topoCost: number; // in milliseconds
+	baseMeasures: BaseRegulationStat;
+	topoMeasures?: TopoRegulationStat;
+	qualityScore: number;
+}
+
+const doRegulate = async (
+	score: starry.Score,
+	{ pyClients, solver, solutionStore = DefaultSolutionStore, onSaveIssueMeasure }: RegulateMaybeWithTopoOption
+): Promise<RegulationStat> => {
+	pyClients?.logger?.info(`[doRegulate] score: ${score.title}`);
+
+	score.spartito = undefined;
+	score.assemble();
+	const spartito = score.makeSpartito();
+
+	spartito.measures.forEach((measure) => score.assignBackgroundForMeasure(measure));
+
+	const t0 = Date.now();
+
+	const baseMeasures = await solveMeasures(spartito.measures, { solver, quotaMax: 1000, solutionStore, logger: pyClients?.logger });
+
+	const t1 = Date.now();
+
+	const topoMeasures = pyClients ? await doRegulateWithTopo(score, { pyClients, solver, solutionStore, onSaveIssueMeasure }) : undefined;
+
+	const t2 = Date.now();
+
+	return {
+		baseCost: t1 - t0,
+		topoCost: t2 - t1,
+		baseMeasures,
+		topoMeasures,
+		qualityScore: spartito.qualityScore,
+	};
+};
+
+const doSimpleRegulate = async (
+	score: starry.Score,
+	{ solver, solutionStore = DefaultSolutionStore, logger, quotaMax = 240, quotaFactor = 16 }: RegulateSimpleOption
+): Promise<void> => {
+	score.assemble();
+	const spartito = score.spartito || score.makeSpartito();
+	const measures = spartito.measures.filter((measure) => !measure.regulated);
+
+	await solveMeasures(measures, { solver, quotaMax, quotaFactor, solutionStore, logger });
+
+	console.assert(score.spartito?.regulated, 'doSimpleRegulate: regulation incomplete:', spartito.measures.filter((measure) => !measure.regulated).length);
+};
+
+const evaluateScoreQuality = async (score: starry.Score, options: RegulateSimpleOption): Promise<number | null> => {
+	if (!score.spartito?.regulated) await doSimpleRegulate(score, options);
+
+	return score.spartito!.regulated ? score.spartito!.qualityScore : null;
+};
+
+interface RegulationSummary {
+	scoreN: number;
+
+	baseCostTotal: number; // in milliseconds
+	topoCostTotal: number; // in milliseconds
+	baseCostPerMeasure: number | null; // in milliseconds
+	topoCostPerMeasure: number | null; // in milliseconds
+
+	cached: number;
+	baseComputed: number;
+	baseSolved: number;
+	topoSolved: number;
+	topoIssue: number;
+	topoFatal: number;
+}
+
+const abstractRegulationStats = (stats: RegulationStat[]): RegulationSummary => {
+	const { baseCostTotal, topoCostTotal, baseMeasures, topoMeasures } = stats.reduce(
+		(sum, stat) => ({
+			baseCostTotal: sum.baseCostTotal + stat.baseCost,
+			topoCostTotal: sum.topoCostTotal + stat.topoCost,
+			baseMeasures: sum.baseMeasures + stat.baseMeasures.computed,
+			topoMeasures: sum.topoMeasures + (stat.topoMeasures!.solved + stat.topoMeasures!.issue + stat.topoMeasures!.fatal),
+		}),
+		{
+			baseCostTotal: 0,
+			topoCostTotal: 0,
+			baseMeasures: 0,
+			topoMeasures: 0,
+		}
+	);
+
+	const baseCostPerMeasure = baseMeasures > 0 ? baseCostTotal / baseMeasures : null;
+	const topoCostPerMeasure = topoMeasures > 0 ? topoCostTotal / topoMeasures : null;
+
+	const { cached, baseComputed, baseSolved, topoSolved, topoIssue, topoFatal } = stats.reduce(
+		(sum, stat) => ({
+			cached: sum.cached + stat.baseMeasures.cached,
+			baseComputed: sum.baseComputed + stat.baseMeasures.computed,
+			baseSolved: sum.baseSolved + stat.baseMeasures.solved,
+			topoSolved: sum.topoSolved + stat.topoMeasures!.solved,
+			topoIssue: sum.topoIssue + stat.topoMeasures!.issue,
+			topoFatal: sum.topoFatal + stat.topoMeasures!.fatal,
+		}),
+		{ cached: 0, baseComputed: 0, baseSolved: 0, topoSolved: 0, topoIssue: 0, topoFatal: 0 }
+	);
+
+	return {
+		scoreN: stats.length,
+		baseCostTotal,
+		topoCostTotal,
+		baseCostPerMeasure,
+		topoCostPerMeasure,
+		cached,
+		baseComputed,
+		baseSolved,
+		topoSolved,
+		topoIssue,
+		topoFatal,
+	};
+};
+
+export { doRegulate, doSimpleRegulate, evaluateScoreQuality, abstractRegulationStats };

backend/libs/regulationBead.ts

@@ -0,0 +1,372 @@
+import * as starry from '../../src/starry';
+import { Logger } from './ZeroClient';
+import { SolutionStore, DefaultSolutionStore, SaveIssueMeasure, MeasureStatus } from './store';
+
+interface BeadRegulationCounting {
+	cached: number;
+	simple: number;
+	computed: number;
+	tryTimes: number;
+	solved: number;
+	issue: number;
+	fatal: number;
+}
+
+interface RegulationBeadStat {
+	totalCost: number; // in milliseconds
+	pickerCost: number; // in milliseconds
+	measures: BeadRegulationCounting;
+	qualityScore: number;
+}
+
+interface RegulationBeadSummary {
+	scoreN: number;
+
+	totalCost: number; // in milliseconds
+	pickerCost: number; // in milliseconds
+	costPerMeasure: number | null; // in milliseconds
+	costPerTime: number | null; // in milliseconds
+
+	cached: number;
+	simple: number;
+	computed: number;
+	tryTimes: number;
+	solved: number;
+	issue: number;
+	fatal: number;
+}
+
+interface ProgressInfo {
+	pass: number;
+	remaining: number;
+	total: number;
+}
+
+interface RegulateBeadOption {
+	logger?: Logger;
+	pickers: starry.BeadPicker[];
+	solutionStore?: SolutionStore;
+	ignoreCache?: boolean;
+	freshOnly?: boolean;
+	onSaveIssueMeasure?: SaveIssueMeasure;
+	onProgress?: (measure: starry.SpartitoMeasure, evaluation: starry.MeasureEvaluation, better: boolean, progress: ProgressInfo) => void;
+	onPassStart?: (pass: number, conditionName: string, pendingCount: number) => void;
+}
+
+interface MeasureReord {
+	origin: starry.SpartitoMeasure;
+	current: starry.SpartitoMeasure;
+	evaluation?: starry.MeasureEvaluation;
+	baseQuality: number;
+	picker: starry.BeadPicker;
+}
+
+interface BeadSolverOptions {
+	stopLoss: number;
+	quotaMax: number;
+	quotaFactor: number;
+	ptFactor: number;
+}
+
+enum PendingCondition {
+	ErrorOnly,
+	NotFine,
+	Imperfect,
+}
+
+const isPending = (evaluation: starry.MeasureEvaluation, condition: PendingCondition) => {
+	switch (condition) {
+		case PendingCondition.ErrorOnly:
+			return evaluation.error;
+
+		case PendingCondition.Imperfect:
+			return !evaluation.perfect;
+	}
+
+	return !evaluation.fine;
+};
+
+type OnUpdate = (measure: starry.SpartitoMeasure, evaluation: starry.MeasureEvaluation, better: boolean) => void;
+
+const solveMeasureRecords = async (
+	records: MeasureReord[],
+	onUpdate: OnUpdate,
+	stdout: NodeJS.WritableStream | null,
+	options: Partial<BeadSolverOptions>,
+	pendingCondition: PendingCondition = PendingCondition.NotFine,
+	pass: number = 0,
+	onProgress?: RegulateBeadOption['onProgress']
+): Promise<number> => {
+	const pendingRecords = records.filter(({ evaluation }) => !evaluation || isPending(evaluation, pendingCondition));
+	stdout?.write('.'.repeat(pendingRecords.length));
+	stdout?.write('\b'.repeat(pendingRecords.length));
+
+	const total = pendingRecords.length;
+	let done = 0;
+
+	for (const record of pendingRecords) {
+		const measure = record.current.deepCopy();
+		measure.staffGroups = record.current.staffGroups;
+
+		const solution = await starry.beadSolver.solveMeasure(measure, { picker: record.picker, ...options });
+		measure.applySolution(solution);
+
+		const evaluation = starry.evaluateMeasure(measure);
+		const better =
+			!record.evaluation ||
+			evaluation.fine > record.evaluation.fine ||
+			(evaluation.qualityScore > record.evaluation.qualityScore && evaluation.fine === record.evaluation.fine);
+		if (better) {
+			record.evaluation = evaluation;
+			Object.assign(record.current, measure);
+		}
+
+		onUpdate(record.current, evaluation, better);
+
+		done++;
+		onProgress?.(record.current, evaluation, better, { pass, remaining: total - done, total });
+	}
+
+	if (pendingRecords.length) stdout?.write('\n');
+
+	return pendingRecords.length;
+};
+
+const regulateWithBeadSolver = async (
+	score: starry.Score,
+	{ logger, pickers, solutionStore = DefaultSolutionStore, ignoreCache, freshOnly, onSaveIssueMeasure, onProgress, onPassStart }: RegulateBeadOption
+): Promise<RegulationBeadStat> => {
+	score.spartito = undefined;
+	score.assemble();
+	const spartito = score.makeSpartito();
+
+	spartito.measures.forEach((measure) => score.assignBackgroundForMeasure(measure));
+
+	const t0 = Date.now();
+	logger?.info(`[regulateWithBeadSolver] begin, measure total: ${spartito.measures.length}.`, ignoreCache ? 'ignoreCache' : '', freshOnly ? 'freshOnly' : '');
+
+	const records = spartito.measures
+		.filter((measure) => measure.events?.length && !measure.patched)
+		.map(
+			(measure) =>
+				({
+					origin: measure.deepCopy(),
+					current: measure,
+					evaluation: undefined,
+					baseQuality: 0,
+				} as MeasureReord)
+		);
+
+	// rectify time signature
+	for (const measure of spartito.measures.filter((measure) => measure.events?.length)) {
+		const picker = pickers.find((picker) => picker.n_seq > measure.events.length + 1);
+		if (picker) await starry.beadSolver.estimateMeasure(measure, picker);
+	}
+	spartito.rectifyTimeSignatures(logger as any);
+
+	// zero pickers' cost
+	pickers.forEach((picker) => (picker.cost = 0));
+
+	const counting = {
+		cached: 0,
+		simple: 0,
+		computed: 0,
+		tryTimes: 0,
+		solved: 0,
+		issue: 0,
+		fatal: 0,
+	};
+
+	logger?.info(`[regulateWithBeadSolver] measures estimation finished.`);
+
+	// apply solutions
+	if (solutionStore && !ignoreCache)
+		for (const record of records) {
+			const solution = await solutionStore.get(record.origin.regulationHash0);
+			if (solution) {
+				record.current.applySolution(solution);
+				++counting.cached;
+
+				record.evaluation = starry.evaluateMeasure(record.current);
+				record.baseQuality = record.evaluation.qualityScore;
+			}
+		}
+
+	logger?.info('[regulateWithBeadSolver]', `${counting.cached}/${records.length}`, 'solutions loaded.');
+
+	const stdout = logger ? null : process.stdout;
+	if (counting.cached) stdout?.write(`${counting.cached}c`);
+
+	records.forEach((record) => {
+		const picker = pickers.find((picker) => picker.n_seq > record.current.events.length + 1);
+		if (!picker) {
+			logger?.info(`[regulateWithBeadSolver] measure[${record.current.measureIndex}] size out of range:`, record.current.events.length);
+		} else record.picker = picker;
+	});
+
+	const pendingRecords = records.filter((record) => record.picker && (!record.evaluation || (!record.evaluation.fine && !freshOnly))) as (MeasureReord & {
+		evaluation: starry.MeasureEvaluation;
+	})[];
+
+	// solve by simple policy
+	pendingRecords.forEach((record) => {
+		const measure = record.current.deepCopy();
+		measure.staffGroups = record.current.staffGroups;
+
+		measure.regulate({ policy: 'simple' });
+
+		const evaluation = starry.evaluateMeasure(measure);
+		const better = !record.evaluation || evaluation.qualityScore > record.evaluation.qualityScore;
+		if (better) {
+			record.evaluation = evaluation;
+			Object.assign(record.current, measure);
+
+			if (evaluation.perfect) {
+				logger?.info(`[regulateWithBeadSolver] measure[${record.current.measureIndex}] regulated by simple policy.`);
+				++counting.simple;
+			}
+		}
+	});
+	counting.computed = pendingRecords.length - counting.simple;
+
+	if (counting.simple) stdout?.write(`${counting.simple}s`);
+
+	const onUpdate = (measure, evaluation, better) => {
+		logger?.info(
+			`[regulateWithBeadSolver] measure[${measure.measureIndex}/${spartito.measures.length}] regulated${
+				better ? '+' : '-'
+			}: ${evaluation.qualityScore.toFixed(3)}, ${evaluation.fine ? 'solved' : evaluation.error ? 'error' : 'issue'}, ${measure.regulationHash}`
+		);
+
+		stdout?.write(`\x1b[${evaluation.fine ? '32' : evaluation.error ? '31' : '33'}m${better ? '+' : '-'}\x1b[0m`);
+	};
+
+	// Global progress: total = all measures, remaining = non-fine measures across all passes
+	const totalMeasures = spartito.measures.length;
+	const computeRemaining = () => pendingRecords.filter((r) => !r.evaluation?.fine).length;
+	const wrappedOnProgress = onProgress
+		? (measure: starry.SpartitoMeasure, evaluation: starry.MeasureEvaluation, better: boolean, progress: ProgressInfo) => {
+				onProgress(measure, evaluation, better, { pass: progress.pass, remaining: computeRemaining(), total: totalMeasures });
+		  }
+		: undefined;
+
+	onPassStart?.(1, 'Imperfect', computeRemaining());
+	counting.tryTimes += await solveMeasureRecords(
+		pendingRecords,
+		onUpdate,
+		stdout,
+		{ stopLoss: 0.05, quotaMax: 200, quotaFactor: 3, ptFactor: 1 },
+		PendingCondition.Imperfect,
+		1,
+		wrappedOnProgress
+	);
+	onPassStart?.(2, 'NotFine', computeRemaining());
+	counting.tryTimes += await solveMeasureRecords(
+		pendingRecords,
+		onUpdate,
+		stdout,
+		{ stopLoss: 0.08, quotaMax: 1000, quotaFactor: 20, ptFactor: 1.6 },
+		PendingCondition.NotFine,
+		2,
+		wrappedOnProgress
+	);
+	onPassStart?.(3, 'ErrorOnly', computeRemaining());
+	counting.tryTimes += await solveMeasureRecords(
+		pendingRecords,
+		onUpdate,
+		stdout,
+		{ stopLoss: 0.08, quotaMax: 1000, quotaFactor: 40, ptFactor: 3 },
+		PendingCondition.ErrorOnly,
+		3,
+		wrappedOnProgress
+	);
+
+	pendingRecords.forEach(({ evaluation, baseQuality, current, origin }) => {
+		if (evaluation.fine) ++counting.solved;
+		else if (evaluation.error) ++counting.fatal;
+		else ++counting.issue;
+
+		if (evaluation.qualityScore > baseQuality || !baseQuality) {
+			solutionStore.set(origin.regulationHash0, { ...current.asSolution(origin), priority: -current?.solutionStat?.loss! });
+			if (current.regulationHash !== origin.regulationHash0)
+				solutionStore.set(current.regulationHash, { ...current.asSolution(), priority: -current?.solutionStat?.loss! });
+			//console.log('better:', current.measureIndex, evaluation.qualityScore, baseQuality);
+		}
+
+		if (!evaluation.fine) {
+			onSaveIssueMeasure?.({
+				measureIndex: current.measureIndex,
+				measure: new starry.EditableMeasure(current),
+				status: evaluation.error ? MeasureStatus.Fatal : MeasureStatus.Issue,
+			});
+		}
+	});
+
+	const t1 = Date.now();
+	const pickerCost = pickers.reduce((cost, picker) => cost + picker.cost, 0);
+
+	const qualityScore = spartito.qualityScore;
+	const totalCost = t1 - t0;
+
+	logger?.info('[regulateWithBeadSolver] done in ', totalCost, 'ms, qualityScore:', qualityScore);
+
+	// zero 'cached' statistics for freshOnly mode
+	if (freshOnly) counting.cached = 0;
+
+	return {
+		totalCost: t1 - t0,
+		pickerCost,
+		measures: counting,
+		qualityScore,
+	};
+};
+
+const abstractRegulationBeadStats = (stats: RegulationBeadStat[]): RegulationBeadSummary => {
+	const { totalCost, pickerCost, measureN, timeN } = stats.reduce(
+		(sum, stat) => ({
+			totalCost: sum.totalCost + stat.totalCost,
+			pickerCost: sum.pickerCost + stat.pickerCost,
+			measureN: sum.measureN + stat.measures.computed,
+			timeN: sum.timeN + stat.measures.tryTimes,
+		}),
+		{
+			totalCost: 0,
+			pickerCost: 0,
+			measureN: 0,
+			timeN: 0,
+		}
+	);
+
+	const costPerMeasure = measureN > 0 ? totalCost / measureN : null;
+	const costPerTime = timeN > 0 ? totalCost / timeN : null;
+
+	const { cached, simple, computed, tryTimes, solved, issue, fatal } = stats.reduce(
+		(sum, stat) => ({
+			cached: sum.cached + stat.measures.cached,
+			simple: sum.simple + stat.measures.simple,
+			computed: sum.computed + stat.measures.computed,
+			tryTimes: sum.tryTimes + stat.measures.tryTimes,
+			solved: sum.solved + stat.measures.solved,
+			issue: sum.issue + stat.measures.issue,
+			fatal: sum.fatal + stat.measures.fatal,
+		}),
+		{ cached: 0, simple: 0, computed: 0, tryTimes: 0, solved: 0, issue: 0, fatal: 0 }
+	);
+
+	return {
+		scoreN: stats.length,
+		totalCost,
+		pickerCost,
+		costPerMeasure,
+		costPerTime,
+		cached,
+		simple,
+		computed,
+		tryTimes,
+		solved,
+		issue,
+		fatal,
+	};
+};
+
+export { regulateWithBeadSolver, abstractRegulationBeadStats, RegulationBeadStat, ProgressInfo };

backend/libs/store.ts

@@ -0,0 +1,42 @@
+import { WeakLRUCache } from 'weak-lru-cache';
+
+import { RegulationSolution, SpartitoMeasure } from '../../src/starry';
+
+const lruCache = new WeakLRUCache();
+
+interface SolutionStore {
+	get: (key: string) => Promise<RegulationSolution>;
+	set: (key: string, val: RegulationSolution) => Promise<void>;
+	batchGet: (keys: string[]) => Promise<RegulationSolution[]>;
+}
+
+// 默认store
+const DefaultSolutionStore: SolutionStore = {
+	async get(key: string) {
+		return lruCache.getValue(key) as RegulationSolution;
+	},
+	async set(key: string, val: RegulationSolution) {
+		lruCache.setValue(key, val);
+	},
+	async batchGet(keys: string[]) {
+		return keys.map((key) => lruCache.getValue(key) as RegulationSolution);
+	},
+};
+
+const enum MeasureStatus {
+	Discard = -1,
+	Solved = 0,
+	Issue = 1,
+	Fatal = 2,
+}
+
+interface IssueMeasure {
+	scoreId: string;
+	measureIndex: number;
+	measure: SpartitoMeasure;
+	status: MeasureStatus;
+}
+
+type SaveIssueMeasure = (data: Omit<IssueMeasure, 'scoreId'>) => void;
+
+export { SolutionStore, DefaultSolutionStore, MeasureStatus, IssueMeasure, SaveIssueMeasure };

backend/libs/three/Three.Legacy.d.ts

@@ -0,0 +1 @@
+export {};

backend/libs/three/Three.Legacy.js

@@ -0,0 +1,1444 @@
+import { Audio } from './audio/Audio.js';
+import { AudioAnalyser } from './audio/AudioAnalyser.js';
+import { PerspectiveCamera } from './cameras/PerspectiveCamera.js';
+import { FlatShading, sRGBEncoding, LinearEncoding, StaticDrawUsage, DynamicDrawUsage, TrianglesDrawMode } from './constants.js';
+import {
+	Float64BufferAttribute,
+	Float32BufferAttribute,
+	Uint32BufferAttribute,
+	Int32BufferAttribute,
+	Uint16BufferAttribute,
+	Int16BufferAttribute,
+	Uint8ClampedBufferAttribute,
+	Uint8BufferAttribute,
+	Int8BufferAttribute,
+	BufferAttribute,
+} from './core/BufferAttribute.js';
+import { BufferGeometry } from './core/BufferGeometry.js';
+import { InterleavedBuffer } from './core/InterleavedBuffer.js';
+import { Object3D } from './core/Object3D.js';
+import { Uniform } from './core/Uniform.js';
+import { Curve } from './extras/core/Curve.js';
+import { Path } from './extras/core/Path.js';
+import { AxesHelper } from './helpers/AxesHelper.js';
+import { BoxHelper } from './helpers/BoxHelper.js';
+import { GridHelper } from './helpers/GridHelper.js';
+import { SkeletonHelper } from './helpers/SkeletonHelper.js';
+import { EdgesGeometry } from './geometries/EdgesGeometry.js';
+import { ExtrudeGeometry } from './geometries/ExtrudeGeometry.js';
+import { ShapeGeometry } from './geometries/ShapeGeometry.js';
+import { WireframeGeometry } from './geometries/WireframeGeometry.js';
+import { Light } from './lights/Light.js';
+import { Loader } from './loaders/Loader.js';
+import { LoaderUtils } from './loaders/LoaderUtils.js';
+import { FileLoader } from './loaders/FileLoader.js';
+import { AudioLoader } from './loaders/AudioLoader.js';
+import { CubeTextureLoader } from './loaders/CubeTextureLoader.js';
+import { DataTextureLoader } from './loaders/DataTextureLoader.js';
+import { TextureLoader } from './loaders/TextureLoader.js';
+import { Material } from './materials/Material.js';
+import { LineBasicMaterial } from './materials/LineBasicMaterial.js';
+import { PointsMaterial } from './materials/PointsMaterial.js';
+import { ShaderMaterial } from './materials/ShaderMaterial.js';
+import { Box2 } from './math/Box2.js';
+import { Box3 } from './math/Box3.js';
+import { Sphere } from './math/Sphere.js';
+import { Color } from './math/Color.js';
+import { Frustum } from './math/Frustum.js';
+import { Line3 } from './math/Line3.js';
+import * as MathUtils from './math/MathUtils.js';
+import { Matrix3 } from './math/Matrix3.js';
+import { Matrix4 } from './math/Matrix4.js';
+import { Plane } from './math/Plane.js';
+import { Quaternion } from './math/Quaternion.js';
+import { Ray } from './math/Ray.js';
+import { Triangle } from './math/Triangle.js';
+import { Vector2 } from './math/Vector2.js';
+import { Vector3 } from './math/Vector3.js';
+import { Vector4 } from './math/Vector4.js';
+import { Mesh } from './objects/Mesh.js';
+import { LineSegments } from './objects/LineSegments.js';
+import { Points } from './objects/Points.js';
+import { Sprite } from './objects/Sprite.js';
+import { SkinnedMesh } from './objects/SkinnedMesh.js';
+import { WebGLRenderer } from './renderers/WebGLRenderer.js';
+import { WebGLRenderTarget } from './renderers/WebGLRenderTarget.js';
+import { WebGLCubeRenderTarget } from './renderers/WebGLCubeRenderTarget.js';
+import { WebGLShadowMap } from './renderers/webgl/WebGLShadowMap.js';
+import { ImageUtils } from './extras/ImageUtils.js';
+import { Shape } from './extras/core/Shape.js';
+import { CubeCamera } from './cameras/CubeCamera.js';
+import { Scene } from './scenes/Scene.js';
+
+export { MathUtils as Math };
+
+export const LineStrip = 0;
+export const LinePieces = 1;
+export const NoColors = 0;
+export const FaceColors = 1;
+export const VertexColors = 2;
+
+export function MeshFaceMaterial(materials) {
+	console.warn('THREE.MeshFaceMaterial has been removed. Use an Array instead.');
+	return materials;
+}
+
+export function MultiMaterial(materials = []) {
+	console.warn('THREE.MultiMaterial has been removed. Use an Array instead.');
+	materials.isMultiMaterial = true;
+	materials.materials = materials;
+	materials.clone = function () {
+		return materials.slice();
+	};
+
+	return materials;
+}
+
+export function PointCloud(geometry, material) {
+	console.warn('THREE.PointCloud has been renamed to THREE.Points.');
+	return new Points(geometry, material);
+}
+
+export function Particle(material) {
+	console.warn('THREE.Particle has been renamed to THREE.Sprite.');
+	return new Sprite(material);
+}
+
+export function ParticleSystem(geometry, material) {
+	console.warn('THREE.ParticleSystem has been renamed to THREE.Points.');
+	return new Points(geometry, material);
+}
+
+export function PointCloudMaterial(parameters) {
+	console.warn('THREE.PointCloudMaterial has been renamed to THREE.PointsMaterial.');
+	return new PointsMaterial(parameters);
+}
+
+export function ParticleBasicMaterial(parameters) {
+	console.warn('THREE.ParticleBasicMaterial has been renamed to THREE.PointsMaterial.');
+	return new PointsMaterial(parameters);
+}
+
+export function ParticleSystemMaterial(parameters) {
+	console.warn('THREE.ParticleSystemMaterial has been renamed to THREE.PointsMaterial.');
+	return new PointsMaterial(parameters);
+}
+
+export function Vertex(x, y, z) {
+	console.warn('THREE.Vertex has been removed. Use THREE.Vector3 instead.');
+	return new Vector3(x, y, z);
+}
+
+//
+
+export function DynamicBufferAttribute(array, itemSize) {
+	console.warn('THREE.DynamicBufferAttribute has been removed. Use new THREE.BufferAttribute().setUsage( THREE.DynamicDrawUsage ) instead.');
+	return new BufferAttribute(array, itemSize).setUsage(DynamicDrawUsage);
+}
+
+export function Int8Attribute(array, itemSize) {
+	console.warn('THREE.Int8Attribute has been removed. Use new THREE.Int8BufferAttribute() instead.');
+	return new Int8BufferAttribute(array, itemSize);
+}
+
+export function Uint8Attribute(array, itemSize) {
+	console.warn('THREE.Uint8Attribute has been removed. Use new THREE.Uint8BufferAttribute() instead.');
+	return new Uint8BufferAttribute(array, itemSize);
+}
+
+export function Uint8ClampedAttribute(array, itemSize) {
+	console.warn('THREE.Uint8ClampedAttribute has been removed. Use new THREE.Uint8ClampedBufferAttribute() instead.');
+	return new Uint8ClampedBufferAttribute(array, itemSize);
+}
+
+export function Int16Attribute(array, itemSize) {
+	console.warn('THREE.Int16Attribute has been removed. Use new THREE.Int16BufferAttribute() instead.');
+	return new Int16BufferAttribute(array, itemSize);
+}
+
+export function Uint16Attribute(array, itemSize) {
+	console.warn('THREE.Uint16Attribute has been removed. Use new THREE.Uint16BufferAttribute() instead.');
+	return new Uint16BufferAttribute(array, itemSize);
+}
+
+export function Int32Attribute(array, itemSize) {
+	console.warn('THREE.Int32Attribute has been removed. Use new THREE.Int32BufferAttribute() instead.');
+	return new Int32BufferAttribute(array, itemSize);
+}
+
+export function Uint32Attribute(array, itemSize) {
+	console.warn('THREE.Uint32Attribute has been removed. Use new THREE.Uint32BufferAttribute() instead.');
+	return new Uint32BufferAttribute(array, itemSize);
+}
+
+export function Float32Attribute(array, itemSize) {
+	console.warn('THREE.Float32Attribute has been removed. Use new THREE.Float32BufferAttribute() instead.');
+	return new Float32BufferAttribute(array, itemSize);
+}
+
+export function Float64Attribute(array, itemSize) {
+	console.warn('THREE.Float64Attribute has been removed. Use new THREE.Float64BufferAttribute() instead.');
+	return new Float64BufferAttribute(array, itemSize);
+}
+
+//
+
+Curve.create = function (construct, getPoint) {
+	console.log('THREE.Curve.create() has been deprecated');
+
+	construct.prototype = Object.create(Curve.prototype);
+	construct.prototype.constructor = construct;
+	construct.prototype.getPoint = getPoint;
+
+	return construct;
+};
+
+//
+
+Path.prototype.fromPoints = function (points) {
+	console.warn('THREE.Path: .fromPoints() has been renamed to .setFromPoints().');
+	return this.setFromPoints(points);
+};
+
+//
+
+export function AxisHelper(size) {
+	console.warn('THREE.AxisHelper has been renamed to THREE.AxesHelper.');
+	return new AxesHelper(size);
+}
+
+export function BoundingBoxHelper(object, color) {
+	console.warn('THREE.BoundingBoxHelper has been deprecated. Creating a THREE.BoxHelper instead.');
+	return new BoxHelper(object, color);
+}
+
+export function EdgesHelper(object, hex) {
+	console.warn('THREE.EdgesHelper has been removed. Use THREE.EdgesGeometry instead.');
+	return new LineSegments(new EdgesGeometry(object.geometry), new LineBasicMaterial({ color: hex !== undefined ? hex : 0xffffff }));
+}
+
+GridHelper.prototype.setColors = function () {
+	console.error('THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead.');
+};
+
+SkeletonHelper.prototype.update = function () {
+	console.error('THREE.SkeletonHelper: update() no longer needs to be called.');
+};
+
+export function WireframeHelper(object, hex) {
+	console.warn('THREE.WireframeHelper has been removed. Use THREE.WireframeGeometry instead.');
+	return new LineSegments(new WireframeGeometry(object.geometry), new LineBasicMaterial({ color: hex !== undefined ? hex : 0xffffff }));
+}
+
+//
+
+Loader.prototype.extractUrlBase = function (url) {
+	console.warn('THREE.Loader: .extractUrlBase() has been deprecated. Use THREE.LoaderUtils.extractUrlBase() instead.');
+	return LoaderUtils.extractUrlBase(url);
+};
+
+Loader.Handlers = {
+	add: function (/* regex, loader */) {
+		console.error('THREE.Loader: Handlers.add() has been removed. Use LoadingManager.addHandler() instead.');
+	},
+
+	get: function (/* file */) {
+		console.error('THREE.Loader: Handlers.get() has been removed. Use LoadingManager.getHandler() instead.');
+	},
+};
+
+export function XHRLoader(manager) {
+	console.warn('THREE.XHRLoader has been renamed to THREE.FileLoader.');
+	return new FileLoader(manager);
+}
+
+export function BinaryTextureLoader(manager) {
+	console.warn('THREE.BinaryTextureLoader has been renamed to THREE.DataTextureLoader.');
+	return new DataTextureLoader(manager);
+}
+
+//
+
+Box2.prototype.center = function (optionalTarget) {
+	console.warn('THREE.Box2: .center() has been renamed to .getCenter().');
+	return this.getCenter(optionalTarget);
+};
+
+Box2.prototype.empty = function () {
+	console.warn('THREE.Box2: .empty() has been renamed to .isEmpty().');
+	return this.isEmpty();
+};
+
+Box2.prototype.isIntersectionBox = function (box) {
+	console.warn('THREE.Box2: .isIntersectionBox() has been renamed to .intersectsBox().');
+	return this.intersectsBox(box);
+};
+
+Box2.prototype.size = function (optionalTarget) {
+	console.warn('THREE.Box2: .size() has been renamed to .getSize().');
+	return this.getSize(optionalTarget);
+};
+
+//
+
+Box3.prototype.center = function (optionalTarget) {
+	console.warn('THREE.Box3: .center() has been renamed to .getCenter().');
+	return this.getCenter(optionalTarget);
+};
+
+Box3.prototype.empty = function () {
+	console.warn('THREE.Box3: .empty() has been renamed to .isEmpty().');
+	return this.isEmpty();
+};
+
+Box3.prototype.isIntersectionBox = function (box) {
+	console.warn('THREE.Box3: .isIntersectionBox() has been renamed to .intersectsBox().');
+	return this.intersectsBox(box);
+};
+
+Box3.prototype.isIntersectionSphere = function (sphere) {
+	console.warn('THREE.Box3: .isIntersectionSphere() has been renamed to .intersectsSphere().');
+	return this.intersectsSphere(sphere);
+};
+
+Box3.prototype.size = function (optionalTarget) {
+	console.warn('THREE.Box3: .size() has been renamed to .getSize().');
+	return this.getSize(optionalTarget);
+};
+
+//
+
+Sphere.prototype.empty = function () {
+	console.warn('THREE.Sphere: .empty() has been renamed to .isEmpty().');
+	return this.isEmpty();
+};
+
+//
+
+Frustum.prototype.setFromMatrix = function (m) {
+	console.warn('THREE.Frustum: .setFromMatrix() has been renamed to .setFromProjectionMatrix().');
+	return this.setFromProjectionMatrix(m);
+};
+
+//
+
+Line3.prototype.center = function (optionalTarget) {
+	console.warn('THREE.Line3: .center() has been renamed to .getCenter().');
+	return this.getCenter(optionalTarget);
+};
+
+//
+
+Matrix3.prototype.flattenToArrayOffset = function (array, offset) {
+	console.warn('THREE.Matrix3: .flattenToArrayOffset() has been deprecated. Use .toArray() instead.');
+	return this.toArray(array, offset);
+};
+
+Matrix3.prototype.multiplyVector3 = function (vector) {
+	console.warn('THREE.Matrix3: .multiplyVector3() has been removed. Use vector.applyMatrix3( matrix ) instead.');
+	return vector.applyMatrix3(this);
+};
+
+Matrix3.prototype.multiplyVector3Array = function (/* a */) {
+	console.error('THREE.Matrix3: .multiplyVector3Array() has been removed.');
+};
+
+Matrix3.prototype.applyToBufferAttribute = function (attribute) {
+	console.warn('THREE.Matrix3: .applyToBufferAttribute() has been removed. Use attribute.applyMatrix3( matrix ) instead.');
+	return attribute.applyMatrix3(this);
+};
+
+Matrix3.prototype.applyToVector3Array = function (/* array, offset, length */) {
+	console.error('THREE.Matrix3: .applyToVector3Array() has been removed.');
+};
+
+Matrix3.prototype.getInverse = function (matrix) {
+	console.warn('THREE.Matrix3: .getInverse() has been removed. Use matrixInv.copy( matrix ).invert(); instead.');
+	return this.copy(matrix).invert();
+};
+
+//
+
+Matrix4.prototype.extractPosition = function (m) {
+	console.warn('THREE.Matrix4: .extractPosition() has been renamed to .copyPosition().');
+	return this.copyPosition(m);
+};
+
+Matrix4.prototype.flattenToArrayOffset = function (array, offset) {
+	console.warn('THREE.Matrix4: .flattenToArrayOffset() has been deprecated. Use .toArray() instead.');
+	return this.toArray(array, offset);
+};
+
+Matrix4.prototype.getPosition = function () {
+	console.warn('THREE.Matrix4: .getPosition() has been removed. Use Vector3.setFromMatrixPosition( matrix ) instead.');
+	return new Vector3().setFromMatrixColumn(this, 3);
+};
+
+Matrix4.prototype.setRotationFromQuaternion = function (q) {
+	console.warn('THREE.Matrix4: .setRotationFromQuaternion() has been renamed to .makeRotationFromQuaternion().');
+	return this.makeRotationFromQuaternion(q);
+};
+
+Matrix4.prototype.multiplyToArray = function () {
+	console.warn('THREE.Matrix4: .multiplyToArray() has been removed.');
+};
+
+Matrix4.prototype.multiplyVector3 = function (vector) {
+	console.warn('THREE.Matrix4: .multiplyVector3() has been removed. Use vector.applyMatrix4( matrix ) instead.');
+	return vector.applyMatrix4(this);
+};
+
+Matrix4.prototype.multiplyVector4 = function (vector) {
+	console.warn('THREE.Matrix4: .multiplyVector4() has been removed. Use vector.applyMatrix4( matrix ) instead.');
+	return vector.applyMatrix4(this);
+};
+
+Matrix4.prototype.multiplyVector3Array = function (/* a */) {
+	console.error('THREE.Matrix4: .multiplyVector3Array() has been removed.');
+};
+
+Matrix4.prototype.rotateAxis = function (v) {
+	console.warn('THREE.Matrix4: .rotateAxis() has been removed. Use Vector3.transformDirection( matrix ) instead.');
+	v.transformDirection(this);
+};
+
+Matrix4.prototype.crossVector = function (vector) {
+	console.warn('THREE.Matrix4: .crossVector() has been removed. Use vector.applyMatrix4( matrix ) instead.');
+	return vector.applyMatrix4(this);
+};
+
+Matrix4.prototype.translate = function () {
+	console.error('THREE.Matrix4: .translate() has been removed.');
+};
+
+Matrix4.prototype.rotateX = function () {
+	console.error('THREE.Matrix4: .rotateX() has been removed.');
+};
+
+Matrix4.prototype.rotateY = function () {
+	console.error('THREE.Matrix4: .rotateY() has been removed.');
+};
+
+Matrix4.prototype.rotateZ = function () {
+	console.error('THREE.Matrix4: .rotateZ() has been removed.');
+};
+
+Matrix4.prototype.rotateByAxis = function () {
+	console.error('THREE.Matrix4: .rotateByAxis() has been removed.');
+};
+
+Matrix4.prototype.applyToBufferAttribute = function (attribute) {
+	console.warn('THREE.Matrix4: .applyToBufferAttribute() has been removed. Use attribute.applyMatrix4( matrix ) instead.');
+	return attribute.applyMatrix4(this);
+};
+
+Matrix4.prototype.applyToVector3Array = function (/* array, offset, length */) {
+	console.error('THREE.Matrix4: .applyToVector3Array() has been removed.');
+};
+
+Matrix4.prototype.makeFrustum = function (left, right, bottom, top, near, far) {
+	console.warn('THREE.Matrix4: .makeFrustum() has been removed. Use .makePerspective( left, right, top, bottom, near, far ) instead.');
+	return this.makePerspective(left, right, top, bottom, near, far);
+};
+
+Matrix4.prototype.getInverse = function (matrix) {
+	console.warn('THREE.Matrix4: .getInverse() has been removed. Use matrixInv.copy( matrix ).invert(); instead.');
+	return this.copy(matrix).invert();
+};
+
+//
+
+Plane.prototype.isIntersectionLine = function (line) {
+	console.warn('THREE.Plane: .isIntersectionLine() has been renamed to .intersectsLine().');
+	return this.intersectsLine(line);
+};
+
+//
+
+Quaternion.prototype.multiplyVector3 = function (vector) {
+	console.warn('THREE.Quaternion: .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead.');
+	return vector.applyQuaternion(this);
+};
+
+Quaternion.prototype.inverse = function () {
+	console.warn('THREE.Quaternion: .inverse() has been renamed to invert().');
+	return this.invert();
+};
+
+//
+
+Ray.prototype.isIntersectionBox = function (box) {
+	console.warn('THREE.Ray: .isIntersectionBox() has been renamed to .intersectsBox().');
+	return this.intersectsBox(box);
+};
+
+Ray.prototype.isIntersectionPlane = function (plane) {
+	console.warn('THREE.Ray: .isIntersectionPlane() has been renamed to .intersectsPlane().');
+	return this.intersectsPlane(plane);
+};
+
+Ray.prototype.isIntersectionSphere = function (sphere) {
+	console.warn('THREE.Ray: .isIntersectionSphere() has been renamed to .intersectsSphere().');
+	return this.intersectsSphere(sphere);
+};
+
+//
+
+Triangle.prototype.area = function () {
+	console.warn('THREE.Triangle: .area() has been renamed to .getArea().');
+	return this.getArea();
+};
+
+Triangle.prototype.barycoordFromPoint = function (point, target) {
+	console.warn('THREE.Triangle: .barycoordFromPoint() has been renamed to .getBarycoord().');
+	return this.getBarycoord(point, target);
+};
+
+Triangle.prototype.midpoint = function (target) {
+	console.warn('THREE.Triangle: .midpoint() has been renamed to .getMidpoint().');
+	return this.getMidpoint(target);
+};
+
+Triangle.prototypenormal = function (target) {
+	console.warn('THREE.Triangle: .normal() has been renamed to .getNormal().');
+	return this.getNormal(target);
+};
+
+Triangle.prototype.plane = function (target) {
+	console.warn('THREE.Triangle: .plane() has been renamed to .getPlane().');
+	return this.getPlane(target);
+};
+
+Triangle.barycoordFromPoint = function (point, a, b, c, target) {
+	console.warn('THREE.Triangle: .barycoordFromPoint() has been renamed to .getBarycoord().');
+	return Triangle.getBarycoord(point, a, b, c, target);
+};
+
+Triangle.normal = function (a, b, c, target) {
+	console.warn('THREE.Triangle: .normal() has been renamed to .getNormal().');
+	return Triangle.getNormal(a, b, c, target);
+};
+
+//
+
+Shape.prototype.extractAllPoints = function (divisions) {
+	console.warn('THREE.Shape: .extractAllPoints() has been removed. Use .extractPoints() instead.');
+	return this.extractPoints(divisions);
+};
+
+Shape.prototype.extrude = function (options) {
+	console.warn('THREE.Shape: .extrude() has been removed. Use ExtrudeGeometry() instead.');
+	return new ExtrudeGeometry(this, options);
+};
+
+Shape.prototype.makeGeometry = function (options) {
+	console.warn('THREE.Shape: .makeGeometry() has been removed. Use ShapeGeometry() instead.');
+	return new ShapeGeometry(this, options);
+};
+
+//
+
+Vector2.prototype.fromAttribute = function (attribute, index, offset) {
+	console.warn('THREE.Vector2: .fromAttribute() has been renamed to .fromBufferAttribute().');
+	return this.fromBufferAttribute(attribute, index, offset);
+};
+
+Vector2.prototype.distanceToManhattan = function (v) {
+	console.warn('THREE.Vector2: .distanceToManhattan() has been renamed to .manhattanDistanceTo().');
+	return this.manhattanDistanceTo(v);
+};
+
+Vector2.prototype.lengthManhattan = function () {
+	console.warn('THREE.Vector2: .lengthManhattan() has been renamed to .manhattanLength().');
+	return this.manhattanLength();
+};
+
+//
+
+Vector3.prototype.setEulerFromRotationMatrix = function () {
+	console.error('THREE.Vector3: .setEulerFromRotationMatrix() has been removed. Use Euler.setFromRotationMatrix() instead.');
+};
+
+Vector3.prototype.setEulerFromQuaternion = function () {
+	console.error('THREE.Vector3: .setEulerFromQuaternion() has been removed. Use Euler.setFromQuaternion() instead.');
+};
+
+Vector3.prototype.getPositionFromMatrix = function (m) {
+	console.warn('THREE.Vector3: .getPositionFromMatrix() has been renamed to .setFromMatrixPosition().');
+	return this.setFromMatrixPosition(m);
+};
+
+Vector3.prototype.getScaleFromMatrix = function (m) {
+	console.warn('THREE.Vector3: .getScaleFromMatrix() has been renamed to .setFromMatrixScale().');
+	return this.setFromMatrixScale(m);
+};
+
+Vector3.prototype.getColumnFromMatrix = function (index, matrix) {
+	console.warn('THREE.Vector3: .getColumnFromMatrix() has been renamed to .setFromMatrixColumn().');
+	return this.setFromMatrixColumn(matrix, index);
+};
+
+Vector3.prototype.applyProjection = function (m) {
+	console.warn('THREE.Vector3: .applyProjection() has been removed. Use .applyMatrix4( m ) instead.');
+	return this.applyMatrix4(m);
+};
+
+Vector3.prototype.fromAttribute = function (attribute, index, offset) {
+	console.warn('THREE.Vector3: .fromAttribute() has been renamed to .fromBufferAttribute().');
+	return this.fromBufferAttribute(attribute, index, offset);
+};
+
+Vector3.prototype.distanceToManhattan = function (v) {
+	console.warn('THREE.Vector3: .distanceToManhattan() has been renamed to .manhattanDistanceTo().');
+	return this.manhattanDistanceTo(v);
+};
+
+Vector3.prototype.lengthManhattan = function () {
+	console.warn('THREE.Vector3: .lengthManhattan() has been renamed to .manhattanLength().');
+	return this.manhattanLength();
+};
+
+//
+
+Vector4.prototype.fromAttribute = function (attribute, index, offset) {
+	console.warn('THREE.Vector4: .fromAttribute() has been renamed to .fromBufferAttribute().');
+	return this.fromBufferAttribute(attribute, index, offset);
+};
+
+Vector4.prototype.lengthManhattan = function () {
+	console.warn('THREE.Vector4: .lengthManhattan() has been renamed to .manhattanLength().');
+	return this.manhattanLength();
+};
+
+//
+
+Object3D.prototype.getChildByName = function (name) {
+	console.warn('THREE.Object3D: .getChildByName() has been renamed to .getObjectByName().');
+	return this.getObjectByName(name);
+};
+
+Object3D.prototype.renderDepth = function () {
+	console.warn('THREE.Object3D: .renderDepth has been removed. Use .renderOrder, instead.');
+};
+
+Object3D.prototype.translate = function (distance, axis) {
+	console.warn('THREE.Object3D: .translate() has been removed. Use .translateOnAxis( axis, distance ) instead.');
+	return this.translateOnAxis(axis, distance);
+};
+
+Object3D.prototype.getWorldRotation = function () {
+	console.error('THREE.Object3D: .getWorldRotation() has been removed. Use THREE.Object3D.getWorldQuaternion( target ) instead.');
+};
+
+Object3D.prototype.applyMatrix = function (matrix) {
+	console.warn('THREE.Object3D: .applyMatrix() has been renamed to .applyMatrix4().');
+	return this.applyMatrix4(matrix);
+};
+
+Object.defineProperties(Object3D.prototype, {
+	eulerOrder: {
+		get: function () {
+			console.warn('THREE.Object3D: .eulerOrder is now .rotation.order.');
+			return this.rotation.order;
+		},
+		set: function (value) {
+			console.warn('THREE.Object3D: .eulerOrder is now .rotation.order.');
+			this.rotation.order = value;
+		},
+	},
+	useQuaternion: {
+		get: function () {
+			console.warn('THREE.Object3D: .useQuaternion has been removed. The library now uses quaternions by default.');
+		},
+		set: function () {
+			console.warn('THREE.Object3D: .useQuaternion has been removed. The library now uses quaternions by default.');
+		},
+	},
+});
+
+Mesh.prototype.setDrawMode = function () {
+	console.error(
+		'THREE.Mesh: .setDrawMode() has been removed. The renderer now always assumes THREE.TrianglesDrawMode. Transform your geometry via BufferGeometryUtils.toTrianglesDrawMode() if necessary.'
+	);
+};
+
+Object.defineProperties(Mesh.prototype, {
+	drawMode: {
+		get: function () {
+			console.error('THREE.Mesh: .drawMode has been removed. The renderer now always assumes THREE.TrianglesDrawMode.');
+			return TrianglesDrawMode;
+		},
+		set: function () {
+			console.error(
+				'THREE.Mesh: .drawMode has been removed. The renderer now always assumes THREE.TrianglesDrawMode. Transform your geometry via BufferGeometryUtils.toTrianglesDrawMode() if necessary.'
+			);
+		},
+	},
+});
+
+SkinnedMesh.prototype.initBones = function () {
+	console.error('THREE.SkinnedMesh: initBones() has been removed.');
+};
+
+//
+
+PerspectiveCamera.prototype.setLens = function (focalLength, filmGauge) {
+	console.warn('THREE.PerspectiveCamera.setLens is deprecated. ' + 'Use .setFocalLength and .filmGauge for a photographic setup.');
+
+	if (filmGauge !== undefined) this.filmGauge = filmGauge;
+	this.setFocalLength(focalLength);
+};
+
+//
+
+Object.defineProperties(Light.prototype, {
+	onlyShadow: {
+		set: function () {
+			console.warn('THREE.Light: .onlyShadow has been removed.');
+		},
+	},
+	shadowCameraFov: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowCameraFov is now .shadow.camera.fov.');
+			this.shadow.camera.fov = value;
+		},
+	},
+	shadowCameraLeft: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowCameraLeft is now .shadow.camera.left.');
+			this.shadow.camera.left = value;
+		},
+	},
+	shadowCameraRight: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowCameraRight is now .shadow.camera.right.');
+			this.shadow.camera.right = value;
+		},
+	},
+	shadowCameraTop: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowCameraTop is now .shadow.camera.top.');
+			this.shadow.camera.top = value;
+		},
+	},
+	shadowCameraBottom: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowCameraBottom is now .shadow.camera.bottom.');
+			this.shadow.camera.bottom = value;
+		},
+	},
+	shadowCameraNear: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowCameraNear is now .shadow.camera.near.');
+			this.shadow.camera.near = value;
+		},
+	},
+	shadowCameraFar: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowCameraFar is now .shadow.camera.far.');
+			this.shadow.camera.far = value;
+		},
+	},
+	shadowCameraVisible: {
+		set: function () {
+			console.warn('THREE.Light: .shadowCameraVisible has been removed. Use new THREE.CameraHelper( light.shadow.camera ) instead.');
+		},
+	},
+	shadowBias: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowBias is now .shadow.bias.');
+			this.shadow.bias = value;
+		},
+	},
+	shadowDarkness: {
+		set: function () {
+			console.warn('THREE.Light: .shadowDarkness has been removed.');
+		},
+	},
+	shadowMapWidth: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowMapWidth is now .shadow.mapSize.width.');
+			this.shadow.mapSize.width = value;
+		},
+	},
+	shadowMapHeight: {
+		set: function (value) {
+			console.warn('THREE.Light: .shadowMapHeight is now .shadow.mapSize.height.');
+			this.shadow.mapSize.height = value;
+		},
+	},
+});
+
+//
+
+Object.defineProperties(BufferAttribute.prototype, {
+	length: {
+		get: function () {
+			console.warn('THREE.BufferAttribute: .length has been deprecated. Use .count instead.');
+			return this.array.length;
+		},
+	},
+	dynamic: {
+		get: function () {
+			console.warn('THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead.');
+			return this.usage === DynamicDrawUsage;
+		},
+		set: function (/* value */) {
+			console.warn('THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead.');
+			this.setUsage(DynamicDrawUsage);
+		},
+	},
+});
+
+BufferAttribute.prototype.setDynamic = function (value) {
+	console.warn('THREE.BufferAttribute: .setDynamic() has been deprecated. Use .setUsage() instead.');
+	this.setUsage(value === true ? DynamicDrawUsage : StaticDrawUsage);
+	return this;
+};
+
+(BufferAttribute.prototype.copyIndicesArray = function (/* indices */) {
+	console.error('THREE.BufferAttribute: .copyIndicesArray() has been removed.');
+}),
+	(BufferAttribute.prototype.setArray = function (/* array */) {
+		console.error('THREE.BufferAttribute: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers');
+	});
+
+//
+
+BufferGeometry.prototype.addIndex = function (index) {
+	console.warn('THREE.BufferGeometry: .addIndex() has been renamed to .setIndex().');
+	this.setIndex(index);
+};
+
+BufferGeometry.prototype.addAttribute = function (name, attribute) {
+	console.warn('THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute().');
+
+	if (!(attribute && attribute.isBufferAttribute) && !(attribute && attribute.isInterleavedBufferAttribute)) {
+		console.warn('THREE.BufferGeometry: .addAttribute() now expects ( name, attribute ).');
+
+		return this.setAttribute(name, new BufferAttribute(arguments[1], arguments[2]));
+	}
+
+	if (name === 'index') {
+		console.warn('THREE.BufferGeometry.addAttribute: Use .setIndex() for index attribute.');
+		this.setIndex(attribute);
+
+		return this;
+	}
+
+	return this.setAttribute(name, attribute);
+};
+
+BufferGeometry.prototype.addDrawCall = function (start, count, indexOffset) {
+	if (indexOffset !== undefined) {
+		console.warn('THREE.BufferGeometry: .addDrawCall() no longer supports indexOffset.');
+	}
+
+	console.warn('THREE.BufferGeometry: .addDrawCall() is now .addGroup().');
+	this.addGroup(start, count);
+};
+
+BufferGeometry.prototype.clearDrawCalls = function () {
+	console.warn('THREE.BufferGeometry: .clearDrawCalls() is now .clearGroups().');
+	this.clearGroups();
+};
+
+BufferGeometry.prototype.computeOffsets = function () {
+	console.warn('THREE.BufferGeometry: .computeOffsets() has been removed.');
+};
+
+BufferGeometry.prototype.removeAttribute = function (name) {
+	console.warn('THREE.BufferGeometry: .removeAttribute() has been renamed to .deleteAttribute().');
+
+	return this.deleteAttribute(name);
+};
+
+BufferGeometry.prototype.applyMatrix = function (matrix) {
+	console.warn('THREE.BufferGeometry: .applyMatrix() has been renamed to .applyMatrix4().');
+	return this.applyMatrix4(matrix);
+};
+
+Object.defineProperties(BufferGeometry.prototype, {
+	drawcalls: {
+		get: function () {
+			console.error('THREE.BufferGeometry: .drawcalls has been renamed to .groups.');
+			return this.groups;
+		},
+	},
+	offsets: {
+		get: function () {
+			console.warn('THREE.BufferGeometry: .offsets has been renamed to .groups.');
+			return this.groups;
+		},
+	},
+});
+
+InterleavedBuffer.prototype.setDynamic = function (value) {
+	console.warn('THREE.InterleavedBuffer: .setDynamic() has been deprecated. Use .setUsage() instead.');
+	this.setUsage(value === true ? DynamicDrawUsage : StaticDrawUsage);
+	return this;
+};
+
+InterleavedBuffer.prototype.setArray = function (/* array */) {
+	console.error('THREE.InterleavedBuffer: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers');
+};
+
+//
+
+ExtrudeGeometry.prototype.getArrays = function () {
+	console.error('THREE.ExtrudeGeometry: .getArrays() has been removed.');
+};
+
+ExtrudeGeometry.prototype.addShapeList = function () {
+	console.error('THREE.ExtrudeGeometry: .addShapeList() has been removed.');
+};
+
+ExtrudeGeometry.prototype.addShape = function () {
+	console.error('THREE.ExtrudeGeometry: .addShape() has been removed.');
+};
+
+//
+
+Scene.prototype.dispose = function () {
+	console.error('THREE.Scene: .dispose() has been removed.');
+};
+
+//
+
+Uniform.prototype.onUpdate = function () {
+	console.warn('THREE.Uniform: .onUpdate() has been removed. Use object.onBeforeRender() instead.');
+	return this;
+};
+
+//
+
+Object.defineProperties(Material.prototype, {
+	wrapAround: {
+		get: function () {
+			console.warn('THREE.Material: .wrapAround has been removed.');
+		},
+		set: function () {
+			console.warn('THREE.Material: .wrapAround has been removed.');
+		},
+	},
+
+	overdraw: {
+		get: function () {
+			console.warn('THREE.Material: .overdraw has been removed.');
+		},
+		set: function () {
+			console.warn('THREE.Material: .overdraw has been removed.');
+		},
+	},
+
+	wrapRGB: {
+		get: function () {
+			console.warn('THREE.Material: .wrapRGB has been removed.');
+			return new Color();
+		},
+	},
+
+	shading: {
+		get: function () {
+			console.error('THREE.' + this.type + ': .shading has been removed. Use the boolean .flatShading instead.');
+		},
+		set: function (value) {
+			console.warn('THREE.' + this.type + ': .shading has been removed. Use the boolean .flatShading instead.');
+			this.flatShading = value === FlatShading;
+		},
+	},
+
+	stencilMask: {
+		get: function () {
+			console.warn('THREE.' + this.type + ': .stencilMask has been removed. Use .stencilFuncMask instead.');
+			return this.stencilFuncMask;
+		},
+		set: function (value) {
+			console.warn('THREE.' + this.type + ': .stencilMask has been removed. Use .stencilFuncMask instead.');
+			this.stencilFuncMask = value;
+		},
+	},
+
+	vertexTangents: {
+		get: function () {
+			console.warn('THREE.' + this.type + ': .vertexTangents has been removed.');
+		},
+		set: function () {
+			console.warn('THREE.' + this.type + ': .vertexTangents has been removed.');
+		},
+	},
+});
+
+Object.defineProperties(ShaderMaterial.prototype, {
+	derivatives: {
+		get: function () {
+			console.warn('THREE.ShaderMaterial: .derivatives has been moved to .extensions.derivatives.');
+			return this.extensions.derivatives;
+		},
+		set: function (value) {
+			console.warn('THREE. ShaderMaterial: .derivatives has been moved to .extensions.derivatives.');
+			this.extensions.derivatives = value;
+		},
+	},
+});
+
+//
+
+WebGLRenderer.prototype.clearTarget = function (renderTarget, color, depth, stencil) {
+	console.warn('THREE.WebGLRenderer: .clearTarget() has been deprecated. Use .setRenderTarget() and .clear() instead.');
+	this.setRenderTarget(renderTarget);
+	this.clear(color, depth, stencil);
+};
+
+WebGLRenderer.prototype.animate = function (callback) {
+	console.warn('THREE.WebGLRenderer: .animate() is now .setAnimationLoop().');
+	this.setAnimationLoop(callback);
+};
+
+WebGLRenderer.prototype.getCurrentRenderTarget = function () {
+	console.warn('THREE.WebGLRenderer: .getCurrentRenderTarget() is now .getRenderTarget().');
+	return this.getRenderTarget();
+};
+
+WebGLRenderer.prototype.getMaxAnisotropy = function () {
+	console.warn('THREE.WebGLRenderer: .getMaxAnisotropy() is now .capabilities.getMaxAnisotropy().');
+	return this.capabilities.getMaxAnisotropy();
+};
+
+WebGLRenderer.prototype.getPrecision = function () {
+	console.warn('THREE.WebGLRenderer: .getPrecision() is now .capabilities.precision.');
+	return this.capabilities.precision;
+};
+
+WebGLRenderer.prototype.resetGLState = function () {
+	console.warn('THREE.WebGLRenderer: .resetGLState() is now .state.reset().');
+	return this.state.reset();
+};
+
+WebGLRenderer.prototype.supportsFloatTextures = function () {
+	console.warn("THREE.WebGLRenderer: .supportsFloatTextures() is now .extensions.get( 'OES_texture_float' ).");
+	return this.extensions.get('OES_texture_float');
+};
+
+WebGLRenderer.prototype.supportsHalfFloatTextures = function () {
+	console.warn("THREE.WebGLRenderer: .supportsHalfFloatTextures() is now .extensions.get( 'OES_texture_half_float' ).");
+	return this.extensions.get('OES_texture_half_float');
+};
+
+WebGLRenderer.prototype.supportsStandardDerivatives = function () {
+	console.warn("THREE.WebGLRenderer: .supportsStandardDerivatives() is now .extensions.get( 'OES_standard_derivatives' ).");
+	return this.extensions.get('OES_standard_derivatives');
+};
+
+WebGLRenderer.prototype.supportsCompressedTextureS3TC = function () {
+	console.warn("THREE.WebGLRenderer: .supportsCompressedTextureS3TC() is now .extensions.get( 'WEBGL_compressed_texture_s3tc' ).");
+	return this.extensions.get('WEBGL_compressed_texture_s3tc');
+};
+
+WebGLRenderer.prototype.supportsCompressedTexturePVRTC = function () {
+	console.warn("THREE.WebGLRenderer: .supportsCompressedTexturePVRTC() is now .extensions.get( 'WEBGL_compressed_texture_pvrtc' ).");
+	return this.extensions.get('WEBGL_compressed_texture_pvrtc');
+};
+
+WebGLRenderer.prototype.supportsBlendMinMax = function () {
+	console.warn("THREE.WebGLRenderer: .supportsBlendMinMax() is now .extensions.get( 'EXT_blend_minmax' ).");
+	return this.extensions.get('EXT_blend_minmax');
+};
+
+WebGLRenderer.prototype.supportsVertexTextures = function () {
+	console.warn('THREE.WebGLRenderer: .supportsVertexTextures() is now .capabilities.vertexTextures.');
+	return this.capabilities.vertexTextures;
+};
+
+WebGLRenderer.prototype.supportsInstancedArrays = function () {
+	console.warn("THREE.WebGLRenderer: .supportsInstancedArrays() is now .extensions.get( 'ANGLE_instanced_arrays' ).");
+	return this.extensions.get('ANGLE_instanced_arrays');
+};
+
+WebGLRenderer.prototype.enableScissorTest = function (boolean) {
+	console.warn('THREE.WebGLRenderer: .enableScissorTest() is now .setScissorTest().');
+	this.setScissorTest(boolean);
+};
+
+WebGLRenderer.prototype.initMaterial = function () {
+	console.warn('THREE.WebGLRenderer: .initMaterial() has been removed.');
+};
+
+WebGLRenderer.prototype.addPrePlugin = function () {
+	console.warn('THREE.WebGLRenderer: .addPrePlugin() has been removed.');
+};
+
+WebGLRenderer.prototype.addPostPlugin = function () {
+	console.warn('THREE.WebGLRenderer: .addPostPlugin() has been removed.');
+};
+
+WebGLRenderer.prototype.updateShadowMap = function () {
+	console.warn('THREE.WebGLRenderer: .updateShadowMap() has been removed.');
+};
+
+WebGLRenderer.prototype.setFaceCulling = function () {
+	console.warn('THREE.WebGLRenderer: .setFaceCulling() has been removed.');
+};
+
+WebGLRenderer.prototype.allocTextureUnit = function () {
+	console.warn('THREE.WebGLRenderer: .allocTextureUnit() has been removed.');
+};
+
+WebGLRenderer.prototype.setTexture = function () {
+	console.warn('THREE.WebGLRenderer: .setTexture() has been removed.');
+};
+
+WebGLRenderer.prototype.setTexture2D = function () {
+	console.warn('THREE.WebGLRenderer: .setTexture2D() has been removed.');
+};
+
+WebGLRenderer.prototype.setTextureCube = function () {
+	console.warn('THREE.WebGLRenderer: .setTextureCube() has been removed.');
+};
+
+WebGLRenderer.prototype.getActiveMipMapLevel = function () {
+	console.warn('THREE.WebGLRenderer: .getActiveMipMapLevel() is now .getActiveMipmapLevel().');
+	return this.getActiveMipmapLevel();
+};
+
+Object.defineProperties(WebGLRenderer.prototype, {
+	shadowMapEnabled: {
+		get: function () {
+			return this.shadowMap.enabled;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderer: .shadowMapEnabled is now .shadowMap.enabled.');
+			this.shadowMap.enabled = value;
+		},
+	},
+	shadowMapType: {
+		get: function () {
+			return this.shadowMap.type;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderer: .shadowMapType is now .shadowMap.type.');
+			this.shadowMap.type = value;
+		},
+	},
+	shadowMapCullFace: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead.');
+			return undefined;
+		},
+		set: function (/* value */) {
+			console.warn('THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead.');
+		},
+	},
+	context: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .context has been removed. Use .getContext() instead.');
+			return this.getContext();
+		},
+	},
+	vr: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .vr has been renamed to .xr');
+			return this.xr;
+		},
+	},
+	gammaInput: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .gammaInput has been removed. Set the encoding for textures via Texture.encoding instead.');
+			return false;
+		},
+		set: function () {
+			console.warn('THREE.WebGLRenderer: .gammaInput has been removed. Set the encoding for textures via Texture.encoding instead.');
+		},
+	},
+	gammaOutput: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead.');
+			return false;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead.');
+			this.outputEncoding = value === true ? sRGBEncoding : LinearEncoding;
+		},
+	},
+	toneMappingWhitePoint: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .toneMappingWhitePoint has been removed.');
+			return 1.0;
+		},
+		set: function () {
+			console.warn('THREE.WebGLRenderer: .toneMappingWhitePoint has been removed.');
+		},
+	},
+	gammaFactor: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .gammaFactor has been removed.');
+			return 2;
+		},
+		set: function () {
+			console.warn('THREE.WebGLRenderer: .gammaFactor has been removed.');
+		},
+	},
+});
+
+Object.defineProperties(WebGLShadowMap.prototype, {
+	cullFace: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead.');
+			return undefined;
+		},
+		set: function (/* cullFace */) {
+			console.warn('THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead.');
+		},
+	},
+	renderReverseSided: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead.');
+			return undefined;
+		},
+		set: function () {
+			console.warn('THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead.');
+		},
+	},
+	renderSingleSided: {
+		get: function () {
+			console.warn('THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead.');
+			return undefined;
+		},
+		set: function () {
+			console.warn('THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead.');
+		},
+	},
+});
+
+export function WebGLRenderTargetCube(width, height, options) {
+	console.warn('THREE.WebGLRenderTargetCube( width, height, options ) is now WebGLCubeRenderTarget( size, options ).');
+	return new WebGLCubeRenderTarget(width, options);
+}
+
+//
+
+Object.defineProperties(WebGLRenderTarget.prototype, {
+	wrapS: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .wrapS is now .texture.wrapS.');
+			return this.texture.wrapS;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .wrapS is now .texture.wrapS.');
+			this.texture.wrapS = value;
+		},
+	},
+	wrapT: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .wrapT is now .texture.wrapT.');
+			return this.texture.wrapT;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .wrapT is now .texture.wrapT.');
+			this.texture.wrapT = value;
+		},
+	},
+	magFilter: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .magFilter is now .texture.magFilter.');
+			return this.texture.magFilter;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .magFilter is now .texture.magFilter.');
+			this.texture.magFilter = value;
+		},
+	},
+	minFilter: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .minFilter is now .texture.minFilter.');
+			return this.texture.minFilter;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .minFilter is now .texture.minFilter.');
+			this.texture.minFilter = value;
+		},
+	},
+	anisotropy: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .anisotropy is now .texture.anisotropy.');
+			return this.texture.anisotropy;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .anisotropy is now .texture.anisotropy.');
+			this.texture.anisotropy = value;
+		},
+	},
+	offset: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .offset is now .texture.offset.');
+			return this.texture.offset;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .offset is now .texture.offset.');
+			this.texture.offset = value;
+		},
+	},
+	repeat: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .repeat is now .texture.repeat.');
+			return this.texture.repeat;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .repeat is now .texture.repeat.');
+			this.texture.repeat = value;
+		},
+	},
+	format: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .format is now .texture.format.');
+			return this.texture.format;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .format is now .texture.format.');
+			this.texture.format = value;
+		},
+	},
+	type: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .type is now .texture.type.');
+			return this.texture.type;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .type is now .texture.type.');
+			this.texture.type = value;
+		},
+	},
+	generateMipmaps: {
+		get: function () {
+			console.warn('THREE.WebGLRenderTarget: .generateMipmaps is now .texture.generateMipmaps.');
+			return this.texture.generateMipmaps;
+		},
+		set: function (value) {
+			console.warn('THREE.WebGLRenderTarget: .generateMipmaps is now .texture.generateMipmaps.');
+			this.texture.generateMipmaps = value;
+		},
+	},
+});
+
+//
+
+Audio.prototype.load = function (file) {
+	console.warn('THREE.Audio: .load has been deprecated. Use THREE.AudioLoader instead.');
+	const scope = this;
+	const audioLoader = new AudioLoader();
+	audioLoader.load(file, function (buffer) {
+		scope.setBuffer(buffer);
+	});
+	return this;
+};
+
+AudioAnalyser.prototype.getData = function () {
+	console.warn('THREE.AudioAnalyser: .getData() is now .getFrequencyData().');
+	return this.getFrequencyData();
+};
+
+//
+
+CubeCamera.prototype.updateCubeMap = function (renderer, scene) {
+	console.warn('THREE.CubeCamera: .updateCubeMap() is now .update().');
+	return this.update(renderer, scene);
+};
+
+CubeCamera.prototype.clear = function (renderer, color, depth, stencil) {
+	console.warn('THREE.CubeCamera: .clear() is now .renderTarget.clear().');
+	return this.renderTarget.clear(renderer, color, depth, stencil);
+};
+
+ImageUtils.crossOrigin = undefined;
+
+ImageUtils.loadTexture = function (url, mapping, onLoad, onError) {
+	console.warn('THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.');
+
+	const loader = new TextureLoader();
+	loader.setCrossOrigin(this.crossOrigin);
+
+	const texture = loader.load(url, onLoad, undefined, onError);
+
+	if (mapping) texture.mapping = mapping;
+
+	return texture;
+};
+
+ImageUtils.loadTextureCube = function (urls, mapping, onLoad, onError) {
+	console.warn('THREE.ImageUtils.loadTextureCube has been deprecated. Use THREE.CubeTextureLoader() instead.');
+
+	const loader = new CubeTextureLoader();
+	loader.setCrossOrigin(this.crossOrigin);
+
+	const texture = loader.load(urls, onLoad, undefined, onError);
+
+	if (mapping) texture.mapping = mapping;
+
+	return texture;
+};
+
+ImageUtils.loadCompressedTexture = function () {
+	console.error('THREE.ImageUtils.loadCompressedTexture has been removed. Use THREE.DDSLoader instead.');
+};
+
+ImageUtils.loadCompressedTextureCube = function () {
+	console.error('THREE.ImageUtils.loadCompressedTextureCube has been removed. Use THREE.DDSLoader instead.');
+};
+
+//
+
+export function CanvasRenderer() {
+	console.error('THREE.CanvasRenderer has been removed');
+}
+
+//
+
+export function JSONLoader() {
+	console.error('THREE.JSONLoader has been removed.');
+}
+
+//
+
+export const SceneUtils = {
+	createMultiMaterialObject: function (/* geometry, materials */) {
+		console.error('THREE.SceneUtils has been moved to /examples/jsm/utils/SceneUtils.js');
+	},
+
+	detach: function (/* child, parent, scene */) {
+		console.error('THREE.SceneUtils has been moved to /examples/jsm/utils/SceneUtils.js');
+	},
+
+	attach: function (/* child, scene, parent */) {
+		console.error('THREE.SceneUtils has been moved to /examples/jsm/utils/SceneUtils.js');
+	},
+};
+
+//
+
+export function LensFlare() {
+	console.error('THREE.LensFlare has been moved to /examples/jsm/objects/Lensflare.js');
+}
+
+//
+
+export function ParametricGeometry() {
+	console.error('THREE.ParametricGeometry has been moved to /examples/jsm/geometries/ParametricGeometry.js');
+	return new BufferGeometry();
+}
+
+export function TextGeometry() {
+	console.error('THREE.TextGeometry has been moved to /examples/jsm/geometries/TextGeometry.js');
+	return new BufferGeometry();
+}
+
+export function FontLoader() {
+	console.error('THREE.FontLoader has been moved to /examples/jsm/loaders/FontLoader.js');
+}
+
+export function Font() {
+	console.error('THREE.Font has been moved to /examples/jsm/loaders/FontLoader.js');
+}
+
+export function ImmediateRenderObject() {
+	console.error('THREE.ImmediateRenderObject has been removed.');
+}

backend/libs/three/Three.d.ts

@@ -0,0 +1,234 @@
+/**
+ * SRC
+ */
+export * from './constants';
+export * from './Three.Legacy';
+export * from './utils';
+/**
+ * Animation
+ */
+export * from './animation/tracks/VectorKeyframeTrack';
+export * from './animation/tracks/StringKeyframeTrack';
+export * from './animation/tracks/QuaternionKeyframeTrack';
+export * from './animation/tracks/NumberKeyframeTrack';
+export * from './animation/tracks/ColorKeyframeTrack';
+export * from './animation/tracks/BooleanKeyframeTrack';
+export * from './animation/PropertyMixer';
+export * from './animation/PropertyBinding';
+export * from './animation/KeyframeTrack';
+export * from './animation/AnimationUtils';
+export * from './animation/AnimationObjectGroup';
+export * from './animation/AnimationMixer';
+export * from './animation/AnimationClip';
+export * from './animation/AnimationAction';
+/**
+ * Audio
+ */
+export * from './audio/AudioListener';
+export * from './audio/PositionalAudio';
+export * from './audio/AudioContext';
+export * from './audio/AudioAnalyser';
+export * from './audio/Audio';
+/**
+ * Cameras
+ */
+export * from './cameras/StereoCamera';
+export * from './cameras/PerspectiveCamera';
+export * from './cameras/OrthographicCamera';
+export * from './cameras/CubeCamera';
+export * from './cameras/ArrayCamera';
+export * from './cameras/Camera';
+/**
+ * Core
+ */
+export * from './core/Uniform';
+export * from './core/InstancedBufferGeometry';
+export * from './core/BufferGeometry';
+export * from './core/InterleavedBufferAttribute';
+export * from './core/InstancedInterleavedBuffer';
+export * from './core/InterleavedBuffer';
+export * from './core/InstancedBufferAttribute';
+export * from './core/GLBufferAttribute';
+export * from './core/BufferAttribute';
+export * from './core/Object3D';
+export * from './core/Raycaster';
+export * from './core/Layers';
+export * from './core/EventDispatcher';
+export * from './core/Clock';
+/**
+ * Extras
+ */
+export * from './extras/curves/Curves';
+export * from './extras/core/Shape';
+export * from './extras/core/Path';
+export * from './extras/core/ShapePath';
+export * from './extras/core/CurvePath';
+export * from './extras/core/Curve';
+export * from './extras/DataUtils';
+export * from './extras/ImageUtils';
+export * from './extras/ShapeUtils';
+export * from './extras/PMREMGenerator';
+/**
+ * Geometries
+ */
+export * from './geometries/Geometries';
+/**
+ * Helpers
+ */
+export * from './helpers/SpotLightHelper';
+export * from './helpers/SkeletonHelper';
+export * from './helpers/PointLightHelper';
+export * from './helpers/HemisphereLightHelper';
+export * from './helpers/GridHelper';
+export * from './helpers/PolarGridHelper';
+export * from './helpers/DirectionalLightHelper';
+export * from './helpers/CameraHelper';
+export * from './helpers/BoxHelper';
+export * from './helpers/Box3Helper';
+export * from './helpers/PlaneHelper';
+export * from './helpers/ArrowHelper';
+export * from './helpers/AxesHelper';
+/**
+ * Lights
+ */
+export * from './lights/SpotLightShadow';
+export * from './lights/SpotLight';
+export * from './lights/PointLight';
+export * from './lights/PointLightShadow';
+export * from './lights/RectAreaLight';
+export * from './lights/HemisphereLight';
+export * from './lights/DirectionalLightShadow';
+export * from './lights/DirectionalLight';
+export * from './lights/AmbientLight';
+export * from './lights/LightShadow';
+export * from './lights/Light';
+export * from './lights/AmbientLightProbe';
+export * from './lights/HemisphereLightProbe';
+export * from './lights/LightProbe';
+/**
+ * Loaders
+ */
+export * from './loaders/AnimationLoader';
+export * from './loaders/CompressedTextureLoader';
+export * from './loaders/DataTextureLoader';
+export * from './loaders/CubeTextureLoader';
+export * from './loaders/TextureLoader';
+export * from './loaders/ObjectLoader';
+export * from './loaders/MaterialLoader';
+export * from './loaders/BufferGeometryLoader';
+export * from './loaders/LoadingManager';
+export * from './loaders/ImageLoader';
+export * from './loaders/ImageBitmapLoader';
+export * from './loaders/FileLoader';
+export * from './loaders/Loader';
+export * from './loaders/LoaderUtils';
+export * from './loaders/Cache';
+export * from './loaders/AudioLoader';
+/**
+ * Materials
+ */
+export * from './materials/Materials';
+/**
+ * Math
+ */
+export * from './math/interpolants/QuaternionLinearInterpolant';
+export * from './math/interpolants/LinearInterpolant';
+export * from './math/interpolants/DiscreteInterpolant';
+export * from './math/interpolants/CubicInterpolant';
+export * from './math/Interpolant';
+export * from './math/Triangle';
+export * from './math/Spherical';
+export * from './math/Cylindrical';
+export * from './math/Plane';
+export * from './math/Frustum';
+export * from './math/Sphere';
+export * from './math/Ray';
+export * from './math/Matrix4';
+export * from './math/Matrix3';
+export * from './math/Box3';
+export * from './math/Box2';
+export * from './math/Line3';
+export * from './math/Euler';
+export * from './math/Vector4';
+export * from './math/Vector3';
+export * from './math/Vector2';
+export * from './math/Quaternion';
+export * from './math/Color';
+export * from './math/SphericalHarmonics3';
+import * as MathUtils from './math/MathUtils';
+export { MathUtils };
+/**
+ * Objects
+ */
+export * from './objects/Sprite';
+export * from './objects/LOD';
+export * from './objects/InstancedMesh';
+export * from './objects/SkinnedMesh';
+export * from './objects/Skeleton';
+export * from './objects/Bone';
+export * from './objects/Mesh';
+export * from './objects/LineSegments';
+export * from './objects/LineLoop';
+export * from './objects/Line';
+export * from './objects/Points';
+export * from './objects/Group';
+/**
+ * Renderers
+ */
+export * from './renderers/WebGLMultisampleRenderTarget';
+export * from './renderers/WebGLCubeRenderTarget';
+export * from './renderers/WebGLMultipleRenderTargets';
+export * from './renderers/WebGLRenderTarget';
+export * from './renderers/WebGLRenderer';
+export * from './renderers/WebGL1Renderer';
+export * from './renderers/WebGL3DRenderTarget';
+export * from './renderers/WebGLArrayRenderTarget';
+export * from './renderers/shaders/ShaderLib';
+export * from './renderers/shaders/UniformsLib';
+export * from './renderers/shaders/UniformsUtils';
+export * from './renderers/shaders/ShaderChunk';
+export * from './renderers/webgl/WebGLBufferRenderer';
+export * from './renderers/webgl/WebGLCapabilities';
+export * from './renderers/webgl/WebGLClipping';
+export * from './renderers/webgl/WebGLCubeUVMaps';
+export * from './renderers/webgl/WebGLExtensions';
+export * from './renderers/webgl/WebGLGeometries';
+export * from './renderers/webgl/WebGLIndexedBufferRenderer';
+export * from './renderers/webgl/WebGLInfo';
+export * from './renderers/webgl/WebGLLights';
+export * from './renderers/webgl/WebGLObjects';
+export * from './renderers/webgl/WebGLProgram';
+export * from './renderers/webgl/WebGLPrograms';
+export * from './renderers/webgl/WebGLProperties';
+export * from './renderers/webgl/WebGLRenderLists';
+export * from './renderers/webgl/WebGLShader';
+export * from './renderers/webgl/WebGLShadowMap';
+export * from './renderers/webgl/WebGLState';
+export * from './renderers/webgl/WebGLTextures';
+export * from './renderers/webgl/WebGLUniforms';
+export * from './renderers/webxr/WebXR';
+export * from './renderers/webxr/WebXRController';
+export * from './renderers/webxr/WebXRManager';
+export { WebGLUtils } from './renderers/webgl/WebGLUtils.js';
+/**
+ * Scenes
+ */
+export * from './scenes/FogExp2';
+export * from './scenes/Fog';
+export * from './scenes/Scene';
+/**
+ * Textures
+ */
+export * from './textures/VideoTexture';
+export * from './textures/DataTexture';
+export * from './textures/DataTexture2DArray';
+export * from './textures/DataTexture3D';
+export * from './textures/CompressedTexture';
+export * from './textures/CubeTexture';
+export * from './textures/Data3DTexture';
+export * from './textures/DataArrayTexture';
+export * from './textures/CanvasTexture';
+export * from './textures/DepthTexture';
+export * from './textures/FramebufferTexture';
+export * from './textures/Source';
+export * from './textures/Texture';

backend/libs/three/Three.js

@@ -0,0 +1,172 @@
+import { REVISION } from './constants.js';
+
+export { WebGLMultipleRenderTargets } from './renderers/WebGLMultipleRenderTargets.js';
+export { WebGLMultisampleRenderTarget } from './renderers/WebGLMultisampleRenderTarget.js';
+export { WebGLCubeRenderTarget } from './renderers/WebGLCubeRenderTarget.js';
+export { WebGLRenderTarget } from './renderers/WebGLRenderTarget.js';
+export { WebGLRenderer } from './renderers/WebGLRenderer.js';
+export { WebGL1Renderer } from './renderers/WebGL1Renderer.js';
+export { ShaderLib } from './renderers/shaders/ShaderLib.js';
+export { UniformsLib } from './renderers/shaders/UniformsLib.js';
+export { UniformsUtils } from './renderers/shaders/UniformsUtils.js';
+export { ShaderChunk } from './renderers/shaders/ShaderChunk.js';
+export { FogExp2 } from './scenes/FogExp2.js';
+export { Fog } from './scenes/Fog.js';
+export { Scene } from './scenes/Scene.js';
+export { Sprite } from './objects/Sprite.js';
+export { LOD } from './objects/LOD.js';
+export { SkinnedMesh } from './objects/SkinnedMesh.js';
+export { Skeleton } from './objects/Skeleton.js';
+export { Bone } from './objects/Bone.js';
+export { Mesh } from './objects/Mesh.js';
+export { InstancedMesh } from './objects/InstancedMesh.js';
+export { LineSegments } from './objects/LineSegments.js';
+export { LineLoop } from './objects/LineLoop.js';
+export { Line } from './objects/Line.js';
+export { Points } from './objects/Points.js';
+export { Group } from './objects/Group.js';
+export { VideoTexture } from './textures/VideoTexture.js';
+export { FramebufferTexture } from './textures/FramebufferTexture.js';
+export { DataTexture } from './textures/DataTexture.js';
+export { DataTexture2DArray } from './textures/DataTexture2DArray.js';
+export { DataTexture3D } from './textures/DataTexture3D.js';
+export { CompressedTexture } from './textures/CompressedTexture.js';
+export { CubeTexture } from './textures/CubeTexture.js';
+export { CanvasTexture } from './textures/CanvasTexture.js';
+export { DepthTexture } from './textures/DepthTexture.js';
+export { Texture } from './textures/Texture.js';
+export * from './geometries/Geometries.js';
+export * from './materials/Materials.js';
+export { AnimationLoader } from './loaders/AnimationLoader.js';
+export { CompressedTextureLoader } from './loaders/CompressedTextureLoader.js';
+export { CubeTextureLoader } from './loaders/CubeTextureLoader.js';
+export { DataTextureLoader } from './loaders/DataTextureLoader.js';
+export { TextureLoader } from './loaders/TextureLoader.js';
+export { ObjectLoader } from './loaders/ObjectLoader.js';
+export { MaterialLoader } from './loaders/MaterialLoader.js';
+export { BufferGeometryLoader } from './loaders/BufferGeometryLoader.js';
+export { DefaultLoadingManager, LoadingManager } from './loaders/LoadingManager.js';
+export { ImageLoader } from './loaders/ImageLoader.js';
+export { ImageBitmapLoader } from './loaders/ImageBitmapLoader.js';
+export { FileLoader } from './loaders/FileLoader.js';
+export { Loader } from './loaders/Loader.js';
+export { LoaderUtils } from './loaders/LoaderUtils.js';
+export { Cache } from './loaders/Cache.js';
+export { AudioLoader } from './loaders/AudioLoader.js';
+export { SpotLight } from './lights/SpotLight.js';
+export { PointLight } from './lights/PointLight.js';
+export { RectAreaLight } from './lights/RectAreaLight.js';
+export { HemisphereLight } from './lights/HemisphereLight.js';
+export { HemisphereLightProbe } from './lights/HemisphereLightProbe.js';
+export { DirectionalLight } from './lights/DirectionalLight.js';
+export { AmbientLight } from './lights/AmbientLight.js';
+export { AmbientLightProbe } from './lights/AmbientLightProbe.js';
+export { Light } from './lights/Light.js';
+export { LightProbe } from './lights/LightProbe.js';
+export { StereoCamera } from './cameras/StereoCamera.js';
+export { PerspectiveCamera } from './cameras/PerspectiveCamera.js';
+export { OrthographicCamera } from './cameras/OrthographicCamera.js';
+export { CubeCamera } from './cameras/CubeCamera.js';
+export { ArrayCamera } from './cameras/ArrayCamera.js';
+export { Camera } from './cameras/Camera.js';
+export { AudioListener } from './audio/AudioListener.js';
+export { PositionalAudio } from './audio/PositionalAudio.js';
+export { AudioContext } from './audio/AudioContext.js';
+export { AudioAnalyser } from './audio/AudioAnalyser.js';
+export { Audio } from './audio/Audio.js';
+export { VectorKeyframeTrack } from './animation/tracks/VectorKeyframeTrack.js';
+export { StringKeyframeTrack } from './animation/tracks/StringKeyframeTrack.js';
+export { QuaternionKeyframeTrack } from './animation/tracks/QuaternionKeyframeTrack.js';
+export { NumberKeyframeTrack } from './animation/tracks/NumberKeyframeTrack.js';
+export { ColorKeyframeTrack } from './animation/tracks/ColorKeyframeTrack.js';
+export { BooleanKeyframeTrack } from './animation/tracks/BooleanKeyframeTrack.js';
+export { PropertyMixer } from './animation/PropertyMixer.js';
+export { PropertyBinding } from './animation/PropertyBinding.js';
+export { KeyframeTrack } from './animation/KeyframeTrack.js';
+export { AnimationUtils } from './animation/AnimationUtils.js';
+export { AnimationObjectGroup } from './animation/AnimationObjectGroup.js';
+export { AnimationMixer } from './animation/AnimationMixer.js';
+export { AnimationClip } from './animation/AnimationClip.js';
+export { Uniform } from './core/Uniform.js';
+export { InstancedBufferGeometry } from './core/InstancedBufferGeometry.js';
+export { BufferGeometry } from './core/BufferGeometry.js';
+export { InterleavedBufferAttribute } from './core/InterleavedBufferAttribute.js';
+export { InstancedInterleavedBuffer } from './core/InstancedInterleavedBuffer.js';
+export { InterleavedBuffer } from './core/InterleavedBuffer.js';
+export { InstancedBufferAttribute } from './core/InstancedBufferAttribute.js';
+export { GLBufferAttribute } from './core/GLBufferAttribute.js';
+export * from './core/BufferAttribute.js';
+export { Object3D } from './core/Object3D.js';
+export { Raycaster } from './core/Raycaster.js';
+export { Layers } from './core/Layers.js';
+export { EventDispatcher } from './core/EventDispatcher.js';
+export { Clock } from './core/Clock.js';
+export { QuaternionLinearInterpolant } from './math/interpolants/QuaternionLinearInterpolant.js';
+export { LinearInterpolant } from './math/interpolants/LinearInterpolant.js';
+export { DiscreteInterpolant } from './math/interpolants/DiscreteInterpolant.js';
+export { CubicInterpolant } from './math/interpolants/CubicInterpolant.js';
+export { Interpolant } from './math/Interpolant.js';
+export { Triangle } from './math/Triangle.js';
+export * as MathUtils from './math/MathUtils.js';
+export { Spherical } from './math/Spherical.js';
+export { Cylindrical } from './math/Cylindrical.js';
+export { Plane } from './math/Plane.js';
+export { Frustum } from './math/Frustum.js';
+export { Sphere } from './math/Sphere.js';
+export { Ray } from './math/Ray.js';
+export { Matrix4 } from './math/Matrix4.js';
+export { Matrix3 } from './math/Matrix3.js';
+export { Box3 } from './math/Box3.js';
+export { Box2 } from './math/Box2.js';
+export { Line3 } from './math/Line3.js';
+export { Euler } from './math/Euler.js';
+export { Vector4 } from './math/Vector4.js';
+export { Vector3 } from './math/Vector3.js';
+export { Vector2 } from './math/Vector2.js';
+export { Quaternion } from './math/Quaternion.js';
+export { Color } from './math/Color.js';
+export { SphericalHarmonics3 } from './math/SphericalHarmonics3.js';
+export { SpotLightHelper } from './helpers/SpotLightHelper.js';
+export { SkeletonHelper } from './helpers/SkeletonHelper.js';
+export { PointLightHelper } from './helpers/PointLightHelper.js';
+export { HemisphereLightHelper } from './helpers/HemisphereLightHelper.js';
+export { GridHelper } from './helpers/GridHelper.js';
+export { PolarGridHelper } from './helpers/PolarGridHelper.js';
+export { DirectionalLightHelper } from './helpers/DirectionalLightHelper.js';
+export { CameraHelper } from './helpers/CameraHelper.js';
+export { BoxHelper } from './helpers/BoxHelper.js';
+export { Box3Helper } from './helpers/Box3Helper.js';
+export { PlaneHelper } from './helpers/PlaneHelper.js';
+export { ArrowHelper } from './helpers/ArrowHelper.js';
+export { AxesHelper } from './helpers/AxesHelper.js';
+export * from './extras/curves/Curves.js';
+export { Shape } from './extras/core/Shape.js';
+export { Path } from './extras/core/Path.js';
+export { ShapePath } from './extras/core/ShapePath.js';
+export { CurvePath } from './extras/core/CurvePath.js';
+export { Curve } from './extras/core/Curve.js';
+export { DataUtils } from './extras/DataUtils.js';
+export { ImageUtils } from './extras/ImageUtils.js';
+export { ShapeUtils } from './extras/ShapeUtils.js';
+export { PMREMGenerator } from './extras/PMREMGenerator.js';
+export { WebGLUtils } from './renderers/webgl/WebGLUtils.js';
+export * from './constants.js';
+export * from './Three.Legacy.js';
+
+if (typeof __THREE_DEVTOOLS__ !== 'undefined') {
+	__THREE_DEVTOOLS__.dispatchEvent(
+		new CustomEvent('register', {
+			detail: {
+				revision: REVISION,
+			},
+		})
+	);
+}
+
+if (typeof window !== 'undefined') {
+	if (window.__THREE__) {
+		console.warn('WARNING: Multiple instances of Three.js being imported.');
+	} else {
+		window.__THREE__ = REVISION;
+	}
+}

backend/libs/three/animation/AnimationAction.d.ts

@@ -0,0 +1,86 @@
+import { AnimationMixer } from './AnimationMixer';
+import { AnimationClip } from './AnimationClip';
+import { AnimationActionLoopStyles, AnimationBlendMode } from '../constants';
+import { Object3D } from '../core/Object3D';
+// Animation ////////////////////////////////////////////////////////////////////////////////////////
+
+export class AnimationAction {
+	constructor(mixer: AnimationMixer, clip: AnimationClip, localRoot?: Object3D, blendMode?: AnimationBlendMode);
+
+	blendMode: AnimationBlendMode;
+
+	/**
+	 * @default THREE.LoopRepeat
+	 */
+	loop: AnimationActionLoopStyles;
+
+	/**
+	 * @default 0
+	 */
+	time: number;
+
+	/**
+	 * @default 1
+	 */
+	timeScale: number;
+
+	/**
+	 * @default 1
+	 */
+	weight: number;
+
+	/**
+	 * @default Infinity
+	 */
+	repetitions: number;
+
+	/**
+	 * @default false
+	 */
+	paused: boolean;
+
+	/**
+	 * @default true
+	 */
+	enabled: boolean;
+
+	/**
+	 * @default false
+	 */
+	clampWhenFinished: boolean;
+
+	/**
+	 * @default true
+	 */
+	zeroSlopeAtStart: boolean;
+
+	/**
+	 * @default true
+	 */
+	zeroSlopeAtEnd: boolean;
+
+	play(): AnimationAction;
+	stop(): AnimationAction;
+	reset(): AnimationAction;
+	isRunning(): boolean;
+	isScheduled(): boolean;
+	startAt(time: number): AnimationAction;
+	setLoop(mode: AnimationActionLoopStyles, repetitions: number): AnimationAction;
+	setEffectiveWeight(weight: number): AnimationAction;
+	getEffectiveWeight(): number;
+	fadeIn(duration: number): AnimationAction;
+	fadeOut(duration: number): AnimationAction;
+	crossFadeFrom(fadeOutAction: AnimationAction, duration: number, warp: boolean): AnimationAction;
+	crossFadeTo(fadeInAction: AnimationAction, duration: number, warp: boolean): AnimationAction;
+	stopFading(): AnimationAction;
+	setEffectiveTimeScale(timeScale: number): AnimationAction;
+	getEffectiveTimeScale(): number;
+	setDuration(duration: number): AnimationAction;
+	syncWith(action: AnimationAction): AnimationAction;
+	halt(duration: number): AnimationAction;
+	warp(statTimeScale: number, endTimeScale: number, duration: number): AnimationAction;
+	stopWarping(): AnimationAction;
+	getMixer(): AnimationMixer;
+	getClip(): AnimationClip;
+	getRoot(): Object3D;
+}

backend/libs/three/animation/AnimationAction.js

@@ -0,0 +1,553 @@
+import {
+	WrapAroundEnding,
+	ZeroCurvatureEnding,
+	ZeroSlopeEnding,
+	LoopPingPong,
+	LoopOnce,
+	LoopRepeat,
+	NormalAnimationBlendMode,
+	AdditiveAnimationBlendMode,
+} from '../constants.js';
+
+class AnimationAction {
+	constructor(mixer, clip, localRoot = null, blendMode = clip.blendMode) {
+		this._mixer = mixer;
+		this._clip = clip;
+		this._localRoot = localRoot;
+		this.blendMode = blendMode;
+
+		const tracks = clip.tracks,
+			nTracks = tracks.length,
+			interpolants = new Array(nTracks);
+
+		const interpolantSettings = {
+			endingStart: ZeroCurvatureEnding,
+			endingEnd: ZeroCurvatureEnding,
+		};
+
+		for (let i = 0; i !== nTracks; ++i) {
+			const interpolant = tracks[i].createInterpolant(null);
+			interpolants[i] = interpolant;
+			interpolant.settings = interpolantSettings;
+		}
+
+		this._interpolantSettings = interpolantSettings;
+
+		this._interpolants = interpolants; // bound by the mixer
+
+		// inside: PropertyMixer (managed by the mixer)
+		this._propertyBindings = new Array(nTracks);
+
+		this._cacheIndex = null; // for the memory manager
+		this._byClipCacheIndex = null; // for the memory manager
+
+		this._timeScaleInterpolant = null;
+		this._weightInterpolant = null;
+
+		this.loop = LoopRepeat;
+		this._loopCount = -1;
+
+		// global mixer time when the action is to be started
+		// it's set back to 'null' upon start of the action
+		this._startTime = null;
+
+		// scaled local time of the action
+		// gets clamped or wrapped to 0..clip.duration according to loop
+		this.time = 0;
+
+		this.timeScale = 1;
+		this._effectiveTimeScale = 1;
+
+		this.weight = 1;
+		this._effectiveWeight = 1;
+
+		this.repetitions = Infinity; // no. of repetitions when looping
+
+		this.paused = false; // true -> zero effective time scale
+		this.enabled = true; // false -> zero effective weight
+
+		this.clampWhenFinished = false; // keep feeding the last frame?
+
+		this.zeroSlopeAtStart = true; // for smooth interpolation w/o separate
+		this.zeroSlopeAtEnd = true; // clips for start, loop and end
+	}
+
+	// State & Scheduling
+
+	play() {
+		this._mixer._activateAction(this);
+
+		return this;
+	}
+
+	stop() {
+		this._mixer._deactivateAction(this);
+
+		return this.reset();
+	}
+
+	reset() {
+		this.paused = false;
+		this.enabled = true;
+
+		this.time = 0; // restart clip
+		this._loopCount = -1; // forget previous loops
+		this._startTime = null; // forget scheduling
+
+		return this.stopFading().stopWarping();
+	}
+
+	isRunning() {
+		return this.enabled && !this.paused && this.timeScale !== 0 && this._startTime === null && this._mixer._isActiveAction(this);
+	}
+
+	// return true when play has been called
+	isScheduled() {
+		return this._mixer._isActiveAction(this);
+	}
+
+	startAt(time) {
+		this._startTime = time;
+
+		return this;
+	}
+
+	setLoop(mode, repetitions) {
+		this.loop = mode;
+		this.repetitions = repetitions;
+
+		return this;
+	}
+
+	// Weight
+
+	// set the weight stopping any scheduled fading
+	// although .enabled = false yields an effective weight of zero, this
+	// method does *not* change .enabled, because it would be confusing
+	setEffectiveWeight(weight) {
+		this.weight = weight;
+
+		// note: same logic as when updated at runtime
+		this._effectiveWeight = this.enabled ? weight : 0;
+
+		return this.stopFading();
+	}
+
+	// return the weight considering fading and .enabled
+	getEffectiveWeight() {
+		return this._effectiveWeight;
+	}
+
+	fadeIn(duration) {
+		return this._scheduleFading(duration, 0, 1);
+	}
+
+	fadeOut(duration) {
+		return this._scheduleFading(duration, 1, 0);
+	}
+
+	crossFadeFrom(fadeOutAction, duration, warp) {
+		fadeOutAction.fadeOut(duration);
+		this.fadeIn(duration);
+
+		if (warp) {
+			const fadeInDuration = this._clip.duration,
+				fadeOutDuration = fadeOutAction._clip.duration,
+				startEndRatio = fadeOutDuration / fadeInDuration,
+				endStartRatio = fadeInDuration / fadeOutDuration;
+
+			fadeOutAction.warp(1.0, startEndRatio, duration);
+			this.warp(endStartRatio, 1.0, duration);
+		}
+
+		return this;
+	}
+
+	crossFadeTo(fadeInAction, duration, warp) {
+		return fadeInAction.crossFadeFrom(this, duration, warp);
+	}
+
+	stopFading() {
+		const weightInterpolant = this._weightInterpolant;
+
+		if (weightInterpolant !== null) {
+			this._weightInterpolant = null;
+			this._mixer._takeBackControlInterpolant(weightInterpolant);
+		}
+
+		return this;
+	}
+
+	// Time Scale Control
+
+	// set the time scale stopping any scheduled warping
+	// although .paused = true yields an effective time scale of zero, this
+	// method does *not* change .paused, because it would be confusing
+	setEffectiveTimeScale(timeScale) {
+		this.timeScale = timeScale;
+		this._effectiveTimeScale = this.paused ? 0 : timeScale;
+
+		return this.stopWarping();
+	}
+
+	// return the time scale considering warping and .paused
+	getEffectiveTimeScale() {
+		return this._effectiveTimeScale;
+	}
+
+	setDuration(duration) {
+		this.timeScale = this._clip.duration / duration;
+
+		return this.stopWarping();
+	}
+
+	syncWith(action) {
+		this.time = action.time;
+		this.timeScale = action.timeScale;
+
+		return this.stopWarping();
+	}
+
+	halt(duration) {
+		return this.warp(this._effectiveTimeScale, 0, duration);
+	}
+
+	warp(startTimeScale, endTimeScale, duration) {
+		const mixer = this._mixer,
+			now = mixer.time,
+			timeScale = this.timeScale;
+
+		let interpolant = this._timeScaleInterpolant;
+
+		if (interpolant === null) {
+			interpolant = mixer._lendControlInterpolant();
+			this._timeScaleInterpolant = interpolant;
+		}
+
+		const times = interpolant.parameterPositions,
+			values = interpolant.sampleValues;
+
+		times[0] = now;
+		times[1] = now + duration;
+
+		values[0] = startTimeScale / timeScale;
+		values[1] = endTimeScale / timeScale;
+
+		return this;
+	}
+
+	stopWarping() {
+		const timeScaleInterpolant = this._timeScaleInterpolant;
+
+		if (timeScaleInterpolant !== null) {
+			this._timeScaleInterpolant = null;
+			this._mixer._takeBackControlInterpolant(timeScaleInterpolant);
+		}
+
+		return this;
+	}
+
+	// Object Accessors
+
+	getMixer() {
+		return this._mixer;
+	}
+
+	getClip() {
+		return this._clip;
+	}
+
+	getRoot() {
+		return this._localRoot || this._mixer._root;
+	}
+
+	// Interna
+
+	_update(time, deltaTime, timeDirection, accuIndex) {
+		// called by the mixer
+
+		if (!this.enabled) {
+			// call ._updateWeight() to update ._effectiveWeight
+
+			this._updateWeight(time);
+			return;
+		}
+
+		const startTime = this._startTime;
+
+		if (startTime !== null) {
+			// check for scheduled start of action
+
+			const timeRunning = (time - startTime) * timeDirection;
+			if (timeRunning < 0 || timeDirection === 0) {
+				return; // yet to come / don't decide when delta = 0
+			}
+
+			// start
+
+			this._startTime = null; // unschedule
+			deltaTime = timeDirection * timeRunning;
+		}
+
+		// apply time scale and advance time
+
+		deltaTime *= this._updateTimeScale(time);
+		const clipTime = this._updateTime(deltaTime);
+
+		// note: _updateTime may disable the action resulting in
+		// an effective weight of 0
+
+		const weight = this._updateWeight(time);
+
+		if (weight > 0) {
+			const interpolants = this._interpolants;
+			const propertyMixers = this._propertyBindings;
+
+			switch (this.blendMode) {
+				case AdditiveAnimationBlendMode:
+					for (let j = 0, m = interpolants.length; j !== m; ++j) {
+						interpolants[j].evaluate(clipTime);
+						propertyMixers[j].accumulateAdditive(weight);
+					}
+
+					break;
+
+				case NormalAnimationBlendMode:
+				default:
+					for (let j = 0, m = interpolants.length; j !== m; ++j) {
+						interpolants[j].evaluate(clipTime);
+						propertyMixers[j].accumulate(accuIndex, weight);
+					}
+			}
+		}
+	}
+
+	_updateWeight(time) {
+		let weight = 0;
+
+		if (this.enabled) {
+			weight = this.weight;
+			const interpolant = this._weightInterpolant;
+
+			if (interpolant !== null) {
+				const interpolantValue = interpolant.evaluate(time)[0];
+
+				weight *= interpolantValue;
+
+				if (time > interpolant.parameterPositions[1]) {
+					this.stopFading();
+
+					if (interpolantValue === 0) {
+						// faded out, disable
+						this.enabled = false;
+					}
+				}
+			}
+		}
+
+		this._effectiveWeight = weight;
+		return weight;
+	}
+
+	_updateTimeScale(time) {
+		let timeScale = 0;
+
+		if (!this.paused) {
+			timeScale = this.timeScale;
+
+			const interpolant = this._timeScaleInterpolant;
+
+			if (interpolant !== null) {
+				const interpolantValue = interpolant.evaluate(time)[0];
+
+				timeScale *= interpolantValue;
+
+				if (time > interpolant.parameterPositions[1]) {
+					this.stopWarping();
+
+					if (timeScale === 0) {
+						// motion has halted, pause
+						this.paused = true;
+					} else {
+						// warp done - apply final time scale
+						this.timeScale = timeScale;
+					}
+				}
+			}
+		}
+
+		this._effectiveTimeScale = timeScale;
+		return timeScale;
+	}
+
+	_updateTime(deltaTime) {
+		const duration = this._clip.duration;
+		const loop = this.loop;
+
+		let time = this.time + deltaTime;
+		let loopCount = this._loopCount;
+
+		const pingPong = loop === LoopPingPong;
+
+		if (deltaTime === 0) {
+			if (loopCount === -1) return time;
+
+			return pingPong && (loopCount & 1) === 1 ? duration - time : time;
+		}
+
+		if (loop === LoopOnce) {
+			if (loopCount === -1) {
+				// just started
+
+				this._loopCount = 0;
+				this._setEndings(true, true, false);
+			}
+
+			handle_stop: {
+				if (time >= duration) {
+					time = duration;
+				} else if (time < 0) {
+					time = 0;
+				} else {
+					this.time = time;
+
+					break handle_stop;
+				}
+
+				if (this.clampWhenFinished) this.paused = true;
+				else this.enabled = false;
+
+				this.time = time;
+
+				this._mixer.dispatchEvent({
+					type: 'finished',
+					action: this,
+					direction: deltaTime < 0 ? -1 : 1,
+				});
+			}
+		} else {
+			// repetitive Repeat or PingPong
+
+			if (loopCount === -1) {
+				// just started
+
+				if (deltaTime >= 0) {
+					loopCount = 0;
+
+					this._setEndings(true, this.repetitions === 0, pingPong);
+				} else {
+					// when looping in reverse direction, the initial
+					// transition through zero counts as a repetition,
+					// so leave loopCount at -1
+
+					this._setEndings(this.repetitions === 0, true, pingPong);
+				}
+			}
+
+			if (time >= duration || time < 0) {
+				// wrap around
+
+				const loopDelta = Math.floor(time / duration); // signed
+				time -= duration * loopDelta;
+
+				loopCount += Math.abs(loopDelta);
+
+				const pending = this.repetitions - loopCount;
+
+				if (pending <= 0) {
+					// have to stop (switch state, clamp time, fire event)
+
+					if (this.clampWhenFinished) this.paused = true;
+					else this.enabled = false;
+
+					time = deltaTime > 0 ? duration : 0;
+
+					this.time = time;
+
+					this._mixer.dispatchEvent({
+						type: 'finished',
+						action: this,
+						direction: deltaTime > 0 ? 1 : -1,
+					});
+				} else {
+					// keep running
+
+					if (pending === 1) {
+						// entering the last round
+
+						const atStart = deltaTime < 0;
+						this._setEndings(atStart, !atStart, pingPong);
+					} else {
+						this._setEndings(false, false, pingPong);
+					}
+
+					this._loopCount = loopCount;
+
+					this.time = time;
+
+					this._mixer.dispatchEvent({
+						type: 'loop',
+						action: this,
+						loopDelta: loopDelta,
+					});
+				}
+			} else {
+				this.time = time;
+			}
+
+			if (pingPong && (loopCount & 1) === 1) {
+				// invert time for the "pong round"
+
+				return duration - time;
+			}
+		}
+
+		return time;
+	}
+
+	_setEndings(atStart, atEnd, pingPong) {
+		const settings = this._interpolantSettings;
+
+		if (pingPong) {
+			settings.endingStart = ZeroSlopeEnding;
+			settings.endingEnd = ZeroSlopeEnding;
+		} else {
+			// assuming for LoopOnce atStart == atEnd == true
+
+			if (atStart) {
+				settings.endingStart = this.zeroSlopeAtStart ? ZeroSlopeEnding : ZeroCurvatureEnding;
+			} else {
+				settings.endingStart = WrapAroundEnding;
+			}
+
+			if (atEnd) {
+				settings.endingEnd = this.zeroSlopeAtEnd ? ZeroSlopeEnding : ZeroCurvatureEnding;
+			} else {
+				settings.endingEnd = WrapAroundEnding;
+			}
+		}
+	}
+
+	_scheduleFading(duration, weightNow, weightThen) {
+		const mixer = this._mixer,
+			now = mixer.time;
+		let interpolant = this._weightInterpolant;
+
+		if (interpolant === null) {
+			interpolant = mixer._lendControlInterpolant();
+			this._weightInterpolant = interpolant;
+		}
+
+		const times = interpolant.parameterPositions,
+			values = interpolant.sampleValues;
+
+		times[0] = now;
+		values[0] = weightNow;
+		times[1] = now + duration;
+		values[1] = weightThen;
+
+		return this;
+	}
+}
+
+export { AnimationAction };

backend/libs/three/animation/AnimationClip.d.ts

@@ -0,0 +1,42 @@
+import { KeyframeTrack } from './KeyframeTrack';
+import { Vector3 } from './../math/Vector3';
+import { Bone } from './../objects/Bone';
+import { AnimationBlendMode } from '../constants';
+
+export interface MorphTarget {
+	name: string;
+	vertices: Vector3[];
+}
+
+export class AnimationClip {
+	constructor(name?: string, duration?: number, tracks?: KeyframeTrack[], blendMode?: AnimationBlendMode);
+
+	name: string;
+	tracks: KeyframeTrack[];
+
+	/**
+	 * @default THREE.NormalAnimationBlendMode
+	 */
+	blendMode: AnimationBlendMode;
+
+	/**
+	 * @default -1
+	 */
+	duration: number;
+	uuid: string;
+	results: any[];
+
+	resetDuration(): AnimationClip;
+	trim(): AnimationClip;
+	validate(): boolean;
+	optimize(): AnimationClip;
+	clone(): this;
+	toJSON(clip: AnimationClip): any;
+
+	static CreateFromMorphTargetSequence(name: string, morphTargetSequence: MorphTarget[], fps: number, noLoop: boolean): AnimationClip;
+	static findByName(clipArray: AnimationClip[], name: string): AnimationClip;
+	static CreateClipsFromMorphTargetSequences(morphTargets: MorphTarget[], fps: number, noLoop: boolean): AnimationClip[];
+	static parse(json: any): AnimationClip;
+	static parseAnimation(animation: any, bones: Bone[]): AnimationClip;
+	static toJSON(clip: AnimationClip): any;
+}

backend/libs/three/animation/AnimationClip.js

@@ -0,0 +1,350 @@
+import { AnimationUtils } from './AnimationUtils.js';
+import { KeyframeTrack } from './KeyframeTrack.js';
+import { BooleanKeyframeTrack } from './tracks/BooleanKeyframeTrack.js';
+import { ColorKeyframeTrack } from './tracks/ColorKeyframeTrack.js';
+import { NumberKeyframeTrack } from './tracks/NumberKeyframeTrack.js';
+import { QuaternionKeyframeTrack } from './tracks/QuaternionKeyframeTrack.js';
+import { StringKeyframeTrack } from './tracks/StringKeyframeTrack.js';
+import { VectorKeyframeTrack } from './tracks/VectorKeyframeTrack.js';
+import * as MathUtils from '../math/MathUtils.js';
+import { NormalAnimationBlendMode } from '../constants.js';
+
+class AnimationClip {
+	constructor(name, duration = -1, tracks, blendMode = NormalAnimationBlendMode) {
+		this.name = name;
+		this.tracks = tracks;
+		this.duration = duration;
+		this.blendMode = blendMode;
+
+		this.uuid = MathUtils.generateUUID();
+
+		// this means it should figure out its duration by scanning the tracks
+		if (this.duration < 0) {
+			this.resetDuration();
+		}
+	}
+
+	static parse(json) {
+		const tracks = [],
+			jsonTracks = json.tracks,
+			frameTime = 1.0 / (json.fps || 1.0);
+
+		for (let i = 0, n = jsonTracks.length; i !== n; ++i) {
+			tracks.push(parseKeyframeTrack(jsonTracks[i]).scale(frameTime));
+		}
+
+		const clip = new this(json.name, json.duration, tracks, json.blendMode);
+		clip.uuid = json.uuid;
+
+		return clip;
+	}
+
+	static toJSON(clip) {
+		const tracks = [],
+			clipTracks = clip.tracks;
+
+		const json = {
+			name: clip.name,
+			duration: clip.duration,
+			tracks: tracks,
+			uuid: clip.uuid,
+			blendMode: clip.blendMode,
+		};
+
+		for (let i = 0, n = clipTracks.length; i !== n; ++i) {
+			tracks.push(KeyframeTrack.toJSON(clipTracks[i]));
+		}
+
+		return json;
+	}
+
+	static CreateFromMorphTargetSequence(name, morphTargetSequence, fps, noLoop) {
+		const numMorphTargets = morphTargetSequence.length;
+		const tracks = [];
+
+		for (let i = 0; i < numMorphTargets; i++) {
+			let times = [];
+			let values = [];
+
+			times.push((i + numMorphTargets - 1) % numMorphTargets, i, (i + 1) % numMorphTargets);
+
+			values.push(0, 1, 0);
+
+			const order = AnimationUtils.getKeyframeOrder(times);
+			times = AnimationUtils.sortedArray(times, 1, order);
+			values = AnimationUtils.sortedArray(values, 1, order);
+
+			// if there is a key at the first frame, duplicate it as the
+			// last frame as well for perfect loop.
+			if (!noLoop && times[0] === 0) {
+				times.push(numMorphTargets);
+				values.push(values[0]);
+			}
+
+			tracks.push(new NumberKeyframeTrack('.morphTargetInfluences[' + morphTargetSequence[i].name + ']', times, values).scale(1.0 / fps));
+		}
+
+		return new this(name, -1, tracks);
+	}
+
+	static findByName(objectOrClipArray, name) {
+		let clipArray = objectOrClipArray;
+
+		if (!Array.isArray(objectOrClipArray)) {
+			const o = objectOrClipArray;
+			clipArray = (o.geometry && o.geometry.animations) || o.animations;
+		}
+
+		for (let i = 0; i < clipArray.length; i++) {
+			if (clipArray[i].name === name) {
+				return clipArray[i];
+			}
+		}
+
+		return null;
+	}
+
+	static CreateClipsFromMorphTargetSequences(morphTargets, fps, noLoop) {
+		const animationToMorphTargets = {};
+
+		// tested with https://regex101.com/ on trick sequences
+		// such flamingo_flyA_003, flamingo_run1_003, crdeath0059
+		const pattern = /^([\w-]*?)([\d]+)$/;
+
+		// sort morph target names into animation groups based
+		// patterns like Walk_001, Walk_002, Run_001, Run_002
+		for (let i = 0, il = morphTargets.length; i < il; i++) {
+			const morphTarget = morphTargets[i];
+			const parts = morphTarget.name.match(pattern);
+
+			if (parts && parts.length > 1) {
+				const name = parts[1];
+
+				let animationMorphTargets = animationToMorphTargets[name];
+
+				if (!animationMorphTargets) {
+					animationToMorphTargets[name] = animationMorphTargets = [];
+				}
+
+				animationMorphTargets.push(morphTarget);
+			}
+		}
+
+		const clips = [];
+
+		for (const name in animationToMorphTargets) {
+			clips.push(this.CreateFromMorphTargetSequence(name, animationToMorphTargets[name], fps, noLoop));
+		}
+
+		return clips;
+	}
+
+	// parse the animation.hierarchy format
+	static parseAnimation(animation, bones) {
+		if (!animation) {
+			console.error('THREE.AnimationClip: No animation in JSONLoader data.');
+			return null;
+		}
+
+		const addNonemptyTrack = function (trackType, trackName, animationKeys, propertyName, destTracks) {
+			// only return track if there are actually keys.
+			if (animationKeys.length !== 0) {
+				const times = [];
+				const values = [];
+
+				AnimationUtils.flattenJSON(animationKeys, times, values, propertyName);
+
+				// empty keys are filtered out, so check again
+				if (times.length !== 0) {
+					destTracks.push(new trackType(trackName, times, values));
+				}
+			}
+		};
+
+		const tracks = [];
+
+		const clipName = animation.name || 'default';
+		const fps = animation.fps || 30;
+		const blendMode = animation.blendMode;
+
+		// automatic length determination in AnimationClip.
+		let duration = animation.length || -1;
+
+		const hierarchyTracks = animation.hierarchy || [];
+
+		for (let h = 0; h < hierarchyTracks.length; h++) {
+			const animationKeys = hierarchyTracks[h].keys;
+
+			// skip empty tracks
+			if (!animationKeys || animationKeys.length === 0) continue;
+
+			// process morph targets
+			if (animationKeys[0].morphTargets) {
+				// figure out all morph targets used in this track
+				const morphTargetNames = {};
+
+				let k;
+
+				for (k = 0; k < animationKeys.length; k++) {
+					if (animationKeys[k].morphTargets) {
+						for (let m = 0; m < animationKeys[k].morphTargets.length; m++) {
+							morphTargetNames[animationKeys[k].morphTargets[m]] = -1;
+						}
+					}
+				}
+
+				// create a track for each morph target with all zero
+				// morphTargetInfluences except for the keys in which
+				// the morphTarget is named.
+				for (const morphTargetName in morphTargetNames) {
+					const times = [];
+					const values = [];
+
+					for (let m = 0; m !== animationKeys[k].morphTargets.length; ++m) {
+						const animationKey = animationKeys[k];
+
+						times.push(animationKey.time);
+						values.push(animationKey.morphTarget === morphTargetName ? 1 : 0);
+					}
+
+					tracks.push(new NumberKeyframeTrack('.morphTargetInfluence[' + morphTargetName + ']', times, values));
+				}
+
+				duration = morphTargetNames.length * (fps || 1.0);
+			} else {
+				// ...assume skeletal animation
+
+				const boneName = '.bones[' + bones[h].name + ']';
+
+				addNonemptyTrack(VectorKeyframeTrack, boneName + '.position', animationKeys, 'pos', tracks);
+
+				addNonemptyTrack(QuaternionKeyframeTrack, boneName + '.quaternion', animationKeys, 'rot', tracks);
+
+				addNonemptyTrack(VectorKeyframeTrack, boneName + '.scale', animationKeys, 'scl', tracks);
+			}
+		}
+
+		if (tracks.length === 0) {
+			return null;
+		}
+
+		const clip = new this(clipName, duration, tracks, blendMode);
+
+		return clip;
+	}
+
+	resetDuration() {
+		const tracks = this.tracks;
+		let duration = 0;
+
+		for (let i = 0, n = tracks.length; i !== n; ++i) {
+			const track = this.tracks[i];
+
+			duration = Math.max(duration, track.times[track.times.length - 1]);
+		}
+
+		this.duration = duration;
+
+		return this;
+	}
+
+	trim() {
+		for (let i = 0; i < this.tracks.length; i++) {
+			this.tracks[i].trim(0, this.duration);
+		}
+
+		return this;
+	}
+
+	validate() {
+		let valid = true;
+
+		for (let i = 0; i < this.tracks.length; i++) {
+			valid = valid && this.tracks[i].validate();
+		}
+
+		return valid;
+	}
+
+	optimize() {
+		for (let i = 0; i < this.tracks.length; i++) {
+			this.tracks[i].optimize();
+		}
+
+		return this;
+	}
+
+	clone() {
+		const tracks = [];
+
+		for (let i = 0; i < this.tracks.length; i++) {
+			tracks.push(this.tracks[i].clone());
+		}
+
+		return new this.constructor(this.name, this.duration, tracks, this.blendMode);
+	}
+
+	toJSON() {
+		return this.constructor.toJSON(this);
+	}
+}
+
+function getTrackTypeForValueTypeName(typeName) {
+	switch (typeName.toLowerCase()) {
+		case 'scalar':
+		case 'double':
+		case 'float':
+		case 'number':
+		case 'integer':
+			return NumberKeyframeTrack;
+
+		case 'vector':
+		case 'vector2':
+		case 'vector3':
+		case 'vector4':
+			return VectorKeyframeTrack;
+
+		case 'color':
+			return ColorKeyframeTrack;
+
+		case 'quaternion':
+			return QuaternionKeyframeTrack;
+
+		case 'bool':
+		case 'boolean':
+			return BooleanKeyframeTrack;
+
+		case 'string':
+			return StringKeyframeTrack;
+	}
+
+	throw new Error('THREE.KeyframeTrack: Unsupported typeName: ' + typeName);
+}
+
+function parseKeyframeTrack(json) {
+	if (json.type === undefined) {
+		throw new Error('THREE.KeyframeTrack: track type undefined, can not parse');
+	}
+
+	const trackType = getTrackTypeForValueTypeName(json.type);
+
+	if (json.times === undefined) {
+		const times = [],
+			values = [];
+
+		AnimationUtils.flattenJSON(json.keys, times, values, 'value');
+
+		json.times = times;
+		json.values = values;
+	}
+
+	// derived classes can define a static parse method
+	if (trackType.parse !== undefined) {
+		return trackType.parse(json);
+	} else {
+		// by default, we assume a constructor compatible with the base
+		return new trackType(json.name, json.times, json.values, json.interpolation);
+	}
+}
+
+export { AnimationClip };

backend/libs/three/animation/AnimationMixer.d.ts

@@ -0,0 +1,30 @@
+import { AnimationClip } from './AnimationClip';
+import { AnimationAction } from './AnimationAction';
+import { AnimationBlendMode } from '../constants';
+import { EventDispatcher } from './../core/EventDispatcher';
+import { Object3D } from '../core/Object3D';
+import { AnimationObjectGroup } from './AnimationObjectGroup';
+
+export class AnimationMixer extends EventDispatcher {
+	constructor(root: Object3D | AnimationObjectGroup);
+
+	/**
+	 * @default 0
+	 */
+	time: number;
+
+	/**
+	 * @default 1.0
+	 */
+	timeScale: number;
+
+	clipAction(clip: AnimationClip, root?: Object3D | AnimationObjectGroup, blendMode?: AnimationBlendMode): AnimationAction;
+	existingAction(clip: AnimationClip, root?: Object3D | AnimationObjectGroup): AnimationAction | null;
+	stopAllAction(): AnimationMixer;
+	update(deltaTime: number): AnimationMixer;
+	setTime(timeInSeconds: number): AnimationMixer;
+	getRoot(): Object3D | AnimationObjectGroup;
+	uncacheClip(clip: AnimationClip): void;
+	uncacheRoot(root: Object3D | AnimationObjectGroup): void;
+	uncacheAction(clip: AnimationClip, root?: Object3D | AnimationObjectGroup): void;
+}

backend/libs/three/animation/AnimationMixer.js

@@ -0,0 +1,590 @@
+import { AnimationAction } from './AnimationAction.js';
+import { EventDispatcher } from '../core/EventDispatcher.js';
+import { LinearInterpolant } from '../math/interpolants/LinearInterpolant.js';
+import { PropertyBinding } from './PropertyBinding.js';
+import { PropertyMixer } from './PropertyMixer.js';
+import { AnimationClip } from './AnimationClip.js';
+import { NormalAnimationBlendMode } from '../constants.js';
+
+class AnimationMixer extends EventDispatcher {
+	constructor(root) {
+		super();
+
+		this._root = root;
+		this._initMemoryManager();
+		this._accuIndex = 0;
+		this.time = 0;
+		this.timeScale = 1.0;
+	}
+
+	_bindAction(action, prototypeAction) {
+		const root = action._localRoot || this._root,
+			tracks = action._clip.tracks,
+			nTracks = tracks.length,
+			bindings = action._propertyBindings,
+			interpolants = action._interpolants,
+			rootUuid = root.uuid,
+			bindingsByRoot = this._bindingsByRootAndName;
+
+		let bindingsByName = bindingsByRoot[rootUuid];
+
+		if (bindingsByName === undefined) {
+			bindingsByName = {};
+			bindingsByRoot[rootUuid] = bindingsByName;
+		}
+
+		for (let i = 0; i !== nTracks; ++i) {
+			const track = tracks[i],
+				trackName = track.name;
+
+			let binding = bindingsByName[trackName];
+
+			if (binding !== undefined) {
+				++binding.referenceCount;
+				bindings[i] = binding;
+			} else {
+				binding = bindings[i];
+
+				if (binding !== undefined) {
+					// existing binding, make sure the cache knows
+
+					if (binding._cacheIndex === null) {
+						++binding.referenceCount;
+						this._addInactiveBinding(binding, rootUuid, trackName);
+					}
+
+					continue;
+				}
+
+				const path = prototypeAction && prototypeAction._propertyBindings[i].binding.parsedPath;
+
+				binding = new PropertyMixer(PropertyBinding.create(root, trackName, path), track.ValueTypeName, track.getValueSize());
+
+				++binding.referenceCount;
+				this._addInactiveBinding(binding, rootUuid, trackName);
+
+				bindings[i] = binding;
+			}
+
+			interpolants[i].resultBuffer = binding.buffer;
+		}
+	}
+
+	_activateAction(action) {
+		if (!this._isActiveAction(action)) {
+			if (action._cacheIndex === null) {
+				// this action has been forgotten by the cache, but the user
+				// appears to be still using it -> rebind
+
+				const rootUuid = (action._localRoot || this._root).uuid,
+					clipUuid = action._clip.uuid,
+					actionsForClip = this._actionsByClip[clipUuid];
+
+				this._bindAction(action, actionsForClip && actionsForClip.knownActions[0]);
+
+				this._addInactiveAction(action, clipUuid, rootUuid);
+			}
+
+			const bindings = action._propertyBindings;
+
+			// increment reference counts / sort out state
+			for (let i = 0, n = bindings.length; i !== n; ++i) {
+				const binding = bindings[i];
+
+				if (binding.useCount++ === 0) {
+					this._lendBinding(binding);
+					binding.saveOriginalState();
+				}
+			}
+
+			this._lendAction(action);
+		}
+	}
+
+	_deactivateAction(action) {
+		if (this._isActiveAction(action)) {
+			const bindings = action._propertyBindings;
+
+			// decrement reference counts / sort out state
+			for (let i = 0, n = bindings.length; i !== n; ++i) {
+				const binding = bindings[i];
+
+				if (--binding.useCount === 0) {
+					binding.restoreOriginalState();
+					this._takeBackBinding(binding);
+				}
+			}
+
+			this._takeBackAction(action);
+		}
+	}
+
+	// Memory manager
+
+	_initMemoryManager() {
+		this._actions = []; // 'nActiveActions' followed by inactive ones
+		this._nActiveActions = 0;
+
+		this._actionsByClip = {};
+		// inside:
+		// {
+		// 	knownActions: Array< AnimationAction > - used as prototypes
+		// 	actionByRoot: AnimationAction - lookup
+		// }
+
+		this._bindings = []; // 'nActiveBindings' followed by inactive ones
+		this._nActiveBindings = 0;
+
+		this._bindingsByRootAndName = {}; // inside: Map< name, PropertyMixer >
+
+		this._controlInterpolants = []; // same game as above
+		this._nActiveControlInterpolants = 0;
+
+		const scope = this;
+
+		this.stats = {
+			actions: {
+				get total() {
+					return scope._actions.length;
+				},
+				get inUse() {
+					return scope._nActiveActions;
+				},
+			},
+			bindings: {
+				get total() {
+					return scope._bindings.length;
+				},
+				get inUse() {
+					return scope._nActiveBindings;
+				},
+			},
+			controlInterpolants: {
+				get total() {
+					return scope._controlInterpolants.length;
+				},
+				get inUse() {
+					return scope._nActiveControlInterpolants;
+				},
+			},
+		};
+	}
+
+	// Memory management for AnimationAction objects
+
+	_isActiveAction(action) {
+		const index = action._cacheIndex;
+		return index !== null && index < this._nActiveActions;
+	}
+
+	_addInactiveAction(action, clipUuid, rootUuid) {
+		const actions = this._actions,
+			actionsByClip = this._actionsByClip;
+
+		let actionsForClip = actionsByClip[clipUuid];
+
+		if (actionsForClip === undefined) {
+			actionsForClip = {
+				knownActions: [action],
+				actionByRoot: {},
+			};
+
+			action._byClipCacheIndex = 0;
+
+			actionsByClip[clipUuid] = actionsForClip;
+		} else {
+			const knownActions = actionsForClip.knownActions;
+
+			action._byClipCacheIndex = knownActions.length;
+			knownActions.push(action);
+		}
+
+		action._cacheIndex = actions.length;
+		actions.push(action);
+
+		actionsForClip.actionByRoot[rootUuid] = action;
+	}
+
+	_removeInactiveAction(action) {
+		const actions = this._actions,
+			lastInactiveAction = actions[actions.length - 1],
+			cacheIndex = action._cacheIndex;
+
+		lastInactiveAction._cacheIndex = cacheIndex;
+		actions[cacheIndex] = lastInactiveAction;
+		actions.pop();
+
+		action._cacheIndex = null;
+
+		const clipUuid = action._clip.uuid,
+			actionsByClip = this._actionsByClip,
+			actionsForClip = actionsByClip[clipUuid],
+			knownActionsForClip = actionsForClip.knownActions,
+			lastKnownAction = knownActionsForClip[knownActionsForClip.length - 1],
+			byClipCacheIndex = action._byClipCacheIndex;
+
+		lastKnownAction._byClipCacheIndex = byClipCacheIndex;
+		knownActionsForClip[byClipCacheIndex] = lastKnownAction;
+		knownActionsForClip.pop();
+
+		action._byClipCacheIndex = null;
+
+		const actionByRoot = actionsForClip.actionByRoot,
+			rootUuid = (action._localRoot || this._root).uuid;
+
+		delete actionByRoot[rootUuid];
+
+		if (knownActionsForClip.length === 0) {
+			delete actionsByClip[clipUuid];
+		}
+
+		this._removeInactiveBindingsForAction(action);
+	}
+
+	_removeInactiveBindingsForAction(action) {
+		const bindings = action._propertyBindings;
+
+		for (let i = 0, n = bindings.length; i !== n; ++i) {
+			const binding = bindings[i];
+
+			if (--binding.referenceCount === 0) {
+				this._removeInactiveBinding(binding);
+			}
+		}
+	}
+
+	_lendAction(action) {
+		// [ active actions |  inactive actions  ]
+		// [  active actions >| inactive actions ]
+		//                 s        a
+		//                  <-swap->
+		//                 a        s
+
+		const actions = this._actions,
+			prevIndex = action._cacheIndex,
+			lastActiveIndex = this._nActiveActions++,
+			firstInactiveAction = actions[lastActiveIndex];
+
+		action._cacheIndex = lastActiveIndex;
+		actions[lastActiveIndex] = action;
+
+		firstInactiveAction._cacheIndex = prevIndex;
+		actions[prevIndex] = firstInactiveAction;
+	}
+
+	_takeBackAction(action) {
+		// [  active actions  | inactive actions ]
+		// [ active actions |< inactive actions  ]
+		//        a        s
+		//         <-swap->
+		//        s        a
+
+		const actions = this._actions,
+			prevIndex = action._cacheIndex,
+			firstInactiveIndex = --this._nActiveActions,
+			lastActiveAction = actions[firstInactiveIndex];
+
+		action._cacheIndex = firstInactiveIndex;
+		actions[firstInactiveIndex] = action;
+
+		lastActiveAction._cacheIndex = prevIndex;
+		actions[prevIndex] = lastActiveAction;
+	}
+
+	// Memory management for PropertyMixer objects
+
+	_addInactiveBinding(binding, rootUuid, trackName) {
+		const bindingsByRoot = this._bindingsByRootAndName,
+			bindings = this._bindings;
+
+		let bindingByName = bindingsByRoot[rootUuid];
+
+		if (bindingByName === undefined) {
+			bindingByName = {};
+			bindingsByRoot[rootUuid] = bindingByName;
+		}
+
+		bindingByName[trackName] = binding;
+
+		binding._cacheIndex = bindings.length;
+		bindings.push(binding);
+	}
+
+	_removeInactiveBinding(binding) {
+		const bindings = this._bindings,
+			propBinding = binding.binding,
+			rootUuid = propBinding.rootNode.uuid,
+			trackName = propBinding.path,
+			bindingsByRoot = this._bindingsByRootAndName,
+			bindingByName = bindingsByRoot[rootUuid],
+			lastInactiveBinding = bindings[bindings.length - 1],
+			cacheIndex = binding._cacheIndex;
+
+		lastInactiveBinding._cacheIndex = cacheIndex;
+		bindings[cacheIndex] = lastInactiveBinding;
+		bindings.pop();
+
+		delete bindingByName[trackName];
+
+		if (Object.keys(bindingByName).length === 0) {
+			delete bindingsByRoot[rootUuid];
+		}
+	}
+
+	_lendBinding(binding) {
+		const bindings = this._bindings,
+			prevIndex = binding._cacheIndex,
+			lastActiveIndex = this._nActiveBindings++,
+			firstInactiveBinding = bindings[lastActiveIndex];
+
+		binding._cacheIndex = lastActiveIndex;
+		bindings[lastActiveIndex] = binding;
+
+		firstInactiveBinding._cacheIndex = prevIndex;
+		bindings[prevIndex] = firstInactiveBinding;
+	}
+
+	_takeBackBinding(binding) {
+		const bindings = this._bindings,
+			prevIndex = binding._cacheIndex,
+			firstInactiveIndex = --this._nActiveBindings,
+			lastActiveBinding = bindings[firstInactiveIndex];
+
+		binding._cacheIndex = firstInactiveIndex;
+		bindings[firstInactiveIndex] = binding;
+
+		lastActiveBinding._cacheIndex = prevIndex;
+		bindings[prevIndex] = lastActiveBinding;
+	}
+
+	// Memory management of Interpolants for weight and time scale
+
+	_lendControlInterpolant() {
+		const interpolants = this._controlInterpolants,
+			lastActiveIndex = this._nActiveControlInterpolants++;
+
+		let interpolant = interpolants[lastActiveIndex];
+
+		if (interpolant === undefined) {
+			interpolant = new LinearInterpolant(new Float32Array(2), new Float32Array(2), 1, this._controlInterpolantsResultBuffer);
+
+			interpolant.__cacheIndex = lastActiveIndex;
+			interpolants[lastActiveIndex] = interpolant;
+		}
+
+		return interpolant;
+	}
+
+	_takeBackControlInterpolant(interpolant) {
+		const interpolants = this._controlInterpolants,
+			prevIndex = interpolant.__cacheIndex,
+			firstInactiveIndex = --this._nActiveControlInterpolants,
+			lastActiveInterpolant = interpolants[firstInactiveIndex];
+
+		interpolant.__cacheIndex = firstInactiveIndex;
+		interpolants[firstInactiveIndex] = interpolant;
+
+		lastActiveInterpolant.__cacheIndex = prevIndex;
+		interpolants[prevIndex] = lastActiveInterpolant;
+	}
+
+	// return an action for a clip optionally using a custom root target
+	// object (this method allocates a lot of dynamic memory in case a
+	// previously unknown clip/root combination is specified)
+	clipAction(clip, optionalRoot, blendMode) {
+		const root = optionalRoot || this._root,
+			rootUuid = root.uuid;
+
+		let clipObject = typeof clip === 'string' ? AnimationClip.findByName(root, clip) : clip;
+
+		const clipUuid = clipObject !== null ? clipObject.uuid : clip;
+
+		const actionsForClip = this._actionsByClip[clipUuid];
+		let prototypeAction = null;
+
+		if (blendMode === undefined) {
+			if (clipObject !== null) {
+				blendMode = clipObject.blendMode;
+			} else {
+				blendMode = NormalAnimationBlendMode;
+			}
+		}
+
+		if (actionsForClip !== undefined) {
+			const existingAction = actionsForClip.actionByRoot[rootUuid];
+
+			if (existingAction !== undefined && existingAction.blendMode === blendMode) {
+				return existingAction;
+			}
+
+			// we know the clip, so we don't have to parse all
+			// the bindings again but can just copy
+			prototypeAction = actionsForClip.knownActions[0];
+
+			// also, take the clip from the prototype action
+			if (clipObject === null) clipObject = prototypeAction._clip;
+		}
+
+		// clip must be known when specified via string
+		if (clipObject === null) return null;
+
+		// allocate all resources required to run it
+		const newAction = new AnimationAction(this, clipObject, optionalRoot, blendMode);
+
+		this._bindAction(newAction, prototypeAction);
+
+		// and make the action known to the memory manager
+		this._addInactiveAction(newAction, clipUuid, rootUuid);
+
+		return newAction;
+	}
+
+	// get an existing action
+	existingAction(clip, optionalRoot) {
+		const root = optionalRoot || this._root,
+			rootUuid = root.uuid,
+			clipObject = typeof clip === 'string' ? AnimationClip.findByName(root, clip) : clip,
+			clipUuid = clipObject ? clipObject.uuid : clip,
+			actionsForClip = this._actionsByClip[clipUuid];
+
+		if (actionsForClip !== undefined) {
+			return actionsForClip.actionByRoot[rootUuid] || null;
+		}
+
+		return null;
+	}
+
+	// deactivates all previously scheduled actions
+	stopAllAction() {
+		const actions = this._actions,
+			nActions = this._nActiveActions;
+
+		for (let i = nActions - 1; i >= 0; --i) {
+			actions[i].stop();
+		}
+
+		return this;
+	}
+
+	// advance the time and update apply the animation
+	update(deltaTime) {
+		deltaTime *= this.timeScale;
+
+		const actions = this._actions,
+			nActions = this._nActiveActions,
+			time = (this.time += deltaTime),
+			timeDirection = Math.sign(deltaTime),
+			accuIndex = (this._accuIndex ^= 1);
+
+		// run active actions
+
+		for (let i = 0; i !== nActions; ++i) {
+			const action = actions[i];
+
+			action._update(time, deltaTime, timeDirection, accuIndex);
+		}
+
+		// update scene graph
+
+		const bindings = this._bindings,
+			nBindings = this._nActiveBindings;
+
+		for (let i = 0; i !== nBindings; ++i) {
+			bindings[i].apply(accuIndex);
+		}
+
+		return this;
+	}
+
+	// Allows you to seek to a specific time in an animation.
+	setTime(timeInSeconds) {
+		this.time = 0; // Zero out time attribute for AnimationMixer object;
+		for (let i = 0; i < this._actions.length; i++) {
+			this._actions[i].time = 0; // Zero out time attribute for all associated AnimationAction objects.
+		}
+
+		return this.update(timeInSeconds); // Update used to set exact time. Returns "this" AnimationMixer object.
+	}
+
+	// return this mixer's root target object
+	getRoot() {
+		return this._root;
+	}
+
+	// free all resources specific to a particular clip
+	uncacheClip(clip) {
+		const actions = this._actions,
+			clipUuid = clip.uuid,
+			actionsByClip = this._actionsByClip,
+			actionsForClip = actionsByClip[clipUuid];
+
+		if (actionsForClip !== undefined) {
+			// note: just calling _removeInactiveAction would mess up the
+			// iteration state and also require updating the state we can
+			// just throw away
+
+			const actionsToRemove = actionsForClip.knownActions;
+
+			for (let i = 0, n = actionsToRemove.length; i !== n; ++i) {
+				const action = actionsToRemove[i];
+
+				this._deactivateAction(action);
+
+				const cacheIndex = action._cacheIndex,
+					lastInactiveAction = actions[actions.length - 1];
+
+				action._cacheIndex = null;
+				action._byClipCacheIndex = null;
+
+				lastInactiveAction._cacheIndex = cacheIndex;
+				actions[cacheIndex] = lastInactiveAction;
+				actions.pop();
+
+				this._removeInactiveBindingsForAction(action);
+			}
+
+			delete actionsByClip[clipUuid];
+		}
+	}
+
+	// free all resources specific to a particular root target object
+	uncacheRoot(root) {
+		const rootUuid = root.uuid,
+			actionsByClip = this._actionsByClip;
+
+		for (const clipUuid in actionsByClip) {
+			const actionByRoot = actionsByClip[clipUuid].actionByRoot,
+				action = actionByRoot[rootUuid];
+
+			if (action !== undefined) {
+				this._deactivateAction(action);
+				this._removeInactiveAction(action);
+			}
+		}
+
+		const bindingsByRoot = this._bindingsByRootAndName,
+			bindingByName = bindingsByRoot[rootUuid];
+
+		if (bindingByName !== undefined) {
+			for (const trackName in bindingByName) {
+				const binding = bindingByName[trackName];
+				binding.restoreOriginalState();
+				this._removeInactiveBinding(binding);
+			}
+		}
+	}
+
+	// remove a targeted clip from the cache
+	uncacheAction(clip, optionalRoot) {
+		const action = this.existingAction(clip, optionalRoot);
+
+		if (action !== null) {
+			this._deactivateAction(action);
+			this._removeInactiveAction(action);
+		}
+	}
+}
+
+AnimationMixer.prototype._controlInterpolantsResultBuffer = new Float32Array(1);
+
+export { AnimationMixer };

backend/libs/three/animation/AnimationObjectGroup.d.ts

@@ -0,0 +1,17 @@
+export class AnimationObjectGroup {
+	constructor(...args: any[]);
+
+	uuid: string;
+	stats: {
+		bindingsPerObject: number;
+		objects: {
+			total: number;
+			inUse: number;
+		};
+	};
+	readonly isAnimationObjectGroup: true;
+
+	add(...args: any[]): void;
+	remove(...args: any[]): void;
+	uncache(...args: any[]): void;
+}

backend/libs/three/animation/AnimationObjectGroup.js

@@ -0,0 +1,327 @@
+import { PropertyBinding } from './PropertyBinding.js';
+import * as MathUtils from '../math/MathUtils.js';
+
+/**
+ *
+ * A group of objects that receives a shared animation state.
+ *
+ * Usage:
+ *
+ *  - Add objects you would otherwise pass as 'root' to the
+ *    constructor or the .clipAction method of AnimationMixer.
+ *
+ *  - Instead pass this object as 'root'.
+ *
+ *  - You can also add and remove objects later when the mixer
+ *    is running.
+ *
+ * Note:
+ *
+ *    Objects of this class appear as one object to the mixer,
+ *    so cache control of the individual objects must be done
+ *    on the group.
+ *
+ * Limitation:
+ *
+ *  - The animated properties must be compatible among the
+ *    all objects in the group.
+ *
+ *  - A single property can either be controlled through a
+ *    target group or directly, but not both.
+ */
+
+class AnimationObjectGroup {
+	constructor() {
+		this.uuid = MathUtils.generateUUID();
+
+		// cached objects followed by the active ones
+		this._objects = Array.prototype.slice.call(arguments);
+
+		this.nCachedObjects_ = 0; // threshold
+		// note: read by PropertyBinding.Composite
+
+		const indices = {};
+		this._indicesByUUID = indices; // for bookkeeping
+
+		for (let i = 0, n = arguments.length; i !== n; ++i) {
+			indices[arguments[i].uuid] = i;
+		}
+
+		this._paths = []; // inside: string
+		this._parsedPaths = []; // inside: { we don't care, here }
+		this._bindings = []; // inside: Array< PropertyBinding >
+		this._bindingsIndicesByPath = {}; // inside: indices in these arrays
+
+		const scope = this;
+
+		this.stats = {
+			objects: {
+				get total() {
+					return scope._objects.length;
+				},
+				get inUse() {
+					return this.total - scope.nCachedObjects_;
+				},
+			},
+			get bindingsPerObject() {
+				return scope._bindings.length;
+			},
+		};
+	}
+
+	add() {
+		const objects = this._objects,
+			indicesByUUID = this._indicesByUUID,
+			paths = this._paths,
+			parsedPaths = this._parsedPaths,
+			bindings = this._bindings,
+			nBindings = bindings.length;
+
+		let knownObject = undefined,
+			nObjects = objects.length,
+			nCachedObjects = this.nCachedObjects_;
+
+		for (let i = 0, n = arguments.length; i !== n; ++i) {
+			const object = arguments[i],
+				uuid = object.uuid;
+			let index = indicesByUUID[uuid];
+
+			if (index === undefined) {
+				// unknown object -> add it to the ACTIVE region
+
+				index = nObjects++;
+				indicesByUUID[uuid] = index;
+				objects.push(object);
+
+				// accounting is done, now do the same for all bindings
+
+				for (let j = 0, m = nBindings; j !== m; ++j) {
+					bindings[j].push(new PropertyBinding(object, paths[j], parsedPaths[j]));
+				}
+			} else if (index < nCachedObjects) {
+				knownObject = objects[index];
+
+				// move existing object to the ACTIVE region
+
+				const firstActiveIndex = --nCachedObjects,
+					lastCachedObject = objects[firstActiveIndex];
+
+				indicesByUUID[lastCachedObject.uuid] = index;
+				objects[index] = lastCachedObject;
+
+				indicesByUUID[uuid] = firstActiveIndex;
+				objects[firstActiveIndex] = object;
+
+				// accounting is done, now do the same for all bindings
+
+				for (let j = 0, m = nBindings; j !== m; ++j) {
+					const bindingsForPath = bindings[j],
+						lastCached = bindingsForPath[firstActiveIndex];
+
+					let binding = bindingsForPath[index];
+
+					bindingsForPath[index] = lastCached;
+
+					if (binding === undefined) {
+						// since we do not bother to create new bindings
+						// for objects that are cached, the binding may
+						// or may not exist
+
+						binding = new PropertyBinding(object, paths[j], parsedPaths[j]);
+					}
+
+					bindingsForPath[firstActiveIndex] = binding;
+				}
+			} else if (objects[index] !== knownObject) {
+				console.error(
+					'THREE.AnimationObjectGroup: Different objects with the same UUID ' +
+						'detected. Clean the caches or recreate your infrastructure when reloading scenes.'
+				);
+			} // else the object is already where we want it to be
+		} // for arguments
+
+		this.nCachedObjects_ = nCachedObjects;
+	}
+
+	remove() {
+		const objects = this._objects,
+			indicesByUUID = this._indicesByUUID,
+			bindings = this._bindings,
+			nBindings = bindings.length;
+
+		let nCachedObjects = this.nCachedObjects_;
+
+		for (let i = 0, n = arguments.length; i !== n; ++i) {
+			const object = arguments[i],
+				uuid = object.uuid,
+				index = indicesByUUID[uuid];
+
+			if (index !== undefined && index >= nCachedObjects) {
+				// move existing object into the CACHED region
+
+				const lastCachedIndex = nCachedObjects++,
+					firstActiveObject = objects[lastCachedIndex];
+
+				indicesByUUID[firstActiveObject.uuid] = index;
+				objects[index] = firstActiveObject;
+
+				indicesByUUID[uuid] = lastCachedIndex;
+				objects[lastCachedIndex] = object;
+
+				// accounting is done, now do the same for all bindings
+
+				for (let j = 0, m = nBindings; j !== m; ++j) {
+					const bindingsForPath = bindings[j],
+						firstActive = bindingsForPath[lastCachedIndex],
+						binding = bindingsForPath[index];
+
+					bindingsForPath[index] = firstActive;
+					bindingsForPath[lastCachedIndex] = binding;
+				}
+			}
+		} // for arguments
+
+		this.nCachedObjects_ = nCachedObjects;
+	}
+
+	// remove & forget
+	uncache() {
+		const objects = this._objects,
+			indicesByUUID = this._indicesByUUID,
+			bindings = this._bindings,
+			nBindings = bindings.length;
+
+		let nCachedObjects = this.nCachedObjects_,
+			nObjects = objects.length;
+
+		for (let i = 0, n = arguments.length; i !== n; ++i) {
+			const object = arguments[i],
+				uuid = object.uuid,
+				index = indicesByUUID[uuid];
+
+			if (index !== undefined) {
+				delete indicesByUUID[uuid];
+
+				if (index < nCachedObjects) {
+					// object is cached, shrink the CACHED region
+
+					const firstActiveIndex = --nCachedObjects,
+						lastCachedObject = objects[firstActiveIndex],
+						lastIndex = --nObjects,
+						lastObject = objects[lastIndex];
+
+					// last cached object takes this object's place
+					indicesByUUID[lastCachedObject.uuid] = index;
+					objects[index] = lastCachedObject;
+
+					// last object goes to the activated slot and pop
+					indicesByUUID[lastObject.uuid] = firstActiveIndex;
+					objects[firstActiveIndex] = lastObject;
+					objects.pop();
+
+					// accounting is done, now do the same for all bindings
+
+					for (let j = 0, m = nBindings; j !== m; ++j) {
+						const bindingsForPath = bindings[j],
+							lastCached = bindingsForPath[firstActiveIndex],
+							last = bindingsForPath[lastIndex];
+
+						bindingsForPath[index] = lastCached;
+						bindingsForPath[firstActiveIndex] = last;
+						bindingsForPath.pop();
+					}
+				} else {
+					// object is active, just swap with the last and pop
+
+					const lastIndex = --nObjects,
+						lastObject = objects[lastIndex];
+
+					if (lastIndex > 0) {
+						indicesByUUID[lastObject.uuid] = index;
+					}
+
+					objects[index] = lastObject;
+					objects.pop();
+
+					// accounting is done, now do the same for all bindings
+
+					for (let j = 0, m = nBindings; j !== m; ++j) {
+						const bindingsForPath = bindings[j];
+
+						bindingsForPath[index] = bindingsForPath[lastIndex];
+						bindingsForPath.pop();
+					}
+				} // cached or active
+			} // if object is known
+		} // for arguments
+
+		this.nCachedObjects_ = nCachedObjects;
+	}
+
+	// Internal interface used by befriended PropertyBinding.Composite:
+
+	subscribe_(path, parsedPath) {
+		// returns an array of bindings for the given path that is changed
+		// according to the contained objects in the group
+
+		const indicesByPath = this._bindingsIndicesByPath;
+		let index = indicesByPath[path];
+		const bindings = this._bindings;
+
+		if (index !== undefined) return bindings[index];
+
+		const paths = this._paths,
+			parsedPaths = this._parsedPaths,
+			objects = this._objects,
+			nObjects = objects.length,
+			nCachedObjects = this.nCachedObjects_,
+			bindingsForPath = new Array(nObjects);
+
+		index = bindings.length;
+
+		indicesByPath[path] = index;
+
+		paths.push(path);
+		parsedPaths.push(parsedPath);
+		bindings.push(bindingsForPath);
+
+		for (let i = nCachedObjects, n = objects.length; i !== n; ++i) {
+			const object = objects[i];
+			bindingsForPath[i] = new PropertyBinding(object, path, parsedPath);
+		}
+
+		return bindingsForPath;
+	}
+
+	unsubscribe_(path) {
+		// tells the group to forget about a property path and no longer
+		// update the array previously obtained with 'subscribe_'
+
+		const indicesByPath = this._bindingsIndicesByPath,
+			index = indicesByPath[path];
+
+		if (index !== undefined) {
+			const paths = this._paths,
+				parsedPaths = this._parsedPaths,
+				bindings = this._bindings,
+				lastBindingsIndex = bindings.length - 1,
+				lastBindings = bindings[lastBindingsIndex],
+				lastBindingsPath = path[lastBindingsIndex];
+
+			indicesByPath[lastBindingsPath] = index;
+
+			bindings[index] = lastBindings;
+			bindings.pop();
+
+			parsedPaths[index] = parsedPaths[lastBindingsIndex];
+			parsedPaths.pop();
+
+			paths[index] = paths[lastBindingsIndex];
+			paths.pop();
+		}
+	}
+}
+
+AnimationObjectGroup.prototype.isAnimationObjectGroup = true;
+
+export { AnimationObjectGroup };

backend/libs/three/animation/AnimationUtils.d.ts

@@ -0,0 +1,27 @@
+import { AnimationClip } from './AnimationClip';
+
+export namespace AnimationUtils {
+	function arraySlice(array: any, from: number, to: number): any;
+	function convertArray(array: any, type: any, forceClone: boolean): any;
+	function isTypedArray(object: any): boolean;
+	function getKeyframeOrder(times: number[]): number[];
+	function sortedArray(values: any[], stride: number, order: number[]): any[];
+	function flattenJSON(jsonKeys: string[], times: any[], values: any[], valuePropertyName: string): void;
+
+	/**
+	 * @param sourceClip
+	 * @param name
+	 * @param startFrame
+	 * @param endFrame
+	 * @param [fps=30]
+	 */
+	function subclip(sourceClip: AnimationClip, name: string, startFrame: number, endFrame: number, fps?: number): AnimationClip;
+
+	/**
+	 * @param targetClip
+	 * @param [referenceFrame=0]
+	 * @param [referenceClip=targetClip]
+	 * @param [fps=30]
+	 */
+	function makeClipAdditive(targetClip: AnimationClip, referenceFrame?: number, referenceClip?: AnimationClip, fps?: number): AnimationClip;
+}

backend/libs/three/animation/AnimationUtils.js

@@ -0,0 +1,267 @@
+import { Quaternion } from '../math/Quaternion.js';
+import { AdditiveAnimationBlendMode } from '../constants.js';
+
+const AnimationUtils = {
+	// same as Array.prototype.slice, but also works on typed arrays
+	arraySlice: function (array, from, to) {
+		if (AnimationUtils.isTypedArray(array)) {
+			// in ios9 array.subarray(from, undefined) will return empty array
+			// but array.subarray(from) or array.subarray(from, len) is correct
+			return new array.constructor(array.subarray(from, to !== undefined ? to : array.length));
+		}
+
+		return array.slice(from, to);
+	},
+
+	// converts an array to a specific type
+	convertArray: function (array, type, forceClone) {
+		if (
+			!array || // let 'undefined' and 'null' pass
+			(!forceClone && array.constructor === type)
+		)
+			return array;
+
+		if (typeof type.BYTES_PER_ELEMENT === 'number') {
+			return new type(array); // create typed array
+		}
+
+		return Array.prototype.slice.call(array); // create Array
+	},
+
+	isTypedArray: function (object) {
+		return ArrayBuffer.isView(object) && !(object instanceof DataView);
+	},
+
+	// returns an array by which times and values can be sorted
+	getKeyframeOrder: function (times) {
+		function compareTime(i, j) {
+			return times[i] - times[j];
+		}
+
+		const n = times.length;
+		const result = new Array(n);
+		for (let i = 0; i !== n; ++i) result[i] = i;
+
+		result.sort(compareTime);
+
+		return result;
+	},
+
+	// uses the array previously returned by 'getKeyframeOrder' to sort data
+	sortedArray: function (values, stride, order) {
+		const nValues = values.length;
+		const result = new values.constructor(nValues);
+
+		for (let i = 0, dstOffset = 0; dstOffset !== nValues; ++i) {
+			const srcOffset = order[i] * stride;
+
+			for (let j = 0; j !== stride; ++j) {
+				result[dstOffset++] = values[srcOffset + j];
+			}
+		}
+
+		return result;
+	},
+
+	// function for parsing AOS keyframe formats
+	flattenJSON: function (jsonKeys, times, values, valuePropertyName) {
+		let i = 1,
+			key = jsonKeys[0];
+
+		while (key !== undefined && key[valuePropertyName] === undefined) {
+			key = jsonKeys[i++];
+		}
+
+		if (key === undefined) return; // no data
+
+		let value = key[valuePropertyName];
+		if (value === undefined) return; // no data
+
+		if (Array.isArray(value)) {
+			do {
+				value = key[valuePropertyName];
+
+				if (value !== undefined) {
+					times.push(key.time);
+					values.push.apply(values, value); // push all elements
+				}
+
+				key = jsonKeys[i++];
+			} while (key !== undefined);
+		} else if (value.toArray !== undefined) {
+			// ...assume THREE.Math-ish
+
+			do {
+				value = key[valuePropertyName];
+
+				if (value !== undefined) {
+					times.push(key.time);
+					value.toArray(values, values.length);
+				}
+
+				key = jsonKeys[i++];
+			} while (key !== undefined);
+		} else {
+			// otherwise push as-is
+
+			do {
+				value = key[valuePropertyName];
+
+				if (value !== undefined) {
+					times.push(key.time);
+					values.push(value);
+				}
+
+				key = jsonKeys[i++];
+			} while (key !== undefined);
+		}
+	},
+
+	subclip: function (sourceClip, name, startFrame, endFrame, fps = 30) {
+		const clip = sourceClip.clone();
+
+		clip.name = name;
+
+		const tracks = [];
+
+		for (let i = 0; i < clip.tracks.length; ++i) {
+			const track = clip.tracks[i];
+			const valueSize = track.getValueSize();
+
+			const times = [];
+			const values = [];
+
+			for (let j = 0; j < track.times.length; ++j) {
+				const frame = track.times[j] * fps;
+
+				if (frame < startFrame || frame >= endFrame) continue;
+
+				times.push(track.times[j]);
+
+				for (let k = 0; k < valueSize; ++k) {
+					values.push(track.values[j * valueSize + k]);
+				}
+			}
+
+			if (times.length === 0) continue;
+
+			track.times = AnimationUtils.convertArray(times, track.times.constructor);
+			track.values = AnimationUtils.convertArray(values, track.values.constructor);
+
+			tracks.push(track);
+		}
+
+		clip.tracks = tracks;
+
+		// find minimum .times value across all tracks in the trimmed clip
+
+		let minStartTime = Infinity;
+
+		for (let i = 0; i < clip.tracks.length; ++i) {
+			if (minStartTime > clip.tracks[i].times[0]) {
+				minStartTime = clip.tracks[i].times[0];
+			}
+		}
+
+		// shift all tracks such that clip begins at t=0
+
+		for (let i = 0; i < clip.tracks.length; ++i) {
+			clip.tracks[i].shift(-1 * minStartTime);
+		}
+
+		clip.resetDuration();
+
+		return clip;
+	},
+
+	makeClipAdditive: function (targetClip, referenceFrame = 0, referenceClip = targetClip, fps = 30) {
+		if (fps <= 0) fps = 30;
+
+		const numTracks = referenceClip.tracks.length;
+		const referenceTime = referenceFrame / fps;
+
+		// Make each track's values relative to the values at the reference frame
+		for (let i = 0; i < numTracks; ++i) {
+			const referenceTrack = referenceClip.tracks[i];
+			const referenceTrackType = referenceTrack.ValueTypeName;
+
+			// Skip this track if it's non-numeric
+			if (referenceTrackType === 'bool' || referenceTrackType === 'string') continue;
+
+			// Find the track in the target clip whose name and type matches the reference track
+			const targetTrack = targetClip.tracks.find(function (track) {
+				return track.name === referenceTrack.name && track.ValueTypeName === referenceTrackType;
+			});
+
+			if (targetTrack === undefined) continue;
+
+			let referenceOffset = 0;
+			const referenceValueSize = referenceTrack.getValueSize();
+
+			if (referenceTrack.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline) {
+				referenceOffset = referenceValueSize / 3;
+			}
+
+			let targetOffset = 0;
+			const targetValueSize = targetTrack.getValueSize();
+
+			if (targetTrack.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline) {
+				targetOffset = targetValueSize / 3;
+			}
+
+			const lastIndex = referenceTrack.times.length - 1;
+			let referenceValue;
+
+			// Find the value to subtract out of the track
+			if (referenceTime <= referenceTrack.times[0]) {
+				// Reference frame is earlier than the first keyframe, so just use the first keyframe
+				const startIndex = referenceOffset;
+				const endIndex = referenceValueSize - referenceOffset;
+				referenceValue = AnimationUtils.arraySlice(referenceTrack.values, startIndex, endIndex);
+			} else if (referenceTime >= referenceTrack.times[lastIndex]) {
+				// Reference frame is after the last keyframe, so just use the last keyframe
+				const startIndex = lastIndex * referenceValueSize + referenceOffset;
+				const endIndex = startIndex + referenceValueSize - referenceOffset;
+				referenceValue = AnimationUtils.arraySlice(referenceTrack.values, startIndex, endIndex);
+			} else {
+				// Interpolate to the reference value
+				const interpolant = referenceTrack.createInterpolant();
+				const startIndex = referenceOffset;
+				const endIndex = referenceValueSize - referenceOffset;
+				interpolant.evaluate(referenceTime);
+				referenceValue = AnimationUtils.arraySlice(interpolant.resultBuffer, startIndex, endIndex);
+			}
+
+			// Conjugate the quaternion
+			if (referenceTrackType === 'quaternion') {
+				const referenceQuat = new Quaternion().fromArray(referenceValue).normalize().conjugate();
+				referenceQuat.toArray(referenceValue);
+			}
+
+			// Subtract the reference value from all of the track values
+
+			const numTimes = targetTrack.times.length;
+			for (let j = 0; j < numTimes; ++j) {
+				const valueStart = j * targetValueSize + targetOffset;
+
+				if (referenceTrackType === 'quaternion') {
+					// Multiply the conjugate for quaternion track types
+					Quaternion.multiplyQuaternionsFlat(targetTrack.values, valueStart, referenceValue, 0, targetTrack.values, valueStart);
+				} else {
+					const valueEnd = targetValueSize - targetOffset * 2;
+
+					// Subtract each value for all other numeric track types
+					for (let k = 0; k < valueEnd; ++k) {
+						targetTrack.values[valueStart + k] -= referenceValue[k];
+					}
+				}
+			}
+		}
+
+		targetClip.blendMode = AdditiveAnimationBlendMode;
+
+		return targetClip;
+	},
+};
+
+export { AnimationUtils };

backend/libs/three/animation/KeyframeTrack.d.ts

@@ -0,0 +1,45 @@
+import { DiscreteInterpolant } from './../math/interpolants/DiscreteInterpolant';
+import { LinearInterpolant } from './../math/interpolants/LinearInterpolant';
+import { CubicInterpolant } from './../math/interpolants/CubicInterpolant';
+import { InterpolationModes } from '../constants';
+
+export class KeyframeTrack {
+	/**
+	 * @param name
+	 * @param times
+	 * @param values
+	 * @param [interpolation=THREE.InterpolateLinear]
+	 */
+	constructor(name: string, times: ArrayLike<any>, values: ArrayLike<any>, interpolation?: InterpolationModes);
+
+	name: string;
+	times: Float32Array;
+	values: Float32Array;
+
+	ValueTypeName: string;
+	TimeBufferType: Float32Array;
+	ValueBufferType: Float32Array;
+
+	/**
+	 * @default THREE.InterpolateLinear
+	 */
+	DefaultInterpolation: InterpolationModes;
+
+	InterpolantFactoryMethodDiscrete(result: any): DiscreteInterpolant;
+	InterpolantFactoryMethodLinear(result: any): LinearInterpolant;
+	InterpolantFactoryMethodSmooth(result: any): CubicInterpolant;
+
+	setInterpolation(interpolation: InterpolationModes): KeyframeTrack;
+	getInterpolation(): InterpolationModes;
+
+	getValueSize(): number;
+
+	shift(timeOffset: number): KeyframeTrack;
+	scale(timeScale: number): KeyframeTrack;
+	trim(startTime: number, endTime: number): KeyframeTrack;
+	validate(): boolean;
+	optimize(): KeyframeTrack;
+	clone(): this;
+
+	static toJSON(track: KeyframeTrack): any;
+}

backend/libs/three/animation/KeyframeTrack.js

@@ -0,0 +1,337 @@
+import { InterpolateLinear, InterpolateSmooth, InterpolateDiscrete } from '../constants.js';
+import { CubicInterpolant } from '../math/interpolants/CubicInterpolant.js';
+import { LinearInterpolant } from '../math/interpolants/LinearInterpolant.js';
+import { DiscreteInterpolant } from '../math/interpolants/DiscreteInterpolant.js';
+import { AnimationUtils } from './AnimationUtils.js';
+
+class KeyframeTrack {
+	constructor(name, times, values, interpolation) {
+		if (name === undefined) throw new Error('THREE.KeyframeTrack: track name is undefined');
+		if (times === undefined || times.length === 0) throw new Error('THREE.KeyframeTrack: no keyframes in track named ' + name);
+
+		this.name = name;
+
+		this.times = AnimationUtils.convertArray(times, this.TimeBufferType);
+		this.values = AnimationUtils.convertArray(values, this.ValueBufferType);
+
+		this.setInterpolation(interpolation || this.DefaultInterpolation);
+	}
+
+	// Serialization (in static context, because of constructor invocation
+	// and automatic invocation of .toJSON):
+
+	static toJSON(track) {
+		const trackType = track.constructor;
+
+		let json;
+
+		// derived classes can define a static toJSON method
+		if (trackType.toJSON !== this.toJSON) {
+			json = trackType.toJSON(track);
+		} else {
+			// by default, we assume the data can be serialized as-is
+			json = {
+				name: track.name,
+				times: AnimationUtils.convertArray(track.times, Array),
+				values: AnimationUtils.convertArray(track.values, Array),
+			};
+
+			const interpolation = track.getInterpolation();
+
+			if (interpolation !== track.DefaultInterpolation) {
+				json.interpolation = interpolation;
+			}
+		}
+
+		json.type = track.ValueTypeName; // mandatory
+
+		return json;
+	}
+
+	InterpolantFactoryMethodDiscrete(result) {
+		return new DiscreteInterpolant(this.times, this.values, this.getValueSize(), result);
+	}
+
+	InterpolantFactoryMethodLinear(result) {
+		return new LinearInterpolant(this.times, this.values, this.getValueSize(), result);
+	}
+
+	InterpolantFactoryMethodSmooth(result) {
+		return new CubicInterpolant(this.times, this.values, this.getValueSize(), result);
+	}
+
+	setInterpolation(interpolation) {
+		let factoryMethod;
+
+		switch (interpolation) {
+			case InterpolateDiscrete:
+				factoryMethod = this.InterpolantFactoryMethodDiscrete;
+
+				break;
+
+			case InterpolateLinear:
+				factoryMethod = this.InterpolantFactoryMethodLinear;
+
+				break;
+
+			case InterpolateSmooth:
+				factoryMethod = this.InterpolantFactoryMethodSmooth;
+
+				break;
+		}
+
+		if (factoryMethod === undefined) {
+			const message = 'unsupported interpolation for ' + this.ValueTypeName + ' keyframe track named ' + this.name;
+
+			if (this.createInterpolant === undefined) {
+				// fall back to default, unless the default itself is messed up
+				if (interpolation !== this.DefaultInterpolation) {
+					this.setInterpolation(this.DefaultInterpolation);
+				} else {
+					throw new Error(message); // fatal, in this case
+				}
+			}
+
+			console.warn('THREE.KeyframeTrack:', message);
+			return this;
+		}
+
+		this.createInterpolant = factoryMethod;
+
+		return this;
+	}
+
+	getInterpolation() {
+		switch (this.createInterpolant) {
+			case this.InterpolantFactoryMethodDiscrete:
+				return InterpolateDiscrete;
+
+			case this.InterpolantFactoryMethodLinear:
+				return InterpolateLinear;
+
+			case this.InterpolantFactoryMethodSmooth:
+				return InterpolateSmooth;
+		}
+	}
+
+	getValueSize() {
+		return this.values.length / this.times.length;
+	}
+
+	// move all keyframes either forwards or backwards in time
+	shift(timeOffset) {
+		if (timeOffset !== 0.0) {
+			const times = this.times;
+
+			for (let i = 0, n = times.length; i !== n; ++i) {
+				times[i] += timeOffset;
+			}
+		}
+
+		return this;
+	}
+
+	// scale all keyframe times by a factor (useful for frame <-> seconds conversions)
+	scale(timeScale) {
+		if (timeScale !== 1.0) {
+			const times = this.times;
+
+			for (let i = 0, n = times.length; i !== n; ++i) {
+				times[i] *= timeScale;
+			}
+		}
+
+		return this;
+	}
+
+	// removes keyframes before and after animation without changing any values within the range [startTime, endTime].
+	// IMPORTANT: We do not shift around keys to the start of the track time, because for interpolated keys this will change their values
+	trim(startTime, endTime) {
+		const times = this.times,
+			nKeys = times.length;
+
+		let from = 0,
+			to = nKeys - 1;
+
+		while (from !== nKeys && times[from] < startTime) {
+			++from;
+		}
+
+		while (to !== -1 && times[to] > endTime) {
+			--to;
+		}
+
+		++to; // inclusive -> exclusive bound
+
+		if (from !== 0 || to !== nKeys) {
+			// empty tracks are forbidden, so keep at least one keyframe
+			if (from >= to) {
+				to = Math.max(to, 1);
+				from = to - 1;
+			}
+
+			const stride = this.getValueSize();
+			this.times = AnimationUtils.arraySlice(times, from, to);
+			this.values = AnimationUtils.arraySlice(this.values, from * stride, to * stride);
+		}
+
+		return this;
+	}
+
+	// ensure we do not get a GarbageInGarbageOut situation, make sure tracks are at least minimally viable
+	validate() {
+		let valid = true;
+
+		const valueSize = this.getValueSize();
+		if (valueSize - Math.floor(valueSize) !== 0) {
+			console.error('THREE.KeyframeTrack: Invalid value size in track.', this);
+			valid = false;
+		}
+
+		const times = this.times,
+			values = this.values,
+			nKeys = times.length;
+
+		if (nKeys === 0) {
+			console.error('THREE.KeyframeTrack: Track is empty.', this);
+			valid = false;
+		}
+
+		let prevTime = null;
+
+		for (let i = 0; i !== nKeys; i++) {
+			const currTime = times[i];
+
+			if (typeof currTime === 'number' && isNaN(currTime)) {
+				console.error('THREE.KeyframeTrack: Time is not a valid number.', this, i, currTime);
+				valid = false;
+				break;
+			}
+
+			if (prevTime !== null && prevTime > currTime) {
+				console.error('THREE.KeyframeTrack: Out of order keys.', this, i, currTime, prevTime);
+				valid = false;
+				break;
+			}
+
+			prevTime = currTime;
+		}
+
+		if (values !== undefined) {
+			if (AnimationUtils.isTypedArray(values)) {
+				for (let i = 0, n = values.length; i !== n; ++i) {
+					const value = values[i];
+
+					if (isNaN(value)) {
+						console.error('THREE.KeyframeTrack: Value is not a valid number.', this, i, value);
+						valid = false;
+						break;
+					}
+				}
+			}
+		}
+
+		return valid;
+	}
+
+	// removes equivalent sequential keys as common in morph target sequences
+	// (0,0,0,0,1,1,1,0,0,0,0,0,0,0) --> (0,0,1,1,0,0)
+	optimize() {
+		// times or values may be shared with other tracks, so overwriting is unsafe
+		const times = AnimationUtils.arraySlice(this.times),
+			values = AnimationUtils.arraySlice(this.values),
+			stride = this.getValueSize(),
+			smoothInterpolation = this.getInterpolation() === InterpolateSmooth,
+			lastIndex = times.length - 1;
+
+		let writeIndex = 1;
+
+		for (let i = 1; i < lastIndex; ++i) {
+			let keep = false;
+
+			const time = times[i];
+			const timeNext = times[i + 1];
+
+			// remove adjacent keyframes scheduled at the same time
+
+			if (time !== timeNext && (i !== 1 || time !== times[0])) {
+				if (!smoothInterpolation) {
+					// remove unnecessary keyframes same as their neighbors
+
+					const offset = i * stride,
+						offsetP = offset - stride,
+						offsetN = offset + stride;
+
+					for (let j = 0; j !== stride; ++j) {
+						const value = values[offset + j];
+
+						if (value !== values[offsetP + j] || value !== values[offsetN + j]) {
+							keep = true;
+							break;
+						}
+					}
+				} else {
+					keep = true;
+				}
+			}
+
+			// in-place compaction
+
+			if (keep) {
+				if (i !== writeIndex) {
+					times[writeIndex] = times[i];
+
+					const readOffset = i * stride,
+						writeOffset = writeIndex * stride;
+
+					for (let j = 0; j !== stride; ++j) {
+						values[writeOffset + j] = values[readOffset + j];
+					}
+				}
+
+				++writeIndex;
+			}
+		}
+
+		// flush last keyframe (compaction looks ahead)
+
+		if (lastIndex > 0) {
+			times[writeIndex] = times[lastIndex];
+
+			for (let readOffset = lastIndex * stride, writeOffset = writeIndex * stride, j = 0; j !== stride; ++j) {
+				values[writeOffset + j] = values[readOffset + j];
+			}
+
+			++writeIndex;
+		}
+
+		if (writeIndex !== times.length) {
+			this.times = AnimationUtils.arraySlice(times, 0, writeIndex);
+			this.values = AnimationUtils.arraySlice(values, 0, writeIndex * stride);
+		} else {
+			this.times = times;
+			this.values = values;
+		}
+
+		return this;
+	}
+
+	clone() {
+		const times = AnimationUtils.arraySlice(this.times, 0);
+		const values = AnimationUtils.arraySlice(this.values, 0);
+
+		const TypedKeyframeTrack = this.constructor;
+		const track = new TypedKeyframeTrack(this.name, times, values);
+
+		// Interpolant argument to constructor is not saved, so copy the factory method directly.
+		track.createInterpolant = this.createInterpolant;
+
+		return track;
+	}
+}
+
+KeyframeTrack.prototype.TimeBufferType = Float32Array;
+KeyframeTrack.prototype.ValueBufferType = Float32Array;
+KeyframeTrack.prototype.DefaultInterpolation = InterpolateLinear;
+
+export { KeyframeTrack };

backend/libs/three/animation/PropertyBinding.d.ts

@@ -0,0 +1,43 @@
+export interface ParseTrackNameResults {
+	nodeName: string;
+	objectName: string;
+	objectIndex: string;
+	propertyName: string;
+	propertyIndex: string;
+}
+
+export class PropertyBinding {
+	constructor(rootNode: any, path: string, parsedPath?: any);
+
+	path: string;
+	parsedPath: any;
+	node: any;
+	rootNode: any;
+
+	getValue(targetArray: any, offset: number): any;
+	setValue(sourceArray: any, offset: number): void;
+	bind(): void;
+	unbind(): void;
+
+	BindingType: { [bindingType: string]: number };
+	Versioning: { [versioning: string]: number };
+
+	GetterByBindingType: Array<() => void>;
+	SetterByBindingTypeAndVersioning: Array<Array<() => void>>;
+
+	static create(root: any, path: any, parsedPath?: any): PropertyBinding | PropertyBinding.Composite;
+	static sanitizeNodeName(name: string): string;
+	static parseTrackName(trackName: string): ParseTrackNameResults;
+	static findNode(root: any, nodeName: string): any;
+}
+
+export namespace PropertyBinding {
+	class Composite {
+		constructor(targetGroup: any, path: any, parsedPath?: any);
+
+		getValue(array: any, offset: number): any;
+		setValue(array: any, offset: number): void;
+		bind(): void;
+		unbind(): void;
+	}
+}

backend/libs/three/animation/PropertyBinding.js

@@ -0,0 +1,534 @@
+// Characters [].:/ are reserved for track binding syntax.
+const _RESERVED_CHARS_RE = '\\[\\]\\.:\\/';
+const _reservedRe = new RegExp('[' + _RESERVED_CHARS_RE + ']', 'g');
+
+// Attempts to allow node names from any language. ES5's `\w` regexp matches
+// only latin characters, and the unicode \p{L} is not yet supported. So
+// instead, we exclude reserved characters and match everything else.
+const _wordChar = '[^' + _RESERVED_CHARS_RE + ']';
+const _wordCharOrDot = '[^' + _RESERVED_CHARS_RE.replace('\\.', '') + ']';
+
+// Parent directories, delimited by '/' or ':'. Currently unused, but must
+// be matched to parse the rest of the track name.
+const _directoryRe = /((?:WC+[\/:])*)/.source.replace('WC', _wordChar);
+
+// Target node. May contain word characters (a-zA-Z0-9_) and '.' or '-'.
+const _nodeRe = /(WCOD+)?/.source.replace('WCOD', _wordCharOrDot);
+
+// Object on target node, and accessor. May not contain reserved
+// characters. Accessor may contain any character except closing bracket.
+const _objectRe = /(?:\.(WC+)(?:\[(.+)\])?)?/.source.replace('WC', _wordChar);
+
+// Property and accessor. May not contain reserved characters. Accessor may
+// contain any non-bracket characters.
+const _propertyRe = /\.(WC+)(?:\[(.+)\])?/.source.replace('WC', _wordChar);
+
+const _trackRe = new RegExp('' + '^' + _directoryRe + _nodeRe + _objectRe + _propertyRe + '$');
+
+const _supportedObjectNames = ['material', 'materials', 'bones'];
+
+class Composite {
+	constructor(targetGroup, path, optionalParsedPath) {
+		const parsedPath = optionalParsedPath || PropertyBinding.parseTrackName(path);
+
+		this._targetGroup = targetGroup;
+		this._bindings = targetGroup.subscribe_(path, parsedPath);
+	}
+
+	getValue(array, offset) {
+		this.bind(); // bind all binding
+
+		const firstValidIndex = this._targetGroup.nCachedObjects_,
+			binding = this._bindings[firstValidIndex];
+
+		// and only call .getValue on the first
+		if (binding !== undefined) binding.getValue(array, offset);
+	}
+
+	setValue(array, offset) {
+		const bindings = this._bindings;
+
+		for (let i = this._targetGroup.nCachedObjects_, n = bindings.length; i !== n; ++i) {
+			bindings[i].setValue(array, offset);
+		}
+	}
+
+	bind() {
+		const bindings = this._bindings;
+
+		for (let i = this._targetGroup.nCachedObjects_, n = bindings.length; i !== n; ++i) {
+			bindings[i].bind();
+		}
+	}
+
+	unbind() {
+		const bindings = this._bindings;
+
+		for (let i = this._targetGroup.nCachedObjects_, n = bindings.length; i !== n; ++i) {
+			bindings[i].unbind();
+		}
+	}
+}
+
+// Note: This class uses a State pattern on a per-method basis:
+// 'bind' sets 'this.getValue' / 'setValue' and shadows the
+// prototype version of these methods with one that represents
+// the bound state. When the property is not found, the methods
+// become no-ops.
+class PropertyBinding {
+	constructor(rootNode, path, parsedPath) {
+		this.path = path;
+		this.parsedPath = parsedPath || PropertyBinding.parseTrackName(path);
+
+		this.node = PropertyBinding.findNode(rootNode, this.parsedPath.nodeName) || rootNode;
+
+		this.rootNode = rootNode;
+
+		// initial state of these methods that calls 'bind'
+		this.getValue = this._getValue_unbound;
+		this.setValue = this._setValue_unbound;
+	}
+
+	static create(root, path, parsedPath) {
+		if (!(root && root.isAnimationObjectGroup)) {
+			return new PropertyBinding(root, path, parsedPath);
+		} else {
+			return new PropertyBinding.Composite(root, path, parsedPath);
+		}
+	}
+
+	/**
+	 * Replaces spaces with underscores and removes unsupported characters from
+	 * node names, to ensure compatibility with parseTrackName().
+	 *
+	 * @param {string} name Node name to be sanitized.
+	 * @return {string}
+	 */
+	static sanitizeNodeName(name) {
+		return name.replace(/\s/g, '_').replace(_reservedRe, '');
+	}
+
+	static parseTrackName(trackName) {
+		const matches = _trackRe.exec(trackName);
+
+		if (!matches) {
+			throw new Error('PropertyBinding: Cannot parse trackName: ' + trackName);
+		}
+
+		const results = {
+			// directoryName: matches[ 1 ], // (tschw) currently unused
+			nodeName: matches[2],
+			objectName: matches[3],
+			objectIndex: matches[4],
+			propertyName: matches[5], // required
+			propertyIndex: matches[6],
+		};
+
+		const lastDot = results.nodeName && results.nodeName.lastIndexOf('.');
+
+		if (lastDot !== undefined && lastDot !== -1) {
+			const objectName = results.nodeName.substring(lastDot + 1);
+
+			// Object names must be checked against an allowlist. Otherwise, there
+			// is no way to parse 'foo.bar.baz': 'baz' must be a property, but
+			// 'bar' could be the objectName, or part of a nodeName (which can
+			// include '.' characters).
+			if (_supportedObjectNames.indexOf(objectName) !== -1) {
+				results.nodeName = results.nodeName.substring(0, lastDot);
+				results.objectName = objectName;
+			}
+		}
+
+		if (results.propertyName === null || results.propertyName.length === 0) {
+			throw new Error('PropertyBinding: can not parse propertyName from trackName: ' + trackName);
+		}
+
+		return results;
+	}
+
+	static findNode(root, nodeName) {
+		if (!nodeName || nodeName === '' || nodeName === '.' || nodeName === -1 || nodeName === root.name || nodeName === root.uuid) {
+			return root;
+		}
+
+		// search into skeleton bones.
+		if (root.skeleton) {
+			const bone = root.skeleton.getBoneByName(nodeName);
+
+			if (bone !== undefined) {
+				return bone;
+			}
+		}
+
+		// search into node subtree.
+		if (root.children) {
+			const searchNodeSubtree = function (children) {
+				for (let i = 0; i < children.length; i++) {
+					const childNode = children[i];
+
+					if (childNode.name === nodeName || childNode.uuid === nodeName) {
+						return childNode;
+					}
+
+					const result = searchNodeSubtree(childNode.children);
+
+					if (result) return result;
+				}
+
+				return null;
+			};
+
+			const subTreeNode = searchNodeSubtree(root.children);
+
+			if (subTreeNode) {
+				return subTreeNode;
+			}
+		}
+
+		return null;
+	}
+
+	// these are used to "bind" a nonexistent property
+	_getValue_unavailable() {}
+	_setValue_unavailable() {}
+
+	// Getters
+
+	_getValue_direct(buffer, offset) {
+		buffer[offset] = this.targetObject[this.propertyName];
+	}
+
+	_getValue_array(buffer, offset) {
+		const source = this.resolvedProperty;
+
+		for (let i = 0, n = source.length; i !== n; ++i) {
+			buffer[offset++] = source[i];
+		}
+	}
+
+	_getValue_arrayElement(buffer, offset) {
+		buffer[offset] = this.resolvedProperty[this.propertyIndex];
+	}
+
+	_getValue_toArray(buffer, offset) {
+		this.resolvedProperty.toArray(buffer, offset);
+	}
+
+	// Direct
+
+	_setValue_direct(buffer, offset) {
+		this.targetObject[this.propertyName] = buffer[offset];
+	}
+
+	_setValue_direct_setNeedsUpdate(buffer, offset) {
+		this.targetObject[this.propertyName] = buffer[offset];
+		this.targetObject.needsUpdate = true;
+	}
+
+	_setValue_direct_setMatrixWorldNeedsUpdate(buffer, offset) {
+		this.targetObject[this.propertyName] = buffer[offset];
+		this.targetObject.matrixWorldNeedsUpdate = true;
+	}
+
+	// EntireArray
+
+	_setValue_array(buffer, offset) {
+		const dest = this.resolvedProperty;
+
+		for (let i = 0, n = dest.length; i !== n; ++i) {
+			dest[i] = buffer[offset++];
+		}
+	}
+
+	_setValue_array_setNeedsUpdate(buffer, offset) {
+		const dest = this.resolvedProperty;
+
+		for (let i = 0, n = dest.length; i !== n; ++i) {
+			dest[i] = buffer[offset++];
+		}
+
+		this.targetObject.needsUpdate = true;
+	}
+
+	_setValue_array_setMatrixWorldNeedsUpdate(buffer, offset) {
+		const dest = this.resolvedProperty;
+
+		for (let i = 0, n = dest.length; i !== n; ++i) {
+			dest[i] = buffer[offset++];
+		}
+
+		this.targetObject.matrixWorldNeedsUpdate = true;
+	}
+
+	// ArrayElement
+
+	_setValue_arrayElement(buffer, offset) {
+		this.resolvedProperty[this.propertyIndex] = buffer[offset];
+	}
+
+	_setValue_arrayElement_setNeedsUpdate(buffer, offset) {
+		this.resolvedProperty[this.propertyIndex] = buffer[offset];
+		this.targetObject.needsUpdate = true;
+	}
+
+	_setValue_arrayElement_setMatrixWorldNeedsUpdate(buffer, offset) {
+		this.resolvedProperty[this.propertyIndex] = buffer[offset];
+		this.targetObject.matrixWorldNeedsUpdate = true;
+	}
+
+	// HasToFromArray
+
+	_setValue_fromArray(buffer, offset) {
+		this.resolvedProperty.fromArray(buffer, offset);
+	}
+
+	_setValue_fromArray_setNeedsUpdate(buffer, offset) {
+		this.resolvedProperty.fromArray(buffer, offset);
+		this.targetObject.needsUpdate = true;
+	}
+
+	_setValue_fromArray_setMatrixWorldNeedsUpdate(buffer, offset) {
+		this.resolvedProperty.fromArray(buffer, offset);
+		this.targetObject.matrixWorldNeedsUpdate = true;
+	}
+
+	_getValue_unbound(targetArray, offset) {
+		this.bind();
+		this.getValue(targetArray, offset);
+	}
+
+	_setValue_unbound(sourceArray, offset) {
+		this.bind();
+		this.setValue(sourceArray, offset);
+	}
+
+	// create getter / setter pair for a property in the scene graph
+	bind() {
+		let targetObject = this.node;
+		const parsedPath = this.parsedPath;
+
+		const objectName = parsedPath.objectName;
+		const propertyName = parsedPath.propertyName;
+		let propertyIndex = parsedPath.propertyIndex;
+
+		if (!targetObject) {
+			targetObject = PropertyBinding.findNode(this.rootNode, parsedPath.nodeName) || this.rootNode;
+
+			this.node = targetObject;
+		}
+
+		// set fail state so we can just 'return' on error
+		this.getValue = this._getValue_unavailable;
+		this.setValue = this._setValue_unavailable;
+
+		// ensure there is a value node
+		if (!targetObject) {
+			console.error('THREE.PropertyBinding: Trying to update node for track: ' + this.path + " but it wasn't found.");
+			return;
+		}
+
+		if (objectName) {
+			let objectIndex = parsedPath.objectIndex;
+
+			// special cases were we need to reach deeper into the hierarchy to get the face materials....
+			switch (objectName) {
+				case 'materials':
+					if (!targetObject.material) {
+						console.error('THREE.PropertyBinding: Can not bind to material as node does not have a material.', this);
+						return;
+					}
+
+					if (!targetObject.material.materials) {
+						console.error('THREE.PropertyBinding: Can not bind to material.materials as node.material does not have a materials array.', this);
+						return;
+					}
+
+					targetObject = targetObject.material.materials;
+
+					break;
+
+				case 'bones':
+					if (!targetObject.skeleton) {
+						console.error('THREE.PropertyBinding: Can not bind to bones as node does not have a skeleton.', this);
+						return;
+					}
+
+					// potential future optimization: skip this if propertyIndex is already an integer
+					// and convert the integer string to a true integer.
+
+					targetObject = targetObject.skeleton.bones;
+
+					// support resolving morphTarget names into indices.
+					for (let i = 0; i < targetObject.length; i++) {
+						if (targetObject[i].name === objectIndex) {
+							objectIndex = i;
+							break;
+						}
+					}
+
+					break;
+
+				default:
+					if (targetObject[objectName] === undefined) {
+						console.error('THREE.PropertyBinding: Can not bind to objectName of node undefined.', this);
+						return;
+					}
+
+					targetObject = targetObject[objectName];
+			}
+
+			if (objectIndex !== undefined) {
+				if (targetObject[objectIndex] === undefined) {
+					console.error('THREE.PropertyBinding: Trying to bind to objectIndex of objectName, but is undefined.', this, targetObject);
+					return;
+				}
+
+				targetObject = targetObject[objectIndex];
+			}
+		}
+
+		// resolve property
+		const nodeProperty = targetObject[propertyName];
+
+		if (nodeProperty === undefined) {
+			const nodeName = parsedPath.nodeName;
+
+			console.error(
+				'THREE.PropertyBinding: Trying to update property for track: ' + nodeName + '.' + propertyName + " but it wasn't found.",
+				targetObject
+			);
+			return;
+		}
+
+		// determine versioning scheme
+		let versioning = this.Versioning.None;
+
+		this.targetObject = targetObject;
+
+		if (targetObject.needsUpdate !== undefined) {
+			// material
+
+			versioning = this.Versioning.NeedsUpdate;
+		} else if (targetObject.matrixWorldNeedsUpdate !== undefined) {
+			// node transform
+
+			versioning = this.Versioning.MatrixWorldNeedsUpdate;
+		}
+
+		// determine how the property gets bound
+		let bindingType = this.BindingType.Direct;
+
+		if (propertyIndex !== undefined) {
+			// access a sub element of the property array (only primitives are supported right now)
+
+			if (propertyName === 'morphTargetInfluences') {
+				// potential optimization, skip this if propertyIndex is already an integer, and convert the integer string to a true integer.
+
+				// support resolving morphTarget names into indices.
+				if (!targetObject.geometry) {
+					console.error('THREE.PropertyBinding: Can not bind to morphTargetInfluences because node does not have a geometry.', this);
+					return;
+				}
+
+				if (targetObject.geometry.isBufferGeometry) {
+					if (!targetObject.geometry.morphAttributes) {
+						console.error(
+							'THREE.PropertyBinding: Can not bind to morphTargetInfluences because node does not have a geometry.morphAttributes.',
+							this
+						);
+						return;
+					}
+
+					if (targetObject.morphTargetDictionary[propertyIndex] !== undefined) {
+						propertyIndex = targetObject.morphTargetDictionary[propertyIndex];
+					}
+				} else {
+					console.error('THREE.PropertyBinding: Can not bind to morphTargetInfluences on THREE.Geometry. Use THREE.BufferGeometry instead.', this);
+					return;
+				}
+			}
+
+			bindingType = this.BindingType.ArrayElement;
+
+			this.resolvedProperty = nodeProperty;
+			this.propertyIndex = propertyIndex;
+		} else if (nodeProperty.fromArray !== undefined && nodeProperty.toArray !== undefined) {
+			// must use copy for Object3D.Euler/Quaternion
+
+			bindingType = this.BindingType.HasFromToArray;
+
+			this.resolvedProperty = nodeProperty;
+		} else if (Array.isArray(nodeProperty)) {
+			bindingType = this.BindingType.EntireArray;
+
+			this.resolvedProperty = nodeProperty;
+		} else {
+			this.propertyName = propertyName;
+		}
+
+		// select getter / setter
+		this.getValue = this.GetterByBindingType[bindingType];
+		this.setValue = this.SetterByBindingTypeAndVersioning[bindingType][versioning];
+	}
+
+	unbind() {
+		this.node = null;
+
+		// back to the prototype version of getValue / setValue
+		// note: avoiding to mutate the shape of 'this' via 'delete'
+		this.getValue = this._getValue_unbound;
+		this.setValue = this._setValue_unbound;
+	}
+}
+
+PropertyBinding.Composite = Composite;
+
+PropertyBinding.prototype.BindingType = {
+	Direct: 0,
+	EntireArray: 1,
+	ArrayElement: 2,
+	HasFromToArray: 3,
+};
+
+PropertyBinding.prototype.Versioning = {
+	None: 0,
+	NeedsUpdate: 1,
+	MatrixWorldNeedsUpdate: 2,
+};
+
+PropertyBinding.prototype.GetterByBindingType = [
+	PropertyBinding.prototype._getValue_direct,
+	PropertyBinding.prototype._getValue_array,
+	PropertyBinding.prototype._getValue_arrayElement,
+	PropertyBinding.prototype._getValue_toArray,
+];
+
+PropertyBinding.prototype.SetterByBindingTypeAndVersioning = [
+	[
+		// Direct
+		PropertyBinding.prototype._setValue_direct,
+		PropertyBinding.prototype._setValue_direct_setNeedsUpdate,
+		PropertyBinding.prototype._setValue_direct_setMatrixWorldNeedsUpdate,
+	],
+	[
+		// EntireArray
+
+		PropertyBinding.prototype._setValue_array,
+		PropertyBinding.prototype._setValue_array_setNeedsUpdate,
+		PropertyBinding.prototype._setValue_array_setMatrixWorldNeedsUpdate,
+	],
+	[
+		// ArrayElement
+		PropertyBinding.prototype._setValue_arrayElement,
+		PropertyBinding.prototype._setValue_arrayElement_setNeedsUpdate,
+		PropertyBinding.prototype._setValue_arrayElement_setMatrixWorldNeedsUpdate,
+	],
+	[
+		// HasToFromArray
+		PropertyBinding.prototype._setValue_fromArray,
+		PropertyBinding.prototype._setValue_fromArray_setNeedsUpdate,
+		PropertyBinding.prototype._setValue_fromArray_setMatrixWorldNeedsUpdate,
+	],
+];
+
+export { PropertyBinding };

backend/libs/three/animation/PropertyMixer.d.ts

@@ -0,0 +1,17 @@
+export class PropertyMixer {
+	constructor(binding: any, typeName: string, valueSize: number);
+
+	binding: any;
+	valueSize: number;
+	buffer: any;
+	cumulativeWeight: number;
+	cumulativeWeightAdditive: number;
+	useCount: number;
+	referenceCount: number;
+
+	accumulate(accuIndex: number, weight: number): void;
+	accumulateAdditive(weight: number): void;
+	apply(accuIndex: number): void;
+	saveOriginalState(): void;
+	restoreOriginalState(): void;
+}

backend/libs/three/animation/PropertyMixer.js

@@ -0,0 +1,248 @@
+import { Quaternion } from '../math/Quaternion.js';
+
+class PropertyMixer {
+	constructor(binding, typeName, valueSize) {
+		this.binding = binding;
+		this.valueSize = valueSize;
+
+		let mixFunction, mixFunctionAdditive, setIdentity;
+
+		// buffer layout: [ incoming | accu0 | accu1 | orig | addAccu | (optional work) ]
+		//
+		// interpolators can use .buffer as their .result
+		// the data then goes to 'incoming'
+		//
+		// 'accu0' and 'accu1' are used frame-interleaved for
+		// the cumulative result and are compared to detect
+		// changes
+		//
+		// 'orig' stores the original state of the property
+		//
+		// 'add' is used for additive cumulative results
+		//
+		// 'work' is optional and is only present for quaternion types. It is used
+		// to store intermediate quaternion multiplication results
+
+		switch (typeName) {
+			case 'quaternion':
+				mixFunction = this._slerp;
+				mixFunctionAdditive = this._slerpAdditive;
+				setIdentity = this._setAdditiveIdentityQuaternion;
+
+				this.buffer = new Float64Array(valueSize * 6);
+				this._workIndex = 5;
+				break;
+
+			case 'string':
+			case 'bool':
+				mixFunction = this._select;
+
+				// Use the regular mix function and for additive on these types,
+				// additive is not relevant for non-numeric types
+				mixFunctionAdditive = this._select;
+
+				setIdentity = this._setAdditiveIdentityOther;
+
+				this.buffer = new Array(valueSize * 5);
+				break;
+
+			default:
+				mixFunction = this._lerp;
+				mixFunctionAdditive = this._lerpAdditive;
+				setIdentity = this._setAdditiveIdentityNumeric;
+
+				this.buffer = new Float64Array(valueSize * 5);
+		}
+
+		this._mixBufferRegion = mixFunction;
+		this._mixBufferRegionAdditive = mixFunctionAdditive;
+		this._setIdentity = setIdentity;
+		this._origIndex = 3;
+		this._addIndex = 4;
+
+		this.cumulativeWeight = 0;
+		this.cumulativeWeightAdditive = 0;
+
+		this.useCount = 0;
+		this.referenceCount = 0;
+	}
+
+	// accumulate data in the 'incoming' region into 'accu<i>'
+	accumulate(accuIndex, weight) {
+		// note: happily accumulating nothing when weight = 0, the caller knows
+		// the weight and shouldn't have made the call in the first place
+
+		const buffer = this.buffer,
+			stride = this.valueSize,
+			offset = accuIndex * stride + stride;
+
+		let currentWeight = this.cumulativeWeight;
+
+		if (currentWeight === 0) {
+			// accuN := incoming * weight
+
+			for (let i = 0; i !== stride; ++i) {
+				buffer[offset + i] = buffer[i];
+			}
+
+			currentWeight = weight;
+		} else {
+			// accuN := accuN + incoming * weight
+
+			currentWeight += weight;
+			const mix = weight / currentWeight;
+			this._mixBufferRegion(buffer, offset, 0, mix, stride);
+		}
+
+		this.cumulativeWeight = currentWeight;
+	}
+
+	// accumulate data in the 'incoming' region into 'add'
+	accumulateAdditive(weight) {
+		const buffer = this.buffer,
+			stride = this.valueSize,
+			offset = stride * this._addIndex;
+
+		if (this.cumulativeWeightAdditive === 0) {
+			// add = identity
+
+			this._setIdentity();
+		}
+
+		// add := add + incoming * weight
+
+		this._mixBufferRegionAdditive(buffer, offset, 0, weight, stride);
+		this.cumulativeWeightAdditive += weight;
+	}
+
+	// apply the state of 'accu<i>' to the binding when accus differ
+	apply(accuIndex) {
+		const stride = this.valueSize,
+			buffer = this.buffer,
+			offset = accuIndex * stride + stride,
+			weight = this.cumulativeWeight,
+			weightAdditive = this.cumulativeWeightAdditive,
+			binding = this.binding;
+
+		this.cumulativeWeight = 0;
+		this.cumulativeWeightAdditive = 0;
+
+		if (weight < 1) {
+			// accuN := accuN + original * ( 1 - cumulativeWeight )
+
+			const originalValueOffset = stride * this._origIndex;
+
+			this._mixBufferRegion(buffer, offset, originalValueOffset, 1 - weight, stride);
+		}
+
+		if (weightAdditive > 0) {
+			// accuN := accuN + additive accuN
+
+			this._mixBufferRegionAdditive(buffer, offset, this._addIndex * stride, 1, stride);
+		}
+
+		for (let i = stride, e = stride + stride; i !== e; ++i) {
+			if (buffer[i] !== buffer[i + stride]) {
+				// value has changed -> update scene graph
+
+				binding.setValue(buffer, offset);
+				break;
+			}
+		}
+	}
+
+	// remember the state of the bound property and copy it to both accus
+	saveOriginalState() {
+		const binding = this.binding;
+
+		const buffer = this.buffer,
+			stride = this.valueSize,
+			originalValueOffset = stride * this._origIndex;
+
+		binding.getValue(buffer, originalValueOffset);
+
+		// accu[0..1] := orig -- initially detect changes against the original
+		for (let i = stride, e = originalValueOffset; i !== e; ++i) {
+			buffer[i] = buffer[originalValueOffset + (i % stride)];
+		}
+
+		// Add to identity for additive
+		this._setIdentity();
+
+		this.cumulativeWeight = 0;
+		this.cumulativeWeightAdditive = 0;
+	}
+
+	// apply the state previously taken via 'saveOriginalState' to the binding
+	restoreOriginalState() {
+		const originalValueOffset = this.valueSize * 3;
+		this.binding.setValue(this.buffer, originalValueOffset);
+	}
+
+	_setAdditiveIdentityNumeric() {
+		const startIndex = this._addIndex * this.valueSize;
+		const endIndex = startIndex + this.valueSize;
+
+		for (let i = startIndex; i < endIndex; i++) {
+			this.buffer[i] = 0;
+		}
+	}
+
+	_setAdditiveIdentityQuaternion() {
+		this._setAdditiveIdentityNumeric();
+		this.buffer[this._addIndex * this.valueSize + 3] = 1;
+	}
+
+	_setAdditiveIdentityOther() {
+		const startIndex = this._origIndex * this.valueSize;
+		const targetIndex = this._addIndex * this.valueSize;
+
+		for (let i = 0; i < this.valueSize; i++) {
+			this.buffer[targetIndex + i] = this.buffer[startIndex + i];
+		}
+	}
+
+	// mix functions
+
+	_select(buffer, dstOffset, srcOffset, t, stride) {
+		if (t >= 0.5) {
+			for (let i = 0; i !== stride; ++i) {
+				buffer[dstOffset + i] = buffer[srcOffset + i];
+			}
+		}
+	}
+
+	_slerp(buffer, dstOffset, srcOffset, t) {
+		Quaternion.slerpFlat(buffer, dstOffset, buffer, dstOffset, buffer, srcOffset, t);
+	}
+
+	_slerpAdditive(buffer, dstOffset, srcOffset, t, stride) {
+		const workOffset = this._workIndex * stride;
+
+		// Store result in intermediate buffer offset
+		Quaternion.multiplyQuaternionsFlat(buffer, workOffset, buffer, dstOffset, buffer, srcOffset);
+
+		// Slerp to the intermediate result
+		Quaternion.slerpFlat(buffer, dstOffset, buffer, dstOffset, buffer, workOffset, t);
+	}
+
+	_lerp(buffer, dstOffset, srcOffset, t, stride) {
+		const s = 1 - t;
+
+		for (let i = 0; i !== stride; ++i) {
+			const j = dstOffset + i;
+
+			buffer[j] = buffer[j] * s + buffer[srcOffset + i] * t;
+		}
+	}
+
+	_lerpAdditive(buffer, dstOffset, srcOffset, t, stride) {
+		for (let i = 0; i !== stride; ++i) {
+			const j = dstOffset + i;
+
+			buffer[j] = buffer[j] + buffer[srcOffset + i] * t;
+		}
+	}
+}
+
+export { PropertyMixer };

backend/libs/three/animation/tracks/BooleanKeyframeTrack.d.ts

@@ -0,0 +1,10 @@
+import { KeyframeTrack } from './../KeyframeTrack';
+
+export class BooleanKeyframeTrack extends KeyframeTrack {
+	constructor(name: string, times: any[], values: any[]);
+
+	/**
+	 * @default 'bool'
+	 */
+	ValueTypeName: string;
+}

backend/libs/three/animation/tracks/BooleanKeyframeTrack.js

@@ -0,0 +1,19 @@
+import { InterpolateDiscrete } from '../../constants.js';
+import { KeyframeTrack } from '../KeyframeTrack.js';
+
+/**
+ * A Track of Boolean keyframe values.
+ */
+class BooleanKeyframeTrack extends KeyframeTrack {}
+
+BooleanKeyframeTrack.prototype.ValueTypeName = 'bool';
+BooleanKeyframeTrack.prototype.ValueBufferType = Array;
+BooleanKeyframeTrack.prototype.DefaultInterpolation = InterpolateDiscrete;
+BooleanKeyframeTrack.prototype.InterpolantFactoryMethodLinear = undefined;
+BooleanKeyframeTrack.prototype.InterpolantFactoryMethodSmooth = undefined;
+
+// Note: Actually this track could have a optimized / compressed
+// representation of a single value and a custom interpolant that
+// computes "firstValue ^ isOdd( index )".
+
+export { BooleanKeyframeTrack };

backend/libs/three/animation/tracks/ColorKeyframeTrack.d.ts

@@ -0,0 +1,11 @@
+import { KeyframeTrack } from './../KeyframeTrack';
+import { InterpolationModes } from '../../constants';
+
+export class ColorKeyframeTrack extends KeyframeTrack {
+	constructor(name: string, times: any[], values: any[], interpolation?: InterpolationModes);
+
+	/**
+	 * @default 'color'
+	 */
+	ValueTypeName: string;
+}

backend/libs/three/animation/tracks/ColorKeyframeTrack.js

@@ -0,0 +1,15 @@
+import { KeyframeTrack } from '../KeyframeTrack.js';
+
+/**
+ * A Track of keyframe values that represent color.
+ */
+class ColorKeyframeTrack extends KeyframeTrack {}
+
+ColorKeyframeTrack.prototype.ValueTypeName = 'color';
+// ValueBufferType is inherited
+// DefaultInterpolation is inherited
+
+// Note: Very basic implementation and nothing special yet.
+// However, this is the place for color space parameterization.
+
+export { ColorKeyframeTrack };

backend/libs/three/animation/tracks/NumberKeyframeTrack.d.ts

@@ -0,0 +1,11 @@
+import { KeyframeTrack } from './../KeyframeTrack';
+import { InterpolationModes } from '../../constants';
+
+export class NumberKeyframeTrack extends KeyframeTrack {
+	constructor(name: string, times: any[], values: any[], interpolation?: InterpolationModes);
+
+	/**
+	 * @default 'number'
+	 */
+	ValueTypeName: string;
+}

backend/libs/three/animation/tracks/NumberKeyframeTrack.js

@@ -0,0 +1,12 @@
+import { KeyframeTrack } from '../KeyframeTrack.js';
+
+/**
+ * A Track of numeric keyframe values.
+ */
+class NumberKeyframeTrack extends KeyframeTrack {}
+
+NumberKeyframeTrack.prototype.ValueTypeName = 'number';
+// ValueBufferType is inherited
+// DefaultInterpolation is inherited
+
+export { NumberKeyframeTrack };

backend/libs/three/animation/tracks/QuaternionKeyframeTrack.d.ts

@@ -0,0 +1,11 @@
+import { KeyframeTrack } from './../KeyframeTrack';
+import { InterpolationModes } from '../../constants';
+
+export class QuaternionKeyframeTrack extends KeyframeTrack {
+	constructor(name: string, times: any[], values: any[], interpolation?: InterpolationModes);
+
+	/**
+	 * @default 'quaternion'
+	 */
+	ValueTypeName: string;
+}

backend/libs/three/animation/tracks/QuaternionKeyframeTrack.js

@@ -0,0 +1,19 @@
+import { InterpolateLinear } from '../../constants.js';
+import { KeyframeTrack } from '../KeyframeTrack.js';
+import { QuaternionLinearInterpolant } from '../../math/interpolants/QuaternionLinearInterpolant.js';
+
+/**
+ * A Track of quaternion keyframe values.
+ */
+class QuaternionKeyframeTrack extends KeyframeTrack {
+	InterpolantFactoryMethodLinear(result) {
+		return new QuaternionLinearInterpolant(this.times, this.values, this.getValueSize(), result);
+	}
+}
+
+QuaternionKeyframeTrack.prototype.ValueTypeName = 'quaternion';
+// ValueBufferType is inherited
+QuaternionKeyframeTrack.prototype.DefaultInterpolation = InterpolateLinear;
+QuaternionKeyframeTrack.prototype.InterpolantFactoryMethodSmooth = undefined;
+
+export { QuaternionKeyframeTrack };

backend/libs/three/animation/tracks/StringKeyframeTrack.d.ts

@@ -0,0 +1,11 @@
+import { KeyframeTrack } from './../KeyframeTrack';
+import { InterpolationModes } from '../../constants';
+
+export class StringKeyframeTrack extends KeyframeTrack {
+	constructor(name: string, times: any[], values: any[], interpolation?: InterpolationModes);
+
+	/**
+	 * @default 'string'
+	 */
+	ValueTypeName: string;
+}

backend/libs/three/animation/tracks/StringKeyframeTrack.js

@@ -0,0 +1,15 @@
+import { InterpolateDiscrete } from '../../constants.js';
+import { KeyframeTrack } from '../KeyframeTrack.js';
+
+/**
+ * A Track that interpolates Strings
+ */
+class StringKeyframeTrack extends KeyframeTrack {}
+
+StringKeyframeTrack.prototype.ValueTypeName = 'string';
+StringKeyframeTrack.prototype.ValueBufferType = Array;
+StringKeyframeTrack.prototype.DefaultInterpolation = InterpolateDiscrete;
+StringKeyframeTrack.prototype.InterpolantFactoryMethodLinear = undefined;
+StringKeyframeTrack.prototype.InterpolantFactoryMethodSmooth = undefined;
+
+export { StringKeyframeTrack };

backend/libs/three/animation/tracks/VectorKeyframeTrack.d.ts

@@ -0,0 +1,11 @@
+import { KeyframeTrack } from './../KeyframeTrack';
+import { InterpolationModes } from '../../constants';
+
+export class VectorKeyframeTrack extends KeyframeTrack {
+	constructor(name: string, times: any[], values: any[], interpolation?: InterpolationModes);
+
+	/**
+	 * @default 'vector'
+	 */
+	ValueTypeName: string;
+}

backend/libs/three/animation/tracks/VectorKeyframeTrack.js

@@ -0,0 +1,12 @@
+import { KeyframeTrack } from '../KeyframeTrack.js';
+
+/**
+ * A Track of vectored keyframe values.
+ */
+class VectorKeyframeTrack extends KeyframeTrack {}
+
+VectorKeyframeTrack.prototype.ValueTypeName = 'vector';
+// ValueBufferType is inherited
+// DefaultInterpolation is inherited
+
+export { VectorKeyframeTrack };

backend/libs/three/audio/Audio.d.ts

@@ -0,0 +1,106 @@
+import { Object3D } from './../core/Object3D';
+import { AudioListener } from './AudioListener';
+import { AudioContext } from './AudioContext';
+
+// Extras / Audio /////////////////////////////////////////////////////////////////////
+
+export class Audio<NodeType extends AudioNode = GainNode> extends Object3D {
+	constructor(listener: AudioListener);
+	type: 'Audio';
+
+	listener: AudioListener;
+	context: AudioContext;
+	gain: GainNode;
+
+	/**
+	 * @default false
+	 */
+	autoplay: boolean;
+	buffer: null | AudioBuffer;
+
+	/**
+	 * @default 0
+	 */
+	detune: number;
+
+	/**
+	 * @default false
+	 */
+	loop: boolean;
+
+	/**
+	 * @default 0
+	 */
+	loopStart: number;
+
+	/**
+	 * @default 0
+	 */
+	loopEnd: number;
+
+	/**
+	 * @default 0
+	 */
+	offset: number;
+
+	/**
+	 * @default undefined
+	 */
+	duration: number | undefined;
+
+	/**
+	 * @default 1
+	 */
+	playbackRate: number;
+
+	/**
+	 * @default false
+	 */
+	isPlaying: boolean;
+
+	/**
+	 * @default true
+	 */
+	hasPlaybackControl: boolean;
+
+	/**
+	 * @default 'empty'
+	 */
+	sourceType: string;
+	source: null | AudioBufferSourceNode;
+
+	/**
+	 * @default []
+	 */
+	filters: AudioNode[];
+
+	getOutput(): NodeType;
+	setNodeSource(audioNode: AudioBufferSourceNode): this;
+	setMediaElementSource(mediaElement: HTMLMediaElement): this;
+	setMediaStreamSource(mediaStream: MediaStream): this;
+	setBuffer(audioBuffer: AudioBuffer): this;
+	play(delay?: number): this;
+	onEnded(): void;
+	pause(): this;
+	stop(): this;
+	connect(): this;
+	disconnect(): this;
+	setDetune(value: number): this;
+	getDetune(): number;
+	getFilters(): AudioNode[];
+	setFilters(value: AudioNode[]): this;
+	getFilter(): AudioNode;
+	setFilter(filter: AudioNode): this;
+	setPlaybackRate(value: number): this;
+	getPlaybackRate(): number;
+	getLoop(): boolean;
+	setLoop(value: boolean): this;
+	setLoopStart(value: number): this;
+	setLoopEnd(value: number): this;
+	getVolume(): number;
+	setVolume(value: number): this;
+	/**
+	 * @deprecated Use {@link AudioLoader} instead.
+	 */
+	load(file: string): Audio;
+}

backend/libs/three/audio/Audio.js

@@ -0,0 +1,297 @@
+import { Object3D } from '../core/Object3D.js';
+
+class Audio extends Object3D {
+	constructor(listener) {
+		super();
+
+		this.type = 'Audio';
+
+		this.listener = listener;
+		this.context = listener.context;
+
+		this.gain = this.context.createGain();
+		this.gain.connect(listener.getInput());
+
+		this.autoplay = false;
+
+		this.buffer = null;
+		this.detune = 0;
+		this.loop = false;
+		this.loopStart = 0;
+		this.loopEnd = 0;
+		this.offset = 0;
+		this.duration = undefined;
+		this.playbackRate = 1;
+		this.isPlaying = false;
+		this.hasPlaybackControl = true;
+		this.source = null;
+		this.sourceType = 'empty';
+
+		this._startedAt = 0;
+		this._progress = 0;
+		this._connected = false;
+
+		this.filters = [];
+	}
+
+	getOutput() {
+		return this.gain;
+	}
+
+	setNodeSource(audioNode) {
+		this.hasPlaybackControl = false;
+		this.sourceType = 'audioNode';
+		this.source = audioNode;
+		this.connect();
+
+		return this;
+	}
+
+	setMediaElementSource(mediaElement) {
+		this.hasPlaybackControl = false;
+		this.sourceType = 'mediaNode';
+		this.source = this.context.createMediaElementSource(mediaElement);
+		this.connect();
+
+		return this;
+	}
+
+	setMediaStreamSource(mediaStream) {
+		this.hasPlaybackControl = false;
+		this.sourceType = 'mediaStreamNode';
+		this.source = this.context.createMediaStreamSource(mediaStream);
+		this.connect();
+
+		return this;
+	}
+
+	setBuffer(audioBuffer) {
+		this.buffer = audioBuffer;
+		this.sourceType = 'buffer';
+
+		if (this.autoplay) this.play();
+
+		return this;
+	}
+
+	play(delay = 0) {
+		if (this.isPlaying === true) {
+			console.warn('THREE.Audio: Audio is already playing.');
+			return;
+		}
+
+		if (this.hasPlaybackControl === false) {
+			console.warn('THREE.Audio: this Audio has no playback control.');
+			return;
+		}
+
+		this._startedAt = this.context.currentTime + delay;
+
+		const source = this.context.createBufferSource();
+		source.buffer = this.buffer;
+		source.loop = this.loop;
+		source.loopStart = this.loopStart;
+		source.loopEnd = this.loopEnd;
+		source.onended = this.onEnded.bind(this);
+		source.start(this._startedAt, this._progress + this.offset, this.duration);
+
+		this.isPlaying = true;
+
+		this.source = source;
+
+		this.setDetune(this.detune);
+		this.setPlaybackRate(this.playbackRate);
+
+		return this.connect();
+	}
+
+	pause() {
+		if (this.hasPlaybackControl === false) {
+			console.warn('THREE.Audio: this Audio has no playback control.');
+			return;
+		}
+
+		if (this.isPlaying === true) {
+			// update current progress
+
+			this._progress += Math.max(this.context.currentTime - this._startedAt, 0) * this.playbackRate;
+
+			if (this.loop === true) {
+				// ensure _progress does not exceed duration with looped audios
+
+				this._progress = this._progress % (this.duration || this.buffer.duration);
+			}
+
+			this.source.stop();
+			this.source.onended = null;
+
+			this.isPlaying = false;
+		}
+
+		return this;
+	}
+
+	stop() {
+		if (this.hasPlaybackControl === false) {
+			console.warn('THREE.Audio: this Audio has no playback control.');
+			return;
+		}
+
+		this._progress = 0;
+
+		this.source.stop();
+		this.source.onended = null;
+		this.isPlaying = false;
+
+		return this;
+	}
+
+	connect() {
+		if (this.filters.length > 0) {
+			this.source.connect(this.filters[0]);
+
+			for (let i = 1, l = this.filters.length; i < l; i++) {
+				this.filters[i - 1].connect(this.filters[i]);
+			}
+
+			this.filters[this.filters.length - 1].connect(this.getOutput());
+		} else {
+			this.source.connect(this.getOutput());
+		}
+
+		this._connected = true;
+
+		return this;
+	}
+
+	disconnect() {
+		if (this.filters.length > 0) {
+			this.source.disconnect(this.filters[0]);
+
+			for (let i = 1, l = this.filters.length; i < l; i++) {
+				this.filters[i - 1].disconnect(this.filters[i]);
+			}
+
+			this.filters[this.filters.length - 1].disconnect(this.getOutput());
+		} else {
+			this.source.disconnect(this.getOutput());
+		}
+
+		this._connected = false;
+
+		return this;
+	}
+
+	getFilters() {
+		return this.filters;
+	}
+
+	setFilters(value) {
+		if (!value) value = [];
+
+		if (this._connected === true) {
+			this.disconnect();
+			this.filters = value.slice();
+			this.connect();
+		} else {
+			this.filters = value.slice();
+		}
+
+		return this;
+	}
+
+	setDetune(value) {
+		this.detune = value;
+
+		if (this.source.detune === undefined) return; // only set detune when available
+
+		if (this.isPlaying === true) {
+			this.source.detune.setTargetAtTime(this.detune, this.context.currentTime, 0.01);
+		}
+
+		return this;
+	}
+
+	getDetune() {
+		return this.detune;
+	}
+
+	getFilter() {
+		return this.getFilters()[0];
+	}
+
+	setFilter(filter) {
+		return this.setFilters(filter ? [filter] : []);
+	}
+
+	setPlaybackRate(value) {
+		if (this.hasPlaybackControl === false) {
+			console.warn('THREE.Audio: this Audio has no playback control.');
+			return;
+		}
+
+		this.playbackRate = value;
+
+		if (this.isPlaying === true) {
+			this.source.playbackRate.setTargetAtTime(this.playbackRate, this.context.currentTime, 0.01);
+		}
+
+		return this;
+	}
+
+	getPlaybackRate() {
+		return this.playbackRate;
+	}
+
+	onEnded() {
+		this.isPlaying = false;
+	}
+
+	getLoop() {
+		if (this.hasPlaybackControl === false) {
+			console.warn('THREE.Audio: this Audio has no playback control.');
+			return false;
+		}
+
+		return this.loop;
+	}
+
+	setLoop(value) {
+		if (this.hasPlaybackControl === false) {
+			console.warn('THREE.Audio: this Audio has no playback control.');
+			return;
+		}
+
+		this.loop = value;
+
+		if (this.isPlaying === true) {
+			this.source.loop = this.loop;
+		}
+
+		return this;
+	}
+
+	setLoopStart(value) {
+		this.loopStart = value;
+
+		return this;
+	}
+
+	setLoopEnd(value) {
+		this.loopEnd = value;
+
+		return this;
+	}
+
+	getVolume() {
+		return this.gain.gain.value;
+	}
+
+	setVolume(value) {
+		this.gain.gain.setTargetAtTime(value, this.context.currentTime, 0.01);
+
+		return this;
+	}
+}
+
+export { Audio };

backend/libs/three/audio/AudioAnalyser.d.ts

@@ -0,0 +1,20 @@
+import { Audio } from './Audio';
+
+export class AudioAnalyser {
+	/**
+	 * @param audio
+	 * @param [fftSize=2048]
+	 */
+	constructor(audio: Audio<AudioNode>, fftSize?: number);
+
+	analyser: AnalyserNode;
+	data: Uint8Array;
+
+	getFrequencyData(): Uint8Array;
+	getAverageFrequency(): number;
+
+	/**
+	 * @deprecated Use {@link AudioAnalyser#getFrequencyData .getFrequencyData()} instead.
+	 */
+	getData(file: any): any;
+}

backend/libs/three/audio/AudioAnalyser.js

@@ -0,0 +1,29 @@
+class AudioAnalyser {
+	constructor(audio, fftSize = 2048) {
+		this.analyser = audio.context.createAnalyser();
+		this.analyser.fftSize = fftSize;
+
+		this.data = new Uint8Array(this.analyser.frequencyBinCount);
+
+		audio.getOutput().connect(this.analyser);
+	}
+
+	getFrequencyData() {
+		this.analyser.getByteFrequencyData(this.data);
+
+		return this.data;
+	}
+
+	getAverageFrequency() {
+		let value = 0;
+		const data = this.getFrequencyData();
+
+		for (let i = 0; i < data.length; i++) {
+			value += data[i];
+		}
+
+		return value / data.length;
+	}
+}
+
+export { AudioAnalyser };