Enhance SmartCamera and SplatViewer components with camera change rendering

- Introduced a new hook, useRenderOnCameraChange, to optimize rendering when the camera changes in the SmartCamera component.
- Updated SmartCamera to utilize the new hook and set app.renderNextFrame to true for immediate rendering.
- Modified SplatViewer to also set app.renderNextFrame to true, ensuring consistent rendering behavior across components.
- Adjusted Application component in SplatViewer to disable autoRender for better control over rendering flow.

Author: marklundin

packages/blocks/src/splat-viewer/hooks/use-render-on-camera-change.tsx

@@ -0,0 +1,42 @@
+import { useApp, useFrame } from "@playcanvas/react/hooks";
+import { Entity } from "playcanvas";
+import { useRef } from "react";
+
+const nearlyEquals = (a: Float32Array, b: Float32Array, epsilon = 1e-4): boolean => {
+  for (let i = 0; i < a.length; i++) {
+    if (Math.abs(a[i] - b[i]) >= epsilon) return false;
+  }
+  return true;
+};
+
+export const useRenderOnCameraChange = (entity: Entity | null) => {
+  const app = useApp();
+  const prevWorld = useRef<Float32Array>(new Float32Array(16));
+  const prevProj = useRef<Float32Array>(new Float32Array(16));
+
+  useFrame(() => {
+    if (!entity) return;
+    const world = entity.getWorldTransform().data;
+    const proj = entity.camera?.projectionMatrix?.data;
+
+    if (!proj) return;
+
+    let changed = false;
+
+    if (!app.autoRender && !app.renderNextFrame) {
+      changed = !nearlyEquals(world, prevWorld.current) || !nearlyEquals(proj, prevProj.current);
+
+      if (changed) {
+        console.log("changed");
+        app.renderNextFrame = true;
+      }
+    }
+
+    if (app.renderNextFrame) {
+      if (changed || app.autoRender) {
+        prevWorld.current.set(world);
+        prevProj.current.set(proj);
+      }
+    }
+  });
+};

packages/blocks/src/splat-viewer/smart-camera.tsx

@@ -14,6 +14,7 @@ import style from "./utils/style";
 
 // @ts-expect-error There is no type definition for the camera-controls script
 import { CameraControls } from "playcanvas/scripts/esm/camera-controls.mjs";
+import { useRenderOnCameraChange } from "./hooks/use-render-on-camera-change";
 
 type CameraControlsProps = {
     /* The focus point of the camera */
@@ -53,11 +54,14 @@ export function SmartCamera({
   fov?: number;
   animationTrack?: AnimationTrack;
 }) {
+
   const entityRef = useRef<pc.Entity>(null);
+  useRenderOnCameraChange(entityRef.current);
   const { subscribe, isPlaying } = useTimeline();
   const { mode } = useAssetViewer();
 //   const [mode] = useState<"interactive" | "transition" | "animation">(isPlaying ? "animation" : "interactive");
   const app = useApp();
+  app.renderNextFrame = true;
 
   const [pose, setPose] = useState<PoseType>({
     position: [2, 1, 2],

packages/blocks/src/splat-viewer/splat-viewer.tsx

@@ -83,6 +83,7 @@ function SplatComponent({
     const { isInteracting } = useAssetViewer();
     const { isPlaying } = useTimeline();
     const app = useApp();
+    app.renderNextFrame = true;
 
     // unload the asset when the component is unmounted
     useEffect(() => {
@@ -160,7 +161,7 @@ export function SplatViewer( {
                 setMode={setCameraMode}
             >
                 <Suspense fallback={<PosterComponent poster={poster} />} >
-                    <Application fillMode={FILLMODE_NONE} resolutionMode={RESOLUTION_AUTO} autoRender={true}>
+                    <Application fillMode={FILLMODE_NONE} resolutionMode={RESOLUTION_AUTO} autoRender={false}>
                         <SplatComponent src={src} {...props} />
                     </Application>
                     <TooltipProvider>