added transform controls back (#424)

nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx

@@ -27,9 +27,6 @@ export function RenderControls() {
   const target_train_util = useSelector(
     (state) => state.renderingState.targetTrainUtil,
   );
-  const field_of_view = useSelector(
-    (state) => state.renderingState.field_of_view,
-  );
 
   const dispatch = useDispatch();
 
@@ -109,25 +106,6 @@ export function RenderControls() {
     }
   };
 
-  const set_fov = (value) => {
-    if (websocket.readyState === WebSocket.OPEN) {
-      dispatch({
-        type: 'write',
-        path: 'renderingState/field_of_view',
-        data: value,
-      });
-      const cmd = 'write';
-      const path = 'renderingState/field_of_view';
-      const data = {
-        type: cmd,
-        path,
-        data: value,
-      };
-      const message = msgpack.encode(data);
-      websocket.send(message);
-    }
-  };
-
   const [, setControls] = useControls(
     () => ({
       // training speed
@@ -158,13 +136,6 @@ export function RenderControls() {
         },
         disabled: colormapOptions.length === 1,
       },
-      // FOV
-      'Camera FoV': {
-        value: field_of_view,
-        onChange: (v) => {
-          set_fov(v);
-        },
-      },
       // Dynamic Resolution
       target_train_util: {
         label: 'Train Util.',
@@ -201,7 +172,6 @@ export function RenderControls() {
       colormapChoice,
       max_resolution,
       target_train_util,
-      field_of_view,
       websocket, // need to re-render when websocket changes to use the new websocket
     ],
   );
@@ -210,7 +180,6 @@ export function RenderControls() {
     setControls({ max_resolution });
     setControls({ output_options: outputChoice });
     setControls({ colormap_options: colormapChoice });
-    setControls({ 'Camera FoV': field_of_view });
   }, [
     setControls,
     outputOptions,
@@ -219,7 +188,6 @@ export function RenderControls() {
     colormapChoice,
     max_resolution,
     target_train_util,
-    field_of_view,
   ]);
 
   return null;

nerfactory/viewer/app/src/modules/Scene/Scene.jsx

@@ -64,6 +64,17 @@ export function get_scene_tree() {
   camera_controls.dampingFactor = 1.0;
   sceneTree.metadata.camera_controls = camera_controls;
 
+  // Transform Controls
+  const transform_controls = new TransformControls(
+    main_camera,
+    renderer.domElement,
+  );
+  sceneTree.set_object_from_path(['Transform Controls'], transform_controls);
+  transform_controls.addEventListener('dragging-changed', (event) => {
+    // turn off the camera controls while transforming an object
+    camera_controls.enabled = !event.value;
+  });
+
   // if you drag the screen when the render camera is shown,
   // then snap back to the main camera
   // eslint-disable-next-line no-unused-vars
@@ -75,19 +86,7 @@ export function get_scene_tree() {
         data: 'Main Camera',
       });
     }
-  });
-
-  // Listen for changes to the camera
-
-  // Transform Controls
-  const transformsControls = new TransformControls(
-    main_camera,
-    renderer.domElement,
-  );
-  sceneTree.metadata.transformsControls = transformsControls;
-
-  transformsControls.addEventListener('dragging-changed', (event) => {
-    camera_controls.enabled = !event.value;
+    // transform_controls.detach();
   });
 
   // Axes

nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraHelper.js

@@ -25,11 +25,11 @@ function setPoint(point, pointMap, geometry, camera, x, y, z) {
  */
 
 class CameraHelper extends THREE.Mesh {
-  constructor(camera) {
+  constructor(camera, color = 0x000000) {
     const line_geometry = new THREE.BufferGeometry();
     const geometry = new THREE.BufferGeometry();
     const material = new MeshLineMaterial({
-      color: 0x000000,
+      color,
       lineWidth: 0.01,
     });
 
@@ -101,13 +101,11 @@ class CameraHelper extends THREE.Mesh {
 
     const w = 1;
     const h = 1;
-    const z = 2;
+    const z = 0.1;
 
     // we need just camera projection matrix inverse
     // world matrix must be identity
 
-    console.log(_camera.projectionMatrixInverse);
-
     _camera.projectionMatrixInverse.copy(this.camera.projectionMatrixInverse);
 
     // near

nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx

@@ -40,13 +40,12 @@ function CameraList(props) {
 
   const set_transform_controls = (index) => {
     // camera helper object so grab the camera inside
-    const camera = sceneTree.find([
+    const camera = sceneTree.find_object([
       'Camera Path',
       'Cameras',
       index.toString(),
       'Camera',
-      '<object>',
-    ]).object;
+    ]);
     transform_controls.attach(camera);
   };
 
@@ -138,6 +137,7 @@ export default function CameraPanel(props) {
 
   const add_camera = () => {
     const camera_main_copy = camera_main.clone();
+    camera_main_copy.aspect = 1.0;
     const new_camera_list = cameras.concat(camera_main_copy);
     setCameras(new_camera_list);
     set_camera_position(camera_render, camera_main_copy.matrix);
@@ -169,7 +169,8 @@ export default function CameraPanel(props) {
     sceneTree.delete(['Camera Path', 'Cameras']); // delete old cameras, which is important
     for (let i = 0; i < cameras.length; i += 1) {
       const camera = cameras[i];
-      const camera_helper = new CameraHelper(camera);
+      // camera.aspect = render_width / render_height;
+      const camera_helper = new CameraHelper(camera, 0xfc0303);
       // camera
       sceneTree.set_object_from_path(
         ['Camera Path', 'Cameras', i.toString(), 'Camera'],
@@ -181,7 +182,7 @@ export default function CameraPanel(props) {
         camera_helper,
       );
     }
-  }, [cameras]);
+  }, [cameras, render_width, render_height]);
 
   // update the camera curve
   const curve_object = get_curve_object_from_cameras(cameras);
@@ -191,7 +192,7 @@ export default function CameraPanel(props) {
     const geometry = new THREE.BufferGeometry().setFromPoints(points);
     const spline = new MeshLine();
     spline.setGeometry(geometry);
-    const material = new MeshLineMaterial({ lineWidth: 0.05, color: 0xff5024 });
+    const material = new MeshLineMaterial({ lineWidth: 0.01, color: 0xff5024 });
     const spline_mesh = new THREE.Mesh(spline.geometry, material);
     sceneTree.set_object_from_path(['Camera Path', 'Curve'], spline_mesh);
   }
@@ -214,11 +215,10 @@ export default function CameraPanel(props) {
       const up = curve_object.curve_ups.getPoint(
         slider_value / (cameras.length - 1.0),
       );
-
       const mat = get_transform_matrix(position, lookat, up);
       set_camera_position(camera_render, mat);
     }
-  }, [slider_value]);
+  }, [slider_value, render_height, render_width]);
 
   // call this function whenever slider state changes
   useEffect(() => {

nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/curve.js

@@ -7,7 +7,8 @@ function get_curve(list_of_3d_vectors) {
   const curve = new THREE.CatmullRomCurve3(
     list_of_3d_vectors,
     false,
-    'catmullrom',
+    // 'centripetal'
+    'chordal'
   );
   return curve;
 }

nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx

@@ -57,6 +57,7 @@ function CameraToggle() {
 function TransformIcons(props) {
   const sceneTree = props.sceneTree;
   const transform_controls = sceneTree.find_object(['Transform Controls']);
+  // NOTE(ethan): I'm not sure why this is necessary, but it is
   // toggle back and forth between local and global transform
   const [world, setWorld] = React.useState(true);
 

nerfactory/viewer/app/src/reducer.js

@@ -21,6 +21,7 @@ const initialState = {
     config_base_dir: 'config_base_dir', // the base directory of the config file
     render_height: 1080,
     render_width: 1920,
+    field_of_view: 50,
 
     isTraining: true,
     output_options: ['rgb'], // populated by the possible Graph outputs
@@ -29,7 +30,6 @@ const initialState = {
     colormap_choice: 'default', // the selected colormap
     maxResolution: 1024,
     targetTrainUtil: 0.9,
-    field_of_view: 80,
     eval_fps: 'Paused',
     train_eta: 'Paused',
     vis_train_ratio: 'Paused',