Lit and Unlit modes implementation

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

@@ -28,7 +28,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
-import { AmbientLightComponent } from '@etherealengine/spatial/src/renderer/components/AmbientLightComponent'
+import { AmbientLightComponent } from '@etherealengine/spatial/src/renderer/components/lights/AmbientLightComponent'
 
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'

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

@@ -28,7 +28,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
-import { DirectionalLightComponent } from '@etherealengine/spatial/src/renderer/components/DirectionalLightComponent'
+import { DirectionalLightComponent } from '@etherealengine/spatial/src/renderer/components/lights/DirectionalLightComponent'
 
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'

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

@@ -28,7 +28,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
-import { HemisphereLightComponent } from '@etherealengine/spatial/src/renderer/components/HemisphereLightComponent'
+import { HemisphereLightComponent } from '@etherealengine/spatial/src/renderer/components/lights/HemisphereLightComponent'
 
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'

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

@@ -28,7 +28,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
-import { PointLightComponent } from '@etherealengine/spatial/src/renderer/components/PointLightComponent'
+import { PointLightComponent } from '@etherealengine/spatial/src/renderer/components/lights/PointLightComponent'
 
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'

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

@@ -41,7 +41,7 @@ import { EntityUUID, useQuery, UUIDComponent } from '@etherealengine/ecs'
 import { getComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { RenderSettingsComponent } from '@etherealengine/engine/src/scene/components/RenderSettingsComponent'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
-import { DirectionalLightComponent } from '@etherealengine/spatial/src/renderer/components/DirectionalLightComponent'
+import { DirectionalLightComponent } from '@etherealengine/spatial/src/renderer/components/lights/DirectionalLightComponent'
 
 import BooleanInput from '../inputs/BooleanInput'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'

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

@@ -28,7 +28,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
-import { SpotLightComponent } from '@etherealengine/spatial/src/renderer/components/SpotLightComponent'
+import { SpotLightComponent } from '@etherealengine/spatial/src/renderer/components/lights/SpotLightComponent'
 
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'

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/components/PrimitiveGeometryComponent.ts

@@ -26,11 +26,12 @@ Ethereal Engine. All Rights Reserved.
 import { useLayoutEffect } from 'react'
 import { MeshLambertMaterial } from 'three'
 
-import { defineComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
+import { defineComponent, useComponent, useOptionalComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { Geometry } from '@etherealengine/spatial/src/common/constants/Geometry'
-import { useMeshComponent } from '@etherealengine/spatial/src/renderer/components/MeshComponent'
+import { MeshComponent, useMeshComponent } from '@etherealengine/spatial/src/renderer/components/MeshComponent'
 
+import { Entity } from '@etherealengine/ecs'
 import { GeometryTypeEnum, GeometryTypeToClass } from '../constants/GeometryTypeEnum'
 
 const createGeometry = (geometryType: GeometryTypeEnum, geometryParams: Record<string, any>): Geometry => {
@@ -79,3 +80,10 @@ export const PrimitiveGeometryComponent = defineComponent({
     return null
   }
 })
+
+export const usePrimitiveGeom = (entity: Entity) => {
+  const hasMesh = !!useOptionalComponent(entity, MeshComponent)
+  const isPrimitiveGeom = !!useOptionalComponent(entity, PrimitiveGeometryComponent)
+
+  return isPrimitiveGeom && hasMesh
+}

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

@@ -62,8 +62,8 @@ import {
   createSortAndApplyPriorityQueue
 } from '@etherealengine/spatial/src/common/functions/PriorityQueue'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
-import { DirectionalLightComponent } from '@etherealengine/spatial/src/renderer/components/DirectionalLightComponent'
 import { addObjectToGroup, GroupComponent } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
+import { DirectionalLightComponent } from '@etherealengine/spatial/src/renderer/components/lights/DirectionalLightComponent'
 import { MeshComponent } from '@etherealengine/spatial/src/renderer/components/MeshComponent'
 import { ObjectLayerComponents } from '@etherealengine/spatial/src/renderer/components/ObjectLayerComponent'
 import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
@@ -86,9 +86,12 @@ 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 { RenderModes } from '@etherealengine/spatial/src/renderer/constants/RenderModes'
 import { useTexture } from '../../assets/functions/resourceLoaderHooks'
 import { DropShadowComponent } from '../components/DropShadowComponent'
 import { useMeshOrModel } from '../components/ModelComponent'
+import { usePrimitiveGeom } from '../components/PrimitiveGeometryComponent'
 import { RenderSettingsComponent } from '../components/RenderSettingsComponent'
 import { ShadowComponent } from '../components/ShadowComponent'
 import { SceneObjectSystem } from './SceneObjectSystem'
@@ -271,9 +274,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 && renderMode === RenderModes.UNLIT) || renderMode === RenderModes.LIT) return null
 
   return <CSMReactor rendererEntity={rendererEntity} renderSettingsEntity={renderSettingsEntity} />
 }
@@ -353,11 +359,16 @@ const DropShadowReactor = () => {
   const entity = useEntityContext()
   const shadowMaterial = useHookstate(shadowState)
   const isMeshOrModel = useMeshOrModel(entity)
+  const isPrimitiveGeom = usePrimitiveGeom(entity)
   const shadow = useComponent(entity, ShadowComponent)
-  const entityTree = useComponent(entity, EntityTreeComponent)
-
   useEffect(() => {
-    if (!shadow.cast.value || !shadowMaterial.value || !isMeshOrModel || hasComponent(entity, DropShadowComponent))
+    if (
+      !shadow.cast.value ||
+      !shadowMaterial.value ||
+      !isMeshOrModel ||
+      !isPrimitiveGeom ||
+      hasComponent(entity, DropShadowComponent)
+    )
       return
 
     box3.makeEmpty()
@@ -383,15 +394,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
 }
@@ -401,8 +418,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)
@@ -430,9 +446,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/RendererModule.ts

@@ -23,16 +23,17 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { AmbientLightComponent } from '../renderer/components/AmbientLightComponent'
-import { DirectionalLightComponent } from '../renderer/components/DirectionalLightComponent'
-import { HemisphereLightComponent } from '../renderer/components/HemisphereLightComponent'
-import { PointLightComponent } from '../renderer/components/PointLightComponent'
-import { SpotLightComponent } from '../renderer/components/SpotLightComponent'
 import { TransformComponent } from '../transform/components/TransformComponent'
 import { XRAnchorComponent } from '../xr/XRComponents'
 import { DebugRendererSystem } from './DebugRendererSystem'
 import { RenderInfoSystem } from './RenderInfoSystem'
+import { ViewportLightingSystem } from './ViewportLightingSystem'
 import { WebGLRendererSystem } from './WebGLRendererSystem'
+import { AmbientLightComponent } from './components/lights/AmbientLightComponent'
+import { DirectionalLightComponent } from './components/lights/DirectionalLightComponent'
+import { HemisphereLightComponent } from './components/lights/HemisphereLightComponent'
+import { PointLightComponent } from './components/lights/PointLightComponent'
+import { SpotLightComponent } from './components/lights/SpotLightComponent'
 
 /** Components */
 export {
@@ -45,6 +46,7 @@ export {
   RenderInfoSystem,
   SpotLightComponent,
   TransformComponent,
+  ViewportLightingSystem,
   WebGLRendererSystem,
   XRAnchorComponent
 }

packages/spatial/src/renderer/ViewportLightingSystem.tsx

@@ -0,0 +1,70 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { defineQuery, defineSystem, getComponent } from '@etherealengine/ecs'
+import { getState, useMutableState } from '@etherealengine/hyperflux'
+import { useEffect } from 'react'
+import { AmbientLight } from 'three'
+import { EditorState } from '../../../editor/src/services/EditorServices'
+import { RendererState } from './RendererState'
+import { WebGLRendererSystem } from './WebGLRendererSystem'
+import { GroupComponent, addObjectToGroup, removeObjectFromGroup } from './components/GroupComponent'
+import { LightTagComponent } from './components/lights/LightTagComponent'
+import { RenderModes } from './constants/RenderModes'
+
+const _tempAmbientLight = new AmbientLight()
+
+const lightQuery = defineQuery([LightTagComponent, GroupComponent])
+
+const execute = () => {
+  const renderMode = getState(RendererState).renderMode
+  if (renderMode === RenderModes.UNLIT) {
+    for (const entity of lightQuery()) {
+      const groupComponent = getComponent(entity, GroupComponent)
+      groupComponent.forEach((child: any) => {
+        child.visible = !child.isLight
+      })
+    }
+  }
+}
+
+const reactor = () => {
+  const renderer = useMutableState(RendererState)
+  useEffect(() => {
+    const root = getState(EditorState).rootEntity
+    renderer.renderMode.value === RenderModes.UNLIT
+      ? addObjectToGroup(root, _tempAmbientLight)
+      : removeObjectFromGroup(root, _tempAmbientLight)
+  }, [renderer.renderMode])
+
+  return null
+}
+
+export const ViewportLightingSystem = defineSystem({
+  uuid: 'ee.engine.ViewportLightingSystem',
+  insert: { before: WebGLRendererSystem },
+  execute,
+  reactor
+})

packages/spatial/src/renderer/components/AmbientLightComponent.ts → packages/spatial/src/renderer/components/lights/AmbientLightComponent.ts

@@ -26,12 +26,13 @@ Ethereal Engine. All Rights Reserved.
 import { useEffect } from 'react'
 import { AmbientLight, Color } from 'three'
 
-import { defineComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
+import { defineComponent, setComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { matches } from '@etherealengine/hyperflux'
 
-import { useDisposable } from '../../resources/resourceHooks'
-import { addObjectToGroup, removeObjectFromGroup } from './GroupComponent'
+import { useDisposable } from '../../../resources/resourceHooks'
+import { addObjectToGroup, removeObjectFromGroup } from '../GroupComponent'
+import { LightTagComponent } from './LightTagComponent'
 
 export const AmbientLightComponent = defineComponent({
   name: 'AmbientLightComponent',
@@ -65,6 +66,7 @@ export const AmbientLightComponent = defineComponent({
     const [light] = useDisposable(AmbientLight, entity)
 
     useEffect(() => {
+      setComponent(entity, LightTagComponent)
       addObjectToGroup(entity, light)
       return () => {
         removeObjectFromGroup(entity, light)

packages/spatial/src/renderer/components/DirectionalLightComponent.ts → packages/spatial/src/renderer/components/lights/DirectionalLightComponent.ts

@@ -36,12 +36,13 @@ import {
 import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { matches, useMutableState } from '@etherealengine/hyperflux'
 
-import { mergeBufferGeometries } from '../../common/classes/BufferGeometryUtils'
-import { useDisposable } from '../../resources/resourceHooks'
-import { useUpdateLight } from '../functions/useUpdateLight'
-import { RendererState } from '../RendererState'
-import { addObjectToGroup, removeObjectFromGroup } from './GroupComponent'
-import { LineSegmentComponent } from './LineSegmentComponent'
+import { mergeBufferGeometries } from '../../../common/classes/BufferGeometryUtils'
+import { useDisposable } from '../../../resources/resourceHooks'
+import { useUpdateLight } from '../../functions/useUpdateLight'
+import { RendererState } from '../../RendererState'
+import { addObjectToGroup, removeObjectFromGroup } from '../GroupComponent'
+import { LineSegmentComponent } from '../LineSegmentComponent'
+import { LightTagComponent } from './LightTagComponent'
 
 const size = 1
 const lightPlaneGeometry = new BufferGeometry()
@@ -147,6 +148,7 @@ export const DirectionalLightComponent = defineComponent({
     const lightHelper = useOptionalComponent(entity, LineSegmentComponent)
 
     useEffect(() => {
+      setComponent(entity, LightTagComponent)
       directionalLightComponent.light.set(light)
       addObjectToGroup(entity, light)
       return () => {

packages/spatial/src/renderer/components/HemisphereLightComponent.ts → packages/spatial/src/renderer/components/lights/HemisphereLightComponent.ts

@@ -36,10 +36,11 @@ import {
 import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { matches, useMutableState } from '@etherealengine/hyperflux'
 
-import { LightHelperComponent } from '../../common/debug/LightHelperComponent'
-import { useDisposable } from '../../resources/resourceHooks'
-import { RendererState } from '../RendererState'
-import { addObjectToGroup, removeObjectFromGroup } from './GroupComponent'
+import { LightHelperComponent } from '../../../common/debug/LightHelperComponent'
+import { useDisposable } from '../../../resources/resourceHooks'
+import { RendererState } from '../../RendererState'
+import { addObjectToGroup, removeObjectFromGroup } from '../GroupComponent'
+import { LightTagComponent } from './LightTagComponent'
 
 export const HemisphereLightComponent = defineComponent({
   name: 'HemisphereLightComponent',
@@ -81,6 +82,7 @@ export const HemisphereLightComponent = defineComponent({
     const lightHelper = useOptionalComponent(entity, LightHelperComponent)
 
     useEffect(() => {
+      setComponent(entity, LightTagComponent)
       addObjectToGroup(entity, light)
       return () => {
         removeObjectFromGroup(entity, light)