diff --git a/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx b/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx index 3dcee05cb..ac016f330 100644 --- a/nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx +++ b/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; diff --git a/nerfactory/viewer/app/src/modules/Scene/Scene.jsx b/nerfactory/viewer/app/src/modules/Scene/Scene.jsx index f769e2634..8e70229fb 100644 --- a/nerfactory/viewer/app/src/modules/Scene/Scene.jsx +++ b/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 diff --git a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraHelper.js b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraHelper.js index 7fb843809..a448c3655 100644 --- a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraHelper.js +++ b/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 diff --git a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx index c47cf2fd4..e350f50c4 100644 --- a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx +++ b/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; + ]); 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(() => { diff --git a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/curve.js b/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/curve.js index 55535f5d5..40da3868f 100644 --- a/nerfactory/viewer/app/src/modules/SidePanel/CameraPanel/curve.js +++ b/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; } diff --git a/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx b/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx index c06f9de29..58d498183 100644 --- a/nerfactory/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx +++ b/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); diff --git a/nerfactory/viewer/app/src/reducer.js b/nerfactory/viewer/app/src/reducer.js index 64d650c2f..8e3ae8ce8 100644 --- a/nerfactory/viewer/app/src/reducer.js +++ b/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',