tink/nerfstudio
4
0
Fork 0
mirror of https://github.com/nerfstudio-project/nerfstudio.git synced 2026-11-11 18:44:21 +08:00
Code

Render in threejs viewer (#1794)

Browse Source 
* remove separate RenderWindow

Bring the background image under threejs control in the ViewerWindow.

* fix typo: apsect --> aspect

* fix lint issues
This commit is contained in:
machenmusik 2023-04-24 20:35:30 -04:00 committed by GitHub
parent ea2993d5b1
commit 2a920e765d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx
View File

@ -1,24 +0,0 @@
import * as React from 'react';
import { useSelector } from 'react-redux';
export default function RenderWindow() {
const isWebsocketConnected = useSelector(
(state) => state.websocketState.isConnected,
);
return (
<div className="RenderWindow">
<div id="not-connected-overlay" hidden={isWebsocketConnected}>
<div id="not-connected-overlay-text">Renderer Disconnected</div>
</div>
<img
id="background-image"
width="100%"
height="100%"
alt="Render window"
z-index="1"
hidden={!isWebsocketConnected}
/>
</div>
);
}

34
nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
View File

@ -12,7 +12,6 @@ import SyncOutlinedIcon from '@mui/icons-material/SyncOutlined';
import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBackOutlined';
import { isEqual } from 'lodash';
import RenderWindow from '../RenderWindow/RenderWindow';
import {
makeThrottledMessageSender,
ViserWebSocketContext,
@ -187,6 +186,19 @@ export default function ViewerWindow(props) {
// start the three.js rendering loop
// when the DOM is ready
useEffect(() => {
document.getElementById("background-image").onload = function () {
if (scene) {
const oldBackground = scene.background;
const texture = new THREE.Texture(this);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.NearestFilter;
texture.needsUpdate = true;
scene.background = texture;
if (oldBackground) {
oldBackground.dispose();
}
}
}
myRef.current.append(renderer.domElement);
render();
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -203,17 +215,17 @@ export default function ViewerWindow(props) {
let crop_h;
const render_aspect = render_width / render_height;
const viewport_aspect = viewport_width / viewport_height;
let render_viewport_apsect_ratio = null;
let render_viewport_aspect_ratio = null;
if (render_aspect > viewport_aspect) {
// render width is the limiting factor
crop_w = viewport_width;
crop_h = viewport_width / render_aspect;
render_viewport_apsect_ratio = viewport_aspect / render_aspect;
render_viewport_aspect_ratio = viewport_aspect / render_aspect;
} else {
// render height is the limiting factor
crop_w = viewport_height * render_aspect;
crop_h = viewport_height;
render_viewport_apsect_ratio = 1.0;
render_viewport_aspect_ratio = 1.0;
}
let display = null;
@ -233,7 +245,7 @@ export default function ViewerWindow(props) {
// such that the rendered video will match correctly
if (camera_choice !== 'Main Camera') {
const fl = 1.0 / Math.tan((field_of_view * Math.PI) / 360);
const fl_new = fl * render_viewport_apsect_ratio;
const fl_new = fl * render_viewport_aspect_ratio;
const fov = Math.atan(1 / fl_new) / (Math.PI / 360);
sceneTree.metadata.camera.fov = fov;
} else {
@ -303,7 +315,17 @@ export default function ViewerWindow(props) {
return (
<>
<RenderWindow />
<div className="RenderWindow">
<div id="not-connected-overlay" hidden={isWebsocketConnected}>
<div id="not-connected-overlay-text">Renderer Disconnected</div>
</div>
</div>
<img
id="background-image"
alt="Render window"
z-index="1"
hidden
/>
<div className="canvas-container-main" ref={myRef}>
<div className="ViewerWindow-camera-toggle">
<CameraToggle />