feature: add wireframe view

Author: Bellian

packages/bridge/src/types.ts

@@ -24,7 +24,9 @@ type Icon =
   | "size"
   | "sun"
   | "transform"
-  | "world";
+  | "world"
+  | "mask-on"
+  | "mask-off";
 
 export interface ButtonGroupControl {
   buttons: {
@@ -44,10 +46,10 @@ export interface MenuControl {
   label: string;
   options: (
     | {
-        group?: string;
-        id: string;
-        label: string;
-      }
+      group?: string;
+      id: string;
+      label: string;
+    }
     | { type: "separator" }
   )[];
   type: "menu";
@@ -157,15 +159,15 @@ export interface ClientSendEventData {
   keyup: KeyboardEventObject;
   ready: undefined;
   "set-extension-points":
-    | {
-        area: "elements";
-        controls: Actions;
-      }
-    | {
-        area: "scene";
-        controls: Controls;
-      }
-    | { area: "settings"; options: MenuControl["options"] };
+  | {
+    area: "elements";
+    controls: Actions;
+  }
+  | {
+    area: "scene";
+    controls: Controls;
+  }
+  | { area: "settings"; options: MenuControl["options"] };
   track: { actionId: string };
 }
 
@@ -207,15 +209,15 @@ export interface HostSendEventData {
     path: string;
   } | null;
   "extension-point-triggered":
-    | {
-        id: string;
-        scope: "scene";
-      }
-    | {
-        data: ExtensionPointElement;
-        id: string;
-        scope: "element";
-      };
+  | {
+    id: string;
+    scope: "scene";
+  }
+  | {
+    data: ExtensionPointElement;
+    id: string;
+    scope: "element";
+  };
   keydown: KeyboardEventObject;
   keyup: KeyboardEventObject;
   "request-blur-element": undefined;
@@ -234,20 +236,23 @@ export interface HostSendEventData {
     path: string;
   };
   "request-jump-to-element":
-    | {
-        astPath: string;
-        column: number;
-        line: number;
-        path: string;
-      }
-    | undefined;
+  | {
+    astPath: string;
+    column: number;
+    line: number;
+    path: string;
+  }
+  | undefined;
+  "request-material-override": {
+    state: "none" | "wireframe";
+  };
   "request-open-component":
-    | {
-        encodedProps: string;
-        exportName: string;
-        path: string;
-      }
-    | undefined;
+  | {
+    encodedProps: string;
+    exportName: string;
+    path: string;
+  }
+  | undefined;
   "request-refresh-scene": { hard: true } | undefined;
   "request-reset-prop": {
     astPath: string;
@@ -289,6 +294,7 @@ export interface HostSendEventResponse {
   "request-delete-element": void;
   "request-focus-element": void;
   "request-jump-to-element": void;
+  "request-material-override": void;
   "request-open-component": void;
   "request-refresh-scene": void;
   "request-reset-prop": void;

packages/renderer/src/features/app/index.tsx

@@ -28,6 +28,7 @@ import { SceneLoader } from "../scene-loader";
 import { SwitchToComponentContext } from "./context";
 import { DebugAttributes } from "./debug";
 import { type Component } from "./types";
+import { MaterialOverrideProvider } from "../../stores/use-material-override";
 
 export function App({
   files,
@@ -104,41 +105,43 @@ export function App({
   return (
     <SwitchToComponentContext.Provider value={switchToComponent}>
       <PlayStateProvider>
-        <ErrorBoundaryForScene
-          fallbackRender={() => <ErrorFallback />}
-          onError={(err) =>
-            send("error", {
-              message: err.message,
-              source: component.path,
-              stack: err.message,
-              subtitle:
-                "The scene could not be rendered as there was an error parsing its module. Resolve the error and try again.",
-              title: "Module Error",
-            })
-          }
-          resetKeys={[component]}
-        >
-          <Suspense
-            fallback={
-              <LoadingLogo
-                color="rgb(59 130 246)"
-                position="hint"
-                variant="stroke"
-              />
+        <MaterialOverrideProvider>
+          <ErrorBoundaryForScene
+            fallbackRender={() => <ErrorFallback />}
+            onError={(err) =>
+              send("error", {
+                message: err.message,
+                source: component.path,
+                stack: err.message,
+                subtitle:
+                  "The scene could not be rendered as there was an error parsing its module. Resolve the error and try again.",
+                title: "Module Error",
+              })
             }
+            resetKeys={[component]}
           >
-            <SceneLoader
-              exportName={component.exportName}
-              modules={files}
-              path={component.path}
-              providerPath={providerPath}
-              providers={providers}
-              sceneProps={component.props}
-            />
-          </Suspense>
-          <Tunnel.Out />
-          <DebugAttributes />
-        </ErrorBoundaryForScene>
+            <Suspense
+              fallback={
+                <LoadingLogo
+                  color="rgb(59 130 246)"
+                  position="hint"
+                  variant="stroke"
+                />
+              }
+            >
+              <SceneLoader
+                exportName={component.exportName}
+                modules={files}
+                path={component.path}
+                providerPath={providerPath}
+                providers={providers}
+                sceneProps={component.props}
+              />
+            </Suspense>
+            <Tunnel.Out />
+            <DebugAttributes />
+          </ErrorBoundaryForScene>
+        </MaterialOverrideProvider>
       </PlayStateProvider>
     </SwitchToComponentContext.Provider>
   );

packages/renderer/src/features/canvas/canvas.tsx

@@ -24,6 +24,7 @@ import { ThreeFiberSelection } from "../selection-three-fiber";
 import { CaptureShaderErrors } from "./capture-shader-errors";
 import { SceneLights } from "./scene-lights";
 import { useCanvasMounted } from "./store";
+import { useMaterialOverride } from "../../stores/use-material-override";
 
 /**
  * **Canvas**
@@ -37,6 +38,7 @@ export function Canvas({ children, ...props }: CanvasProps) {
   const { exportName, path, providerPath, providers, scene } = useLoadedScene();
   const setMounted = useCanvasMounted((state) => state.setMounted);
   const ref = useRef<HTMLCanvasElement>(null);
+  const materialOverride = useMaterialOverride();
 
   useEffect(() => {
     if (playState === "play") {
@@ -62,11 +64,12 @@ export function Canvas({ children, ...props }: CanvasProps) {
           playState === "play"
             ? (props.raycaster?.layers ?? defaultLayer)
             : // This forces the default r3f raycaster to be fired on a different layer (31)
-              // than the default layer (0) that object3d's are set to default.
-              editorLayer,
+            // than the default layer (0) that object3d's are set to default.
+            editorLayer,
       }}
       ref={ref}
     >
+      <color args={[materialOverride === "wireframe" ? "#000000" : "#d9d9d9"]} attach="background" />
       <CaptureShaderErrors />
       <Camera>
         <ErrorBoundaryForScene

packages/renderer/src/features/scene-controls/controls-three-fiber.ts

@@ -53,6 +53,7 @@ export const controls: Controls = [
   {
     buttons: [
       {
+        accelerator: "P",
         icon: "cursor",
         id: "none",
         label: "Select",
@@ -102,6 +103,25 @@ export const controls: Controls = [
   {
     type: "separator",
   },
+  {
+    buttons: [
+      {
+        icon: "mask-on",
+        id: "material_override_wireframe",
+        label: "Turn On Wireframe Override",
+      },
+      {
+        icon: "mask-off",
+        id: "material_override_none",
+        label: "Turn Off Wireframe Override",
+      },
+    ],
+    groupId: "draw-type",
+    type: "toggle-button",
+  },
+  {
+    type: "separator",
+  },
   {
     buttons: [
       {

packages/renderer/src/features/scene-loader/index.tsx

@@ -21,6 +21,7 @@ import { ReactDOMSelection } from "../selection-react-dom";
 import { ResetCountContext, SceneContext } from "./context";
 import { type LoadedSceneContext } from "./types";
 import { useSceneLoader } from "./use-scene-loader";
+import { MaterialOverrideComponent } from "../../stores/use-material-override";
 
 export function SceneLoader({
   exportName,
@@ -52,13 +53,13 @@ export function SceneLoader({
     () =>
       scene
         ? {
-            exportName,
-            meta: scene.meta,
-            path,
-            providerPath,
-            providers,
-            scene: scene.component,
-          }
+          exportName,
+          meta: scene.meta,
+          path,
+          providerPath,
+          providers,
+          scene: scene.component,
+        }
         : null,
     [exportName, path, providerPath, providers, scene],
   );
@@ -119,12 +120,14 @@ export function SceneLoader({
             )}
             {scene.meta.root === "react-three-fiber" && (
               <Canvas>
-                <SceneRenderer
-                  component={scene.component}
-                  exportName={exportName}
-                  path={path}
-                  props={sceneProps}
-                />
+                <MaterialOverrideComponent resetCount={resetCount}>
+                  <SceneRenderer
+                    component={scene.component}
+                    exportName={exportName}
+                    path={path}
+                    props={sceneProps}
+                  />
+                </MaterialOverrideComponent>
               </Canvas>
             )}
             <SceneControls />