Preview camera fixes

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

@@ -33,6 +33,7 @@ import { TransformComponent } from '@etherealengine/engine/src/transform/compone
 
 import CameraAltIcon from '@mui/icons-material/CameraAlt'
 
+import { ScenePreviewCameraComponent } from '@etherealengine/engine/src/scene/components/ScenePreviewCamera'
 import { computeTransformMatrix } from '@etherealengine/engine/src/transform/systems/TransformSystem'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
 import { previewScreenshot } from '../../functions/takeScreenshot'
@@ -62,7 +63,12 @@ export const ScenePreviewCameraNodeEditor: EditorComponentType = (props) => {
   }
 
   const updateScenePreview = async () => {
-    const imageBlob = (await previewScreenshot(512 / 2, 320 / 2))!
+    const imageBlob = (await previewScreenshot(
+      512 / 2,
+      320 / 2,
+      0.9,
+      getComponent(props.entity, ScenePreviewCameraComponent).camera
+    ))!
     const url = URL.createObjectURL(imageBlob)
     setBufferUrl(url)
   }

packages/editor/src/functions/takeScreenshot.ts

@@ -62,7 +62,7 @@ function getResizedCanvas(canvas: HTMLCanvasElement, width: number, height: numb
   return tmpCanvas
 }
 
-const query = defineQuery([ScenePreviewCameraComponent])
+const scenePreviewCameraQuery = defineQuery([ScenePreviewCameraComponent])
 
 const ktx2Encoder = new KTX2Encoder()
 
@@ -85,7 +85,7 @@ export async function previewScreenshot(
 ): Promise<Blob | null> {
   // Getting Scene preview camera or creating one if not exists
   if (!scenePreviewCamera) {
-    for (const entity of query()) {
+    for (const entity of scenePreviewCameraQuery()) {
       scenePreviewCamera = getComponent(entity, ScenePreviewCameraComponent).camera
     }
 
@@ -168,7 +168,7 @@ export async function takeScreenshot(
 ): Promise<[Blob | null, Blob | null]> {
   // Getting Scene preview camera or creating one if not exists
   if (!scenePreviewCamera) {
-    for (const entity of query()) {
+    for (const entity of scenePreviewCameraQuery()) {
       scenePreviewCamera = getComponent(entity, ScenePreviewCameraComponent).camera
     }
 

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

@@ -37,7 +37,7 @@ import { RendererState } from '../../renderer/RendererState'
 import { TransformComponent } from '../../transform/components/TransformComponent'
 import { ObjectLayers } from '../constants/ObjectLayers'
 import { setObjectLayers } from '../functions/setObjectLayers'
-import { addObjectToGroup } from './GroupComponent'
+import { addObjectToGroup, removeObjectFromGroup } from './GroupComponent'
 import { NameComponent } from './NameComponent'
 import { setVisibleComponent } from './VisibleComponent'
 
@@ -70,7 +70,11 @@ export const ScenePreviewCameraComponent = defineComponent({
       const cameraTransform = getComponent(Engine.instance.cameraEntity, TransformComponent)
       cameraTransform.position.copy(transform.position)
       cameraTransform.rotation.copy(transform.rotation)
-      addObjectToGroup(entity, previewCamera.camera.value)
+      const camera = previewCamera.camera.value
+      addObjectToGroup(entity, camera)
+      return () => {
+        removeObjectFromGroup(entity, camera)
+      }
     }, [])
 
     useEffect(() => {

packages/engine/src/transform/systems/TransformSystem.ts

@@ -47,6 +47,7 @@ import {
   RigidBodyFixedTagComponent
 } from '../../physics/components/RigidBodyComponent'
 import { GroupComponent } from '../../scene/components/GroupComponent'
+import { ScenePreviewCameraComponent } from '../../scene/components/ScenePreviewCamera'
 import { VisibleComponent } from '../../scene/components/VisibleComponent'
 import { XRState } from '../../xr/XRState'
 import { TransformSerialization } from '../TransformSerialization'
@@ -74,6 +75,8 @@ const distanceFromLocalClientQuery = defineQuery([TransformComponent, DistanceFr
 const distanceFromCameraQuery = defineQuery([TransformComponent, DistanceFromCameraComponent])
 const frustumCulledQuery = defineQuery([TransformComponent, FrustumCullCameraComponent])
 
+const scenePreviewCameraQuery = defineQuery([ScenePreviewCameraComponent])
+
 export const computeTransformMatrix = (entity: Entity) => {
   const transform = getComponent(entity, TransformComponent)
   updateTransformFromComputedTransform(entity)
@@ -321,6 +324,13 @@ const execute = () => {
     viewCamera.projectionMatrixInverse.copy(camera.projectionMatrixInverse)
   }
 
+  const scenePreviewCameraDirty = scenePreviewCameraQuery().filter(isDirty)
+
+  for (const entity of scenePreviewCameraDirty) {
+    const camera = getComponent(entity, ScenePreviewCameraComponent).camera
+    camera.matrixWorldInverse.copy(camera.matrixWorld).invert()
+  }
+
   const dirtyBoundingBoxes = boundingBoxQuery().filter(isDirty)
   for (const entity of dirtyBoundingBoxes) updateBoundingBox(entity)