feat(stage-ui): scale settings (#1554)

---------

Co-authored-by-agent: Cursor

packages/i18n/src/locales/en/settings.yaml

@@ -122,6 +122,8 @@ live2d:
     title: Disable model mouse tracking
     button-disable:
       title: Disable model mouse tracking
+  render-scale:
+    title: Render scale
   fps:
     title: FPS
     description: Limit rendering frame rate
@@ -1107,6 +1109,8 @@ theme:
 title: Settings
 voices: Voice
 vrm:
+  render-scale:
+    title: Render scale
   change-model:
     from-file: Load from File
     from-file-select: Select

packages/i18n/src/locales/es/settings.yaml

@@ -115,6 +115,8 @@ live2d:
     title: Desactivar seguimiento del ratón del modelo
     button-disable:
       title: Disable model mouse tracking
+  render-scale:
+    title: Escala de renderizado
   fps:
     title: FPS
     description: Limitar velocidad de fotogramas
@@ -1069,6 +1071,8 @@ theme:
 title: Configuración
 voices: Voz
 vrm:
+  render-scale:
+    title: Escala de renderizado
   change-model:
     from-file: Cargar desde Archivo
     from-file-select: Seleccionar

packages/i18n/src/locales/fr/settings.yaml

@@ -115,6 +115,8 @@ live2d:
     title: Désactiver le suivi du modèle par la souris
     button-disable:
       title: Disable model mouse tracking
+  render-scale:
+    title: Échelle de rendu
   fps:
     title: FPS
     description: Limiter la fréquence d'image du rendu
@@ -1069,6 +1071,8 @@ theme:
 title: Paramètres
 voices: Voix
 vrm:
+  render-scale:
+    title: Échelle de rendu
   change-model:
     from-file: Charger depuis un fichier
     from-file-select: Sélectionner

packages/i18n/src/locales/ja/settings.yaml

@@ -115,6 +115,8 @@ live2d:
     title: モデルのマウストラッキングを無効にする
     button-disable:
       title: Disable model mouse tracking
+  render-scale:
+    title: レンダースケール
   fps:
     title: FPS
     description: レンダリングフレームレートを制限
@@ -1069,6 +1071,8 @@ theme:
 title: 設定
 voices: 音声
 vrm:
+  render-scale:
+    title: レンダースケール
   change-model:
     from-file: ファイルから読み込む
     from-file-select: 選択

packages/i18n/src/locales/ko/settings.yaml

@@ -115,6 +115,8 @@ live2d:
     title: 마우스 포인터 추적 비활성화
     button-disable:
       title: Disable model mouse tracking
+  render-scale:
+    title: 렌더 스케일
   fps:
     title: FPS (초당 프레임)
     description: 렌더링 주사율 제한
@@ -1069,6 +1071,8 @@ theme:
 title: 설정
 voices: 음성
 vrm:
+  render-scale:
+    title: 렌더 스케일
   change-model:
     from-file: 파일로부터 불러오기
     from-file-select: 선택

packages/i18n/src/locales/ru/settings.yaml

@@ -115,6 +115,8 @@ live2d:
     title: Отключить слежение за мышью
     button-disable:
       title: Disable model mouse tracking
+  render-scale:
+    title: Масштаб рендера
   fps:
     title: ФПС
     description: Ограничить скорость рендеринга кадров
@@ -1069,6 +1071,8 @@ theme:
 title: Настройки
 voices: Голос
 vrm:
+  render-scale:
+    title: Масштаб рендера
   change-model:
     from-file: Загрузить из файла
     from-file-select: Выбрать

packages/i18n/src/locales/vi/settings.yaml

@@ -115,6 +115,8 @@ live2d:
     title: Tắt theo dõi chuột cho mô hình
     button-disable:
       title: Disable model mouse tracking
+  render-scale:
+    title: Tỷ lệ render
   fps:
     title: FPS
     description: Giới hạn tốc độ khung hình hiển thị
@@ -1069,6 +1071,8 @@ theme:
 title: Cài Đặt
 voices: Giọng Nói
 vrm:
+  render-scale:
+    title: Tỷ lệ render
   change-model:
     from-file: Tải từ Tệp
     from-file-select: Chọn

packages/i18n/src/locales/zh-Hans/settings.yaml

@@ -115,6 +115,8 @@ live2d:
     title: 禁用模型鼠标跟踪
     button-disable:
       title: 禁用live2D模型鼠标追踪
+  render-scale:
+    title: 渲染倍率
   fps:
     title: 帧率
     description: 限制渲染帧率
@@ -1069,6 +1071,8 @@ theme:
 title: 设置
 voices: 声线
 vrm:
+  render-scale:
+    title: 渲染倍率
   change-model:
     from-file: 从文件加载
     from-file-select: 选择

packages/i18n/src/locales/zh-Hant/settings.yaml

@@ -115,6 +115,8 @@ live2d:
     title: 停用模型滑鼠追蹤
     button-disable:
       title: Disable model mouse tracking
+  render-scale:
+    title: 渲染倍率
   fps:
     title: FPS
     description: 限制渲染幀率
@@ -1069,6 +1071,8 @@ theme:
 title: 設定
 voices: 聲線
 vrm:
+  render-scale:
+    title: 渲染倍率
   change-model:
     from-file: 從檔案載入
     from-file-select: 選擇

packages/stage-ui-live2d/src/components/scenes/Live2D.vue

@@ -28,6 +28,7 @@ withDefaults(defineProps<{
   live2dExpressionEnabled?: boolean
   live2dShadowEnabled?: boolean
   live2dMaxFps?: number
+  live2dRenderScale?: number
 }>(), {
   paused: false,
   focusAt: () => ({ x: 0, y: 0 }),
@@ -41,6 +42,7 @@ withDefaults(defineProps<{
   live2dExpressionEnabled: true,
   live2dShadowEnabled: true,
   live2dMaxFps: 0,
+  live2dRenderScale: 2,
 })
 
 const componentState = defineModel<'pending' | 'loading' | 'mounted'>('state', { default: 'pending' })
@@ -73,7 +75,7 @@ defineExpose({
       v-model:state="componentStateCanvas"
       :width="width"
       :height="height"
-      :resolution="2"
+      :resolution="live2dRenderScale"
       :max-fps="live2dMaxFps"
       max-h="100dvh"
     >

packages/stage-ui/src/components/scenarios/settings/model-settings/live2d.vue

@@ -34,6 +34,7 @@ const {
   live2dExpressionEnabled,
   live2dShadowEnabled,
   live2dMaxFps,
+  live2dRenderScale,
 } = storeToRefs(settings)
 
 const live2d = useLive2d()
@@ -306,6 +307,15 @@ function handleMotionSelect(selectedMotionPath: string | number | undefined) {
       placement="right"
     />
 
+    <FieldRange
+      v-model="live2dRenderScale"
+      as="div"
+      :min="0.5"
+      :max="2"
+      :step="0.25"
+      :label="t('settings.live2d.render-scale.title')"
+    />
+
     <FieldCombobox
       v-model="selectedRuntimeMotion"
       label="Idle Animation"

packages/stage-ui/src/components/scenarios/settings/model-settings/preview-stage.vue

@@ -43,6 +43,7 @@ const {
   live2dForceAutoBlinkEnabled,
   live2dShadowEnabled,
   live2dMaxFps,
+  live2dRenderScale,
 } = storeToRefs(settingsStore)
 const { scale: live2dScale } = storeToRefs(live2dStore)
 const { sceneMutationLocked, scenePhase } = storeToRefs(modelStore)
@@ -136,6 +137,7 @@ defineExpose({
         :live2d-force-auto-blink-enabled="live2dForceAutoBlinkEnabled"
         :live2d-shadow-enabled="live2dShadowEnabled"
         :live2d-max-fps="live2dMaxFps"
+        :live2d-render-scale="live2dRenderScale"
       />
     </div>
   </template>

packages/stage-ui/src/components/scenarios/settings/model-settings/vrm.vue

@@ -46,6 +46,7 @@ const {
 
   envSelect,
   skyBoxIntensity,
+  renderScale,
 } = storeToRefs(modelStore)
 const controlsLocked = computed(() => props.runtimeSnapshot.controlsLocked)
 const canExtractColors = computed(() => props.runtimeSnapshot.canCapturePreview)
@@ -110,6 +111,11 @@ const envOptions = computed(() => [
         :y-config="{ min: -modelSize.y * 2, max: modelSize.y * 2, step: modelSize.y / 10000, label: 'Y', formatValue: val => val?.toFixed(4) }"
         :z-config="{ min: -modelSize.z * 2, max: modelSize.z * 2, step: modelSize.z / 10000, label: 'Z', formatValue: val => val?.toFixed(4) }"
       />
+      <PropertyNumber
+        v-model="renderScale"
+        :config="{ min: 0.5, max: 2, step: 0.25, label: t('settings.vrm.render-scale.title'), formatValue: val => val?.toFixed(2), disabled: controlsLocked }"
+        :label="t('settings.vrm.render-scale.title')"
+      />
       <PropertyNumber
         v-model="cameraFOV"
         :config="{ min: 1, max: 180, step: 1, label: t('settings.vrm.scale-and-position.fov'), disabled: controlsLocked }"

packages/stage-ui/src/components/scenes/Stage.vue

@@ -68,6 +68,7 @@ const {
   live2dExpressionEnabled,
   live2dShadowEnabled,
   live2dMaxFps,
+  live2dRenderScale,
 } = storeToRefs(settingsStore)
 const { mouthOpenSize } = storeToRefs(useSpeakingStore())
 const { audioContext } = useAudioContext()
@@ -588,6 +589,7 @@ defineExpose({
         :live2d-expression-enabled="live2dExpressionEnabled"
         :live2d-shadow-enabled="live2dShadowEnabled"
         :live2d-max-fps="live2dMaxFps"
+        :live2d-render-scale="live2dRenderScale"
       />
       <ThreeScene
         v-if="stageModelRenderer === 'vrm' && showStage"

packages/stage-ui/src/stores/settings/index.ts

@@ -74,6 +74,7 @@ export const useSettings = defineStore('settings', () => {
     live2dExpressionEnabled: live2dRefs.live2dExpressionEnabled,
     live2dShadowEnabled: live2dRefs.live2dShadowEnabled,
     live2dMaxFps: live2dRefs.live2dMaxFps,
+    live2dRenderScale: live2dRefs.live2dRenderScale,
 
     // Theme settings
     themeColorsHue: themeRefs.themeColorsHue,

packages/stage-ui/src/stores/settings/live2d.ts

@@ -27,6 +27,7 @@ export const useSettingsLive2d = defineStore('settings-live2d', () => {
   const live2dExpressionEnabled = useLocalStorageManualReset<boolean>('settings/live2d/expression-enabled', false)
   const live2dShadowEnabled = useLocalStorageManualReset<boolean>('settings/live2d/shadow-enabled', true)
   const live2dMaxFps = useLocalStorageManualReset<number>('settings/live2d/max-fps', 0)
+  const live2dRenderScale = useLocalStorageManualReset<number>('settings/live2d/render-scale', 2)
 
   function resetState() {
     live2dDisableFocus.reset()
@@ -36,6 +37,7 @@ export const useSettingsLive2d = defineStore('settings-live2d', () => {
     live2dExpressionEnabled.reset()
     live2dShadowEnabled.reset()
     live2dMaxFps.reset()
+    live2dRenderScale.reset()
   }
 
   return {
@@ -46,6 +48,7 @@ export const useSettingsLive2d = defineStore('settings-live2d', () => {
     live2dExpressionEnabled,
     live2dShadowEnabled,
     live2dMaxFps,
+    live2dRenderScale,
     resetState,
   }
 })