Skip to content

Commit

Permalink
add cinematic transfer
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnyiRao
AnyiRao committed Nov 29, 2023
1 parent ae7518d commit 95aaddd
Show file tree
Hide file tree
Showing 7 changed files with 438 additions and 1 deletion.
125 changes: 125 additions & 0 deletions cinetransfer/css/app.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
.CodeMirror {
font-size: .8em;
height: auto;
}

.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
}

#header_img {
margin-bottom: 1em;
}


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
width: 100%;
/* height: 280px; */
position:relative;
margin: auto;
}

/* Hide the images by default */
.mySlides {
display: none;
}

/* Next & previous buttons */
.prev {
cursor: pointer;
position: absolute;
width: auto;
margin-top: 16%;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
left: 5%;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
cursor: pointer;
position: absolute;
width: auto;
margin-top: 16%;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
right: 5%;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 12px;
/* padding: 8px 12px; */
position: absolute;
top: 8px;
left: 8%;
width: 100%;
/* text-align: center; */
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dotDiv {
margin-top: 34.5%;
}

.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 10%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
/* .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 25000000000s;
animation-name: fade;
animation-duration: 250000000000s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
} */
11 changes: 11 additions & 0 deletions cinetransfer/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

Binary file added cinetransfer/img/pipeline.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cinetransfer/img/teaser.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.
261 changes: 261 additions & 0 deletions cinetransfer/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@

<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<title>Cinematic Transfer</title>

<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- <base href="/"> -->

<link rel="icon" type="image/png" href="../img/logo.png">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.8.0/codemirror.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110862391-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-110862391-3');
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.8.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<script src="js/app.js"></script>
</head>

<body>
<div class="container" id="main">
<div class="row">
<h1 class="col-md-12 text-center">
Cinematic Behavior Transfer via NeRF-based Differentiable Filming
<br>
<small>
Arxiv 2023
</small>
</h1>
</div>

<div class="row">
<div class="col-md-12 text-center">
<div style="margin-bottom: 0.7em; margin-top:0.2em" class="authors">
<a style="color:#000000;" href="">Xuekun Jiang<sup>1*</sup></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a style="color:#000000;" href="https://anyirao.com/">Anyi Rao<sup>2*</sup></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a style="color:#000000;" href="">Jingbo Wang<sup>1</sup></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a style="color:#000000;" href="http://dahua.me/">Dahua Lin<sup>1,3</sup></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a style="color:#000000;" href="">Dai Bo<sup>1</sup></a>
</div>

<div style="margin-bottom: 0.5em;" class="affiliations">
<a href="https://www.shlab.org.cn/">Shanghai Artificial Intelligence Laboratory<sup>1</sup></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://cs.stanford.edu/">Stanford University<sup>2</sup></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<a href="http://mmlab.ie.cuhk.edu.hk/">The Chinese University of Hong Kong<sup>3</sup></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</br>
</div>
<div>* denotes equal contribution</div>
</div>
</div>

<div style="margin-bottom: 0.7em;" class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<ul class="nav nav-pills nav-justified">
<li>
<a href="https://arxiv.org/abs/">
<image src="../img/paper.png" height="50px"><br>
<h5><strong>Paper</strong></h5>
</a>
</li>
<li>
<a href="">
<image src="../img/github_pad.png" height="50px"><br>
<h5><strong>Code (coming)</strong></h5>
</a>
</li>
<li>
<a href="">
<image src="../img/paperclip.png" height="50px"><br>
<h5><strong>Data (coming)</strong></h5>
</a>
</li>
</ul>
</div>
</div>



<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>
Abstract
</h3>
<image src="img/teaser.png" class="img-responsive" alt="overview" style="width:60%;margin-left:auto;margin-right:auto;"><br>
<p class="text-justify">

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

<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>
Pipeline
</h3>
<image src="img/pipeline.jpg" class="img-responsive" alt="overview"><br>
<p class="text-justify">
<strong> Overview </strong>
xxxxxx
</p>
</div>
</div>

<!-- <div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>
Demo Session @
<a style="color:#000000;" href="https://s2022.siggraph.org/presentation/?id=papers_230&sess=sess114">SIGGRAPH 2022</a>
</h3>
<table>
<tr>
<td width="100%">
<video id="v12" width="100%" autoplay loop muted controls>
<source src="https://city-super.github.io/shoot360_files/prerecord.mp4" type="video/mp4" />
</video>
</td>
</tr>
</table>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>
User Interface Demo
</h3>
<table>
<tr>
<td width="100%">
<video id="v11" width="100%" autoplay loop muted controls>
<source src="https://city-super.github.io/shoot360_files/demo.mp4" type="video/mp4" />
</video>
</td>
</tr>
</table>
</div>
</div> -->



<!-- <div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>
Example Results
</h3>
<image src="img/result.png" class="img-responsive" alt="overview"><br>
<p class="text-justify">
<strong> Qualitative evaluations.</strong>
Column 2-3: LayoutVAE and MolVAE fail to capture valid block topology, while our
BlockPlanner efficiently generates diverse and valid block layouts with reasonable land use categories. Column 5-6: marker
(L) indicates land use level view. Though pixel-based BlockGAN generates sensible structure for large lots, the artifacts such
as the fuzzy boundary are significant. In contrast, our vectorized representation captures much more accurate geometry even
in small areas. (Dimgray color indicates the unfilled regions.)
</p>
</div>
</div> -->

<!-- <div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>
3D Visualization and Animations
</h3>
<table>
<tr>
<td width="33%">
<image src="img/supp.png" width=92% class="img-responsive" alt="overview"><br>
</td>
<td width="32%">
<video id="v11" width="100%" autoplay loop muted controls>
<source src="img/block animation.mp4" type="video/mp4" />
</video>
</td>
<td width="32%">
<video id="v12" width="100%" autoplay loop muted controls>
<source src="img/fun.mp4" type="video/mp4" />
</video>
</td>
</tr>
</table>
</div>
</div> -->

<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>
BibTeX
</h3>
<div class="form-group col-md-10 col-md-offset-1">
<textarea id="bibtex" class="form-control" readonly>

@article{jiang2023cinematic,
title={Cinematic Behavior Transfer via NeRF-based Differentiable Filming},
author={Jiang, Xuekun and Rao, Anyi and Wang, Jingbo and Lin, Dahua and Dai, Bo},
journal={arXiv preprint arXiv:},
year={2023}
}
</textarea>
</div>
</div>
</div>
</div>
</body>

<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>




</html>
Loading

0 comments on commit 95aaddd

Please sign in to comment.