Lit and Unlit modes implementation

packages/editor/src/pages/Editor2Page.tsx

@@ -39,6 +39,7 @@ export const useStudioEditor = () => {
   const engineReady = useHookstate(false)
 
   useEffect(() => {
+    getMutableState(EngineState).isEditor.set(true)
     getMutableState(EngineState).isEditing.set(true)
     loadEngineInjection().then(() => {
       engineReady.set(true)

packages/engine/src/scene/components/ModelComponent.tsx

@@ -63,6 +63,7 @@ import { SceneJsonType, convertSceneJSONToGLTF } from '../../gltf/convertJsonToG
 import { addError, removeError } from '../functions/ErrorFunctions'
 import { parseGLTFModel, proxifyParentChildRelationships } from '../functions/loadGLTFModel'
 import { getModelSceneID, useModelSceneID } from '../functions/loaders/ModelFunctions'
+import { PrimitiveGeometryComponent } from './PrimitiveGeometryComponent'
 import { SourceComponent } from './SourceComponent'
 
 /**
@@ -255,7 +256,9 @@ export const useMeshOrModel = (entity: Entity) => {
   const isModel = !!useOptionalComponent(entity, ModelComponent)
   const isChildOfModel = !!useAncestorWithComponent(entity, ModelComponent)
   const hasMesh = !!useOptionalComponent(entity, MeshComponent)
-  return isModel && !isChildOfModel && hasMesh
+  const isPrimitiveGeom = !!useOptionalComponent(entity, PrimitiveGeometryComponent)
+
+  return ((isModel && !isChildOfModel) || isPrimitiveGeom) && hasMesh
 }
 
 export const MeshOrModelQuery = (props: { ChildReactor: FC<{ entity: Entity; rootEntity: Entity }> }) => {

packages/engine/src/scene/systems/ShadowSystem.tsx

@@ -86,6 +86,7 @@ import { TransformComponent } from '@etherealengine/spatial/src/transform/compon
 import { XRLightProbeState } from '@etherealengine/spatial/src/xr/XRLightProbeSystem'
 import { isMobileXRHeadset } from '@etherealengine/spatial/src/xr/XRState'
 
+import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { useTexture } from '../../assets/functions/resourceLoaderHooks'
 import { DropShadowComponent } from '../components/DropShadowComponent'
 import { useMeshOrModel } from '../components/ModelComponent'
@@ -270,9 +271,12 @@ const EntityChildCSMReactor = (props: { rendererEntity: Entity }) => {
 function _CSMReactor() {
   const rendererEntity = useEntityContext()
   const renderSettingsEntity = useChildWithComponent(rendererEntity, RenderSettingsComponent)
+  const isEditor = useHookstate(getMutableState(EngineState).isEditor).value
+  const renderMode = useHookstate(getMutableState(RendererState).renderMode).value
 
   if (!rendererEntity) return null
   if (!renderSettingsEntity) return null
+  if (isEditor && ['Unlit', 'Lit'].includes(renderMode)) return null
 
   return <CSMReactor rendererEntity={rendererEntity} renderSettingsEntity={renderSettingsEntity} />
 }
@@ -353,8 +357,6 @@ const DropShadowReactor = () => {
   const shadowMaterial = useHookstate(shadowState)
   const isMeshOrModel = useMeshOrModel(entity)
   const shadow = useComponent(entity, ShadowComponent)
-  const entityTree = useComponent(entity, EntityTreeComponent)
-
   useEffect(() => {
     if (!shadow.cast.value || !shadowMaterial.value || !isMeshOrModel || hasComponent(entity, DropShadowComponent))
       return
@@ -382,15 +384,21 @@ const DropShadowReactor = () => {
     const shadowEntity = createEntity()
     const shadowObject = new Mesh(shadowGeometry, shadowMaterial.value.clone())
     addObjectToGroup(shadowEntity, shadowObject)
-    setComponent(shadowEntity, NameComponent, 'Shadow for ' + getComponent(entity, NameComponent))
+    setComponent(shadowEntity, EntityTreeComponent, { parentEntity: Engine.instance.originEntity })
+    setComponent(
+      shadowEntity,
+      NameComponent,
+      'Shadow for ' + getComponent(entity, NameComponent) + '_' + getComponent(entity, UUIDComponent)
+    )
     setComponent(shadowEntity, VisibleComponent)
+    setComponent(shadowEntity, ObjectLayerComponents[ObjectLayers.Scene])
     setComponent(entity, DropShadowComponent, { radius, center, entity: shadowEntity })
 
     return () => {
       removeComponent(entity, DropShadowComponent)
       removeEntity(shadowEntity)
     }
-  }, [shadowMaterial, isMeshOrModel, shadow, entityTree.children])
+  }, [shadowMaterial, isMeshOrModel, shadow])
 
   return null
 }
@@ -400,8 +408,7 @@ const shadowOffset = new Vector3(0, 0.01, 0)
 const sortAndApplyPriorityQueue = createSortAndApplyPriorityQueue(dropShadowComponentQuery, compareDistanceToCamera)
 const sortedEntityTransforms = [] as Entity[]
 
-const cameraLayerQuery = defineQuery([ObjectLayerComponents[ObjectLayers.Camera], MeshComponent])
-
+const cameraLayerQuery = defineQuery([ObjectLayerComponents[ObjectLayers.Scene], MeshComponent])
 const updateDropShadowTransforms = () => {
   const { deltaSeconds } = getState(ECSState)
   const { priorityQueue } = getState(ShadowSystemState)
@@ -429,9 +436,8 @@ const updateDropShadowTransforms = () => {
     const sizeBias = 0.3
     const finalRadius = sizeBias * dropShadow.radius + dropShadow.radius * centerCorrectedDist * 0.5
 
-    const shadowMaterial = (getComponent(dropShadow.entity, GroupComponent)[0] as any).material as Material
-    shadowMaterial.opacity = Math.min(1 / (1 + centerCorrectedDist), 1) * 0.6
-
+    const shadowMaterial = (getComponent(dropShadow.entity, GroupComponent)[0] as Mesh).material as Material
+    shadowMaterial.opacity = Math.min(1 / (1 + centerCorrectedDist), 1) * 2
     shadowRotation.setFromUnitVectors(intersected.face.normal, Vector3_Back)
     dropShadowTransform.rotation.copy(shadowRotation)
     dropShadowTransform.scale.setScalar(finalRadius * 2)

packages/spatial/src/renderer/functions/RenderSettingsFunction.ts

@@ -26,26 +26,16 @@ Ethereal Engine. All Rights Reserved.
 import { getMutableState, getState, useHookstate } from '@etherealengine/hyperflux'
 
 import { iOS } from '../../common/functions/isMobile'
-import { EngineState } from '../../EngineState'
 import { RendererState } from '../../renderer/RendererState'
 import { isMobileXRHeadset } from '../../xr/XRState'
-import { RenderModes } from '../constants/RenderModes'
 
 export const getShadowsEnabled = () => {
   const rendererState = getState(RendererState)
-  const isEditor = getState(EngineState).isEditor
-  return (
-    !isMobileXRHeadset &&
-    !iOS &&
-    rendererState.useShadows &&
-    (isEditor ? rendererState.renderMode === RenderModes.SHADOW : true)
-  )
+  return !isMobileXRHeadset && !iOS && rendererState.useShadows
 }
 
 export const useShadowsEnabled = () => {
   const rendererState = getMutableState(RendererState)
   const useShadows = useHookstate(rendererState.useShadows).value
-  const renderMode = useHookstate(rendererState.renderMode).value
-  const isEditor = useHookstate(getMutableState(EngineState).isEditor).value
-  return !isMobileXRHeadset && !iOS && useShadows && (isEditor ? renderMode === RenderModes.SHADOW : true)
+  return !isMobileXRHeadset && !iOS && useShadows
 }

packages/spatial/src/renderer/functions/changeRenderMode.ts

@@ -24,60 +24,51 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { RenderPass } from 'postprocessing'
-import { MeshBasicMaterial, MeshNormalMaterial } from 'three'
+import { AmbientLight, MeshBasicMaterial, MeshNormalMaterial } from 'three'
 
 import { Engine, getComponent } from '@etherealengine/ecs'
 import { getState } from '@etherealengine/hyperflux'
 
-import { RenderModes } from '../constants/RenderModes'
+import { EditorState } from '../../../../editor/src/services/EditorServices'
+import { iterateEntityNode } from '../../transform/components/EntityTree'
 import { RendererState } from '../RendererState'
 import { RendererComponent } from '../WebGLRendererSystem'
+import { GroupComponent, addObjectToGroup, removeObjectFromGroup } from '../components/GroupComponent'
+import { setVisibleComponent } from '../components/VisibleComponent'
+import { RenderModes } from '../constants/RenderModes'
 
 /**
  * Change render mode of the renderer
  * @param mode Mode which will be set to renderer
  */
-export function changeRenderMode() {
-  const renderMode = getState(RendererState).renderMode
 
-  // revert any changes made by a render mode
-  switch (renderMode) {
-    case RenderModes.UNLIT:
-      // Not currently working, will be replaced with custom renderer in the future
+const tempAmbientLight = new AmbientLight()
 
-      // iterateObject3D(Engine.instance.scene, (obj: Light) => {
-      //   if (obj.isLight && obj.userData.editor_disabled) {
-      //     delete obj.userData.editor_disabled
-      //     obj.visible = true
-      //   }
-      // })
-      break
-    default:
-      break
-  }
+export function changeRenderMode() {
+  const renderMode = getState(RendererState).renderMode
 
   const passes = getComponent(Engine.instance.viewerEntity, RendererComponent).effectComposer?.passes.filter(
     (p) => p.name === 'RenderPass'
   ) as any
   const renderPass: RenderPass = passes ? passes[0] : undefined
-
   if (!renderPass) return
 
   switch (renderMode) {
     case RenderModes.UNLIT:
-      // See above comment
-      // iterateObject3D(Engine.instance.scene, (obj: Light) => {
-      //   if (obj.isLight && obj.visible) {
-      //     obj.userData.editor_disabled = true
-      //     obj.visible = false
-      //   }
-      // })
-      renderPass.overrideMaterial = null!
-      break
     case RenderModes.LIT:
-      renderPass.overrideMaterial = null!
-      break
     case RenderModes.SHADOW:
+      iterateEntityNode(getState(EditorState).rootEntity, (entity, index) => {
+        const groups = getComponent(entity, GroupComponent)
+        for (const group of groups) {
+          if ((group as any).isLight) {
+            setVisibleComponent(group.entity, renderMode !== RenderModes.UNLIT)
+          }
+        }
+      })
+      renderMode === RenderModes.UNLIT
+        ? addObjectToGroup(getState(EditorState).rootEntity, tempAmbientLight)
+        : removeObjectFromGroup(getState(EditorState).rootEntity, tempAmbientLight)
+
       renderPass.overrideMaterial = null!
       break
     case RenderModes.WIREFRAME:

packages/ui/src/components/editor/panels/Viewport/tools/RenderTool.tsx

@@ -68,7 +68,6 @@ const RenderModeTool = () => {
 
   const rendererState = useMutableState(RendererState)
   const options = [] as { label: string; value: string }[]
-  const isVisible = useHookstate(false)
 
   for (let key of Object.keys(RenderModes)) {
     options.push({
@@ -77,10 +76,6 @@ const RenderModeTool = () => {
     })
   }
 
-  const onChangeRenderMode = (mode: RenderModesType) => {
-    rendererState.renderMode.set(mode)
-  }
-
   const handlePostProcessingChange = () => {
     rendererState.usePostProcessing.set(!rendererState.usePostProcessing.value)
     rendererState.automatic.set(false)