add comparison to rgbd camera

Author: wenbowen123

index.html

@@ -293,13 +293,54 @@ <h2 class="title is-3" style="text-align: center;">Comparison to Metric Monocula
       </div>
     </div>
 
-    <br>
-    <br>
-    <div class="columns is-centered has-text-centered">
+
+    <div class="columns is-centered has-text-centered" style="margin-top: 100px;">
+      <div class="column is-full">
+        <h2 class="title is-3" style="text-align: center;">Comparison to RGBD Camera</h2>
+          <p style="text-align: left;">We compare to common RGBD cameras including RealSense, Kinect, Zed. Ours uses the same stereo image from Zed as input. Different cameras may use different filtering steps for postprocessing, wherease the point cloud accuracy should not be affected.</p>
+          <div style="display: flex; flex: none; align-items: center; justify-content: center; gap: 10px; margin-top: 10px;">
+            <p class="title is-5" style="margin: 0;">Scene:</p>
+            <span id="Toolbox" class="button scene_cam is-info is-rounded" onclick="change_scene_cam('Toolbox')">
+              Toolbox
+            </span>
+          </div>
+          <div style="display: flex; flex: none; align-items: center; justify-content: center; gap: 10px; margin-top: 10px">
+            <p class="title is-5" style="margin: 0;">Result:</p>
+            <span id="Ours_cam" class="button method_cam is-info is-rounded" onclick="change_method_cam('Ours')">
+              Ours
+            </span>
+            <span id="Zed" class="button method_cam is-black is-rounded" onclick="change_method_cam('Zed')">
+              Zed
+            </span>
+            <span id="RealSense" class="button method_cam is-black is-rounded" onclick="change_method_cam('RealSense')">
+              RealSense
+            </span>
+            <span id="Kinect Azure" class="button method_cam is-black is-rounded" onclick="change_method_cam('Kinect Azure')">
+              Kinect Azure
+            </span>
+          </div>
+          <div style="display: flex; width: 100%; flex: none; text-align: center; justify-content: center; gap: 2px; margin-top: 10px; margin-bottom:0px">
+            <img id="left_cam" style="width: 40%; height: auto; display: block; object-fit: contain; ">
+            <model-viewer style="width: 50%; height: auto; aspect-ratio: 3/2; border: 1px solid black; display: inline-block; "
+              id="cloud_cam"
+              exposure="0.5"
+              max-camera-orbit="Infinity 180deg 100%"
+              min-camera-orbit="-Infinity -180deg 10%"
+              orientation="0deg 180deg 180deg"
+              camera-orbit="180deg 90deg 60%"
+              camera-controls touch-action="none">
+            </model-viewer>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="columns is-centered has-text-centered", style="margin-top: 100px;">
       <div class="column is-four-fifths">
         <h2 class="title is-3">Quantitative Comparison</h2>
-        <img src="static/images/table_zero_shot.jpg" width="60%">
-        <img src="static/images/eth.jpg" width="60%" style="margin-top: 20px;">
+        <img src="static/images/table_zero_shot.jpg" width="50%">
+        <img src="static/images/eth.jpg" width="50%" style="margin-top: 20px;">
       </div>
     </div>
 
@@ -488,28 +529,50 @@ <h2 class="title">Acknowledgement</h2>
     },
   }
 
+
+  const cam_comparison = {
+    "Toolbox":{
+      "left":"static/comparison/toolbox/left.png",
+      "Ours":
+      {
+        'cloud': "static/comparison/toolbox/ours_denoise.glb"
+      },
+      "Zed":
+      {
+        'cloud': "static/comparison/toolbox/zed.glb"
+      },
+      "RealSense":
+      {
+        'cloud': "static/comparison/toolbox/realsense.glb"
+      },
+      "Kinect Azure":
+      {
+        'cloud': "static/comparison/toolbox/kinect.glb"
+      },
+    },
+  }
+
   var cur_scene = 'Endeavor';
   var cur_method = 'Ours'
   var cur_method_mono = 'Ours'
+  var cur_scene_cam = 'Toolbox';
+  var cur_method_cam = 'Ours'
   window.onload = () => {
     const left = document.getElementById('left');
     const disp = document.getElementById('disp');
     const cloud = document.getElementById('cloud');
     // const mono_disp = document.getElementById('mono_disp');
     const mono_cloud = document.getElementById('mono_cloud');
+    const left_cam = document.getElementById('left_cam');
+    const cloud_cam = document.getElementById('cloud_cam');
 
     // Set default image and mark the default button as active
     left.src = comparison[cur_scene]['left'];
-    // left.onmouseover = () => {
-    //   left.src = comparison[cur_scene]['right']
-    // }
-    // left.onmouseout = () => {
-    //   left.src = comparison[cur_scene]['left']
-    // }
     disp.src = comparison[cur_scene][cur_method]['disp'];
     cloud.src = comparison[cur_scene][cur_method]['cloud'];
-    // mono_disp.src = mono_comparison[cur_method_mono]['disp'];
     mono_cloud.src = mono_comparison[cur_method_mono]['cloud'];
+    left_cam.src = cam_comparison[cur_scene_cam]['left'];
+    cloud_cam.src = cam_comparison[cur_scene_cam][cur_method_cam]['cloud'];
   };
 
 
@@ -567,6 +630,36 @@ <h2 class="title">Acknowledgement</h2>
     document.getElementById(method).className = 'button method_mono is-info is-rounded'
   }
 
+  function change_scene_cam(scene) {
+    cur_scene_cam = scene
+    const left_cam = document.getElementById('left_cam');
+    const buttons = document.querySelectorAll('.scene_cam');
+
+    // Update the image source based on the scene
+    left_cam.src = cam_comparison[scene]['left'];
+
+    // Update active button styling
+    buttons.forEach(button => button.className='button scene_cam is-black is-rounded');
+    document.getElementById(scene).className = 'button scene_cam is-info is-rounded'
+
+    change_method_cam(cur_method_cam)
+  }
+
+  function change_method_cam(method) {
+    cur_method_cam = method
+    const cloud_cam = document.getElementById('cloud_cam');
+    const buttons = document.querySelectorAll('.method_cam');
+
+    cloud_cam.src = cam_comparison[cur_scene_cam][method]['cloud']
+
+    // Update active button styling
+    buttons.forEach(button => button.className='button method_cam is-black is-rounded');
+    if (method=='Ours'){
+      method = 'Ours_cam'
+    }
+    document.getElementById(method).className = 'button method_cam is-info is-rounded'
+  }
+
 
 </script>