Skip to content

feature: add wireframe view #381

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Bellian wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feature: add wireframe view #381

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cbfedf9
feature: add wireframe view
Bellian Jan 13, 2026
9e7c699
fixed failing test
Bellian Jan 13, 2026
87ffc51
moved wireframe menu
Bellian Jan 15, 2026
dfcc949
disable wireframe on play mode
Bellian Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 42 additions & 36 deletions packages/bridge/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ type Icon =
| "size"
| "sun"
| "transform"
| "world";
| "world"
| "mask-on"
| "mask-off";

export interface ButtonGroupControl {
buttons: {
Expand All @@ -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";
Expand Down Expand Up @@ -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 };
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
69 changes: 36 additions & 33 deletions packages/renderer/src/features/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
);
Expand Down
7 changes: 5 additions & 2 deletions packages/renderer/src/features/canvas/canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**
Expand All @@ -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") {
Expand All @@ -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}
>
{materialOverride === "wireframe" && <color args={["#000000"]} attach="background" />}
Copy link
Copy Markdown
Collaborator

@itsdouges itsdouges Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this to enforce a good color contrast?

Copy link
Copy Markdown
Contributor Author

@Bellian Bellian Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. The default background is a light gray. this makes it hard to see white lines of the wireframe.
Also components may override the background color to match whatever color. so forcing a background here is beneficial.

<CaptureShaderErrors />
<Camera>
<ErrorBoundaryForScene
Expand Down
20 changes: 20 additions & 0 deletions packages/renderer/src/features/scene-controls/controls-three-fiber.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export const controls: Controls = [
{
buttons: [
{
accelerator: "P",
icon: "cursor",
id: "none",
label: "Select",
Expand Down Expand Up @@ -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: [
{
Expand Down
29 changes: 16 additions & 13 deletions packages/renderer/src/features/scene-loader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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],
);
Expand Down Expand Up @@ -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 />
Expand Down
Loading
Loading