Skip to content

Commit

Permalink
adjust size
Browse files Browse the repository at this point in the history
  • Loading branch information
@Florian-Barthel
Florian-Barthel committed Feb 21, 2024
1 parent 588a820 commit f2eee1d
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 53 deletions.
136 changes: 101 additions & 35 deletions project-page/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,6 @@ <h2 class="subtitle has-text-centered">
<div class="container is-max-desktop">
<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">

<h2 class="title is-3">Abstract</h2>
<div class="content has-text-justified">
<p>
Expand All @@ -223,44 +222,111 @@ <h2 class="title is-3">Abstract</h2>
distribution and consumption.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="hero is-small">
<div class="hero-body">
<div class="container">

<h2 class="title is-3">Method</h2>
<div class="content has-text-justified">
<img src="static/images/method_overview2.png" alt="MY ALT TEXT" />
<p>An overview of our novel 3DGS training method. During training, we arrange all high dimensional
attributes into multiple 2D grids. Those grids are sorted and a smoothness regularization is applied. This
creates redundancy which help to compress the 2D grids into small files using off-the-shelf compression
methods.</p>
</div>

<h2 class="title is-3">Method</h2>
<div class="content has-text-justified">
<img src="static/images/method_overview2.png" alt="MY ALT TEXT" />
<p>An overview of our novel 3DGS training method. During training, we arrange all high dimensional
attributes into multiple 2D grids. Those grids are sorted and a smoothness regularization is applied. This
creates redundancy which help to compress the 2D grids into small files using off-the-shelf compression
methods.</p>
</div>

<h2 class="title is-3">Results</h2>
<div class="content has-text-justified">

<div class="video-container" style="float: left;">
<video class="sourceVideo" src="static/videos/flowers_3dgs_sh_vs_oursqsh.mp4" style="display: none;" muted loop></video>
<canvas class="videoCanvas"></canvas>
</div>

<div class="video-container" style="float: left;">
<video class="sourceVideo" src="static/videos/truck_3dgs_nosh_vs_oursq.mp4" style="display: none;" muted loop></video>
<canvas class="videoCanvas"></canvas>
</div>

<div class="video-container" style="float: left;">
<video class="sourceVideo" src="static/videos/truck_3dgs_nosh_vs_oursq.mp4" style="display: none;" muted loop></video>
<canvas class="videoCanvas"></canvas>
</div>

<!--<img src="static/images/compare.png" alt="MY ALT TEXT" />-->
<br>
<p>
Our method maintains high rendering quality while only using a fraction of the memory footprint.

</p>
</div>
<h2 class="title is-3">Results</h2>
<img style="display: block; margin-left: auto; margin-right: auto; width: 90%;" , src="static/images/table.png"
alt="MY ALT TEXT" />

<div class="content has-text-justified">
<table>
<tr>
<th style="text-align: left; width: 33.33%;">3DGS<span style="float: right;">Ours-Q</span></th>
<th style="text-align: left; width: 33.33%;">3DGS w/o SH<span style="float: right;">Ours-Q w/o SH</span></th>
<th style="text-align: left; width: 33.33%;">Ours-Q w/o SH<span style="float: right;">Ours-S w/o SH</span></th>
</tr>

<tr>
<td>
<div class="video-container">
<video class="sourceVideo" src="static/videos/flowers_3dgs_sh_vs_oursqsh.mp4" style="display: none;" muted
loop></video>
<canvas class="videoCanvas"></canvas>
</div>
<p style="text-align: left;">828.3 MB<span style="float: right;"> 64.1 MB</span></p>
</td>
<td>
<div class="video-container">
<video class="sourceVideo" src="static/videos/flowers_3dgs_nosh_vs_oursq.mp4" style="display: none;" muted
loop></video>
<canvas class="videoCanvas"></canvas>
</div>
<p style="text-align: left;">227.4 MB<span style="float: right;">32.2 MB</span></p>
</td>
<td>
<div class="video-container">
<video class="sourceVideo" src="static/videos/flowers_oursq_vs_ourss.mp4" style="display: none;" muted
loop></video>
<canvas class="videoCanvas"></canvas>
</div>
<p style="text-align: left;">32.2 MB<span style="float: right;">23.6 MB</span></p>
</td>
</tr>


<tr>
<td>
<div class="video-container">
<video class="sourceVideo" src="static/videos/truck_3dgs_sh_vs_oursqsh.mp4" style="display: none;" muted
loop></video>
<canvas class="videoCanvas"></canvas>
</div>
<br>
<p style="text-align: left;">624.7 MB<span style="float: right;">34.3 MB</span></p>

</td>
<td>
<div class="video-container">
<video class="sourceVideo" src="static/videos/truck_3dgs_nosh_vs_oursq.mp4" style="display: none;" muted
loop></video>
<canvas class="videoCanvas"></canvas>
</div>
<p style="text-align: left;">169.9 MB<span style="float: right;">17.3 MB</span></p>
</td>
<td>
<div class="video-container">
<video class="sourceVideo" src="static/videos/truck_oursq_vs_ourss.mp4" style="display: none;" muted
loop></video>
<canvas class="videoCanvas"></canvas>
</div>
<p style="text-align: left;">17.3 MB<span style="float: right;">13.9 MB</span></p>

</td>
</tr>

</table>







<!--<img src="static/images/compare.png" alt="MY ALT TEXT" />-->
<br>
<p>
Our method maintains high rendering quality while only using a fraction of the memory footprint.

</p>
</div>
</div>
</div>

</section>
<!-- End paper abstract -->

Expand Down
12 changes: 8 additions & 4 deletions project-page/static/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
/*

.video-container {
width: 512px;
height: 512px;
} */
aspect-ratio: 1;
/* float: left; */
}

.videoCanvas {
border-radius: 5px;

}
Binary file added project-page/static/images/table.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 23 additions & 14 deletions project-page/static/js/vidsplit_multi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,34 @@ let glob_splitX = []
document.addEventListener('DOMContentLoaded', function () {
const videos = document.getElementsByClassName('sourceVideo');
const canvases = document.getElementsByClassName('videoCanvas');
const videoContainers = document.getElementsByClassName('video-container');

for (let i = 0; i < videos.length; i++) {
let cur_video = videos[i];
let cur_canvas = canvases[i];
let cur_ctx = cur_canvas.getContext('2d');
let cur_video_container = videoContainers[i];
glob_splitX.push(50);

cur_video.addEventListener('loadedmetadata', load_event(cur_canvas, cur_video));
cur_video.addEventListener('loadedmetadata', load_event(cur_canvas, cur_video_container));
cur_video.play();
cur_video.addEventListener('playing', play_event(cur_video, cur_canvas, cur_ctx, i));
cur_canvas.addEventListener('mousemove', move_event(cur_canvas, i))
cur_video.addEventListener('playing', play_event(cur_video, cur_canvas, cur_ctx, i, cur_video_container));
cur_canvas.addEventListener('mousemove', move_event(cur_canvas, i, cur_video_container))
}
});

function load_event(canvas, video){
function load_event(canvas, video_container){
return () => {
canvas.width = video.videoWidth / 2;
canvas.height = video.videoHeight;
console.log(video_container.offsetWidth)
canvas.width = video_container.offsetWidth;
canvas.height = video_container.offsetHeight;
}
}

function play_event(video, canvas, ctx, index) {
function play_event(video, canvas, ctx, index, video_container) {
return () => {
setInterval(() => {
draw(video, canvas, ctx, glob_splitX[index]);
draw(video, canvas, ctx, glob_splitX[index], video_container);
}, 5);
}
}
Expand All @@ -39,31 +43,36 @@ function move_event(canvas, index){
}
}

function draw(video, canvas, ctx, splitX) {
function draw(video, canvas, ctx, splitX, video_container) {
if (video.paused || video.ended) return;
if (ctx === undefined) return;
// console.log(index, glob_splitX[index])

ctx.clearRect(0, 0, canvas.width, canvas.height);
splitX_imgSpace = splitX * (0.5 * video.videoWidth) / video_container.offsetWidth
ctx.drawImage(
video,
0, // sx
0, // sy
splitX, // sWidth
splitX_imgSpace, // sWidth
video.videoHeight, // sHeight
0, // dx
0, // dy
splitX, //dWidth
video.videoHeight // dHeight
canvas.height // dHeight
);

ctx.drawImage(
video,
video.videoWidth / 2 + splitX,

video.videoWidth / 2 + splitX_imgSpace,
0,
video.videoWidth / 2 - splitX,
video.videoWidth / 2 - splitX_imgSpace,
video.videoHeight,

splitX,
0,
video.videoWidth / 2 - splitX,
canvas.width - splitX,
canvas.height
);

Expand Down

0 comments on commit f2eee1d

Please sign in to comment.