8133 studio should have render settings exposed

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

@@ -118,6 +118,14 @@
       "none": "None",
       "users": "Users",
       "user": "User"
+    },
+    "render-settings":{
+      "lbl-usePostProcessing":"Use Post Processing",
+      "info-usePostProcessing":"Enables post processing",
+      "lbl-shadowMapResolution":"Shadow Map Resolution",
+      "info-shadowMapResolution":"Set shadowmap resolution",
+      "lbl-renderMode":"Render Mode",
+      "info-renderMode":"Choose render mode"
     }
   },
   "properties": {
@@ -547,6 +555,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/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx

@@ -60,7 +60,7 @@ import { UserMenus } from '../../../UserUISystem'
 import styles from '../index.module.scss'
 import { PopupMenuServices } from '../PopupMenuService'
 
-const ShadowMapResolutionOptions = [
+export const ShadowMapResolutionOptions = [
   {
     label: '256px',
     value: 256

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

@@ -107,7 +107,7 @@ const ShadowTypeOptions = [
 
 export const RenderSettingsEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
-  const rendererState = useComponent(props.entity, RenderSettingsComponent)
+  const rendererSettingsState = useComponent(props.entity, RenderSettingsComponent)
 
   return (
     <PropertyGroup
@@ -119,7 +119,7 @@ export const RenderSettingsEditor: EditorComponentType = (props) => {
         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 +128,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 +141,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 +152,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>

packages/editor/src/components/toolbar/styles.module.scss

@@ -47,6 +47,42 @@
   }
 }
 
+.settingsContainer {
+  position: absolute;
+  top: 70px;
+  z-index: 1000;
+  right: 100px;
+  color: var(--white);
+  padding: 8px;
+  background-color: var(--popupBackground);
+  opacity: 0.88;
+  backdrop-filter: blur(1px);
+  border-radius: 4px;
+  width: 500px;
+
+  h3 {
+    font-size: 14px;
+  }
+
+  & > ul {
+    margin: 8px 4px;
+
+    & > li {
+      font: 12px;
+      color: var(--textColor);
+
+      & + li {
+        margin-top: 5px;
+      }
+
+      ul {
+        margin-left: 5px;
+        color: var(--white);
+      }
+    }
+  }
+}
+
 .toolbarNumericStepperInput {
   width: 120px;
 

packages/editor/src/components/toolbar/tools/RenderModeTool.tsx

@@ -23,15 +23,22 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React from 'react'
+import { t } from 'i18next'
+import React, { useRef, useState } from 'react'
 
+import { ShadowMapResolutionOptions } from '@etherealengine/client-core/src/user/components/UserMenu/menus/SettingMenu'
 import { RenderModesType } from '@etherealengine/engine/src/renderer/constants/RenderModes'
 import { RenderModes } from '@etherealengine/engine/src/renderer/constants/RenderModes'
 import { RendererState } from '@etherealengine/engine/src/renderer/RendererState'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
 import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined'
+import { Container } from '@mui/material'
 
+import { Modal } from '../../graph/ee-behave-flow/components/Modal'
+import BooleanInput from '../../inputs/BooleanInput'
+import CompoundNumericInput from '../../inputs/CompoundNumericInput'
+import InputGroup from '../../inputs/InputGroup'
 import SelectInput from '../../inputs/SelectInput'
 import { InfoTooltip } from '../../layout/Tooltip'
 import * as styles from '../styles.module.scss'
@@ -40,34 +47,79 @@ const RenderModeTool = () => {
   const rendererState = useHookstate(getMutableState(RendererState))
   const options = [] as { label: string; value: string }[]
 
+  const [isVisible, setIsVisible] = useState(false)
+
   for (let key of Object.keys(RenderModes)) {
     options.push({
       label: RenderModes[key],
       value: RenderModes[key]
     })
   }
 
+  const toggleRenderSettings = () => {
+    setIsVisible(!isVisible)
+  }
+
   const onChangeRenderMode = (mode: RenderModesType) => {
     rendererState.renderMode.set(mode)
   }
 
+  const handlePostProcessingCheckbox = () => {
+    rendererState.usePostProcessing.set(!rendererState.usePostProcessing.value)
+    rendererState.automatic.set(false)
+  }
   return (
-    <div className={styles.toolbarInputGroup} id="transform-pivot">
-      <InfoTooltip title="Render Mode">
-        <div className={styles.toolIcon}>
-          <WbSunnyOutlinedIcon fontSize="small" />
+    <>
+      <div className={styles.toolbarInputGroup + ' ' + styles.playButtonContainer} id="stats">
+        <InfoTooltip title="Render Settings">
+          <button
+            onClick={toggleRenderSettings}
+            className={styles.toolButton + ' ' + (isVisible ? styles.selected : '')}
+          >
+            <WbSunnyOutlinedIcon fontSize="small" />
+          </button>
+        </InfoTooltip>
+      </div>
+      {isVisible && (
+        <div className={styles.settingsContainer}>
+          <InputGroup
+            name="Use Post Processing"
+            label={t('editor:toolbar.render-settings.lbl-usePostProcessing')}
+            info={t('editor:toolbar.render-settings.info-usePostProcessing')}
+          >
+            <BooleanInput value={rendererState.usePostProcessing.value} onChange={handlePostProcessingCheckbox} />
+          </InputGroup>
+          <InputGroup
+            name="Render Mode"
+            label={t('editor:toolbar.render-settings.lbl-renderMode')} // need to figure out where this goes, maybe make a new section in editor.json, HELP!
+            info={t('editor:toolbar.render-settings.info-renderMode')}
+          >
+            <SelectInput
+              key={rendererState.renderMode.value}
+              className={styles.selectInput}
+              onChange={onChangeRenderMode}
+              options={options}
+              value={rendererState.renderMode.value}
+              creatable={false}
+              isSearchable={false}
+            />
+          </InputGroup>
+          {rendererState.renderMode.value == RenderModes.SHADOW && (
+            <InputGroup
+              name="Shadow Map Resolution"
+              label={t('editor:toolbar.render-settings.lbl-shadowMapResolution')}
+              info={t('editor:toolbar.render-settings.info-shadowMapResolution')}
+            >
+              <SelectInput
+                options={ShadowMapResolutionOptions}
+                value={rendererState.shadowMapResolution.value}
+                onChange={(resolution: number) => rendererState.shadowMapResolution.set(resolution)}
+              />
+            </InputGroup>
+          )}
         </div>
-      </InfoTooltip>
-      <SelectInput
-        key={rendererState.renderMode.value}
-        className={styles.selectInput}
-        onChange={onChangeRenderMode}
-        options={options}
-        value={rendererState.renderMode.value}
-        creatable={false}
-        isSearchable={false}
-      />
-    </div>
+      )}
+    </>
   )
 }
 

packages/engine/src/assets/csm/CSM.ts

@@ -60,7 +60,7 @@ export const CSMModes = {
 type CSMParams = {
   camera: PerspectiveCamera
   parent: Object3D
-  light: DirectionalLight
+  light?: DirectionalLight
   cascades?: number
   maxFar?: number
   mode?: (typeof CSMModes)[keyof typeof CSMModes]
@@ -92,7 +92,7 @@ export class CSM {
   mainFrustum: Frustum
   frustums: Frustum[]
   breaks: number[]
-  sourceLight: DirectionalLight
+  sourceLight?: DirectionalLight
   lights: DirectionalLight[]
   lightSourcesCount: number
   shaders: Map<Material, ShaderType> = new Map()
@@ -124,7 +124,7 @@ export class CSM {
     this.injectInclude()
   }
 
-  changeLights(light: DirectionalLight): void {
+  changeLights(light?: DirectionalLight): void {
     if (light === this.sourceLight) return
     this.remove()
     this.createLights(light)
@@ -288,6 +288,7 @@ export class CSM {
   }
 
   update(): void {
+    if (globalThis.csmHelper.paused) return
     if (this.needsUpdate) {
       for (const light of this.lights) {
         this.updateFrustums()
@@ -333,8 +334,8 @@ export class CSM {
   }
 
   injectInclude(): void {
-    ShaderChunk.lights_fragment_begin = Shader.lights_fragment_begin
-    ShaderChunk.lights_pars_begin = Shader.lights_pars_begin
+    ShaderChunk.lights_fragment_begin = Shader.lights_fragment_begin(this)
+    ShaderChunk.lights_pars_begin = Shader.lights_pars_begin()
   }
 
   setupMaterial(mesh: Mesh): void {

packages/engine/src/assets/csm/CSMHelper.ts

@@ -39,7 +39,7 @@ import {
   PlaneGeometry
 } from 'three'
 
-import type { CSM } from './CSM'
+import { CSM } from './CSM'
 
 class CSMHelper extends Group {
   private readonly csm: CSM
@@ -50,10 +50,12 @@ class CSMHelper extends Group {
   private cascadeLines: Box3Helper[] = []
   private cascadePlanes: Mesh[] = []
   private shadowLines: Group[] = []
+  paused = false
 
   public constructor(csm: CSM) {
     super()
     this.csm = csm
+    globalThis.csmHelper = this
 
     const indices = new Uint16Array([0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7])
     const positions = new Float32Array(24)
@@ -89,6 +91,8 @@ class CSMHelper extends Group {
   }
 
   public update() {
+    if (this.paused) return
+
     const csm = this.csm
     const camera = csm.camera
     const cascades = csm.cascades
@@ -110,9 +114,9 @@ class CSMHelper extends Group {
     this.updateMatrixWorld(true)
 
     while (cascadeLines.length > cascades) {
-      this.remove(cascadeLines.pop() as any)
-      this.remove(cascadePlanes.pop() as any)
-      this.remove(shadowLines.pop() as any)
+      this.remove(cascadeLines.pop()!)
+      this.remove(cascadePlanes.pop()!)
+      this.remove(shadowLines.pop()!)
     }
 
     while (cascadeLines.length < cascades) {