fix: now gpu preference can be set to force lower-power gpu in rare s…

…cenarios (new setting instead of "use dedicated gpu"). the current setting is just a hint for browser, which can be ignored

src/index.ts

@@ -97,7 +97,7 @@ watchFov()
 
 // Create three.js context, add to page
 const renderer = new THREE.WebGLRenderer({
-  powerPreference: options.highPerformanceGpu ? 'high-performance' : 'default',
+  powerPreference: options.gpuPreference,
 })
 initWithRenderer(renderer.domElement)
 window.renderer = renderer

src/optionsGuiScheme.tsx

@@ -11,7 +11,7 @@ import { getResourcePackName, resourcePackState, uninstallTexturePack } from './
 import { resetLocalStorageWithoutWorld } from './browserfs'
 
 export const guiOptionsScheme: {
-  [t in OptionsGroupType]: Array<{ [k in keyof AppOptions]?: Partial<OptionMeta> } & { custom?}>
+  [t in OptionsGroupType]: Array<{ [K in keyof AppOptions]?: Partial<OptionMeta<AppOptions[K]>> } & { custom?}>
 } = {
   render: [
     {
@@ -31,10 +31,11 @@ export const guiOptionsScheme: {
       }
     },
     {
-      highPerformanceGpu: {
+      gpuPreference: {
         // todo reimplement to gpu preference to allow use low-energy instead
-        text: 'Use Dedicated GPU',
+        text: 'GPU Preference',
         // willHaveNoEffect: isIos
+        values: [['default', 'Auto'], ['high-performance', 'Dedicated'], ['low-power', 'Low Power']]
       },
     },
     {

src/optionsStorage.ts

@@ -26,7 +26,7 @@ const defaultOptions = {
   touchButtonsSize: 40,
   touchButtonsOpacity: 80,
   touchButtonsPosition: 12,
-  highPerformanceGpu: false,
+  gpuPreference: 'default' as 'default' | 'high-performance' | 'low-power',
   /** @unstable */
   disableAssets: false,
   /** @unstable */
@@ -52,11 +52,19 @@ const defaultOptions = {
   mutedSounds: [] as string[]
 }
 
+const migrateOptions = (options) => {
+  if (options.highPerformanceGpu) {
+    options.gpuPreference = 'high-performance'
+    delete options.highPerformanceGpu
+  }
+  return options
+}
+
 export type AppOptions = typeof defaultOptions
 
 export const options: AppOptions = proxy({
   ...defaultOptions,
-  ...JSON.parse(localStorage.options || '{}')
+  ...migrateOptions(JSON.parse(localStorage.options || '{}'))
 })
 
 window.options = window.settings = options

src/react/OptionsGroup.tsx

@@ -3,8 +3,8 @@ import { options } from '../optionsStorage'
 import { OptionsGroupType, guiOptionsScheme } from '../optionsGuiScheme'
 import OptionsItems, { OptionMeta } from './OptionsItems'
 
-const optionValueToType = (optionValue: any) => {
-  if (typeof optionValue === 'boolean') return 'toggle'
+const optionValueToType = (optionValue: any, item: OptionMeta) => {
+  if (typeof optionValue === 'boolean' || item.values) return 'toggle'
   if (typeof optionValue === 'number') return 'slider'
   if (typeof optionValue === 'string') return 'element'
 }
@@ -14,7 +14,7 @@ const finalItemsScheme: Record<keyof typeof guiOptionsScheme, OptionMeta[]> = Ob
     return Object.entries(optionsObj).map(([optionKey, metaMerge]) => {
       const optionValue = options[optionKey]
 
-      const type = optionValueToType(optionValue)
+      const type = optionValueToType(optionValue, metaMerge)
       const meta: OptionMeta = {
         id: optionKey === 'custom' ? undefined : optionKey,
         type,

src/react/OptionsItems.tsx

@@ -7,15 +7,16 @@ import Button from './Button'
 import Slider from './Slider'
 import Screen from './Screen'
 
-type GeneralItem = {
+type GeneralItem<T extends string | number | boolean> = {
   id?: string
   text?: string,
   disabledReason?: string,
   tooltip?: string
   willHaveNoEffect?: boolean
+  values?: Array<T | [T, string]>
 }
 
-export type OptionMeta = GeneralItem & ({
+export type OptionMeta<T = any> = GeneralItem<T & string> & ({
   type: 'toggle',
 } | {
   type: 'slider'
@@ -32,10 +33,45 @@ export type OptionMeta = GeneralItem & ({
 export const OptionButton = ({ item }: { item: Extract<OptionMeta, { type: 'toggle' }> }) => {
   const optionValue = useSnapshot(options)[item.id!]
 
+  const valuesTitlesMap = useMemo(() => {
+    if (!item.values) {
+      return {
+        true: 'ON',
+        false: 'OFF',
+      }
+    }
+    return Object.fromEntries(item.values.map((value) => {
+      if (typeof value === 'string') {
+        return [value, titleCase(noCase(value))]
+      } else {
+        return [value[0], value[1]]
+      }
+    }))
+  }, [item.values])
+
   return <Button
-    label={`${item.text}: ${optionValue ? 'ON' : 'OFF'}`}
+    label={`${item.text}: ${valuesTitlesMap[optionValue]}`}
     onClick={() => {
-      options[item.id!] = !options[item.id!]
+      const { values } = item
+      if (values) {
+        const getOptionValue = (arrItem) => {
+          if (typeof arrItem === 'string') {
+            return arrItem
+          } else {
+            return arrItem[0]
+          }
+        }
+        const currentIndex = values.findIndex((value) => {
+          return getOptionValue(value) === optionValue
+        })
+        if (currentIndex === -1) {
+          options[item.id!] = getOptionValue(values[0])
+        } else {
+          options[item.id!] = getOptionValue(values[(currentIndex + 1) % values.length])
+        }
+      } else {
+        options[item.id!] = !options[item.id!]
+      }
     }}
     title={item.disabledReason ? `${item.disabledReason} | ${item.tooltip}` : item.tooltip}
     disabled={!!item.disabledReason}