8133 studio should have render settings exposed

packages/client-core/i18n/en/editor.json

@@ -547,6 +547,10 @@
       "lbl-lods": "LODs",
       "info-lods": "Sets the distances at which levels of detail change.",
       "lbl-rendererSettings": "Override Renderer Settings",
+      "lbl-usePostProcessing": "Use Post Processing",
+      "info-usePostProcessing": "Enables post processing",
+      "lbl-useShadows": "Use Shadows",
+      "info-useShadows": "Enables shadows",
       "lbl-csm": "Cascading Shadow Maps",
       "info-csm": "Enables cascading shadow maps.",
       "lbl-toneMapping": "Tone Mapping",

packages/editor/src/components/properties/RenderSettingsEditor.tsx

@@ -23,6 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { useHookstate } from '@hookstate/core'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -40,7 +41,9 @@ import {
 } from 'three'
 
 import { useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { RendererState } from '@etherealengine/engine/src/renderer/RendererState'
 import { RenderSettingsComponent } from '@etherealengine/engine/src/scene/components/RenderSettingsComponent'
+import { getMutableState } from '@etherealengine/hyperflux'
 
 import BooleanInput from '../inputs/BooleanInput'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
@@ -107,19 +110,37 @@ const ShadowTypeOptions = [
 
 export const RenderSettingsEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
-  const rendererState = useComponent(props.entity, RenderSettingsComponent)
+  const rendererSettingsState = useComponent(props.entity, RenderSettingsComponent)
+  const rendererState = useHookstate(getMutableState(RendererState))
 
   return (
     <PropertyGroup
       name={t('editor:properties.renderSettings.name')}
       description={t('editor:properties.renderSettings.description')}
     >
+      <InputGroup
+        name="Use Post Processing"
+        label={t('editor:properties.renderSettings.lbl-usePostProcessing')}
+        info={t('editor:properties.renderSettings.info-usePostProcessing')}
+      >
+        <BooleanInput
+          value={rendererState.usePostProcessing.value}
+          onChange={(val) => rendererState.usePostProcessing.set(val)}
+        />
+      </InputGroup>
+      <InputGroup
+        name="Use Shadows"
+        label={t('editor:properties.renderSettings.lbl-useShadows')}
+        info={t('editor:properties.renderSettings.info-useShadows')}
+      >
+        <BooleanInput value={rendererState.useShadows.value} onChange={(val) => rendererState.useShadows.set(val)} />
+      </InputGroup>
       <InputGroup
         name="Use Cascading Shadow Maps"
         label={t('editor:properties.renderSettings.lbl-csm')}
         info={t('editor:properties.renderSettings.info-csm')}
       >
-        <BooleanInput value={rendererState.csm.value} onChange={(val) => rendererState.csm.set(val)} />
+        <BooleanInput value={rendererSettingsState.csm.value} onChange={(val) => rendererSettingsState.csm.set(val)} />
       </InputGroup>
       <InputGroup
         name="Tone Mapping"
@@ -128,8 +149,8 @@ export const RenderSettingsEditor: EditorComponentType = (props) => {
       >
         <SelectInput
           options={ToneMappingOptions}
-          value={rendererState.toneMapping.value}
-          onChange={(val: ToneMapping) => rendererState.toneMapping.set(val)}
+          value={rendererSettingsState.toneMapping.value}
+          onChange={(val: ToneMapping) => rendererSettingsState.toneMapping.set(val)}
         />
       </InputGroup>
       <InputGroup
@@ -141,8 +162,8 @@ export const RenderSettingsEditor: EditorComponentType = (props) => {
           min={0}
           max={10}
           step={0.1}
-          value={rendererState.toneMappingExposure.value}
-          onChange={(val) => rendererState.toneMappingExposure.set(val)}
+          value={rendererSettingsState.toneMappingExposure.value}
+          onChange={(val) => rendererSettingsState.toneMappingExposure.set(val)}
         />
       </InputGroup>
       <InputGroup
@@ -152,8 +173,8 @@ export const RenderSettingsEditor: EditorComponentType = (props) => {
       >
         <SelectInput
           options={ShadowTypeOptions}
-          value={rendererState.shadowMapType.value ?? -1}
-          onChange={(val: ShadowMapType) => rendererState.shadowMapType.set(val)}
+          value={rendererSettingsState.shadowMapType.value ?? -1}
+          onChange={(val: ShadowMapType) => rendererSettingsState.shadowMapType.set(val)}
         />
       </InputGroup>
     </PropertyGroup>