controller

2026-05-22 17:34:14 +02:00 · 2026-04-14 21:30:07 +09:00
parent 7e0b5ff8be
commit cf9349f29c
7 changed files with 533 additions and 302 deletions
--- a/packages/frontend/src/utility/room/controller.ts
+++ b/packages/frontend/src/utility/room/controller.ts
@@ -0,0 +1,194 @@
+/*
+ * 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 RoomWorker from './worker?worker';
+import { RoomEngine } from './engine.js';
+import type { ShallowRef } from 'vue';
+import type { ObjectDef, RoomState, RoomStateObject } from './engine.js';
+import * as sound from '@/utility/sound.js';
+
+// 抽象化レイヤー
+export class RoomController {
+	private worker: Worker | null = null;
+	private engine: RoomEngine | null = null;
+	private canvas: HTMLCanvasElement | null = null;
+	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: 4 });
+	public selected = ref<{
+		objectId: string;
+		objectState: RoomStateObject;
+		objectDef: ObjectDef;
+	} | null>(null);
+	public roomState: ShallowRef<RoomState>;
+
+	constructor(roomState: RoomState) {
+		this.roomState = shallowRef(roomState);
+	}
+
+	public async init(canvas: HTMLCanvasElement, workerMode = false) {
+		this.canvas = canvas;
+		this.canvas.width = canvas.clientWidth;
+		this.canvas.height = canvas.clientHeight;
+
+		if (workerMode) {
+			const offscreen = canvas.transferControlToOffscreen();
+			this.worker = new RoomWorker();
+			this.worker.postMessage({ type: 'init', canvas: offscreen, roomState: this.roomState.value }, [offscreen]);
+			this.isReady.value = true;
+		} else {
+			const babylonEngine = new BABYLON.WebGPUEngine(canvas);
+			babylonEngine.compatibilityMode = false;
+			babylonEngine.initAsync().then(() => {
+				this.engine = new RoomEngine(this.roomState.value, { canvas, engine: babylonEngine });
+				this.engine.init();
+				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;
+				});
+
+				this.engine.on('playSfxUrl', ({ url, options }) => {
+					sound.playUrl(url, options);
+				});
+			});
+		}
+
+		this.canvas.addEventListener('keydown', (ev) => {
+			if (this.worker != null) this.worker.postMessage({ type: 'dom:keydown', ev: { code: ev.code, shiftKey: ev.shiftKey } });
+			ev.preventDefault();
+			ev.stopPropagation();
+			return false;
+		});
+
+		this.canvas.addEventListener('keyup', (ev) => {
+			if (this.worker != null) this.worker.postMessage({ type: 'dom:keyup', ev: { code: ev.code, shiftKey: ev.shiftKey } });
+			ev.preventDefault();
+			ev.stopPropagation();
+			return false;
+		});
+
+		this.canvas.addEventListener('pointerdown', (ev) => {
+			if (this.worker != null) this.worker.postMessage({ type: 'dom:pointerdown', ev: { button: ev.button, shiftKey: ev.shiftKey } });
+			ev.preventDefault();
+			ev.stopPropagation();
+			return false;
+		});
+	}
+
+	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 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) {
+		if (this.worker != null) {
+			this.worker.postMessage({ type: 'addObject', objectType: type });
+		} else if (this.engine != null) {
+			this.engine.addObject(type);
+		}
+	}
+
+	public endGrabbing() {
+		if (this.worker != null) {
+			this.worker.postMessage({ type: 'endGrabbing' });
+		} else if (this.engine != null) {
+			this.engine.endGrabbing();
+		}
+	}
+
+	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() {
+		if (this.worker != null) {
+			this.worker.terminate();
+			this.worker = null;
+		}
+		if (this.engine != null) {
+			this.engine.destroy();
+			this.engine = null;
+		}
+	}
+}
--- a/packages/frontend/src/utility/room/engine.ts
+++ b/packages/frontend/src/utility/room/engine.ts
@@ -35,28 +35,54 @@
 // TODO: 近くのオブジェクトの端にスナップオプション
 // TODO: 近くのオブジェクトの原点に軸を揃えるオプション

-const BAKE_TRANSFORM = false; // 実験的
-const SNAPSHOT_RENDERING = false; // 実験的
-const SNAPSHOT_RENDERING_NON_SUPPORTED_OBJECTS = ['tv', 'aquarium', 'lavaLamp'];
-const IGNORE_OBJECTS: string[] = []; // for debug
-
-const SYSTEM_MESH_NAMES = ['__TOP__', '__SIDE__', '__PICK__', '__COLLISION__', '__COLLISION_AUTO_GENERATED_INTERNALY__'];
-
 import * as BABYLON from '@babylonjs/core';
 import { AxesViewer } from '@babylonjs/core/Debug/axesViewer';
 import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic';
 import { BoundingBoxRenderer } from '@babylonjs/core/Rendering/boundingBoxRenderer';
 import { GridMaterial } from '@babylonjs/materials';
-import { ShowInspector } from '@babylonjs/inspector';
-import { reactive, ref, shallowRef, triggerRef, watch } from 'vue';
+import { EventEmitter } from 'eventemitter3';
 import { genId } from '../id.js';
 import { deepClone } from '../clone.js';
 import { getObjectDef } from './object-defs.js';
 import { HorizontalCameraKeyboardMoveInput, applyMorphTargetsToMesh, camelToKebab, findMaterial, scaleMorph } from './utility.js';
-import * as sound from '@/utility/sound.js';
+
+const BAKE_TRANSFORM = false; // 実験的
+const SNAPSHOT_RENDERING = false; // 実験的
+const SNAPSHOT_RENDERING_NON_SUPPORTED_OBJECTS = ['tv', 'aquarium', 'lavaLamp'];
+const IGNORE_OBJECTS: string[] = []; // for debug
+const SYSTEM_MESH_NAMES = ['__TOP__', '__SIDE__', '__PICK__', '__COLLISION__', '__COLLISION_AUTO_GENERATED_INTERNALY__'];
+const USE_GLOW = true; // ドローコールが増えて重い
+const IN_WEB_WORKER = typeof window === 'undefined';
+
+const TIME_MAP = {
+	0: 2,
+	1: 2,
+	2: 2,
+	3: 2,
+	4: 2,
+	5: 1,
+	6: 1,
+	7: 0,
+	8: 0,
+	9: 0,
+	10: 0,
+	11: 0,
+	12: 0,
+	13: 0,
+	14: 0,
+	15: 0,
+	16: 1,
+	17: 1,
+	18: 2,
+	19: 2,
+	20: 2,
+	21: 2,
+	22: 2,
+	23: 2,
+} as const;

 // babylonのドメイン知識は持たない
-type RoomStateObject<Options = any> = {
+export type RoomStateObject<Options = any> = {
 	id: string;
 	type: string;
 	position: [number, number, number];
@@ -96,7 +122,7 @@ type Heya = {
 	type: 'japanese';
 };

-type RoomState = {
+export type RoomState = {
 	heya: Heya;
 	installedObjects: RoomStateObject<any>[];
 };
@@ -302,7 +328,7 @@ class ModelManager {
 	}
 }

-type ObjectDef<OpSc extends OptionsSchema = OptionsSchema> = {
+export type ObjectDef<OpSc extends OptionsSchema = OptionsSchema> = {
 	id: string;
 	name: string;
 	path?: string;
@@ -352,35 +378,6 @@ function getMeshesBoundingBox(meshes: BABYLON.Mesh[]): BABYLON.BoundingBox {
 	return new BABYLON.BoundingBox(min.subtract(new BABYLON.Vector3(10000, 10000, 10000)), max.subtract(new BABYLON.Vector3(10000, 10000, 10000)));
 }

-const TIME_MAP = {
-	0: 2,
-	1: 2,
-	2: 2,
-	3: 2,
-	4: 2,
-	5: 1,
-	6: 1,
-	7: 0,
-	8: 0,
-	9: 0,
-	10: 0,
-	11: 0,
-	12: 0,
-	13: 0,
-	14: 0,
-	15: 0,
-	16: 1,
-	17: 1,
-	18: 2,
-	19: 2,
-	20: 2,
-	21: 2,
-	22: 2,
-	23: 2,
-} as const;
-
-const USE_GLOW = true; // ドローコールが増えて重い
-
 function enableObjectCollision(meshes: BABYLON.Mesh[]) {
 	let hasCollisionMesh = false;
 	for (const mesh of meshes) {
@@ -420,15 +417,28 @@ function enableObjectCollision(meshes: BABYLON.Mesh[]) {
 	}
 }

-export async function createRoomEngine(roomState: RoomState, canvas: HTMLCanvasElement) {
-	const babylonEngine = new BABYLON.WebGPUEngine(canvas);
-	babylonEngine.compatibilityMode = false;
-	await babylonEngine.initAsync();
-	//const babylonEngine = new BABYLON.Engine(canvas, false, { alpha: false, antialias: false });
-	return new RoomEngine(roomState, { canvas, engine: babylonEngine });
-}
+export type RoomEngineEvents = {
+	'changeSelectedState': (ctx: {
+		selected: {
+			objectId: string;
+			objectState: RoomStateObject<any>;
+			objectDef: ObjectDef<any>;
+		} | null;
+	}) => void;
+	'changeGrabbingState': (ctx: { grabbing: { forInstall: boolean } | null }) => void;
+	'changeEditMode': (ctx: { isEditMode: boolean }) => void;
+	'changeGridSnapping': (ctx: { gridSnapping: { enabled: boolean; scale: number } }) => void;
+	'changeRoomState': (ctx: { roomState: RoomState }) => void;
+	'playSfxUrl': (ctx: {
+		url: string;
+		options: {
+			volume: number;
+			playbackRate: number;
+		};
+	}) => void;
+};

-export class RoomEngine {
+export class RoomEngine extends EventEmitter<RoomEngineEvents> {
 	private canvas: HTMLCanvasElement;
 	private engine: BABYLON.WebGPUEngine;
 	public scene: BABYLON.Scene;
@@ -444,9 +454,12 @@ export class RoomEngine {
 		instance: RoomObjectInstance<any>;
 		model: ModelManager;
 	}> = new Map();
-	private grabbingCtx: {
+
+	// TODO: たぶんオブジェクト内の値のmutateはsetで検知できないので、そのような操作を実際に行うようになった & それを検知する必要性が出てきたら専用の設定関数などを新設してそれを使わせる
+	private _grabbingCtx: {
 		objectId: string;
 		objectType: string;
+		forInstall: boolean;
 		mesh: BABYLON.TransformNode;
 		originalDiffOfPosition: BABYLON.Vector3;
 		originalDiffOfRotationY: number;
@@ -458,17 +471,42 @@ export class RoomEngine {
 		onCancel?: () => void;
 		onDone?: () => void;
 	} | null = null;
-	public selected = shallowRef<{
+	get grabbingCtx() {
+		return this._grabbingCtx;
+	}
+	set grabbingCtx(v) {
+		this._grabbingCtx = v;
+		this.emit('changeGrabbingState', { grabbing: v == null ? null : { forInstall: v.forInstall } });
+	}
+
+	// TODO: たぶんオブジェクト内の値のmutateはsetで検知できないので、そのような操作を実際に行うようになった & それを検知する必要性が出てきたら専用の設定関数などを新設してそれを使わせる
+	private _selected: {
 		objectId: string;
 		objectEntity: RoomEngine['objectEntities'] extends Map<string, infer V> ? V : never;
 		objectState: RoomStateObject<any>;
 		objectDef: ObjectDef;
-	} | null>(null);
+	} | null = null;
+	get selected() {
+		return this._selected;
+	}
+	set selected(v) {
+		this._selected = v;
+		this.emit('changeSelectedState', { selected: v == null ? null : { objectId: v.objectId, objectState: v.objectState, objectDef: v.objectDef } });
+	}
+
 	private time: 0 | 1 | 2 = 0; // 0: 昼, 1: 夕, 2: 夜
 	private roomCollisionMeshes: BABYLON.AbstractMesh[] = [];
 	public roomState: RoomState;
-	public enableGridSnapping = ref(true);
-	public gridSnappingScale = ref(4/*cm*/);
+
+	private _gridSnapping = { enabled: true, scale: 4/*cm*/ };
+	get gridSnapping() {
+		return this._gridSnapping;
+	}
+	set gridSnapping(v) {
+		this._gridSnapping = v;
+		this.emit('changeGridSnapping', { gridSnapping: v });
+	}
+
 	private putParticleSystem: BABYLON.ParticleSystem;
 	private envMapIndoor: BABYLON.CubeTexture;
 	private envMapOutdoor: BABYLON.CubeTexture;
@@ -478,20 +516,27 @@ export class RoomEngine {
 	private yGridPreviewPlane: BABYLON.Mesh;
 	private zGridPreviewPlane: BABYLON.Mesh;
 	private selectionOutlineLayer: BABYLON.SelectionOutlineLayer;
-	public isEditMode = false;
-	public isSitting = ref(false);
-	public ui = reactive({
-		isGrabbing: false,
-		isGrabbingForInstall: false,
-	});
-	private fps = 30;
+
+	private _isEditMode = false;
+	get isEditMode() {
+		return this._isEditMode;
+	}
+	set isEditMode(v) {
+		this._isEditMode = v;
+		this.emit('changeEditMode', { isEditMode: v });
+	}
+
+	public isSitting = false;
+	private fps = 60;

 	constructor(roomState: RoomState, options: {
 		canvas: HTMLCanvasElement;
 		engine: BABYLON.WebGPUEngine;
 	}) {
+		super();
+
 		this.roomState = {
-			...roomState,
+			...JSON.parse(JSON.stringify(roomState)),
 			installedObjects: roomState.installedObjects.map(o => ({
 				...o,
 				options: { ...getObjectDef(o.type).options.default, ...o.options },
@@ -672,9 +717,10 @@ export class RoomEngine {
 		gridMaterial.mainColor = new BABYLON.Color3(0, 0, 0);
 		gridMaterial.minorUnitVisibility = 1;
 		gridMaterial.opacity = 0.5;
-		watch(this.gridSnappingScale, (v) => {
-			gridMaterial.gridRatio = v;
-		}, { immediate: true });
+		// todo
+		//watch(this.gridSnappingScale, (v) => {
+		//	gridMaterial.gridRatio = v;
+		//}, { immediate: true });

 		this.xGridPreviewPlane = BABYLON.MeshBuilder.CreatePlane('xGridPreviewPlane', { width: 1000/*cm*/, height: 1000/*cm*/ }, this.scene);
 		this.xGridPreviewPlane.rotation = new BABYLON.Vector3(0, 0, Math.PI / 2);
@@ -766,9 +812,13 @@ export class RoomEngine {
 				axes.zAxis.position = new BABYLON.Vector3(0, 30, 0);
 			}

-			(window as any).showBabylonInspector = () => {
-				ShowInspector(this.scene);
-			};
+			if (!IN_WEB_WORKER) {
+				(window as any).showBabylonInspector = () => {
+					import('@babylonjs/inspector').then(({ ShowInspector }) => {
+						ShowInspector(this.scene);
+					});
+				};
+			}
 		}
 	}

@@ -818,9 +868,9 @@ export class RoomEngine {
 	}

 	public selectObject(objectId: string | null) {
-		const currentSelected = this.selected.value;
+		const currentSelected = this.selected;
 		if (currentSelected != null) {
-			this.selected.value = null;
+			this.selected = null;
 			this.clearHighlight();
 			currentSelected.objectEntity.model.bakeMesh();
 		}
@@ -831,7 +881,7 @@ export class RoomEngine {
 				entity.model.unbakeMesh();
 				this.highlightMeshes(entity.rootMesh.getChildMeshes());
 				const state = this.roomState.installedObjects.find(o => o.id === objectId)!;
-				this.selected.value = {
+				this.selected = {
 					objectId,
 					objectEntity: entity,
 					objectState: state,
@@ -853,10 +903,10 @@ export class RoomEngine {
 		grabbing.ghost.position = newPos.clone();
 		grabbing.ghost.rotation = newRotation.clone();

-		if (this.enableGridSnapping.value) {
-			newPos.x = Math.round(newPos.x / this.gridSnappingScale.value) * this.gridSnappingScale.value;
-			newPos.y = Math.round(newPos.y / this.gridSnappingScale.value) * this.gridSnappingScale.value;
-			newPos.z = Math.round(newPos.z / this.gridSnappingScale.value) * this.gridSnappingScale.value;
+		if (this.gridSnapping.enabled) {
+			newPos.x = Math.round(newPos.x / this.gridSnapping.scale) * this.gridSnapping.scale;
+			newPos.y = Math.round(newPos.y / this.gridSnapping.scale) * this.gridSnapping.scale;
+			newPos.z = Math.round(newPos.z / this.gridSnapping.scale) * this.gridSnapping.scale;
 			newRotation.y = Math.round(newRotation.y / (Math.PI / 8)) * (Math.PI / 8);
 		}

@@ -905,14 +955,14 @@ export class RoomEngine {
 		} else if (placement === 'ceiling') {
 			newPos.y = 250/*cm*/;

-			if (this.enableGridSnapping.value) {
+			if (this.gridSnapping.enabled) {
 				this.yGridPreviewPlane.position = new BABYLON.Vector3(grabbing.mesh.position.x, 250/*cm*/ - 0.1/*cm*/, grabbing.mesh.position.z);
 				this.yGridPreviewPlane.isVisible = true;
 			}
 		} else if (placement === 'floor') {
 			newPos.y = 0;

-			if (this.enableGridSnapping.value) {
+			if (this.gridSnapping.enabled) {
 				this.yGridPreviewPlane.position = new BABYLON.Vector3(grabbing.mesh.position.x, 0.1/*cm*/, grabbing.mesh.position.z);
 				this.yGridPreviewPlane.isVisible = true;
 			}
@@ -926,7 +976,7 @@ export class RoomEngine {
 			}
 			if (newPos.y < 0) newPos.y = 0;

-			if (this.enableGridSnapping.value) {
+			if (this.gridSnapping.enabled) {
 				this.yGridPreviewPlane.position = new BABYLON.Vector3(grabbing.mesh.position.x, grabbing.mesh.position.y + 0.1/*cm*/, grabbing.mesh.position.z);
 				this.yGridPreviewPlane.isVisible = true;
 			}
@@ -1257,7 +1307,7 @@ export class RoomEngine {
 		root.metadata = metadata;

 		const model = new ModelManager(BAKE_TRANSFORM ? root : subRoot, loaderResult.meshes.filter(m => m.name !== subRoot), (meshes) => {
-			if (this.selected.value?.objectId === args.id) {
+			if (this.selected?.objectId === args.id) {
 				this.highlightMeshes(meshes);
 			}

@@ -1367,9 +1417,9 @@ export class RoomEngine {
 	}

 	public beginSelectedInstalledObjectGrabbing() {
-		if (this.selected.value == null) return;
+		if (this.selected == null) return;

-		const selectedObject = this.selected.value.objectEntity.rootMesh;
+		const selectedObject = this.selected.objectEntity.rootMesh;
 		this.clearHighlight();

 		// 子から先に適用していく
@@ -1414,11 +1464,10 @@ export class RoomEngine {

 		let sticky: string | null;

-		this.ui.isGrabbing = true;
-
 		this.grabbingCtx = {
 			objectId: selectedObject.metadata.objectId,
 			objectType: selectedObject.metadata.objectType,
+			forInstall: false,
 			mesh: selectedObject,
 			originalDiffOfPosition: selectedObject.position.subtract(this.camera.position.add(dir.scale(distance))),
 			originalDiffOfRotationY: selectedObject.rotation.subtract(this.camera.rotation).y,
@@ -1430,16 +1479,13 @@ export class RoomEngine {
 				sticky = info.sticky;
 			},
 			onCancel: () => {
-				this.ui.isGrabbing = false;
-
 				// todo: initialPositionなどを復元
 			},
 			onDone: () => { // todo: sticky状態などを引数でもらうようにしたい
-				this.ui.isGrabbing = false;
 				this.putParticleSystem.emitter = selectedObject.position.clone();
 				this.putParticleSystem.start();

-				sound.playUrl('/client-assets/room/sfx/put.mp3', {
+				this.playSfxUrl('/client-assets/room/sfx/put.mp3', {
 					volume: 1,
 					playbackRate: 1,
 				});
@@ -1488,17 +1534,19 @@ export class RoomEngine {
 					this.roomState.installedObjects.find(o => o.id === selectedObject.metadata.objectId)!.sticky = sticky;
 					this.roomState.installedObjects.find(o => o.id === selectedObject.metadata.objectId)!.position = [pos.x, pos.y, pos.z];
 					this.roomState.installedObjects.find(o => o.id === selectedObject.metadata.objectId)!.rotation = [rotation.x, rotation.y, rotation.z];
+
+					this.emit('changeRoomState', { roomState: this.roomState });
 				});
 			},
 		};

-		const intervalId = window.setInterval(() => {
+		const intervalId = setInterval(() => {
 			this.handleGrabbing();
 		}, 10);

 		this.intervalIds.push(intervalId);

-		sound.playUrl('/client-assets/room/sfx/grab.mp3', {
+		this.playSfxUrl('/client-assets/room/sfx/grab.mp3', {
 			volume: 1,
 			playbackRate: 1,
 		});
@@ -1532,7 +1580,7 @@ export class RoomEngine {
 	}

 	public sitChair(objectId: string) {
-		this.isSitting.value = true;
+		this.isSitting = true;
 		this.fixedCamera.parent = this.objectMeshs.get(objectId);
 		this.fixedCamera.position = new BABYLON.Vector3(0, 120/*cm*/, 0);
 		this.fixedCamera.rotation = new BABYLON.Vector3(0, 0, 0);
@@ -1541,7 +1589,7 @@ export class RoomEngine {
 	}

 	public standUp() {
-		this.isSitting.value = false;
+		this.isSitting = false;
 		this.scene.activeCamera = this.camera;
 		this.fixedCamera.parent = null;
 	}
@@ -1640,11 +1688,10 @@ export class RoomEngine {

 		let sticky: string | null;

-		this.ui.isGrabbingForInstall = true;
-
 		this.grabbingCtx = {
 			objectId: id,
 			objectType: type,
+			forInstall: true,
 			mesh: root,
 			originalDiffOfPosition: new BABYLON.Vector3(0, 0, 0),
 			originalDiffOfRotationY: Math.PI,
@@ -1656,8 +1703,6 @@ export class RoomEngine {
 				sticky = info.sticky;
 			},
 			onCancel: () => {
-				this.ui.isGrabbingForInstall = false;
-
 				// todo
 			},
 			onDone: () => { // todo: sticky状態などを引数でもらうようにしたい
@@ -1665,15 +1710,13 @@ export class RoomEngine {
 					enableObjectCollision(root.getChildMeshes());
 				}

-				this.ui.isGrabbingForInstall = false;
-
 				const pos = root.position.clone();
 				const rotation = root.rotation.clone();

 				this.putParticleSystem.emitter = pos;
 				this.putParticleSystem.start();

-				sound.playUrl('/client-assets/room/sfx/put.mp3', {
+				this.playSfxUrl('/client-assets/room/sfx/put.mp3', {
 					volume: 1,
 					playbackRate: 1,
 				});
@@ -1705,16 +1748,18 @@ export class RoomEngine {
 					sticky,
 					options,
 				});
+
+				this.emit('changeRoomState', { roomState: this.roomState });
 			},
 		};

-		const intervalId = window.setInterval(() => {
+		const intervalId = setInterval(() => {
 			this.handleGrabbing();
 		}, 10);

 		this.intervalIds.push(intervalId);

-		sound.playUrl('/client-assets/room/sfx/grab.mp3', {
+		this.playSfxUrl('/client-assets/room/sfx/grab.mp3', {
 			volume: 1,
 			playbackRate: 1,
 		});
@@ -1778,9 +1823,9 @@ export class RoomEngine {
 	}

 	public removeSelectedObject() {
-		if (this.selected.value == null) return;
+		if (this.selected == null) return;

-		const objectId = this.selected.value.objectId;
+		const objectId = this.selected.objectId;

 		this.objectEntities.get(objectId)?.rootMesh.dispose();
 		this.objectEntities.delete(objectId);
@@ -1788,9 +1833,10 @@ export class RoomEngine {
 		for (const o of this.roomState.installedObjects.filter(o => o.sticky === objectId)) {
 			o.sticky = null;
 		}
-		this.selected.value = null;
+		this.emit('changeRoomState', { roomState: this.roomState });
+		this.selected = null;

-		sound.playUrl('/client-assets/room/sfx/remove.mp3', {
+		this.playSfxUrl('/client-assets/room/sfx/remove.mp3', {
 			volume: 1,
 			playbackRate: 1,
 		});
@@ -1812,12 +1858,15 @@ export class RoomEngine {
 		if (options == null) return;
 		options[key] = value;

+		this.emit('changeRoomState', { roomState: this.roomState });
+
 		const entity = this.objectEntities.get(objectId);
 		if (entity == null) return;
 		entity.instance.onOptionsUpdated?.([key, value]);

-		if (this.selected.value?.objectId === objectId) {
-			triggerRef(this.selected);
+		if (this.selected?.objectId === objectId) {
+			// TODO
+			//triggerRef(this.selected);
 		}
 	}

@@ -1829,6 +1878,10 @@ export class RoomEngine {
 		}
 	}

+	private playSfxUrl(url: string, options: { volume: number; playbackRate: number }) {
+		this.emit('playSfxUrl', { url, options });
+	}
+
 	public resize() {
 		this.engine.resize();
 	}
--- a/packages/frontend/src/utility/room/objects/tabletopDigitalClock.ts
+++ b/packages/frontend/src/utility/room/objects/tabletopDigitalClock.ts
@@ -100,7 +100,7 @@ export const tabletopDigitalClock = defineObject({
 				applyBodyColor();
 				applyLcdColor();

-				room.intervalIds.push(window.setInterval(() => {
+				room.intervalIds.push(setInterval(() => {
 					const onMeshes = get7segMeshesOfCurrentTime(segmentMeshes);

 					for (const mesh of Object.values(segmentMeshes)) {
--- a/packages/frontend/src/utility/room/objects/wallClock.ts
+++ b/packages/frontend/src/utility/room/objects/wallClock.ts
@@ -39,7 +39,7 @@ export const wallClock = defineObject({

 		return {
 			onInited: () => {
-				room.intervalIds.push(window.setInterval(() => {
+				room.intervalIds.push(setInterval(() => {
 					const now = new Date();
 					const hours = now.getHours() % 12;
 					const minutes = now.getMinutes();
--- a/packages/frontend/src/utility/room/utility.ts
+++ b/packages/frontend/src/utility/room/utility.ts
@@ -83,8 +83,6 @@ export class HorizontalCameraKeyboardMoveInput extends BABYLON.BaseCameraPointer
 					if (index < 0) { // 存在しなかったら追加する
 						this.codes.push({ code });
 					}
-					event.preventDefault();
-					(event as KeyboardEvent).stopPropagation();
 				}
 			} else {
 				if (this.codesUp.indexOf(code) >= 0 ||
@@ -95,8 +93,6 @@ export class HorizontalCameraKeyboardMoveInput extends BABYLON.BaseCameraPointer
 					if (index >= 0) { // 存在したら削除する
 						this.codes.splice(index, 1);
 					}
-					event.preventDefault();
-					(event as KeyboardEvent).stopPropagation();
 				}
 			}
 		});
--- a/packages/frontend/src/utility/room/worker.ts
+++ b/packages/frontend/src/utility/room/worker.ts
@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as BABYLON from '@babylonjs/core';
+import { RoomEngine } from './engine.js';
+import type { RoomState } from './engine.js';
+
+let engine: RoomEngine | null = null;
+let canvas: HTMLCanvasElement | null = null;
+
+onmessage = async (event) => {
+	//console.log('Worker received message:', event.data);
+
+	switch (event.data?.type) {
+		case 'init': {
+			const roomState = event.data.roomState as RoomState;
+			canvas = event.data.canvas as HTMLCanvasElement;
+			const babylonEngine = new BABYLON.WebGPUEngine(canvas);
+			babylonEngine.compatibilityMode = false;
+			await babylonEngine.initAsync();
+			engine = new RoomEngine(roomState, { canvas, engine: babylonEngine });
+			await engine.init();
+			break;
+		}
+		case 'resize': {
+			canvas.width = event.data.width;
+			canvas.height = event.data.height;
+			if (engine != null) engine.resize();
+			break;
+		}
+		case 'dom:keydown': {
+			if (engine == null) break;
+			engine.scene.onKeyboardObservable.notifyObservers({ type: BABYLON.KeyboardEventTypes.KEYDOWN, event: event.data.ev });
+			break;
+		}
+		case 'dom:keyup': {
+			if (engine == null) break;
+			engine.scene.onKeyboardObservable.notifyObservers({ type: BABYLON.KeyboardEventTypes.KEYUP, event: event.data.ev });
+			break;
+		}
+		case 'dom:pointerdown': {
+			if (engine == null) break;
+			event.data.ev.preventDefault = () => {};
+			event.data.ev.stopPropagation = () => {};
+			engine.scene.onPointerObservable.notifyObservers({ type: BABYLON.PointerEventTypes.POINTERDOWN, event: event.data.ev });
+			break;
+		}
+		default: {
+			console.warn('Unrecognized message type:', event.data?.type);
+		}
+	}
+};