diff --git a/packages/frontend/src/pages/room.add-object-dialog.vue b/packages/frontend/src/pages/room.add-object-dialog.vue
index 17cdfc41d2..2b42745a59 100644
--- a/packages/frontend/src/pages/room.add-object-dialog.vue
+++ b/packages/frontend/src/pages/room.add-object-dialog.vue
@@ -40,7 +40,7 @@ import { i18n } from '@/i18n.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os.js';
 import { OBJECT_DEFS } from '@/utility/room/object-defs.js';
-import { RoomObjectPreviewEngine } from '@/utility/room/engine.js';
+import { createRoomObjectPreviewEngine, RoomObjectPreviewEngine } from '@/utility/room/engine.js';
 
 const emit = defineEmits<{
 	(ev: 'ok', id: string): void;
@@ -53,10 +53,8 @@ const canvas = useTemplateRef('canvas');
 const selectedId = ref<string | null>(null);
 const engine = shallowRef<RoomObjectPreviewEngine | null>(null);
 
-onMounted(() => {
-	engine.value = new RoomObjectPreviewEngine({
-		canvas: canvas.value!,
-	});
+onMounted(async () => {
+	engine.value = await createRoomObjectPreviewEngine(canvas.value!);
 
 	engine.value.init();
 
diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index af9e5f423a..a6736570da 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -73,7 +73,7 @@ import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import { ensureSignin } from '@/i';
 import MkButton from '@/components/MkButton.vue';
-import { RoomEngine } from '@/utility/room/engine.js';
+import { createRoomEngine, RoomEngine } from '@/utility/room/engine.js';
 import { getObjectDef, OBJECT_DEFS } from '@/utility/room/object-defs.js';
 import MkSelect from '@/components/MkSelect.vue';
 import * as os from '@/os.js';
@@ -268,282 +268,11 @@ const data = localStorage.getItem('roomData') != null ? { ...JSON.parse(localSto
 			},
 		},
 	},
-	installedObjects: [{
-		id: 'a',
-		type: 'cardboardBox',
-		position: [120, 0, 50],
-		rotation: [0, 0.2, 0],
-		options: {
-			variation: 'mikan',
-		},
-	}, {
-		id: 'a2',
-		type: 'openedCardboardBox',
-		position: [115, 0, -20],
-		rotation: [0, -0.1, 0],
-		options: {},
-	}, {
-		id: 'b',
-		type: 'cardboardBox',
-		position: [120, 31, 50],
-		rotation: [0, 0.1, 0],
-		sticky: 'a',
-		options: {
-			variation: 'aizon',
-		},
-	}, {
-		id: '1',
-		type: 'cardboardBox',
-		position: [80, 0, 110],
-		rotation: [0, 2, 0],
-		options: {
-			variation: null,
-		},
-	}, {
-		id: 'c',
-		type: 'desk',
-		position: [-115, 0, 85],
-		rotation: [0, -Math.PI / 2, 0],
-		options: {},
-	}, {
-		id: 'd',
-		type: 'monitor',
-		position: [-130, 70, 85],
-		rotation: [0, -Math.PI / 2, 0],
-		sticky: 'c',
-		options: {},
-	}, {
-		id: 'd2',
-		type: 'keyboard',
-		position: [-110, 70, 85],
-		rotation: [0, Math.PI, 0],
-		sticky: 'c',
-		options: {},
-	}, {
-		id: 'e',
-		type: 'chair',
-		position: [-75, 0, 85],
-		rotation: [0, Math.PI / 2, 0],
-		options: {},
-	}, {
-		id: 'f',
-		type: 'plant',
-		position: [-60, 90, 165],
-		rotation: [0, 0, 0],
-		options: {},
-	}, {
-		id: 'f2',
-		type: 'monstera',
-		position: [-55, 90, 175],
-		rotation: [0, 0, 0],
-		options: {},
-	}, {
-		id: 'f22',
-		type: 'tabletopDigitalClock',
-		position: [-35, 90, 175],
-		rotation: [0, Math.PI, 0],
-		options: {
-			bodyStyle: 'color',
-			bodyColor: [0.45, 0.8, 1],
-		},
-	}, {
-		id: 'f3',
-		type: 'snakeplant',
-		position: [40, 90, 170],
-		rotation: [0, 0, 0],
-		options: {},
-	}, {
-		id: 'f4',
-		type: 'cactusS',
-		position: [50, 90, 155],
-		rotation: [0, 0, 0],
-		options: {},
-	}, {
-		id: 'g',
-		type: 'mug',
-		position: [-45, 90, 160],
-		rotation: [0, Math.PI / 2, 0],
-		options: {},
-	}, {
-		id: 'h',
-		type: 'aircon',
-		position: [80, 215, 150],
-		rotation: [0, Math.PI, 0],
-		options: {},
-	}, {
-		id: 'i',
-		type: 'lavaLamp',
-		position: [60, 90, 170],
-		rotation: [0, 0, 0],
-		options: {},
-	}, {
-		id: 'j',
-		type: 'steelRack',
-		position: [130, 0, 115],
-		rotation: [0, Math.PI / 2, 0],
-		options: {},
-	}, {
-		id: 'j2',
-		type: 'aquarium',
-		position: [130, 100, 115],
-		rotation: [0, Math.PI / 2, 0],
-		sticky: 'j',
-		options: {},
-	}, {
-		id: '8ce7a065-120d-479f-9153-aa3b6a1fd4a7',
-		type: 'router',
-		position: [130, 142, 135],
-		rotation: [0, Math.PI / 2, 0],
-		sticky: 'j',
-		options: {},
-	}, {
-		id: 'j4',
-		type: 'letterCase',
-		position: [130, 59, 125],
-		rotation: [0, Math.PI / 2, 0],
-		sticky: 'j',
-		options: {},
-	}, {
-		id: 'a37cb419-d028-47a7-b317-7553bc2553e0',
-		type: 'ductTape',
-		position: [133, 85, 130],
-		rotation: [0, 0, 0],
-		sticky: 'j4',
-		options: {},
-	}, {
-		id: 'j3',
-		type: 'powerStrip',
-		position: [130, 13, 115],
-		rotation: [0, Math.PI / 2, 0],
-		sticky: 'j',
-		options: {},
-	}, {
-		id: 'k',
-		type: 'cupNoodle',
-		position: [-100, 70, 40],
-		rotation: [0, -2, 0],
-		sticky: 'c',
-		options: {},
-	}, {
-		id: 'k2',
-		type: 'tabletopCalendar',
-		position: [-130, 70, 40],
-		rotation: [0, -Math.PI / 2, 0],
-		sticky: 'c',
-		options: {},
-	}, {
-		id: 'l',
-		type: 'banknote',
-		position: [-100, 70, 55],
-		rotation: [0, 2, 0],
-		sticky: 'c',
-		options: {},
-	}, {
-		id: 'm',
-		type: 'energyDrink',
-		position: [-100, 70, 120],
-		rotation: [0, -1, 0],
-		sticky: 'c',
-		options: {},
-	}, {
-		id: 'n',
-		type: 'milk',
-		position: [-120, 70, 130],
-		rotation: [0, 1.5, 0],
-		sticky: 'c',
-		options: {},
-	}, {
-		id: 'o',
-		type: 'facialTissue',
-		position: [-100, 70, 138],
-		rotation: [0, -1.5, 0],
-		sticky: 'c',
-		options: {},
-	}, {
-		id: 'p',
-		type: 'tv',
-		position: [-135, 88, -5],
-		rotation: [0, -Math.PI / 2, 0],
-		sticky: 'q',
-		options: {},
-	}, {
-		id: 'q',
-		type: 'colorBox',
-		position: [-135, 0, -5],
-		rotation: [0, -Math.PI / 2, 0],
-		options: {},
-	}, {
-		id: 'r',
-		type: 'pachira',
-		position: [135, 0, -135],
-		rotation: [0, 0, 0],
-		options: {},
-	}, {
-		id: 's',
-		type: 'wallClock',
-		position: [-150, 200, 100],
-		rotation: [0, -Math.PI / 2, 0],
-		options: {},
-	}, {
-		id: 's2',
-		type: 'woodSoundAbsorbingPanel',
-		position: [-150, 140, 80],
-		rotation: [0, -Math.PI / 2, 0],
-		options: {},
-	}, {
-		id: 't',
-		type: 'book',
-		position: [10, 100, 10],
-		rotation: [0, 0, 0],
-		options: {
-			variation: 1,
-		},
-	}, {
-		id: 'u',
-		type: 'bed',
-		position: [-30, 0, -100],
-		rotation: [0, Math.PI, 0],
-		options: {},
-	}, {
-		id: 'v',
-		type: 'ceilingFanLight',
-		position: [0, 250, 0],
-		rotation: [0, 0, 0],
-		isMainLight: true,
-		options: {},
-	}, {
-		id: 'w',
-		type: 'roundRug',
-		position: [0, 0, 0],
-		rotation: [0, 0, 0],
-		options: {},
-	}, {
-		id: 'x',
-		type: 'blind',
-		position: [-35, 194, 185],
-		rotation: [0, Math.PI, 0],
-		options: {
-			blades: 24,
-			angle: 0.5,
-			open: 0.8,
-		},
-	}, {
-		id: 'x2',
-		type: 'blind',
-		position: [35, 194, 185],
-		rotation: [0, Math.PI, 0],
-		options: {
-			blades: 24,
-			angle: -0.4,
-			open: 0.5,
-		},
-	}],
+	installedObjects: [],
 };
 
-onMounted(() => {
-	engine.value = new RoomEngine(data, {
-		canvas: canvas.value!,
-	});
+onMounted(async () => {
+	engine.value = await createRoomEngine(data, canvas.value!);
 
 	engine.value.init();
 
diff --git a/packages/frontend/src/utility/room/engine.ts b/packages/frontend/src/utility/room/engine.ts
index 249f6eef3a..9c8e6f784c 100644
--- a/packages/frontend/src/utility/room/engine.ts
+++ b/packages/frontend/src/utility/room/engine.ts
@@ -216,9 +216,17 @@ const TIME_MAP = {
 	23: 2,
 } as const;
 
+export async function createRoomEngine(roomState: RoomState, canvas: HTMLCanvasElement) {
+	// なぜか逆に重くなる
+	//const babylonEngine = new BABYLON.WebGPUEngine(canvas);
+	//await babylonEngine.initAsync();
+	const babylonEngine = new BABYLON.Engine(canvas, false, { alpha: false, antialias: false });
+	return new RoomEngine(roomState, { canvas, engine: babylonEngine });
+}
+
 export class RoomEngine {
 	private canvas: HTMLCanvasElement;
-	private engine: BABYLON.Engine;
+	private engine: BABYLON.WebGPUEngine;
 	public scene: BABYLON.Scene;
 	private shadowGenerator1: BABYLON.ShadowGenerator;
 	private shadowGenerator2: BABYLON.ShadowGenerator;
@@ -275,6 +283,7 @@ export class RoomEngine {
 
 	constructor(roomState: RoomState, options: {
 		canvas: HTMLCanvasElement;
+		engine: BABYLON.WebGPUEngine;
 	}) {
 		this.roomState = {
 			...roomState,
@@ -287,7 +296,7 @@ export class RoomEngine {
 
 		registerBuiltInLoaders();
 
-		this.engine = new BABYLON.Engine(options.canvas, false, { alpha: false, antialias: false });
+		this.engine = options.engine;
 		this.scene = new BABYLON.Scene(this.engine);
 		//this.scene.useRightHandedSystem = true;
 
@@ -1337,9 +1346,17 @@ export class RoomEngine {
 	}
 }
 
+export async function createRoomObjectPreviewEngine(canvas: HTMLCanvasElement) {
+	// なぜか逆に重くなる
+	//const babylonEngine = new BABYLON.WebGPUEngine(canvas);
+	//await babylonEngine.initAsync();
+	const babylonEngine = new BABYLON.Engine(canvas, false, { alpha: false, antialias: false });
+	return new RoomObjectPreviewEngine({ canvas, engine: babylonEngine });
+}
+
 export class RoomObjectPreviewEngine {
 	private canvas: HTMLCanvasElement;
-	private engine: BABYLON.Engine;
+	private engine: BABYLON.WebGPUEngine;
 	private scene: BABYLON.Scene;
 	private shadowGenerator1: BABYLON.ShadowGenerator;
 	private camera: BABYLON.ArcRotateCamera;
@@ -1351,12 +1368,13 @@ export class RoomObjectPreviewEngine {
 
 	constructor(options: {
 		canvas: HTMLCanvasElement;
+		engine: BABYLON.WebGPUEngine;
 	}) {
 		this.canvas = options.canvas;
 
 		registerBuiltInLoaders();
 
-		this.engine = new BABYLON.Engine(options.canvas, false, { alpha: false, antialias: false });
+		this.engine = options.engine;
 		this.scene = new BABYLON.Scene(this.engine);
 
 		this.scene.ambientColor = new BABYLON.Color3(1.0, 0.9, 0.8);