From 3a5532211bfa38a39895b3549987b86bf2b16e0b Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 27 Apr 2026 08:36:41 +0900
Subject: [PATCH] wip

---
 packages/frontend/src/pages/room.vue          | 35 ++++++++++++++-----
 packages/frontend/src/preferences/def.ts      |  3 ++
 .../frontend/src/world/room/controller.ts     | 11 +++---
 packages/frontend/src/world/room/engine.ts    |  1 -
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index 932b8a46e0..7ffd26b2a9 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -164,6 +164,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
 import XObjectCustomizeForm from './room.object-customize-form.vue';
+import type { RoomControllerOptions } from '@/world/room/controller.js';
 import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import { ensureSignin } from '@/i';
@@ -204,7 +205,7 @@ const graphicsQualityAutoValue = computed<number>(() => deviceKind === 'smartpho
 const graphicsQuality = computed<number>(() => graphicsQualityRaw.value ?? graphicsQualityAutoValue.value);
 
 const fpsRaw = prefer.model('world.fps');
-const fpsAutoValue = computed<number | null>(() => graphicsQuality.value >= GRAPHICS_QUALITY_HIGH ? null : 30);
+const fpsAutoValue = computed<number | null>(() => deviceKind === 'smartphone' ? 30 : 60);
 const fps = computed<number | null>(() =>
 	fpsRaw.value == null ? fpsAutoValue.value :
 	fpsRaw.value === 'max' ? null :
@@ -212,6 +213,10 @@ const fps = computed<number | null>(() =>
 	fpsRaw.value === '60' ? 60 :
 	30);
 
+const resolutionRaw = prefer.model('world.resolution');
+const resolutionAutoValue = computed<number>(() => deviceKind === 'smartphone' ? 0.5 : 1);
+const resolution = computed<number>(() => resolutionRaw.value ?? resolutionAutoValue.value);
+
 const useVirtualJoystick = isTouchUsing && (deviceKind === 'smartphone' || deviceKind === 'tablet');
 
 const joyStickRadiusPx = 100;
@@ -259,11 +264,14 @@ const data = localStorage.getItem('roomData') != null ? JSON.parse(localStorage.
 
 let latestData = deepClone(data);
 
-const controller = new RoomController(data, {
+const roomControllerOptions = computed<RoomControllerOptions>(() => ({
 	graphicsQuality: graphicsQuality.value,
 	fps: fps.value,
+	resolution: resolution.value,
 	useVirtualJoystick,
-});
+}));
+
+const controller = new RoomController(data, roomControllerOptions.value);
 
 onMounted(async () => {
 	controller.init(canvas.value!);
@@ -314,6 +322,10 @@ onMounted(async () => {
 			controller.setCameraJoystickRotateVector(vector);
 		});
 	}
+
+	watch([graphicsQuality, fps, resolution], () => {
+		refresh();
+	});
 });
 
 onUnmounted(() => {
@@ -426,11 +438,7 @@ async function revert() {
 }
 
 async function refresh() {
-	await controller.reset(null, {
-		graphicsQuality: graphicsQuality.value,
-		fps: fps.value,
-		useVirtualJoystick,
-	});
+	await controller.reset(null, roomControllerOptions.value);
 }
 
 function expor() {
@@ -486,6 +494,17 @@ function showOtherMenu(ev: PointerEvent) {
 			'~30fps': '30',
 		},
 		ref: fpsRaw,
+	}, {
+		type: 'radio',
+		text: 'Resolution',
+		caption: resolutionRaw.value == null ? i18n.ts.auto : resolutionRaw.value + 'x',
+		options: {
+			[`Auto (${resolutionAutoValue.value})`]: null,
+			'2x': 2,
+			'1x': 1,
+			'0.5x': 0.5,
+		},
+		ref: resolutionRaw,
 	}, {
 		type: 'divider',
 	}, {
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index 3d0c49898b..ac6154f14c 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/packages/frontend/src/preferences/def.ts
@@ -539,6 +539,9 @@ export const PREF_DEF = definePreferences({
 	'world.fps': {
 		default: null as 'max' | '120' | '60' | '30' | null,
 	},
+	'world.resolution': {
+		default: null as 0.5 | 1 | 2 | null,
+	},
 
 	'experimental.stackingRouterView': {
 		default: false,
diff --git a/packages/frontend/src/world/room/controller.ts b/packages/frontend/src/world/room/controller.ts
index 4dc289d055..f0568444d7 100644
--- a/packages/frontend/src/world/room/controller.ts
+++ b/packages/frontend/src/world/room/controller.ts
@@ -13,10 +13,11 @@ import type { RoomState } from './engine.js';
 import type { ObjectDef, RoomStateObject } from './object.js';
 import * as sound from '@/utility/sound.js';
 
-type Options = {
+export type RoomControllerOptions = {
 	workerMode?: boolean;
 	graphicsQuality: number;
 	fps: number | null;
+	resolution: number | null;
 	useVirtualJoystick?: boolean;
 };
 
@@ -25,7 +26,7 @@ export class RoomController {
 	private worker: Worker | null = null;
 	private engine: RoomEngine | null = null;
 	private canvas: HTMLCanvasElement | null = null;
-	private options: Options;
+	private options: RoomControllerOptions;
 	private isCanvasDragging = false;
 	public isReady = ref(false);
 	public isSitting = ref(false);
@@ -40,7 +41,7 @@ export class RoomController {
 	public roomState: ShallowRef<RoomState>;
 	public initializeProgress = ref(0);
 
-	constructor(roomState: RoomState, options: Options) {
+	constructor(roomState: RoomState, options: RoomControllerOptions) {
 		this.roomState = shallowRef(roomState);
 		this.options = options;
 
@@ -68,6 +69,8 @@ export class RoomController {
 			babylonEngine.compatibilityMode = false;
 			babylonEngine.enableOfflineSupport = false;
 			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 }) => {
@@ -174,7 +177,7 @@ export class RoomController {
 		return false;
 	}
 
-	public async reset(roomState?: RoomState | null, options?: Options | null, canvas?: HTMLCanvasElement | null) {
+	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;
diff --git a/packages/frontend/src/world/room/engine.ts b/packages/frontend/src/world/room/engine.ts
index 8d5f9cf0c1..30b99bf94b 100644
--- a/packages/frontend/src/world/room/engine.ts
+++ b/packages/frontend/src/world/room/engine.ts
@@ -244,7 +244,6 @@ export class RoomEngine extends EventEmitter<RoomEngineEvents> {
 		registerBuiltInLoaders();
 
 		this.engine = options.engine;
-		if (options.graphicsQuality <= GRAPHICS_QUALITY_LOW) this.engine.setHardwareScalingLevel(2);
 		this.scene = new BABYLON.Scene(this.engine);
 		// なんかレンダリングがおかしくなるときがあるのでコメントアウト
 		// オブジェクトを選択し、後ろを向いて別のオブジェクトを選択した後、最初のオブジェクトに振り返ると消えているなど