hover / selection viewer logic

packages/viewer/src/components/viewer/index.tsx

@@ -8,6 +8,7 @@ import { extend } from "@react-three/fiber";
 import * as THREE from "three/webgpu";
 import { SceneRenderer } from "../renderers/scene-renderer";
 import { LevelSystem } from "../../systems/level/level-system";
+import PostProcessing from "./post-processing";
 
 declare module "@react-three/fiber" {
   interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
@@ -41,6 +42,7 @@ const Viewer: React.FC<ViewerProps> = ({ children }) => {
       {/* Default Systems */}
       <LevelSystem />
       <WallSystem />
+      <PostProcessing />
 
       {children}
     </Canvas>

packages/viewer/src/components/viewer/post-processing.tsx

@@ -0,0 +1,99 @@
+import { useFrame, useThree } from "@react-three/fiber";
+import { useEffect, useRef } from "react";
+import { Color, Object3D } from "three";
+import { oscSine, pass, time, uniform } from "three/tsl";
+import { outline } from "three/addons/tsl/display/OutlineNode.js";
+import { PostProcessing, WebGPURenderer } from "three/webgpu";
+import useViewer from "../../store/use-viewer";
+
+const PostProcessingPasses = ({}) => {
+  const { gl: renderer, scene, camera } = useThree();
+  const postProcessingRef = useRef<PostProcessing | null>(null);
+
+  useEffect(() => {
+    if (!renderer || !scene || !camera) {
+      return;
+    }
+
+    const scenePass = pass(scene, camera);
+
+    function generateSelectedOutlinePass() {
+      const edgeStrength = uniform(3);
+      const edgeGlow = uniform(0);
+      const edgeThickness = uniform(1);
+      const visibleEdgeColor = uniform(new Color(0xffffff));
+      const hiddenEdgeColor = uniform(new Color(0xf3ff47));
+
+      const outlinePass = outline(scene, camera, {
+        selectedObjects: useViewer.getState().outliner.selectedObjects,
+        edgeGlow,
+        edgeThickness,
+      });
+      const { visibleEdge, hiddenEdge } = outlinePass;
+
+      const outlineColor = visibleEdge
+        .mul(visibleEdgeColor)
+        .add(hiddenEdge.mul(hiddenEdgeColor))
+        .mul(edgeStrength);
+
+      return outlineColor;
+    }
+    function generateHoverOutlinePass() {
+      const edgeStrength = uniform(5);
+      const edgeGlow = uniform(0.5);
+      const edgeThickness = uniform(1.5);
+      const pulsePeriod = uniform(3);
+      const visibleEdgeColor = uniform(new Color(0x00aaff));
+      const hiddenEdgeColor = uniform(new Color(0xf3ff47));
+
+      const outlinePass = outline(scene, camera, {
+        selectedObjects: useViewer.getState().outliner.hoveredObjects,
+        edgeGlow,
+        edgeThickness,
+      });
+      const { visibleEdge, hiddenEdge } = outlinePass;
+
+      const period = time.div(pulsePeriod).mul(2);
+      const osc = oscSine(period).mul(0.5).add(0.5); // osc [ 0.5, 1.0 ]
+
+      const outlineColor = visibleEdge
+        .mul(visibleEdgeColor)
+        .add(hiddenEdge.mul(hiddenEdgeColor))
+        .mul(edgeStrength);
+      const outlinePulse = pulsePeriod
+        .greaterThan(0)
+        .select(outlineColor.mul(osc), outlineColor);
+      return outlinePulse;
+    }
+
+    // Setup post-processing
+    const postProcessing = new PostProcessing(
+      renderer as unknown as WebGPURenderer,
+    );
+
+    const selectedOutlinePass = generateSelectedOutlinePass();
+    const hoverOutlinePass = generateHoverOutlinePass();
+
+    postProcessing.outputNode = selectedOutlinePass
+      .add(hoverOutlinePass)
+      .add(scenePass);
+    postProcessingRef.current = postProcessing;
+
+    return () => {
+      if (postProcessingRef.current) {
+        postProcessingRef.current.dispose();
+      }
+      postProcessingRef.current = null;
+    };
+  }, [renderer, scene, camera]);
+
+  useFrame(() => {
+    if (postProcessingRef.current) {
+      postProcessingRef.current.render();
+    }
+  }, 1);
+
+  return null;
+};
+
+export default PostProcessingPasses;

packages/viewer/src/index.ts

@@ -1,7 +1,5 @@
-import { useGridEvents } from "./hooks/use-grid-events";
-
-export { default as Viewer } from "./components/viewer/viewer";
+export { default as Viewer } from "./components/viewer";
 
 export { default as useViewer } from "./store/use-viewer";
 
-export { useGridEvents } from "./hooks/use-grid-events";
+export { useGridEvents } from "./hooks/use-grid-events";

packages/viewer/src/store/use-viewer.ts

@@ -1,6 +1,8 @@
 "use client";
 
 import { BuildingNode, ItemNode, LevelNode, Zone } from "@pascal-app/core";
+import { Object3D } from "three";
+
 import { create } from "zustand";
 
 type SelectionPath = {
@@ -10,6 +12,11 @@ type SelectionPath = {
   selectedIds: ItemNode["id"][]; // For items/assets (multi-select)
 };
 
+type Outliner = {
+  selectedObjects: Object3D[];
+  hoveredObjects: Object3D[];
+};
+
 type ViewerState = {
   selection: SelectionPath;
   levelMode: "stacked" | "exploded" | "solo" | "manual";
@@ -20,6 +27,8 @@ type ViewerState = {
   // Smart selection update
   setSelection: (updates: Partial<SelectionPath>) => void;
   resetSelection: () => void;
+
+  outliner: Outliner; // No setter as we will manipulate directly the arrays
 };
 
 const useViewer = create<ViewerState>()((set, get) => ({
@@ -55,6 +64,8 @@ const useViewer = create<ViewerState>()((set, get) => ({
         selectedIds: [],
       },
     }),
+
+  outliner: { selectedObjects: [], hoveredObjects: [] },
 }));
 
 export default useViewer;