From cdb68aef60b9319de6d05d8b21341b190056b8e0 Mon Sep 17 00:00:00 2001
From: Matthew Tancik <tancik@berkeley.edu>
Date: Wed, 14 Sep 2022 00:00:30 -0700
Subject: [PATCH] Fix a couple of viewer bugs (#430)

---
 nerfactory/viewer/app/src/modules/Scene/Scene.jsx    |  8 +++-----
 .../modules/SidePanel/CameraPanel/CameraHelper.js    | 12 ++++++++++++
 .../modules/SidePanel/CameraPanel/CameraPanel.jsx    |  8 +++++++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/nerfactory/viewer/app/src/modules/Scene/Scene.jsx b/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
index eb7d241b1..7013fb408 100644
--- a/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
+++ b/nerfactory/viewer/app/src/modules/Scene/Scene.jsx
@@ -31,18 +31,16 @@ export function get_scene_tree() {
   main_camera.up = new THREE.Vector3(0, 0, 1);
   sceneTree.set_object_from_path(['Cameras', 'Main Camera'], main_camera);
 
-  sceneTree.set_object_from_path(
-    ['Cameras', 'Main Camera', 'Helper'],
-    new CameraHelper(main_camera),
-  );
   sceneTree.metadata.camera = main_camera;
 
   // Render camera
   const render_camera = main_camera.clone();
+  const render_camera_helper = new CameraHelper(render_camera, '#4eb570');
+  render_camera_helper.set_visibility(false);
   sceneTree.set_object_from_path(['Cameras', 'Render Camera'], render_camera);
   sceneTree.set_object_from_path(
     ['Cameras', 'Render Camera', 'Helper'],
-    new CameraHelper(render_camera),
+    render_camera_helper,
   );
 
   // Renderer
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraHelper.js b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraHelper.js
index a448c3655..bd0685edd 100644
--- a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraHelper.js
+++ b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraHelper.js
@@ -31,6 +31,7 @@ class CameraHelper extends THREE.Mesh {
     const material = new MeshLineMaterial({
       color,
       lineWidth: 0.01,
+      sizeAttenuation: false,
     });
 
     const vertices = [];
@@ -96,6 +97,12 @@ class CameraHelper extends THREE.Mesh {
   }
 
   update() {
+    if (!this.visible) {
+      const camera_vis = new MeshLine();
+      this.geometry = camera_vis.geometry;
+      return;
+    }
+
     const geometry = this.line_geometry;
     const pointMap = this.pointMap;
 
@@ -128,6 +135,11 @@ class CameraHelper extends THREE.Mesh {
     this.geometry = camera_vis.geometry;
   }
 
+  set_visibility(visible) {
+    this.visible = visible;
+    this.update();
+  }
+
   dispose() {
     this.geometry.dispose();
     this.material.dispose();
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
index c82de0ebe..62e200e5e 100644
--- a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
+++ b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
@@ -81,6 +81,11 @@ export default function CameraPanel(props) {
   const sceneTree = props.sceneTree;
   const camera_main = sceneTree.find_object(['Cameras', 'Main Camera']);
   const camera_render = sceneTree.find_object(['Cameras', 'Render Camera']);
+  const camera_render_helper = sceneTree.find_object([
+    'Cameras',
+    'Render Camera',
+    'Helper',
+  ]);
   const transform_controls = sceneTree.find_object(['Transform Controls']);
 
   // redux store state
@@ -141,6 +146,7 @@ export default function CameraPanel(props) {
     const new_camera_list = cameras.concat(camera_main_copy);
     setCameras(new_camera_list);
     set_camera_position(camera_render, camera_main_copy.matrix);
+    camera_render_helper.set_visibility(true);
   };
 
   // force a rerender if the cameras are dragged around
@@ -170,7 +176,7 @@ export default function CameraPanel(props) {
     for (let i = 0; i < cameras.length; i += 1) {
       const camera = cameras[i];
       // camera.aspect = render_width / render_height;
-      const camera_helper = new CameraHelper(camera, 0xfc0303);
+      const camera_helper = new CameraHelper(camera, 0x393e46);
       // camera
       sceneTree.set_object_from_path(
         ['Camera Path', 'Cameras', i.toString(), 'Camera'],