Skip to content
This repository has been archived by the owner on Aug 21, 2024. It is now read-only.

Commit

Permalink
8133 studio should have render settings exposed (#8263)
Browse files Browse the repository at this point in the history 
* move use shadows and postprocessing to render settings editor

* create render settings modal

* swicth reolution to shadowmap resolution

* update csm reactor and impl

* license

---------

Co-authored-by: HexaField <joshfield999@gmail.com>
  • Loading branch information
@SYBIOTE @HexaField
SYBIOTE and HexaField authored Jul 13, 2023
1 parent 7ad39e0 commit faaa9cb
Show file tree
Hide file tree
Showing 10 changed files with 504 additions and 272 deletions.
12 changes: 12 additions & 0 deletions packages/client-core/i18n/en/editor.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 8 additions & 8 deletions packages/editor/src/components/properties/RenderSettingsEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
36 changes: 36 additions & 0 deletions packages/editor/src/components/toolbar/styles.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
84 changes: 68 additions & 16 deletions packages/editor/src/components/toolbar/tools/RenderModeTool.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>
)}
</>
)
}

Expand Down
11 changes: 6 additions & 5 deletions packages/engine/src/assets/csm/CSM.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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 {
Expand Down
12 changes: 8 additions & 4 deletions packages/engine/src/assets/csm/CSMHelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -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) {
Expand Down
Loading

0 comments on commit faaa9cb

Please sign in to comment.