Clean up scene node types, fix uncovered bugs

nerfstudio-project · May 8, 2023 · f4dbe3c · f4dbe3c
1 parent eed8b09
commit f4dbe3c
Show file tree

Hide file tree

Showing 8 changed files with 697 additions and 39 deletions.
diff --git a/WebsocketInterface.tsx b/WebsocketInterface.tsx
diff --git a/viser/client/build/asset-manifest.json b/viser/client/build/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.82973013.css",
-    "main.js": "/static/js/main.3b78e278.js",
+    "main.js": "/static/js/main.831fea1f.js",
     "index.html": "/index.html",
     "main.82973013.css.map": "/static/css/main.82973013.css.map",
-    "main.3b78e278.js.map": "/static/js/main.3b78e278.js.map"
+    "main.831fea1f.js.map": "/static/js/main.831fea1f.js.map"
   },
   "entrypoints": [
     "static/css/main.82973013.css",
-    "static/js/main.3b78e278.js"
+    "static/js/main.831fea1f.js"
   ]
 }
diff --git a/viser/client/build/index.html b/viser/client/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.3b78e278.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.831fea1f.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/...r/client/build/static/js/main.3b78e278.js → ...r/client/build/static/js/main.831fea1f.js b/...r/client/build/static/js/main.3b78e278.js → ...r/client/build/static/js/main.831fea1f.js
diff --git a/...ld/static/js/main.3b78e278.js.LICENSE.txt → ...ld/static/js/main.831fea1f.js.LICENSE.txt b/...ld/static/js/main.3b78e278.js.LICENSE.txt → ...ld/static/js/main.831fea1f.js.LICENSE.txt
diff --git a/...ient/build/static/js/main.3b78e278.js.map → ...ient/build/static/js/main.831fea1f.js.map b/...ient/build/static/js/main.3b78e278.js.map → ...ient/build/static/js/main.831fea1f.js.map
diff --git a/viser/client/src/SceneTree.tsx b/viser/client/src/SceneTree.tsx
@@ -8,19 +8,19 @@ import { immerable } from "immer";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
-// The covariance/contravariance rules are too complicated here, so we just
-// type the reference with any.
-export type MakeObject = (ref: React.RefObject<any>) => React.ReactNode;
+export type MakeObject<T extends THREE.Object3D = THREE.Object3D> = (
+  ref: React.RefObject<T>
+) => React.ReactNode;
 
 /** Scenes will consist of nodes, which form a tree. */
-export class SceneNode {
+export class SceneNode<T extends THREE.Object3D = THREE.Object3D> {
   [immerable] = true;
 
   public children: string[];
 
   constructor(
     public name: string,
-    public makeObject: MakeObject,
+    public makeObject: MakeObject<T>,
     public cleanup?: () => void
   ) {
     this.children = [];
@@ -47,18 +47,27 @@ export interface SceneTreeActions extends SceneTreeState {
 
 // Create default scene tree state.
 // By default, the y-axis is up. Let's rotate everything so Z is up instead.
-const makeRoot: MakeObject = (ref) => (
+const makeRoot: MakeObject<THREE.Group> = (ref) => (
   <group
     ref={ref}
     quaternion={new THREE.Quaternion().setFromEuler(
       new THREE.Euler(-Math.PI / 2.0, 0.0, 0.0)
     )}
   />
 );
-const rootAxesTemplate: MakeObject = (ref) => <CoordinateFrame ref={ref} />;
+const rootAxesTemplate: MakeObject<THREE.Group> = (ref) => (
+  <CoordinateFrame ref={ref} />
+);
+
+const rootNodeTemplate = new SceneNode(
+  "",
+  makeRoot
+) as SceneNode<THREE.Object3D>;
 
-const rootNodeTemplate = new SceneNode("", makeRoot);
-const rootAxesNode = new SceneNode("/WorldAxes", rootAxesTemplate);
+const rootAxesNode = new SceneNode(
+  "/WorldAxes",
+  rootAxesTemplate
+) as SceneNode<THREE.Object3D>;
 rootNodeTemplate.children.push("/WorldAxes");
 
 const cleanSceneTreeState = {
@@ -187,7 +196,7 @@ function SceneNodeThreeChildren(props: {
 
 /** Component containing the three.js object and children for a particular scene node. */
 export const SceneNodeThreeObject = React.memo(
-  // This memo is very important for big scenes!!
+  // ^This memo is very important for big scenes!!
   function SceneNodeThreeObject(props: {
     name: string;
     useSceneTree: UseSceneTree;

diff --git a/viser/client/src/WebsocketInterface.tsx b/viser/client/src/WebsocketInterface.tsx
@@ -77,12 +77,12 @@ function useMessageHandler() {
 
   // Same as addSceneNode, but make a parent in the form of a dummy coordinate
   // frame if it doesn't exist yet.
-  function addSceneNodeMakeParents(node: SceneNode) {
+  function addSceneNodeMakeParents(node: SceneNode<any>) {
     const nodeFromName = viewer.useSceneTree.getState().nodeFromName;
     const parent_name = node.name.split("/").slice(0, -1).join("/");
     if (!(parent_name in nodeFromName)) {
       addSceneNodeMakeParents(
-        new SceneNode(parent_name, (ref) => (
+        new SceneNode<THREE.Group>(parent_name, (ref) => (
           <CoordinateFrame ref={ref} show_axes={false} />
         ))
       );
@@ -96,7 +96,7 @@ function useMessageHandler() {
       // Add a coordinate frame.
       case "FrameMessage": {
         addSceneNodeMakeParents(
-          new SceneNode(message.name, (ref) => (
+          new SceneNode<THREE.Group>(message.name, (ref) => (
             <CoordinateFrame
               ref={ref}
               show_axes={message.show_axes}
@@ -137,7 +137,7 @@ function useMessageHandler() {
         );
 
         addSceneNodeMakeParents(
-          new SceneNode(
+          new SceneNode<THREE.Points>(
             message.name,
             (ref) => (
               <points
@@ -192,7 +192,7 @@ function useMessageHandler() {
         geometry.computeVertexNormals();
         geometry.computeBoundingSphere();
         addSceneNodeMakeParents(
-          new SceneNode(
+          new SceneNode<THREE.Mesh>(
             message.name,
             (ref) => <mesh ref={ref} geometry={geometry} material={material} />,
             () => {
@@ -218,7 +218,7 @@ function useMessageHandler() {
         const height = message.scale * Math.tan(message.fov / 2.0) * 2.0;
 
         addSceneNodeMakeParents(
-          new SceneNode(
+          new SceneNode<THREE.Group>(
             message.name,
             (ref) => (
               <group ref={ref}>
@@ -230,7 +230,6 @@ function useMessageHandler() {
                 />
                 {texture && (
                   <mesh
-                    ref={ref}
                     position={[0.0, 0.0, message.scale]}
                     rotation={new THREE.Euler(Math.PI, 0.0, 0.0)}
                   >
@@ -260,7 +259,7 @@ function useMessageHandler() {
           25
         );
         addSceneNodeMakeParents(
-          new SceneNode(message.name, (ref) => (
+          new SceneNode<THREE.Group>(message.name, (ref) => (
             <PivotControls
               ref={ref}
               scale={message.scale}
@@ -423,19 +422,22 @@ function useMessageHandler() {
           }
         `;
         addSceneNodeMakeParents(
-          new SceneNode(message.name, (ref) => {
+          new SceneNode<THREE.Group>(message.name, (ref) => {
+            // We wrap with <group /> because Html doesn't implement THREE.Object3D.
             return (
-              <Html ref={ref}>
-                <div
-                  style={{
-                    width: "10em",
-                    fontSize: "0.8em",
-                    transform: "translateX(-1em) translateY(1em)",
-                  }}
-                >
-                  <Label>{message.text}</Label>
-                </div>
-              </Html>
+              <group ref={ref}>
+                <Html>
+                  <div
+                    style={{
+                      width: "10em",
+                      fontSize: "0.8em",
+                      transform: "translateX(-1em) translateY(1em)",
+                    }}
+                  >
+                    <Label>{message.text}</Label>
+                  </div>
+                </Html>
+              </group>
             );
           })
         );
@@ -451,7 +453,7 @@ function useMessageHandler() {
           (texture) => {
             // TODO: this onLoad callback prevents flickering, but could cause messages to be handled slightly out-of-order.
             addSceneNodeMakeParents(
-              new SceneNode(
+              new SceneNode<THREE.Group>(
                 message.name,
                 (ref) => {
                   return (
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.3b78e278.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.831fea1f.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>