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 { ComponentType, 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 { GLTFNodeState, GLTFSnapshotAction } from '@etherealengine/engine/src/gltf/GLTFDocumentState'
 import { GLTFSnapshotState } from '@etherealengine/engine/src/gltf/GLTFState'

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/SceneModule.ts

@@ -67,7 +67,7 @@ import { PortalSystem } from './systems/PortalSystem'
 import { SceneKillHeightSystem } from './systems/SceneKillHeightSystem'
 import { SceneObjectDynamicLoadSystem } from './systems/SceneObjectDynamicLoadSystem'
 import { SceneObjectSystem } from './systems/SceneObjectSystem'
-import { ShadowSystem } from './systems/ShadowSystem'
+import { DropShadowSystem, ShadowSystem } from './systems/ShadowSystem'
 import { VariantSystem } from './systems/VariantSystem'
 
 /** This const MUST be kept here, to ensure all components definitions are loaded by the time the scene loading occurs */
@@ -111,6 +111,7 @@ export const SceneComponents = [
 ]
 
 export {
+ DropShadowSystem,
  EnvironmentSystem,
  FogSystem,
  MaterialLibrarySystem,

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

@@ -247,15 +247,16 @@ function ModelReactor() {
 }
 
 /**
- * Returns true if the entity is a mesh not a part of a model, or a model
+ * Returns true if the entity has a model component or a mesh component that is not a child of model
  * @param entity
- * @returns
+ * @returns {boolean}
  */
-export const useMeshOrModel = (entity: Entity) => {
- const isModel = !!useOptionalComponent(entity, ModelComponent)
+export const useHasModelOrIndependentMesh = (entity: Entity) => {
+ const hasModel = !!useOptionalComponent(entity, ModelComponent)
  const isChildOfModel = !!useAncestorWithComponent(entity, ModelComponent)
  const hasMesh = !!useOptionalComponent(entity, MeshComponent)
- return isModel && !isChildOfModel && hasMesh
+
+ return hasModel || (hasMesh && !isChildOfModel)
 }
 
 export const MeshOrModelQuery = (props: { ChildReactor: FC<{ entity: Entity; rootEntity: Entity }> }) => {

packages/engine/src/scene/components/PrimitiveGeometryComponent.ts

@@ -26,13 +26,10 @@ Ethereal Engine. All Rights Reserved.
 import { useLayoutEffect } from 'react'
 import { MeshLambertMaterial } from 'three'
 
-import { defineComponent, useComponent, useOptionalComponent } from '@etherealengine/ecs/src/ComponentFunctions'
+import { defineComponent, useComponent } 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 { ColliderComponent } from '@etherealengine/spatial/src/physics/components/ColliderComponent'
-import { Shape, Shapes } from '@etherealengine/spatial/src/physics/types/PhysicsTypes'
 import { GeometryTypeEnum, GeometryTypeToClass } from '../constants/GeometryTypeEnum'
 
 const createGeometry = (geometryType: GeometryTypeEnum, geometryParams: Record<string, any>): Geometry => {
@@ -73,33 +70,11 @@ export const PrimitiveGeometryComponent = defineComponent({
  () => createGeometry(geometryComponent.geometryType.value, geometryComponent.geometryParams.value),
  () => new MeshLambertMaterial()
  )
- const colliderComponent = useOptionalComponent(entity, ColliderComponent)
 
  useLayoutEffect(() => {
  mesh.geometry.set(createGeometry(geometryComponent.geometryType.value, geometryComponent.geometryParams.value))
  }, [geometryComponent.geometryType, geometryComponent.geometryParams])
 
- useLayoutEffect(() => {
- if (!colliderComponent) return
- colliderComponent.shape.set(GeometryToColliderShape[geometryComponent.geometryType.value])
- }, [mesh.geometry, !!colliderComponent])
-
  return null
  }
 })
-
-const GeometryToColliderShape = {
- [GeometryTypeEnum.BoxGeometry]: Shapes.Box,
- [GeometryTypeEnum.SphereGeometry]: Shapes.Sphere,
- [GeometryTypeEnum.CylinderGeometry]: Shapes.Cylinder,
- [GeometryTypeEnum.CapsuleGeometry]: Shapes.Capsule,
- [GeometryTypeEnum.PlaneGeometry]: Shapes.Mesh,
- [GeometryTypeEnum.CircleGeometry]: Shapes.Mesh,
- [GeometryTypeEnum.RingGeometry]: Shapes.Mesh,
- [GeometryTypeEnum.TorusGeometry]: Shapes.Mesh,
- [GeometryTypeEnum.DodecahedronGeometry]: Shapes.Mesh,
- [GeometryTypeEnum.IcosahedronGeometry]: Shapes.Mesh,
- [GeometryTypeEnum.OctahedronGeometry]: Shapes.Mesh,
- [GeometryTypeEnum.TetrahedronGeometry]: Shapes.Mesh,
- [GeometryTypeEnum.TorusKnotGeometry]: Shapes.Mesh
-} as Record<GeometryTypeEnum, Shape>

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

@@ -40,7 +40,7 @@ import {
 
 import config from '@etherealengine/common/src/config'
 import { isClient } from '@etherealengine/common/src/utils/getEnvironment'
-import { Engine, UUIDComponent } from '@etherealengine/ecs'
+import { AnimationSystemGroup, Engine, UUIDComponent } from '@etherealengine/ecs'
 import {
  getComponent,
  getOptionalComponent,
@@ -55,16 +55,15 @@ import { Entity, UndefinedEntity } from '@etherealengine/ecs/src/Entity'
 import { createEntity, removeEntity, useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { defineQuery, QueryReactor } from '@etherealengine/ecs/src/QueryFunctions'
 import { defineSystem, useExecute } from '@etherealengine/ecs/src/SystemFunctions'
-import { AnimationSystemGroup } from '@etherealengine/ecs/src/SystemGroups'
-import { defineState, getMutableState, getState, hookstate, NO_PROXY, useHookstate } from '@etherealengine/hyperflux'
+import { defineState, getMutableState, getState, NO_PROXY, useHookstate } from '@etherealengine/hyperflux'
 import { Vector3_Back } from '@etherealengine/spatial/src/common/constants/MathConstants'
 import {
  createPriorityQueue,
  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'
@@ -87,9 +86,13 @@ 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 { TransformSystem } from '@etherealengine/spatial'
+import { EngineState } from '@etherealengine/spatial/src/EngineState'
+import { RenderModes } from '@etherealengine/spatial/src/renderer/constants/RenderModes'
+import { createDisposable } from '@etherealengine/spatial/src/resources/resourceHooks'
 import { useTexture } from '../../assets/functions/resourceLoaderHooks'
 import { DropShadowComponent } from '../components/DropShadowComponent'
-import { useMeshOrModel } from '../components/ModelComponent'
+import { useHasModelOrIndependentMesh } from '../components/ModelComponent'
 import { RenderSettingsComponent } from '../components/RenderSettingsComponent'
 import { ShadowComponent } from '../components/ShadowComponent'
 import { SceneObjectSystem } from './SceneObjectSystem'
@@ -234,9 +237,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} />
 }
@@ -300,8 +306,6 @@ const shadowMaterial = new MeshBasicMaterial({
  polygonOffsetUnits: 0.01
 })
 
-const shadowState = hookstate(null as MeshBasicMaterial | null)
-
 const dropShadowComponentQuery = defineQuery([DropShadowComponent])
 
 const minRadius = 0.15
@@ -312,14 +316,11 @@ const vec3 = new Vector3()
 
 const DropShadowReactor = () => {
  const entity = useEntityContext()
- const shadowMaterial = useHookstate(shadowState)
- const isMeshOrModel = useMeshOrModel(entity)
+ const hasMeshOrModel = useHasModelOrIndependentMesh(entity)
  const shadow = useComponent(entity, ShadowComponent)
- const entityTree = useComponent(entity, EntityTreeComponent)
 
  useEffect(() => {
- if (!shadow.cast.value || !shadowMaterial.value || !isMeshOrModel || hasComponent(entity, DropShadowComponent))
- return
+ if (!shadow.cast.value || !hasMeshOrModel || hasComponent(entity, DropShadowComponent)) return
 
  box3.makeEmpty()
 
@@ -342,17 +343,24 @@ const DropShadowReactor = () => {
  const radius = Math.max(sphere.radius * 2, minRadius)
  const center = sphere.center.sub(TransformComponent.getWorldPosition(entity, vec3))
  const shadowEntity = createEntity()
- const shadowObject = new Mesh(shadowGeometry, shadowMaterial.value.clone())
+ const [shadowObject, unload] = createDisposable(Mesh, shadowEntity, shadowGeometry.clone(), shadowMaterial.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)
+ unload()
  }
- }, [shadowMaterial, isMeshOrModel, shadow, entityTree.children])
+ }, [hasMeshOrModel, shadow])
 
  return null
 }
@@ -362,8 +370,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)
@@ -391,9 +398,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) * 1.2
  shadowRotation.setFromUnitVectors(intersected.face.normal, Vector3_Back)
  dropShadowTransform.rotation.copy(shadowRotation)
  dropShadowTransform.scale.setScalar(finalRadius * 2)
@@ -407,10 +413,7 @@ const execute = () => {
  if (!isClient) return
 
  const useShadows = getShadowsEnabled()
- if (!useShadows) {
- updateDropShadowTransforms()
- return
- }
+ if (!useShadows) return
 
  for (const entity of rendererQuery()) {
  const { csm, csmHelper } = getComponent(entity, RendererComponent)
@@ -446,16 +449,15 @@ const reactor = () => {
  if (!shadowTexture) return
  shadowMaterial.map = shadowTexture
  shadowMaterial.needsUpdate = true
- shadowState.set(shadowMaterial)
  }, [shadowTexture])
 
  return (
  <>
  {useShadows ? (
  <QueryReactor Components={[RendererComponent]} ChildEntityReactor={_CSMReactor} />
- ) : (
+ ) : shadowTexture ? (
  <QueryReactor Components={[VisibleComponent, ShadowComponent]} ChildEntityReactor={DropShadowReactor} />
- )}
+ ) : null}
  <QueryReactor Components={[RendererComponent]} ChildEntityReactor={RendererShadowReactor} />
  </>
  )
@@ -467,3 +469,16 @@ export const ShadowSystem = defineSystem({
  execute,
  reactor
 })
+
+export const DropShadowSystem = defineSystem({
+ uuid: 'ee.engine.DropShadowSystem',
+ insert: { after: TransformSystem },
+ execute: () => {
+ if (!isClient) return
+
+ const useShadows = getShadowsEnabled()
+ if (!useShadows) {
+ updateDropShadowTransforms()
+ }
+ }
+})

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
 }