From 2a920e765de01e087996da773f80347b5677ec3f Mon Sep 17 00:00:00 2001
From: machenmusik <machenmusik@users.noreply.github.com>
Date: Mon, 24 Apr 2023 20:35:30 -0400
Subject: [PATCH] Render in threejs viewer (#1794)

* remove separate RenderWindow

Bring the background image under threejs control in the ViewerWindow.

* fix typo: apsect --> aspect

* fix lint issues
---
 .../src/modules/RenderWindow/RenderWindow.jsx | 24 -------------
 .../src/modules/ViewerWindow/ViewerWindow.jsx | 34 +++++++++++++++----
 2 files changed, 28 insertions(+), 30 deletions(-)
 delete mode 100644 nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx

diff --git a/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx b/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx
deleted file mode 100644
index e6c7e6d5f..000000000
--- a/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx b/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
index 38c6cee0e..7415f09a0 100644
--- a/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
+++ b/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
@@ -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 />