From f7e46e4848d03e49026a4ab1fbaf48478dcc344f Mon Sep 17 00:00:00 2001 From: Matthew Tancik Date: Thu, 23 Mar 2023 15:13:42 -0700 Subject: [PATCH] misc viewer cleanup (#1652) --- nerfstudio/viewer/app/src/index.jsx | 4 +-- .../modules/LoadPathModal/LoadPathModal.jsx | 6 ++--- .../viewer/app/src/modules/Scene/Scene.jsx | 26 ++++++++++--------- .../SidePanel/CameraPanel/CameraPanel.jsx | 11 ++------ .../SidePanel/ExportPanel/ExportPanel.jsx | 4 +-- .../SidePanel/ExportPanel/MeshSubPanel.jsx | 6 +---- .../src/modules/ViewerWindow/ViewerWindow.jsx | 16 +++--------- nerfstudio/viewer/app/src/subscriber.js | 16 +++++------- nerfstudio/viewer/server/viewer_utils.py | 9 ------- 9 files changed, 35 insertions(+), 63 deletions(-) diff --git a/nerfstudio/viewer/app/src/index.jsx b/nerfstudio/viewer/app/src/index.jsx index 966e50e43..2d16f4a01 100644 --- a/nerfstudio/viewer/app/src/index.jsx +++ b/nerfstudio/viewer/app/src/index.jsx @@ -1,12 +1,12 @@ import './index.scss'; import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import App from './App'; import WebSocketProvider from './modules/WebSocket/WebSocket'; import store from './store'; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = createRoot(document.getElementById('root')); root.render( diff --git a/nerfstudio/viewer/app/src/modules/LoadPathModal/LoadPathModal.jsx b/nerfstudio/viewer/app/src/modules/LoadPathModal/LoadPathModal.jsx index 5f79d1e00..5b5d2fced 100644 --- a/nerfstudio/viewer/app/src/modules/LoadPathModal/LoadPathModal.jsx +++ b/nerfstudio/viewer/app/src/modules/LoadPathModal/LoadPathModal.jsx @@ -113,9 +113,9 @@ export default function LoadPathModal(props: LoadPathModalProps) {
-

-

OR
-

+
+

OR

+
)} {camera_paths_arr.length === 0 && ( diff --git a/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx b/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx index 8388f7735..ef5a38888 100644 --- a/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx +++ b/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx @@ -31,10 +31,10 @@ export function get_scene_tree() { }, setValue(key, value) { this.value.set(key, value); - this.callbacks.forEach((cbk) => { - const i = cbk[1]; - const callback = cbk[0]; - return callback(this.value.get(i)); + this.callbacks.forEach((callback, callbackKey) => { + if (callbackKey === key) { + callback(value); + } }); }, }; @@ -164,6 +164,9 @@ export function get_scene_tree() { if (!scene_state.value.get('mouse_in_scene')) { return; } + if (keyMap.Space === true) { + camera_controls.setLookAt(0.7, -0.7, 0.3, 0, 0, 0); + } translate(); rotate(); } @@ -189,12 +192,6 @@ export function get_scene_tree() { window.addEventListener('keydown', onKeyDown, true); window.addEventListener('keyup', onKeyUp, true); - window.addEventListener('keydown', (event) => { - if (event.code === 'Space') { - camera_controls.setLookAt(0.7, -0.7, 0.3, 0, 0, 0); - } - }); - sceneTree.metadata.camera_controls = camera_controls; sceneTree.metadata.moveCamera = moveCamera; @@ -390,7 +387,7 @@ export function SceneTreeWebSocketListener() { const dispatch = useDispatch(); useEffect(() => { - socket.addEventListener('message', (originalCmd) => { + const messageHandler = (originalCmd) => { // set the remote description when the offer is received const cmd = msgpack.decode(new Uint8Array(originalCmd.data)); if (cmd.type === 'write') { @@ -401,6 +398,11 @@ export function SceneTreeWebSocketListener() { data: cmd.data, }); } - }); + }; + socket.addEventListener('message', messageHandler); + + return () => { + socket.removeEventListener('message', messageHandler); + }; }, [socket]); // dependency to call this whenever the websocket changes } diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx index 478068e6f..dce2aad0b 100644 --- a/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx +++ b/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx @@ -147,9 +147,7 @@ function RenderTimeSelector(props) { disabled={disabled} sx={{ input: { - '-webkit-text-fill-color': `${ - disabled ? '#24B6FF' : '#EBEBEB' - } !important`, + WebkitTextFillColor: `${disabled ? '#24B6FF' : '#EBEBEB'} !important`, color: `${disabled ? '#24B6FF' : '#EBEBEB'} !important`, }, }} @@ -282,9 +280,7 @@ function FovSelector(props) { }} sx={{ input: { - '-webkit-text-fill-color': `${ - disabled ? '#24B6FF' : '#EBEBEB' - } !important`, + WebkitTextFillColor: `${disabled ? '#24B6FF' : '#EBEBEB'} !important`, color: `${disabled ? '#24B6FF' : '#EBEBEB'} !important`, }, }} @@ -655,13 +651,11 @@ export default function CameraPanel(props) { }; const setCropEnabled = (value) => { - console.log('setting the crop enabled value to: ', value); dispatch({ type: 'write', path: 'renderingState/crop_enabled', data: value, }); - console.log('crop enabled value is now: ', crop_enabled); }; const serCropBgColor = (value) => { @@ -1121,7 +1115,6 @@ export default function CameraPanel(props) { reset_slider_render_on_add(new_camera_list); if ('crop' in camera_path_object && camera_path_object.crop !== null) { - console.log('crop' in camera_path_object); setCropEnabled(true); serCropBgColor(camera_path_object.crop.crop_bg_color); setCropCenter(camera_path_object.crop.crop_center); diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/ExportPanel/ExportPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/ExportPanel/ExportPanel.jsx index ac998daa2..51617dfc8 100644 --- a/nerfstudio/viewer/app/src/modules/SidePanel/ExportPanel/ExportPanel.jsx +++ b/nerfstudio/viewer/app/src/modules/SidePanel/ExportPanel/ExportPanel.jsx @@ -30,7 +30,7 @@ function TabPanel(props: TabPanelProps) { > {value === index && ( - {children} + {children} )} @@ -51,7 +51,7 @@ export default function ExportPanel(props) { const sceneTree = props.sceneTree; const showExportBox = props.showExportBox; - const [type_value, setTypeValue] = React.useState(0); + const [type_value, setTypeValue] = React.useState(false); const handleTypeChange = (event: React.SyntheticEvent, newValue: number) => { setTypeValue(newValue); diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/ExportPanel/MeshSubPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/ExportPanel/MeshSubPanel.jsx index 3eb2725af..f345652e8 100644 --- a/nerfstudio/viewer/app/src/modules/SidePanel/ExportPanel/MeshSubPanel.jsx +++ b/nerfstudio/viewer/app/src/modules/SidePanel/ExportPanel/MeshSubPanel.jsx @@ -132,9 +132,6 @@ export default function MeshSubPanel(props) { return boolean ? 'True' : 'False'; }; - console.log(controlValues.outputDir); - console.log(getPythonBool(controlValues.removeOutliers)); - const bbox_min = [ clippingCenter[0] - clippingScale[0] / 2, clippingCenter[1] - clippingScale[1] / 2, @@ -147,7 +144,6 @@ export default function MeshSubPanel(props) { ]; const mesh_method_choice = controlValues.mesh_method_options; - console.log(mesh_method_choice); let cmd = ''; if (mesh_method_choice === 'tsdf') { cmd = @@ -192,7 +188,7 @@ export default function MeshSubPanel(props) { inner_html = (
You need to train a model with normals to use poisson meshing. Try tsdf - or retrain the model with normals. You can use nerfacto with
+ or retrain the model with normals. You can use nerfacto with
--pipeline.model.predict-normals True
); diff --git a/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx b/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx index ea6196a14..551aac3a0 100644 --- a/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx +++ b/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx @@ -162,24 +162,16 @@ export default function ViewerWindow(props) { }; useEffect(() => { - function update_dimensions() { + const handleNewDimensions = () => { setDimensions({ height: get_window_height(), width: get_window_width(), }); - } - - window.addEventListener('resize', update_dimensions); - - // force a rerender - setDimensions({ - height: get_window_height(), - width: get_window_width(), - }); - render(); + }; + window.addEventListener('resize', handleNewDimensions); return () => { - window.removeEventListener('resize', update_dimensions); + window.removeEventListener('resize', handleNewDimensions); }; }, []); diff --git a/nerfstudio/viewer/app/src/subscriber.js b/nerfstudio/viewer/app/src/subscriber.js index 5af1a946c..dd95b196f 100644 --- a/nerfstudio/viewer/app/src/subscriber.js +++ b/nerfstudio/viewer/app/src/subscriber.js @@ -1,19 +1,17 @@ import { useContext } from 'react'; import { ReactReduxContext } from 'react-redux'; -export function subscribe_to_changes(selector_fn, fn) { - // selector_fn: returns a value from the redux state - // fn_valid: function to run on a valid input - // fn_null: function to run on a null input +export function subscribe_to_changes(selector_fn, callback_fn) { const { store } = useContext(ReactReduxContext); - let current; + let previousState; const handleChange = () => { - const previous = current; - current = selector_fn(store.getState()); - if (previous !== current) { - fn(previous, current); + const currentState = selector_fn(store.getState()); + if (previousState !== currentState) { + callback_fn(previousState, currentState); + previousState = currentState; } }; + store.subscribe(handleChange); } diff --git a/nerfstudio/viewer/server/viewer_utils.py b/nerfstudio/viewer/server/viewer_utils.py index a6ff0a412..33fb9afe9 100644 --- a/nerfstudio/viewer/server/viewer_utils.py +++ b/nerfstudio/viewer/server/viewer_utils.py @@ -364,15 +364,6 @@ class ViewerState: max_scene_box = torch.max(dataset.scene_box.aabb[1] - dataset.scene_box.aabb[0]).item() self.vis["renderingState/max_box_size"].write(max_scene_box) - # self.vis["renderingState/render_time"].write(str(0)) - - # set the properties of the camera - # self.vis["renderingState/camera"].write(json_) - - # set the main camera intrinsics to one from the dataset - # K = camera.get_intrinsics_matrix() - # set_persp_intrinsics_matrix(self.vis, K.double().numpy()) - def _check_camera_path_payload(self, trainer, step: int): """Check to see if the camera path export button was pressed.""" # check if we should interrupt from a button press?