Fix broken cleanup, skinned mesh race condition (#250)

* Fix broken cleanup, skinned mesh edge case

* Remove log

examples/23_smpl_visualizer_skinned.py

@@ -134,8 +134,6 @@ def main(model_path: Path) -> None:
         # Match transform control gizmos to joint positions.
         for i, control in enumerate(gui_elements.transform_controls):
             control.position = smpl_outputs.T_parent_joint[i, :3, 3]
-            print(control.position)
-
             skinned_handle.bones[i].wxyz = tf.SO3.from_matrix(
                 smpl_outputs.T_world_joint[i, :3, :3]
             ).wxyz

src/viser/client/src/MessageHandler.tsx

@@ -476,9 +476,6 @@ function useMessageHandler() {
                 );
               },
               () => {
-                bones.forEach((bone) => {
-                  bone.remove();
-                });
                 skeleton.dispose();
                 cleanupMesh();
               },

src/viser/client/src/SceneTree.tsx

@@ -131,9 +131,6 @@ export function SceneNodeThreeObject(props: {
   const makeObject = viewer.useSceneTree(
     (state) => state.nodeFromName[props.name]?.makeObject,
   );
-  const cleanup = viewer.useSceneTree(
-    (state) => state.nodeFromName[props.name]?.cleanup,
-  );
   const unmountWhenInvisible = viewer.useSceneTree(
     (state) => state.nodeFromName[props.name]?.unmountWhenInvisible,
   );
@@ -256,14 +253,6 @@ export function SceneNodeThreeObject(props: {
     }
   });
 
-  // Clean up when done.
-  React.useEffect(() => {
-    return () => {
-      cleanup && cleanup();
-      delete viewer.nodeRefFromName.current[props.name];
-    };
-  });
-
   // Clicking logic.
   const sendClicksThrottled = useThrottledMessageSender(50);
   const [hovered, setHovered] = React.useState(false);

src/viser/client/src/SceneTreeState.tsx

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import { MakeObject, SceneNode } from "./SceneTree";
 import { CoordinateFrame } from "./ThreeAssets";
 import * as THREE from "three";
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
+import { ViewerContext } from "./App";
 
 interface SceneTreeState {
   nodeFromName: { [name: string]: undefined | SceneNode };
@@ -37,6 +38,7 @@ rootNodeTemplate.children.push("/WorldAxes");
 /** Declare a scene state, and return a hook for accessing it. Note that we put
 effort into avoiding a global state! */
 export function useSceneTreeState() {
+  const viewer = useContext(ViewerContext)!;
   return React.useState(() =>
     create(
       subscribeWithSelector(
@@ -51,8 +53,10 @@ export function useSceneTreeState() {
           addSceneNode: (node) =>
             set((state) => {
               const existingNode = state.nodeFromName[node.name];
-              if (existingNode) {
+              if (existingNode !== undefined) {
                 // Node already exists.
+                delete viewer.nodeRefFromName.current[node.name];
+                existingNode.cleanup && existingNode.cleanup(); // Free resources.
                 state.nodeFromName[node.name] = {
                   ...node,
                   children: existingNode.children,
@@ -83,7 +87,10 @@ export function useSceneTreeState() {
               findChildrenRecursive(name);
 
               removeNames.forEach((removeName) => {
+                const node = state.nodeFromName[removeName]!;
+                node.cleanup && node.cleanup(); // Free resources.
                 delete state.nodeFromName[removeName];
+                delete viewer.nodeRefFromName.current[removeName];
               });
 
               // Remove node from parent's children list.
@@ -99,6 +106,11 @@ export function useSceneTreeState() {
                 if (key !== "" && key !== "/WorldAxes")
                   delete state.nodeFromName[key];
               }
+              Object.values(state.nodeFromName).forEach((node) => {
+                // Free resources.
+                if (node === undefined || node.cleanup === undefined) return;
+                node.cleanup();
+              });
               state.nodeFromName[""] = rootNodeTemplate;
               state.nodeFromName["/WorldAxes"] = rootAxesNode;
             }),