Merge changes from main branch and build client

nerfstudio-project · Jul 1, 2023 · 2752b3e · 2752b3e
2 parents 66e4b34 + 92fbfa7
commit 2752b3e
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 122 deletions.
diff --git a/viser/client/build/assets/index-c72ae092.js → viser/client/build/assets/index-8f8c00d3.js b/viser/client/build/assets/index-c72ae092.js → viser/client/build/assets/index-8f8c00d3.js
diff --git a/viser/client/build/index.html b/viser/client/build/index.html
@@ -16,7 +16,7 @@
     -->
     <link rel="manifest" href="/manifest.json" />
     <title>Viser</title>
-    <script type="module" crossorigin src="/assets/index-c72ae092.js"></script>
+    <script type="module" crossorigin src="/assets/index-8f8c00d3.js"></script>
     <link rel="stylesheet" href="/assets/index-a02dfc21.css">
   </head>
   <body>

diff --git a/viser/client/package.json b/viser/client/package.json
@@ -64,6 +64,7 @@
   "devDependencies": {
     "@redux-devtools/core": "^3.13.1",
     "@types/msgpack": "0.0.31",
+    "@types/wicg-file-system-access": "^2020.9.6",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "browserslist-to-esbuild": "^1.2.0",

diff --git a/viser/client/src/ControlPanel/Generated.tsx b/viser/client/src/ControlPanel/Generated.tsx
@@ -320,9 +320,9 @@ function GeneratedInput({ conf }: { conf: GuiConfig }) {
   }
 
   if (conf.hint !== null)
-    input = (
+    input = ( // We need to add <Box /> for inputs that we can't assign refs to.
       <Tooltip label={conf.hint} multiline w="15rem" withArrow openDelay={500}>
-        {input}
+        <Box>{input}</Box>
       </Tooltip>
     );
 
@@ -385,6 +385,8 @@ function VectorInput(
           step={props.step}
           min={props.min === null ? undefined : props.min[i]}
           max={props.max === null ? undefined : props.max[i]}
+          stepHoldDelay={500}
+          stepHoldInterval={(t) => Math.max(1000 / t ** 2, 25)}
           disabled={props.disabled}
         />
       ))}

diff --git a/viser/client/src/ControlPanel/SceneTreeTable.tsx b/viser/client/src/ControlPanel/SceneTreeTable.tsx
@@ -27,11 +27,10 @@ export default function SceneTreeTable(props: { compact: boolean }) {
     (state) => state.setLabelVisibility
   );
   function setVisible(name: string, visible: boolean) {
-    const attrs = viewer.nodeAttributesFromName.current[name];
-    if (attrs !== undefined) {
-      attrs.visibility = visible;
-      rerenderTable();
-    }
+    const attr = viewer.nodeAttributesFromName.current;
+    if (attr[name] === undefined) attr[name] = {};
+    attr[name]!.visibility = visible;
+    rerenderTable();
   }
 
   // For performance, scene node visibility is stored in a ref instead of the

diff --git a/viser/client/src/ControlPanel/Server.tsx b/viser/client/src/ControlPanel/Server.tsx
@@ -1,5 +1,4 @@
 import { ViewerContext } from "..";
-import { isTexture } from "../WebsocketInterface";
 import { Button, Stack, Switch, TextInput } from "@mantine/core";
 import { Stats } from "@react-three/drei";
 import { IconPhoto } from "@tabler/icons-react";
@@ -36,26 +35,38 @@ export default function ServerControls() {
           onKeyDown={triggerBlur}
         />
         <Button
-          onClick={() => {
-            if (!isTexture(viewer.sceneRef.current?.background)) {
-              // This should never happen.
-              alert("No background to download!");
-              return;
-            }
+          onClick={async () => {
+            viewer.canvasRef.current?.toBlob(async (blob) => {
+              if (blob === null) {
+                console.error("Render failed!");
+                return;
+              }
 
-            const data = viewer.sceneRef.current?.background.image.src;
-            const link = document.createElement("a");
-            link.download = "background";
-            link.href = data;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+              let handle = null;
+              try {
+                handle = await showSaveFilePicker({
+                  suggestedName: "render.png",
+                  types: [
+                    {
+                      accept: { "image/png": [".png"] },
+                    },
+                  ],
+                });
+              } catch (e) {
+                console.log(e);
+              }
+
+              if (handle) {
+                const writableStream = await handle.createWritable();
+                await writableStream.write(blob);
+                await writableStream.close();
+              }
+            });
           }}
           fullWidth
-          disabled={!viewer.useGui((state) => state.backgroundAvailable)}
           leftIcon={<IconPhoto size="1rem" />}
         >
-          Download Background
+          Export Canvas
         </Button>
         <Switch
           label="WebGL Statistics"

diff --git a/viser/client/src/SceneTree.tsx b/viser/client/src/SceneTree.tsx
@@ -262,24 +262,30 @@ export function SceneNodeThreeObject(props: { name: string }) {
     if (obj === null) return;
 
     const nodeAttributes = viewer.nodeAttributesFromName.current[props.name];
-    const wxyz = nodeAttributes?.wxyz;
-    const position = nodeAttributes?.position;
-    const visibility = nodeAttributes?.visibility;
+    if (nodeAttributes === undefined) return;
+
+    const visibility = nodeAttributes.visibility;
+    if (visibility !== undefined) {
+      obj.visible = visibility;
+    }
 
     let changed = false;
-    if (visibility !== undefined) obj.visible = visibility;
+    const wxyz = nodeAttributes.wxyz;
     if (wxyz !== undefined) {
       changed = true;
       obj.quaternion.set(wxyz[1], wxyz[2], wxyz[3], wxyz[0]);
     }
+    const position = nodeAttributes.position;
     if (position !== undefined) {
       changed = true;
       obj.position.set(position[0], position[1], position[2]);
     }
 
     // Update matrices if necessary. This is necessary for PivotControls.
-    if (changed && !obj.matrixAutoUpdate) obj.updateMatrix();
-    if (changed && !obj.matrixWorldAutoUpdate) obj.updateMatrixWorld();
+    if (changed) {
+      if (!obj.matrixAutoUpdate) obj.updateMatrix();
+      if (!obj.matrixWorldAutoUpdate) obj.updateMatrixWorld();
+    }
   });
 
   // Clean up when done.

diff --git a/viser/client/src/WebsocketInterface.tsx b/viser/client/src/WebsocketInterface.tsx
@@ -301,7 +301,7 @@ function useMessageHandler() {
         const name = message.name;
         const sendDragMessage = makeThrottledMessageSender(
           viewer.websocketRef,
-          25
+          50
         );
         addSceneNodeMakeParents(
           new SceneNode<THREE.Group>(message.name, (ref) => (
@@ -320,14 +320,23 @@ function useMessageHandler() {
               depthTest={message.depth_test}
               opacity={message.opacity}
               onDrag={(l) => {
+                const attrs = viewer.nodeAttributesFromName.current;
+                if (attrs[message.name] === undefined) {
+                  attrs[message.name] = {};
+                }
+
                 const wxyz = new THREE.Quaternion();
                 wxyz.setFromRotationMatrix(l);
                 const position = new THREE.Vector3().setFromMatrixPosition(l);
+
+                const nodeAttributes = attrs[message.name]!;
+                nodeAttributes.wxyz = [wxyz.w, wxyz.x, wxyz.y, wxyz.z];
+                nodeAttributes.position = position.toArray();
                 sendDragMessage({
                   type: "TransformControlsUpdateMessage",
                   name: name,
-                  wxyz: [wxyz.w, wxyz.x, wxyz.y, wxyz.z],
-                  position: position.toArray(),
+                  wxyz: nodeAttributes.wxyz,
+                  position: nodeAttributes.position,
                 });
               }}
             />

diff --git a/viser/client/src/index.tsx b/viser/client/src/index.tsx
@@ -38,6 +38,7 @@ type ViewerContextContents = {
   useSceneTree: UseSceneTree;
   useGui: UseGui;
   websocketRef: React.MutableRefObject<WebSocket | null>;
+  canvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
   sceneRef: React.MutableRefObject<THREE.Scene | null>;
   cameraRef: React.MutableRefObject<THREE.PerspectiveCamera | null>;
   cameraControlRef: React.MutableRefObject<CameraControls | null>;
@@ -79,6 +80,7 @@ function SingleViewer() {
     useSceneTree: useSceneTreeState(),
     useGui: useGuiState(initialServer),
     websocketRef: React.useRef(null),
+    canvasRef: React.useRef(null),
     sceneRef: React.useRef(null),
     cameraRef: React.useRef(null),
     cameraControlRef: React.useRef(null),
@@ -160,16 +162,19 @@ function SingleViewer() {
 }
 
 function ViewerCanvas() {
+  const viewer = React.useContext(ViewerContext)!;
   return (
     <Canvas
       camera={{ position: [3.0, 3.0, -3.0] }}
+      gl={{ preserveDrawingBuffer: true }}
       style={{
         position: "relative",
         zIndex: 0,
         width: "100%",
         height: "100%",
       }}
       performance={{ min: 0.95 }}
+      ref={viewer.canvasRef}
     >
       <AdaptiveDpr pixelated />
       <AdaptiveEvents />

diff --git a/viser/client/tsconfig.json b/viser/client/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["vite/client", "vite-plugin-svgr/client", "node"],
+    "types": ["vite/client", "vite-plugin-svgr/client", "node", "@types/wicg-file-system-access"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,

diff --git a/viser/client/yarn.lock b/viser/client/yarn.lock
@@ -1156,6 +1156,11 @@
   resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.2.tgz#5d9627b0ffe223aa3b166de7112ac8a9460dc54f"
   integrity sha512-szL74BnIcok9m7QwYtVmQ+EdIKwbjPANudfuvDrAF8Cljg9MKUlIoc1w5tjj9PMpeSH3U1Xnx//czQybJ0EfSw==
 
+"@types/wicg-file-system-access@^2020.9.6":
+  version "2020.9.6"
+  resolved "https://registry.yarnpkg.com/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.6.tgz#da34476b1e29451c8b7aa1a6db86b185647cd970"
+  integrity sha512-6hogE75Hl2Ov/jgp8ZhDaGmIF/q3J07GtXf8nCJCwKTHq7971po5+DId7grft09zG7plBwpF6ZU0yx9Du4/e1A==
+
 "@typescript-eslint/eslint-plugin@^5.60.1":
   version "5.60.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.1.tgz#81382d6ecb92b8dda70e91f9035611cb2fecd1c3"