wip

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, {
+	await controller.reset(null, roomControllerOptions.value);
-		graphicsQuality: graphicsQuality.value,
-		fps: fps.value,
-		useVirtualJoystick,
-	});
 }
 
 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',
 	}, {

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,

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;

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);
 		// なんかレンダリングがおかしくなるときがあるのでコメントアウト
 		// オブジェクトを選択し、後ろを向いて別のオブジェクトを選択した後、最初のオブジェクトに振り返ると消えているなど