mirror of
https://github.com/misskey-dev/misskey.git
synced 2026-05-13 17:35:40 +02:00
391 lines
12 KiB
TypeScript
391 lines
12 KiB
TypeScript
/*
|
|
* SPDX-FileCopyrightText: syuilo and misskey-project
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
|
|
import { reactive, ref, shallowRef, triggerRef, watch } from 'vue';
|
|
import * as BABYLON from '@babylonjs/core';
|
|
import { cm } from '../utility.js';
|
|
import RoomWorker from './worker?worker';
|
|
import { RoomEngine } from './engine.js';
|
|
import type { ShallowRef } from 'vue';
|
|
import type { RoomState } from './engine.js';
|
|
import type { ObjectDef, RoomStateObject } from './object.js';
|
|
import * as sound from '@/utility/sound.js';
|
|
import * as os from '@/os.js';
|
|
import { i18n } from '@/i18n.js';
|
|
|
|
export type RoomControllerOptions = {
|
|
workerMode?: boolean;
|
|
graphicsQuality: number;
|
|
fps: number | null;
|
|
resolution: number | null;
|
|
useVirtualJoystick?: boolean;
|
|
};
|
|
|
|
// 抽象化レイヤー
|
|
export class RoomController {
|
|
private worker: Worker | null = null;
|
|
private engine: RoomEngine | null = null;
|
|
private canvas: HTMLCanvasElement | null = null;
|
|
private options: RoomControllerOptions;
|
|
private isCanvasDragging = false;
|
|
public isReady = ref(false);
|
|
public isSitting = ref(false);
|
|
public isEditMode = ref(false);
|
|
public grabbing = ref<{ forInstall: boolean } | null>(null);
|
|
public gridSnapping = ref({ enabled: true, scale: cm(4) });
|
|
public selected = ref<{
|
|
objectId: string;
|
|
objectState: RoomStateObject;
|
|
objectDef: ObjectDef;
|
|
} | null>(null);
|
|
public roomState: ShallowRef<RoomState>;
|
|
public initializeProgress = ref(0);
|
|
|
|
constructor(roomState: RoomState, options: RoomControllerOptions) {
|
|
this.roomState = shallowRef(roomState);
|
|
this.options = options;
|
|
|
|
this.onCanvasKeydown = this.onCanvasKeydown.bind(this);
|
|
this.onCanvasKeyup = this.onCanvasKeyup.bind(this);
|
|
this.onCanvasWheel = this.onCanvasWheel.bind(this);
|
|
this.onCanvasPointerdown = this.onCanvasPointerdown.bind(this);
|
|
this.onCanvasPointermove = this.onCanvasPointermove.bind(this);
|
|
this.onCanvasPointerup = this.onCanvasPointerup.bind(this);
|
|
this.onCanvasClick = this.onCanvasClick.bind(this);
|
|
}
|
|
|
|
public async init(canvas: HTMLCanvasElement) {
|
|
this.canvas = canvas;
|
|
this.canvas.width = canvas.clientWidth;
|
|
this.canvas.height = canvas.clientHeight;
|
|
|
|
if (this.options.workerMode) {
|
|
const offscreen = canvas.transferControlToOffscreen();
|
|
this.worker = new RoomWorker();
|
|
this.worker.postMessage({ type: 'init', canvas: offscreen, roomState: this.roomState.value, options: this.options }, [offscreen]);
|
|
this.worker.onmessage = (event) => {
|
|
switch (event.data?.type) {
|
|
case 'progress': {
|
|
this.initializeProgress.value = event.data.progress;
|
|
break;
|
|
}
|
|
case 'inited': {
|
|
this.initializeProgress.value = 1;
|
|
this.isReady.value = true;
|
|
break;
|
|
}
|
|
default: {
|
|
console.warn('Unrecognized message from worker:', event.data?.type);
|
|
}
|
|
}
|
|
};
|
|
} else {
|
|
const babylonEngine = new BABYLON.WebGPUEngine(canvas, { doNotHandleContextLost: true, powerPreference: 'high-performance' });
|
|
babylonEngine.compatibilityMode = false;
|
|
babylonEngine.enableOfflineSupport = false;
|
|
babylonEngine.onContextLostObservable.add(() => {
|
|
os.alert({
|
|
type: 'error',
|
|
title: i18n.ts.somethingHappened,
|
|
text: i18n.ts._room.crushed_description,
|
|
});
|
|
});
|
|
await babylonEngine.initAsync();
|
|
if (this.options.resolution === 2) babylonEngine.setHardwareScalingLevel(0.5);
|
|
if (this.options.resolution === 0.5) babylonEngine.setHardwareScalingLevel(2);
|
|
|
|
this.engine = new RoomEngine(this.roomState.value, { canvas, engine: babylonEngine, ...this.options });
|
|
this.engine.on('loadingProgress', ({ progress }) => {
|
|
this.initializeProgress.value = progress;
|
|
});
|
|
await this.engine.init();
|
|
this.initializeProgress.value = 1;
|
|
this.isReady.value = true;
|
|
|
|
this.engine.on('changeGrabbingState', ({ grabbing }) => {
|
|
this.grabbing.value = grabbing;
|
|
});
|
|
|
|
this.engine.on('changeEditMode', ({ isEditMode }) => {
|
|
this.isEditMode.value = isEditMode;
|
|
});
|
|
|
|
this.engine.on('changeGridSnapping', ({ gridSnapping }) => {
|
|
this.gridSnapping.value = gridSnapping;
|
|
});
|
|
|
|
this.engine.on('changeSelectedState', ({ selected }) => {
|
|
this.selected.value = selected;
|
|
});
|
|
|
|
this.engine.on('changeRoomState', ({ roomState }) => {
|
|
this.roomState.value = roomState;
|
|
triggerRef(this.selected);
|
|
});
|
|
|
|
this.engine.on('playSfxUrl', ({ url, options }) => {
|
|
sound.playUrl(url, options);
|
|
});
|
|
|
|
if (_DEV_) {
|
|
(window as any).showBabylonInspector = () => {
|
|
import('@babylonjs/inspector').then(({ ShowInspector }) => {
|
|
ShowInspector(this.engine.scene);
|
|
});
|
|
};
|
|
}
|
|
}
|
|
|
|
this.canvas.addEventListener('keydown', this.onCanvasKeydown);
|
|
this.canvas.addEventListener('keyup', this.onCanvasKeyup);
|
|
this.canvas.addEventListener('wheel', this.onCanvasWheel);
|
|
this.canvas.addEventListener('pointerdown', this.onCanvasPointerdown);
|
|
this.canvas.addEventListener('pointermove', this.onCanvasPointermove);
|
|
this.canvas.addEventListener('pointerup', this.onCanvasPointerup);
|
|
this.canvas.addEventListener('click', this.onCanvasClick);
|
|
}
|
|
|
|
private onCanvasKeydown(ev: KeyboardEvent) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'dom:keydown', ev: { code: ev.code, shiftKey: ev.shiftKey } });
|
|
} else if (this.engine != null) {
|
|
this.engine.domEvents.emit('keydown', { code: ev.code, shiftKey: ev.shiftKey });
|
|
}
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
|
|
private onCanvasKeyup(ev: KeyboardEvent) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'dom:keyup', ev: { code: ev.code, shiftKey: ev.shiftKey } });
|
|
} else if (this.engine != null) {
|
|
this.engine.domEvents.emit('keyup', { code: ev.code, shiftKey: ev.shiftKey });
|
|
}
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
|
|
private onCanvasWheel(ev: WheelEvent) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'dom:wheel', ev: { deltaY: ev.deltaY } });
|
|
} else if (this.engine != null) {
|
|
this.engine.domEvents.emit('wheel', { deltaY: ev.deltaY });
|
|
}
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
|
|
private onCanvasPointerdown(ev: PointerEvent) {
|
|
this.canvas?.setPointerCapture(ev.pointerId);
|
|
}
|
|
|
|
private onCanvasPointermove(ev: PointerEvent) {
|
|
if (this.canvas?.hasPointerCapture(ev.pointerId)) {
|
|
this.isCanvasDragging = true;
|
|
}
|
|
}
|
|
|
|
private onCanvasPointerup(ev: PointerEvent) {
|
|
window.setTimeout(() => {
|
|
this.isCanvasDragging = false;
|
|
this.canvas?.releasePointerCapture(ev.pointerId);
|
|
}, 0);
|
|
}
|
|
|
|
private onCanvasClick(ev: MouseEvent) {
|
|
if (this.isCanvasDragging) return;
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'dom:click', ev: { offsetX: ev.offsetX, offsetY: ev.offsetY } });
|
|
} else if (this.engine != null) {
|
|
this.engine.domEvents.emit('click', { offsetX: ev.offsetX, offsetY: ev.offsetY });
|
|
}
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
return false;
|
|
}
|
|
|
|
public async reset(roomState?: RoomState | null, options?: RoomControllerOptions | null, canvas?: HTMLCanvasElement | null) {
|
|
this.destroy();
|
|
if (roomState != null) this.roomState.value = roomState;
|
|
if (options != null) this.options = options;
|
|
this.isReady.value = false;
|
|
this.isSitting.value = false;
|
|
this.isEditMode.value = false;
|
|
this.grabbing.value = null;
|
|
this.selected.value = null;
|
|
this.initializeProgress.value = 0;
|
|
await this.init(canvas ?? this.canvas!);
|
|
}
|
|
|
|
public pauseRender() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'pauseRender' });
|
|
} else if (this.engine != null) {
|
|
this.engine.pauseRender();
|
|
}
|
|
}
|
|
|
|
public resumeRender() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'resumeRender' });
|
|
} else if (this.engine != null) {
|
|
this.engine.resumeRender();
|
|
}
|
|
}
|
|
|
|
public setCameraJoystickMoveVector(vec: { x: number; y: number }) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'setCameraJoystickMoveVector', vec });
|
|
} else if (this.engine != null) {
|
|
this.engine.cameraJoystickMove(vec);
|
|
}
|
|
}
|
|
|
|
public setCameraJoystickRotateVector(vec: { x: number; y: number }) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'setCameraJoystickRotateVector', vec });
|
|
} else if (this.engine != null) {
|
|
this.engine.cameraJoystickRotate(vec);
|
|
}
|
|
}
|
|
|
|
public enterEditMode() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'enterEditMode' });
|
|
} else if (this.engine != null) {
|
|
this.engine.enterEditMode();
|
|
}
|
|
}
|
|
|
|
public exitEditMode() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'exitEditMode' });
|
|
} else if (this.engine != null) {
|
|
this.engine.exitEditMode();
|
|
}
|
|
}
|
|
|
|
public setGridSnapping(gridSnapping: { enabled: boolean; scale: number }) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'setGridSnapping', gridSnapping });
|
|
} else if (this.engine != null) {
|
|
this.engine.gridSnapping = gridSnapping;
|
|
}
|
|
}
|
|
|
|
public updateObjectOption(objectId: string, key: string, value: any) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'updateObjectOption', objectId, key, value });
|
|
} else if (this.engine != null) {
|
|
this.engine.updateObjectOption(objectId, key, value);
|
|
}
|
|
}
|
|
|
|
public changeHeyaType(type: RoomState['heya']['type']) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'changeHeyaType', heyaType: type });
|
|
} else if (this.engine != null) {
|
|
this.engine.changeHeyaType(type);
|
|
}
|
|
}
|
|
|
|
public updateHeyaOptions(options: RoomState['heya']['options']) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'updateHeyaOptions', heyaOptions: options });
|
|
} else if (this.engine != null) {
|
|
this.engine.updateHeyaOptions(options);
|
|
}
|
|
}
|
|
|
|
public updateRoomLightColor(color: [number, number, number]) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'updateRoomLightColor', color });
|
|
} else if (this.engine != null) {
|
|
this.engine.updateRoomLightColor(color);
|
|
}
|
|
}
|
|
|
|
public beginSelectedInstalledObjectGrabbing() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'beginSelectedInstalledObjectGrabbing' });
|
|
} else if (this.engine != null) {
|
|
this.engine.beginSelectedInstalledObjectGrabbing();
|
|
}
|
|
}
|
|
|
|
public removeSelectedObject() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'removeSelectedObject' });
|
|
} else if (this.engine != null) {
|
|
this.engine.removeSelectedObject();
|
|
}
|
|
}
|
|
|
|
public addObject(type: string, options: any) {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'addObject', objectType: type, objectOptions: options });
|
|
} else if (this.engine != null) {
|
|
this.engine.addObject(type, options);
|
|
}
|
|
}
|
|
|
|
public endGrabbing() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'endGrabbing' });
|
|
} else if (this.engine != null) {
|
|
this.engine.endGrabbing();
|
|
}
|
|
}
|
|
|
|
public cancelGrabbing() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'cancelGrabbing' });
|
|
} else if (this.engine != null) {
|
|
this.engine.endGrabbing(true);
|
|
}
|
|
}
|
|
|
|
public toggleRoomLight() {
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'toggleRoomLight' });
|
|
} else if (this.engine != null) {
|
|
this.engine.toggleRoomLight();
|
|
}
|
|
}
|
|
|
|
public resize() {
|
|
if (this.canvas == null) return;
|
|
const width = this.canvas.clientWidth;
|
|
const height = this.canvas.clientHeight;
|
|
if (this.worker != null) {
|
|
this.worker.postMessage({ type: 'resize', width, height });
|
|
} else if (this.engine != null) {
|
|
this.engine.resize();
|
|
}
|
|
}
|
|
|
|
public destroy() {
|
|
this.canvas?.removeEventListener('keydown', this.onCanvasKeydown);
|
|
this.canvas?.removeEventListener('keyup', this.onCanvasKeyup);
|
|
this.canvas?.removeEventListener('wheel', this.onCanvasWheel);
|
|
this.canvas?.removeEventListener('pointerdown', this.onCanvasPointerdown);
|
|
this.canvas?.removeEventListener('pointermove', this.onCanvasPointermove);
|
|
this.canvas?.removeEventListener('pointerup', this.onCanvasPointerup);
|
|
this.canvas?.removeEventListener('click', this.onCanvasClick);
|
|
|
|
if (this.worker != null) {
|
|
this.worker.terminate();
|
|
this.worker = null;
|
|
}
|
|
if (this.engine != null) {
|
|
this.engine.destroy();
|
|
this.engine = null;
|
|
}
|
|
}
|
|
}
|