basic dressrecon webpage

jefftan969 · Jun 17, 2024 · 7866c90 · 7866c90
1 parent c1380d9
commit 7866c90
Show file tree

Hide file tree

Showing 35 changed files with 507 additions and 0 deletions.
diff --git a/dressrecon/.DS_Store b/dressrecon/.DS_Store
diff --git a/dressrecon/css/app.css b/dressrecon/css/app.css
@@ -0,0 +1,159 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+a {
+  color: #1772d0;
+  text-decoration: none;
+}
+
+a:focus,
+a:hover {
+  color: #f09228;
+  text-decoration: none;
+}
+
+body,
+td,
+th,
+tr,
+p,
+a {
+  font-family: 'Lato', Verdana, Helvetica, sans-serif;
+  font-size: 14px
+}
+
+strong {
+  font-family: 'Lato', Verdana, Helvetica, sans-serif;
+  font-size: 14px;
+}
+
+heading {
+  font-family: 'Lato', Verdana, Helvetica, sans-serif;
+  font-size: 22px;
+}
+
+papertitle {
+  font-family: 'Lato', Verdana, Helvetica, sans-serif;
+  font-size: 14px;
+  font-weight: 700
+}
+
+name {
+  font-family: 'Lato', Verdana, Helvetica, sans-serif;
+  font-size: 32px;
+}
+
+.one {
+  width: 160px;
+  height: 160px;
+  position: relative;
+}
+
+.two {
+  width: 160px;
+  height: 160px;
+  position: absolute;
+  transition: opacity .2s ease-in-out;
+  -moz-transition: opacity .2s ease-in-out;
+  -webkit-transition: opacity .2s ease-in-out;
+}
+
+.fade {
+  transition: opacity .2s ease-in-out;
+  -moz-transition: opacity .2s ease-in-out;
+  -webkit-transition: opacity .2s ease-in-out;
+}
+
+span.highlight {
+  background-color: #ffffd0;
+}
+
+.CodeMirror {
+    font-size: .8em;
+    height: auto;
+}
+
+.CodeMirror-scroll {
+    overflow-y: hidden;
+    overflow-x: auto;
+}
+
+#header_img {
+    margin-top: 2em;
+    margin-bottom: 1em;
+}
+
+.list-inline {
+	list-style: none;
+	margin-left: -0.5em;
+	margin-right: -0.5em;
+	padding-left: 0;
+}
+
+.list-inline > li {
+	display: inline-block;
+	margin-left: 0.5em;
+	margin-right: 0.5em;
+}
diff --git a/dressrecon/css/bootstrap.min.css b/dressrecon/css/bootstrap.min.css
diff --git a/dressrecon/img/.DS_Store b/dressrecon/img/.DS_Store
diff --git a/dressrecon/img/baseline_comp/0008_01.mp4 b/dressrecon/img/baseline_comp/0008_01.mp4
diff --git a/dressrecon/img/baseline_comp/0047_01.mp4 b/dressrecon/img/baseline_comp/0047_01.mp4
diff --git a/dressrecon/img/baseline_comp/0047_12.mp4 b/dressrecon/img/baseline_comp/0047_12.mp4
diff --git a/dressrecon/img/baseline_comp/0102_02.mp4 b/dressrecon/img/baseline_comp/0102_02.mp4
diff --git a/dressrecon/img/baseline_comp/0113_06.mp4 b/dressrecon/img/baseline_comp/0113_06.mp4
diff --git a/dressrecon/img/baseline_comp/0121_02.mp4 b/dressrecon/img/baseline_comp/0121_02.mp4
diff --git a/dressrecon/img/baseline_comp/0123_02.mp4 b/dressrecon/img/baseline_comp/0123_02.mp4
diff --git a/dressrecon/img/baseline_comp/0128_04.mp4 b/dressrecon/img/baseline_comp/0128_04.mp4
diff --git a/dressrecon/img/baseline_comp/0133_07.mp4 b/dressrecon/img/baseline_comp/0133_07.mp4
diff --git a/dressrecon/img/baseline_comp/0152_01.mp4 b/dressrecon/img/baseline_comp/0152_01.mp4
diff --git a/dressrecon/img/baseline_comp/0166_04.mp4 b/dressrecon/img/baseline_comp/0166_04.mp4
diff --git a/dressrecon/img/baseline_comp/0188_02.mp4 b/dressrecon/img/baseline_comp/0188_02.mp4
diff --git a/dressrecon/img/baseline_comp/0206_04.mp4 b/dressrecon/img/baseline_comp/0206_04.mp4
diff --git a/dressrecon/img/baseline_comp/0239_01.mp4 b/dressrecon/img/baseline_comp/0239_01.mp4
diff --git a/dressrecon/img/bone_vis/0008_01.mp4 b/dressrecon/img/bone_vis/0008_01.mp4
diff --git a/dressrecon/img/bone_vis/0047_01.mp4 b/dressrecon/img/bone_vis/0047_01.mp4
diff --git a/dressrecon/img/bone_vis/0047_12.mp4 b/dressrecon/img/bone_vis/0047_12.mp4
diff --git a/dressrecon/img/bone_vis/0102_02.mp4 b/dressrecon/img/bone_vis/0102_02.mp4
diff --git a/dressrecon/img/bone_vis/0113_06.mp4 b/dressrecon/img/bone_vis/0113_06.mp4
diff --git a/dressrecon/img/bone_vis/0121_02.mp4 b/dressrecon/img/bone_vis/0121_02.mp4
diff --git a/dressrecon/img/bone_vis/0123_02.mp4 b/dressrecon/img/bone_vis/0123_02.mp4
diff --git a/dressrecon/img/bone_vis/0128_04.mp4 b/dressrecon/img/bone_vis/0128_04.mp4
diff --git a/dressrecon/img/bone_vis/0133_07.mp4 b/dressrecon/img/bone_vis/0133_07.mp4
diff --git a/dressrecon/img/bone_vis/0152_01.mp4 b/dressrecon/img/bone_vis/0152_01.mp4
diff --git a/dressrecon/img/bone_vis/0166_04.mp4 b/dressrecon/img/bone_vis/0166_04.mp4
diff --git a/dressrecon/img/bone_vis/0188_02.mp4 b/dressrecon/img/bone_vis/0188_02.mp4
diff --git a/dressrecon/img/bone_vis/0206_04.mp4 b/dressrecon/img/bone_vis/0206_04.mp4
diff --git a/dressrecon/img/bone_vis/0239_01.mp4 b/dressrecon/img/bone_vis/0239_01.mp4
diff --git a/dressrecon/index.html b/dressrecon/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+    <meta charset="UTF-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <title>DressRecon: Freeform 4D Human Reconstruction from Monocular Video</title>
+
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <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">
+
+    <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">
+            <h2 class="col-md-12 text-center">
+                DressRecon: Freeform 4D Human Reconstruction from Monocular Video </br>
+                <small>Jeff Tan, Gengshan Yang, Donglai Xiang, Shubham Tulsiani, Deva Ramanan</br></small>
+                <small>Carnegie Mellon University</small>
+            </h2>
+        </div>
+
+
+        <div class="row">
+            <div class="col-md-12">
+                <h3>Abstract</h3>
+                <p class="text-justify">
+                We present a method to reconstruct freeform objects, such as humans in loose clothing, from monocular videos in the wild. High-quality reconstructions in this setting typically require calibrated multi-view captures or personalized template scans, which are costly to collect at scale. We propose a monocular method that optimizes a consistent neural implicit body model that deforms over time, guided by image-based priors such as body pose and normals. Casually-captured videos are often hard to reconstruct as they have both large clothing deformation and large limb motion: to support this, we propose a video-specific articulated "bag-of-bones" deformation model that represents body and clothing deformation as two separate layers. This allows careful use of priors to affect one deformation type apart from the other: we encourage limb motion to follow a human body pose estimator and encourage both deformation types to be evenly distributed over the body. Crucial to reconstructing the high-fidelity geometry and deformations of clothing, we take advantage of off-the-shelf normal estimators and show how to supervise surface details when a deformation field is present. On datasets with highly dynamic clothing, DressRecon yields higher-fidelity 3D reconstructions than prior art.
+                </p>
+            </div>
+        </div>
+
+
+        <div class="row">
+            <div class="col-md-12">
+                <h3>Video Comparisons</h3>
+                <p class="text-justify">
+                We compare with several baselines on DNA-Rendering sequences with challenging clothing deformation. From left to right, we show (1) the input video or GT novel view, and 3D reconstructions from (2) DressRecon, (3) Vid2Avatar, (4) BANMo, and (5) RAC. From top to bottom, we show the (1) input-view geometry, as well as novel-view geometry at (2) 45-degree and (3) -45-degree offsets. DressRecon is able to capture challenging deformable structures with higher fidelity than prior art.
+                </p>
+                <video id="baseline_comp_0123_02" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0123_02.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0113_06" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0113_06.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0047_12" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0047_12.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0133_07" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0133_07.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0239_01" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0239_01.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0166_04" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0166_04.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0188_02" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0188_02.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0121_02" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0121_02.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0206_04" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0206_04.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0008_01" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0008_01.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0102_02" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0102_02.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0152_01" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0152_01.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0047_01" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0047_01.mp4" type="video/mp4" />
+                </video>
+                <video id="baseline_comp_0128_04" width="100%" autoplay loop muted>
+                  <source src="img/baseline_comp/0128_04.mp4" type="video/mp4" />
+                </video>
+            </div>
+        </div>
+
+
+        <div class="row">
+            <div class="col-md-12">
+                <h3>Hierarchical Gaussian Motion Fields</h3>
+                <p class="text-justify">
+                We visualize the optimized hierarchical Gaussian motion fields at the input view, on DNA-Rendering sequences with challenging clothing deformation. From left to right, we show (1) the final deformed shape with both clothing and body deformation (deform-*), (2) only clothing deformation with no body deformation (cloth-*), (3) only body deformation with no clothing deformation (body-*), and (4) the canonical shape with no deformation (canon-*). From top to bottom, we show (1) the output geometry, (2) Gaussian bones overlaid on top of the geometry, and (3) Gaussian bones, where body Gaussians are blue and clothing Gaussians are yellow. Body and clothing Gaussians are evenly distributed over the space, and are responsible for separately articulating the body and clothing.
+                </p>
+                <p class="text-justify">
+                Note: As the cameras in DNA-Rendering are stationary, we need to jump between dataset cameras to generate a monocular turntable video of the target, following the procedure in Sec. 4.1 of the paper.
+                </p>
+                <video id="bone_vis_0123_02" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0123_02.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0113_06" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0113_06.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0047_12" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0047_12.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0133_07" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0133_07.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0239_01" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0239_01.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0166_04" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0166_04.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0188_02" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0188_02.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0121_02" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0121_02.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0206_04" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0206_04.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0008_01" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0008_01.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0102_02" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0102_02.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0152_01" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0152_01.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0047_01" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0047_01.mp4" type="video/mp4" />
+                </video>
+                <video id="bone_vis_0128_04" width="100%" autoplay loop muted>
+                  <source src="img/bone_vis/0128_04.mp4" type="video/mp4" />
+                </video>
+            </div>
+        </div>
+
+
+        <div class="row">
+            <div class="col-md-12">
+                <h3>Acknowledgments</h3>
+                <p class="text-justify">
+                The website template was borrowed from <a href="http://jonbarron.info/">Jon Barron</a>.
+                </p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/dressrecon/js/app.js b/dressrecon/js/app.js
@@ -0,0 +1,40 @@
+
+$(document).ready(function() {
+    var editor = CodeMirror.fromTextArea(document.getElementById("bibtex"), {
+        lineNumbers: false,
+        lineWrapping: true,
+        readOnly:true
+    });
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    });
+
+
+// var frameNumber = 0, // start video at frame 0
+//     // lower numbers = faster playback
+//     playbackConst = 500, 
+//     // get page height from video duration
+//     setHeight = document.getElementById("main"), 
+//     // select video element         
+//     vid = document.getElementById('v0'); 
+//     // var vid = $('#v0')[0]; // jquery option
+
+
+
+
+// // Use requestAnimationFrame for smooth playback
+// function scrollPlay(){  
+//   var frameNumber  = window.pageYOffset/playbackConst;
+//   vid.currentTime  = frameNumber;
+//   window.requestAnimationFrame(scrollPlay);
+// console.log('scroll');
+// }
+
+// // dynamically set the page height according to video length
+// vid.addEventListener('loadedmetadata', function() {
+//   setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
+// });
+
+
+//     window.requestAnimationFrame(scrollPlay);
+});