Skip to content

Commit

Permalink
add comparison to rgbd camera
Browse files Browse the repository at this point in the history
  • Loading branch information
@wenbowen123
wenbowen123 committed Jan 20, 2025
1 parent d09f1b0 commit e07cab6
Show file tree
Hide file tree
Showing 11 changed files with 116 additions and 12 deletions.
117 changes: 105 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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'];
};


Expand Down Expand Up @@ -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>

Expand Down
Loading

0 comments on commit e07cab6

Please sign in to comment.