Add mesh opacity support

nerfstudio-project · Aug 10, 2023 · 6adf300 · 6adf300
1 parent 4ca309e
commit 6adf300
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 5 deletions.
diff --git a/viser/_message_api.py b/viser/_message_api.py
@@ -262,6 +262,7 @@ def add_mesh_simple(
         faces: onp.ndarray,
         color: RgbTupleOrArray = (90, 200, 255),
         wireframe: bool = False,
+        opacity: Optional[float] = None,
         side: Literal["front", "back", "double"] = "front",
         wxyz: Tuple[float, float, float, float] | onp.ndarray = (1.0, 0.0, 0.0, 0.0),
         position: Tuple[float, float, float] | onp.ndarray = (0.0, 0.0, 0.0),
@@ -277,6 +278,7 @@ def add_mesh_simple(
                 color=_encode_rgb(color),
                 vertex_colors=None,
                 wireframe=wireframe,
+                opacity=opacity,
                 side=side,
             )
         )
@@ -306,6 +308,7 @@ def add_mesh_trimesh(
                         vertex_colors.view(onp.ndarray).astype(onp.uint8)[..., :3]
                     ),
                     wireframe=wireframe,
+                    opacity=None,
                     side=side,
                 )
             )

diff --git a/viser/_messages.py b/viser/_messages.py
@@ -133,6 +133,7 @@ class MeshMessage(Message):
     vertex_colors: Optional[onpt.NDArray[onp.uint8]]
 
     wireframe: bool
+    opacity: Optional[float]
     side: Literal["front", "back", "double"] = "front"
 
     def __post_init__(self):

diff --git a/viser/client/src/ControlPanel/ControlPanel.tsx b/viser/client/src/ControlPanel/ControlPanel.tsx
@@ -40,7 +40,9 @@ export default function ControlPanel(props: {
 
   // TODO: will result in unnecessary re-renders
   const viewer = React.useContext(ViewerContext)!;
-  const showGenerated = viewer.useGui((state) => 'root' in state.guiIdSetFromContainerId);
+  const showGenerated = viewer.useGui(
+    (state) => "root" in state.guiIdSetFromContainerId,
+  );
   const [showSettings, { toggle }] = useDisclosure(false);
   const [collapsed, { toggle: toggleCollapse }] = useDisclosure(false);
   const handleContents = (

diff --git a/viser/client/src/ControlPanel/Generated.tsx b/viser/client/src/ControlPanel/Generated.tsx
@@ -36,7 +36,7 @@ export default function GeneratedGuiContainer({
   if (viewer === undefined) viewer = React.useContext(ViewerContext)!;
 
   const guiIdSet = viewer.useGui(
-    (state) => state.guiIdSetFromContainerId[containerId]
+    (state) => state.guiIdSetFromContainerId[containerId],
   );
   const guiConfigFromId = viewer.useGui((state) => state.guiConfigFromId);
 

diff --git a/viser/client/src/ControlPanel/GuiState.tsx b/viser/client/src/ControlPanel/GuiState.tsx
@@ -85,7 +85,7 @@ export function useGuiState(initialServer: string) {
           set((state) => {
             state.guiConfigFromId[guiConfig.id] = guiConfig;
             state.guiIdSetFromContainerId[guiConfig.container_id] = new Set(
-              state.guiIdSetFromContainerId[guiConfig.container_id]
+              state.guiIdSetFromContainerId[guiConfig.container_id],
             ).add(guiConfig.id);
           }),
         addModal: (modalConfig) =>
@@ -123,7 +123,7 @@ export function useGuiState(initialServer: string) {
               guiConfig.tab_container_ids.forEach(state.removeGuiContainer);
 
             state.guiIdSetFromContainerId[guiConfig.container_id]!.delete(
-              guiConfig.id
+              guiConfig.id,
             );
             delete state.guiConfigFromId[id];
             delete state.guiValueFromId[id];

diff --git a/viser/client/src/WebsocketInterface.tsx b/viser/client/src/WebsocketInterface.tsx
@@ -156,6 +156,8 @@ function useMessageHandler() {
           color: message.color || undefined,
           vertexColors: message.vertex_colors !== null,
           wireframe: message.wireframe,
+          transparent: message.opacity !== null,
+          opacity: message.opacity ?? undefined,
           side: {
             front: THREE.FrontSide,
             back: THREE.BackSide,

diff --git a/viser/client/src/WebsocketMessages.tsx b/viser/client/src/WebsocketMessages.tsx
@@ -55,6 +55,7 @@ export interface MeshMessage {
   color: number | null;
   vertex_colors: ArrayBuffer | null;
   wireframe: boolean;
+  opacity: number | null;
   side: "front" | "back" | "double";
 }
 export interface TransformControlsMessage {

diff --git a/viser/client/src/index.tsx b/viser/client/src/index.tsx
@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom/client";
 import { Root } from "./App";
-import { enableMapSet } from "immer"
+import { enableMapSet } from "immer";
 
 enableMapSet();