add method

stevenlsw · Oct 5, 2023 · d1a9335 · d1a9335
1 parent b4af5c3
commit d1a9335
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -22,6 +22,13 @@
     gtag('config', 'G-PYVRSFMDRL');
   </script>
 
+  <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
+  <script type="text/javascript">google.load("jquery", "1.3.2");</script>
+  <script
+        type="module"
+        src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
+  ></script>
+
   <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
         rel="stylesheet">
 
@@ -178,6 +185,105 @@ <h2 class="title is-3">Video</h2>
 </section>
 
 
+<section class="section">
+  <div class="container is-max-desktop">
+    <div class="columns is-centered has-text-centered">
+      <div class="column">
+        <h2 class="title is-3">Contact Representation</h2>
+        <div class="content has-text-justified">
+          <p>
+            Object-centric <span style="color: rgb(125, 0, 255);font-weight: bolder;">ContactGen</span> consists of three maps, contact map, part map and direction map. 
+            All maps are defined on object points. Contact map represents the contact probability of the point. 
+            Part map indicate the hand part label in contact with the object point. 
+            Direction map records the direction of this point w.r.t. the hand part.
+          </p>
+        </div>
+
+        <div class="columns is-centered has-text-centered">
+          <div class="column">
+            <h2 class="title is-5">Contact Map</h2>
+            <div class="columns is-centered">
+              <div class="column content">
+                <video playsinline="" autoplay="" loop="" preload="" muted="" width="80%" style="border-radius:10px; ">
+                  <source src="static/videos/ho_cmap.mp4" type="video/mp4" />
+                </video>
+              </div>
+            </div>
+          </div>
+
+          <div class="column">
+            <h2 class="title is-5">Part Map</h2>
+            <div class="columns is-centered">
+              <div class="column content">
+                <video playsinline="" autoplay="" loop="" preload="" muted="" width="80%" style="border-radius:10px; ">
+                  <source src="static/videos/ho_part.mp4" type="video/mp4" />
+                </video>
+              </div>
+            </div>
+          </div>
+
+          <div class="column">
+            <h2 class="title is-5">Direction Map</h2>
+            <div class="columns is-centered">
+              <div class="column content">
+                <video playsinline="" autoplay="" loop="" preload="" muted="" width="80%" style="border-radius:10px; ">
+                  <source src="static/videos/ho_uv.mp4" type="video/mp4" />
+                </video>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+
+        <h2 class="title is-3">Generative Contact Modeling</h2>
+        <div class="content has-text-justified">
+          <p>
+            Conditioned on the input object point cloud, 
+            we decompose the joint distribution of <span style="color: rgb(125, 0, 255);font-weight: bolder;">ContactGen</span> into three conditional probabilities by a sequential CVAE.
+            The contact map is conditioned on object input; the part map is additionally conditioned on contact map; 
+            direction map additionally conditioned on part map. Each component is controlled by a latent code.
+          </p>
+
+          <div class="columns is-centered">
+            <video id="main" autoplay controls muted loop playsinline width="80%">
+              <source src="static/videos/framework.mp4" type="video/mp4" />
+            </video>
+          </div>
+
+        </div>
+        <br>
+
+        <h2 class="title is-3">Model-based contact solver</h2>
+
+        <div class="columns is-centered">
+          <div class="column has-text-justified is-two-fifths">
+            <p>
+              Given the sampled obejct-centric <span style="color: rgb(125, 0, 255);font-weight: bolder;">ContactGen</span> from the generative model, 
+              we decode it into the corresponding hand grasp. 
+              To achieve this, we convert the MANO model into a piecewise SDF model to enhance the compatibility with 
+              the proposed <span style="color: rgb(125, 0, 255);font-weight: bolder;">ContactGen</span> for grasp synthesis, 
+              formulate a model-based optimization to infer the pose and shape of the hand.
+            </p> 
+          </div>
+          <div class="column is-two-fifths">
+              <video id="main" autoplay controls muted loop playsinline width="50%">
+                <source src="static/videos/hand_model.mp4" type="video/mp4" />
+              </video>
+            <h2 class="title is-6">Piecewise hand SDF model</h2>
+          </div>
+        </div>
+
+    </div>
+  </div>
+
+
+</section>
+
+
+
+
+
 <section class="section" id="BibTeX">
   <div class="container is-max-desktop content">
     <h2 class="title">BibTeX</h2>

diff --git a/static/videos/framework.mp4 b/static/videos/framework.mp4
diff --git a/static/videos/hand_model.mp4 b/static/videos/hand_model.mp4
diff --git a/static/videos/ho_cmap.mp4 b/static/videos/ho_cmap.mp4
diff --git a/static/videos/ho_part.mp4 b/static/videos/ho_part.mp4
diff --git a/static/videos/ho_uv.mp4 b/static/videos/ho_uv.mp4