Skip to content

Commit c079cd2

Browse files
digiammdigiamm
committed
added some demos
1 parent 17dbff4 commit c079cd2

5 files changed

Lines changed: 170 additions & 0 deletions

File tree

‎docs/assets/js/video_comparison.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// Written by Dor Verbin, October 2021
2+
// This is based on: http://thenewcode.com/364/Interactive-Before-and-After-Video-Comparison-in-HTML5-Canvas
3+
// With additional modifications based on: https://jsfiddle.net/7sk5k4gp/13/
4+
5+
function playVids(videoId) {
6+
var videoMerge = document.getElementById(videoId + "Merge");
7+
var vid = document.getElementById(videoId);
8+
9+
var position = 0.5;
10+
var vidWidth = vid.videoWidth / 2;
11+
var vidHeight = vid.videoHeight;
12+
13+
var mergeContext = videoMerge.getContext("2d");
14+
15+
16+
if (vid.readyState > 3) {
17+
vid.play();
18+
19+
function trackLocation(e) {
20+
// Normalize to [0, 1]
21+
bcr = videoMerge.getBoundingClientRect();
22+
position = ((e.pageX - bcr.x) / bcr.width);
23+
}
24+
function trackLocationTouch(e) {
25+
// Normalize to [0, 1]
26+
bcr = videoMerge.getBoundingClientRect();
27+
position = ((e.touches[0].pageX - bcr.x) / bcr.width);
28+
}
29+
30+
videoMerge.addEventListener("mousemove", trackLocation, false);
31+
videoMerge.addEventListener("touchstart", trackLocationTouch, false);
32+
videoMerge.addEventListener("touchmove", trackLocationTouch, false);
33+
34+
35+
function drawLoop() {
36+
mergeContext.drawImage(vid, 0, 0, vidWidth, vidHeight, 0, 0, vidWidth, vidHeight);
37+
var colStart = (vidWidth * position).clamp(0.0, vidWidth);
38+
var colWidth = (vidWidth - (vidWidth * position)).clamp(0.0, vidWidth);
39+
mergeContext.drawImage(vid, colStart + vidWidth, 0, colWidth, vidHeight, colStart, 0, colWidth, vidHeight);
40+
requestAnimationFrame(drawLoop);
41+
42+
43+
var arrowLength = 0.09 * vidHeight;
44+
var arrowheadWidth = 0.025 * vidHeight;
45+
var arrowheadLength = 0.04 * vidHeight;
46+
var arrowPosY = vidHeight / 10;
47+
var arrowWidth = 0.007 * vidHeight;
48+
var currX = vidWidth * position;
49+
50+
// Draw circle
51+
mergeContext.arc(currX, arrowPosY, arrowLength * 0.7, 0, Math.PI * 2, false);
52+
mergeContext.fillStyle = "#FFD79340";
53+
mergeContext.fill()
54+
//mergeContext.strokeStyle = "#444444";
55+
//mergeContext.stroke()
56+
57+
// Draw border
58+
mergeContext.beginPath();
59+
mergeContext.moveTo(vidWidth * position, 0);
60+
mergeContext.lineTo(vidWidth * position, vidHeight);
61+
mergeContext.closePath()
62+
mergeContext.strokeStyle = "#AAAAAA";
63+
mergeContext.lineWidth = 4;
64+
mergeContext.stroke();
65+
66+
// Draw arrow
67+
mergeContext.beginPath();
68+
mergeContext.moveTo(currX, arrowPosY - arrowWidth / 2);
69+
70+
// Move right until meeting arrow head
71+
mergeContext.lineTo(currX + arrowLength / 2 - arrowheadLength / 2, arrowPosY - arrowWidth / 2);
72+
73+
// Draw right arrow head
74+
mergeContext.lineTo(currX + arrowLength / 2 - arrowheadLength / 2, arrowPosY - arrowheadWidth / 2);
75+
mergeContext.lineTo(currX + arrowLength / 2, arrowPosY);
76+
mergeContext.lineTo(currX + arrowLength / 2 - arrowheadLength / 2, arrowPosY + arrowheadWidth / 2);
77+
mergeContext.lineTo(currX + arrowLength / 2 - arrowheadLength / 2, arrowPosY + arrowWidth / 2);
78+
79+
// Go back to the left until meeting left arrow head
80+
mergeContext.lineTo(currX - arrowLength / 2 + arrowheadLength / 2, arrowPosY + arrowWidth / 2);
81+
82+
// Draw left arrow head
83+
mergeContext.lineTo(currX - arrowLength / 2 + arrowheadLength / 2, arrowPosY + arrowheadWidth / 2);
84+
mergeContext.lineTo(currX - arrowLength / 2, arrowPosY);
85+
mergeContext.lineTo(currX - arrowLength / 2 + arrowheadLength / 2, arrowPosY - arrowheadWidth / 2);
86+
mergeContext.lineTo(currX - arrowLength / 2 + arrowheadLength / 2, arrowPosY);
87+
88+
mergeContext.lineTo(currX - arrowLength / 2 + arrowheadLength / 2, arrowPosY - arrowWidth / 2);
89+
mergeContext.lineTo(currX, arrowPosY - arrowWidth / 2);
90+
91+
mergeContext.closePath();
92+
93+
mergeContext.fillStyle = "#AAAAAA";
94+
mergeContext.fill();
95+
96+
97+
98+
}
99+
requestAnimationFrame(drawLoop);
100+
}
101+
}
102+
103+
Number.prototype.clamp = function (min, max) {
104+
return Math.min(Math.max(this, min), max);
105+
};
106+
107+
108+
function resizeAndPlay(element) {
109+
var cv = document.getElementById(element.id + "Merge");
110+
cv.width = element.videoWidth / 2;
111+
cv.height = element.videoHeight;
112+
element.play();
113+
element.style.height = "0px"; // Hide video without stopping it
114+
115+
playVids(element.id);
116+
}

‎docs/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
</a>
2222
<div class="nav__links">
2323
<a href="#overview">Overview</a>
24+
<a href="#demo">Demo</a>
2425
<a href="#logistics">Logistics</a>
2526
<a href="#staff">Staff</a>
2627
<a href="#schedule">Schedule</a>
@@ -75,6 +76,31 @@ <h1>Spatial AI</h1>
7576
</div>
7677
</section>
7778

79+
<!-- ===== DEMO ===== -->
80+
<section id="demo">
81+
<div class="wrap section-pad">
82+
<div class="sec-head"><span class="sec-bar"></span><h2>Demos</h2></div>
83+
84+
<h3 class="demo-subhead">Mesh vs Rendering</h3>
85+
<p class="demo-sub">The same office scene reconstructed two ways: a classical mesh and rendering (3D Gaussian Splatting). Drag the slider to wipe between them.</p>
86+
<div class="video-compare-container">
87+
<video class="video" id="teaser" loop playsinline autoplay muted
88+
src="video/office4-teaser-trimmed.mp4" onplay="resizeAndPlay(this)"
89+
style="height:0px;"></video>
90+
<canvas height="0" class="videoMerge" id="teaserMerge"></canvas>
91+
</div>
92+
<p class="demo-caption"><a href="https://rvp-group.github.io/mrhash/" target="_blank" rel="noopener">MrHash</a></p>
93+
94+
<h3 class="demo-subhead">Active localization</h3>
95+
<p class="demo-sub">Choosing where to look to localize reliably: your robot should see only place that help it localize! Selecting viewpoints that maximize camera pose-estimation accuracy.</p>
96+
<div class="video-frame">
97+
<video class="demo-video" loop playsinline autoplay muted
98+
src="video/actloc_video.mp4"></video>
99+
</div>
100+
<p class="demo-caption"><a href="https://boysun045.github.io/ActLoc-Project/" target="_blank" rel="noopener">ActLoc</a></p>
101+
</div>
102+
</section>
103+
78104
<!-- ===== LOGISTICS ===== -->
79105
<section id="logistics">
80106
<div class="wrap section-pad">
@@ -376,5 +402,6 @@ <h1>Spatial AI</h1>
376402
</div>
377403
</footer>
378404

405+
<script src="assets/js/video_comparison.js"></script>
379406
</body>
380407
</html>

‎docs/styles.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,4 +194,31 @@ section + section, .section-divider{border-top:1px solid var(--border);}
194194
letter-spacing:.06em;text-transform:uppercase;color:var(--muted-soft);margin-bottom:4px;}
195195
.cards--2,.cards--4,.staff{grid-template-columns:1fr;}
196196
.hero__inner{padding:32px 24px;}
197+
.video-compare-container,.video-frame{width:100%;}
197198
}
199+
200+
/* ===== DEMO (mesh vs 3DGS slider) ===== */
201+
.video-compare-container{
202+
width:72%; max-width:820px; margin:0 auto; position:relative; display:block;
203+
line-height:0; border-radius:14px; overflow:hidden;
204+
border:1px solid var(--border-soft); box-shadow:0 10px 30px rgba(10,31,48,.10);
205+
cursor:ew-resize;
206+
}
207+
.video-compare-container .video{width:100%; height:auto; position:relative; top:0; left:0;}
208+
.video-compare-container .videoMerge{
209+
position:relative; top:0; left:0; z-index:10; width:100%; display:block;
210+
margin:0 auto; background-size:cover;
211+
}
212+
.demo-caption{margin-top:14px; text-align:center; font-family:var(--mono);
213+
font-size:13px; color:var(--muted);}
214+
.demo-caption a{color:var(--blue); text-decoration:none;}
215+
.demo-caption a:hover{text-decoration:underline;}
216+
.demo-subhead{margin:40px 0 4px; text-align:center; font-size:20px; font-weight:600;}
217+
.demo-sub{margin:0 auto 16px; max-width:620px; text-align:center;
218+
font-size:14.5px; line-height:1.55; color:var(--muted);}
219+
.video-frame{
220+
width:72%; max-width:820px; margin:0 auto; line-height:0;
221+
border-radius:14px; overflow:hidden;
222+
border:1px solid var(--border-soft); box-shadow:0 10px 30px rgba(10,31,48,.10);
223+
}
224+
.video-frame .demo-video{width:100%; height:auto; display:block;}

‎docs/video/actloc_video.mp4‎

1.66 MB
Binary file not shown.

‎docs/video/office4-teaser-trimmed.mp4‎

7.02 MB
Binary file not shown.

0 commit comments

Comments
 (0)