PageSourceSearch

https://silent-chen.github.io/AutoPartGen/

html silent-chen.github.io collected 2026-10-03 09:57:08 UTC 41,271 bytes, 801 lines download raw bytes

1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="description"
6        content="We introduce AutoPartGen, a pipeline that generates compositional 3D objects in an autoregressive manner. AutoPartGen can operate automatically or guided by 2D masks. We also show that AutoPartGen can be applied to scene and city generation.">
7  <meta name="keywords" content="3D generation, Generative model, Part decomposition, 3D vision">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  <title>AutoPartGen: Autoregressive 3D Part Generation and Discovery</title>
10
11  <meta property="og:image" content=""/>
12  <meta property="og:title" content="AutoPartGen: Autoregressive 3D Part Generation and Discovery" />
13  <meta property="og:description" content="We introduce AutoPartGen, a pipeline that generates compositional 3D objects in an autoregressive manner. AutoPartGen can operate automatically or guided by 2D masks. We also show that AutoPartGen can be applied to scene and city generation." />
14  <!-- Twitter automatically scrapes this. Go to https://cards-dev.twitter.com/validator?
15      if you update and want to force Twitter to re-scrape. -->
16  <meta property="twitter:card"          content="summary" />
17  <meta property="twitter:title"         content="AutoPartGen: Autoregressive 3D Part Generation and Discovery" />
18  <meta property="twitter:description"   content="We introduce AutoPartGen, a pipeline that generates compositional 3D objects in an autoregressive manner. AutoPartGen can operate automatically or guided by 2D masks. We also show that AutoPartGen can be applied to scene and city generation." />
19  <meta property="twitter:image"         content="https://huggingface.co/datasets/silentchen/AutoPartGen-projectpage-assets/resolve/main/overview.png" />
20
21  <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 66 bytes, lines 21-22
21
22  <script async src="https://www.googletagmanager.com/gtag/js?id=
22G-VFNFH9CKNX
vendor: 14 bytes, lines 22-23
22"></script>
23  
23<script>
24    
vendor: 155 bytes, lines 24-32
24window.dataLayer = window.dataLayer || [];
25
26    function gtag() {
27      dataLayer.push(arguments);
28    }
29
30    gtag('js', new Date());
31
32    gtag('config', '
32G-VFNFH9CKNX
vendor: 6 bytes, lines 32-33
32');
33  
33</script>
33
34  
34<script
35      type="module"
36      src="https://gradio.s3-us-west-2.amazonaws.com/4.8.0/gradio.js">
37
38  </script>
38
39  
39<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
39
40
41  <!-- Both meshes now use Three.js -->
42
43  
43<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
43
44  
44<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>
44
45  
45<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>
45
46  
47  <!-- Custom JavaScript Files -->
48  
48<script src="js/multi-viewer-manager.js"></script>
48
49  
50  <!-- Custom CSS Files -->
51  <link rel="stylesheet" href="css/explode-slider.css">
52  <link rel="stylesheet" href="css/comparison-slider.css">
53  <link rel="stylesheet" href="css/mesh-viewer.css">
54  <link rel="stylesheet" href="css/gallery.css">
55  <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
56        rel="stylesheet">
57
58  <link rel="stylesheet" href="./static/css/bulma.min.css">
59  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
60  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
61  <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
62  <link rel="stylesheet"
63        href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
64  <link rel="stylesheet" href="./static/css/index.css">
65  <link rel="icon" href="https://huggingface.co/datasets/silentchen/AutoPartGen-projectpage-assets/resolve/main/rocket.png">
66
67  
67<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
67
68  
68<script defer src="./static/js/fontawesome.all.min.js"></script>
68
69  
69<script src="./static/js/bulma-carousel.min.js"></script>
69
70  
70<script src="./static/js/bulma-slider.min.js"></script>
70
71  <!-- 
71<script src="./static/js/index.js"></script>
71 -->
72</head>
73<body>
74
75<nav class="navbar" role="navigation" aria-label="main navigation">
76  <div class="navbar-brand">
77    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
78      <span aria-hidden="true"></span>
79      <span aria-hidden="true"></span>
80      <span aria-hidden="true"></span>
81    </a>
82  </div>
83  <div class="navbar-menu">
84    <div class="navbar-start" style="flex-grow: 1; justify-content: center;">
85      <a class="navbar-item" href="https://silent-chen.github.io">
86      <span class="icon">
87          <i class="fas fa-home"></i>
88      </span>
89      </a>
90      <div class="navbar-item has-dropdown is-hoverable">
91        <a class="navbar-link">
92          More Research
93        </a>
94        <div class="navbar-dropdown">
95          <a class="navbar-item" href="https://silent-chen.github.io/PartGen/">
96            PartGen
97          </a>
98          <a class="navbar-item" href="https://silent-chen.github.io/DGE/">
99            DGE
100          </a>
101          <a class="navbar-item" href="https://silent-chen.github.io/Shap-Editor/">
102            Shap-Editor
103          </a>
104          <a class="navbar-item" href="https://silent-chen.github.io/layout-guidance">
105            Layout-guidance
106          </a>
107        </div>
108      </div>
109    </div>
110
111  </div>
112</nav>
113
114<section class="section" style="padding:0rem">
115  <div class="hero-body" style="padding:0rem">
116    <div class="container is-max-desktop" style="padding: 25px 30px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
117      <div class="columns is-centered">
118        <div class="column has-text-centered">
119          <h1 class="title is-3 publication-title" style="font-size: 2.2rem;"> AutoPartGen: Autoregressive 3D Part <br> Generation and Discovery</h1>
120          <div class="is-size-5 publication-authors">
121            <span class="author-block">
122              <a href="https://silent-chen.github.io">Minghao Chen</a><sup>1,2</sup>,
123            </span>
124            <span class="author-block"></span>
125              <a href="https://jytime.github.io/">Jianyuan Wang</a><sup>1,2</sup>,
126            </span>
127            <span class="author-block">
128              <a href="https://www.shapovalov.ro/">Roman Shapovalov</a><sup>2</sup>,
129            </span>
130            <span class="author-block"></span>
131              <a href="https://www.tmonnier.com/">Tom Monnier</a><sup>2</sup>
132            </span>
133            <br>
134            <span class="author-block"></span>
135              <a href="https://hyblue.github.io/">Hyunyoung Jung</a><sup>2</sup>,
136            </span>
137            <span class="author-block"></span>
138              <a href="https://wdilin.github.io/">Dilin Wang</a><sup>2</sup>,
139            </span>
140            <span class="author-block"></span>
141              <a href="https://scholar.google.com/citations?user=8KF99lYAAAAJ&hl=en">Rakesh Ranjan</a><sup>2</sup>,
142            </span>
143            <span class="author-block">
144              <a href="https://scholar.google.de/citations?user=n9nXAPcAAAAJ&hl=en">Iro Laina</a><sup>1</sup>,
145            </span>
146            <span class="author-block">
147              <a href="https://www.robots.ox.ac.uk/~vedaldi/">Andrea Vedaldi</a><sup>1,2</sup>
148            </span>
149          </div>
150
151          <div class="is-size-5 publication-authors">
152            <span class="author-block"><sup>1</sup>Visual Geometry Group, University of Oxford &nbsp;&nbsp;&nbsp;</span> 
153            <span class="author-block"><sup>2</sup>Meta AI</span>
154          </div>
155
156          <div class="column has-text-centered">
157            <div class="publication-links">
158              <!-- PDF Link. -->
159              <span class="link-block">
160                <a href="https://arxiv.org/abs/2507.13346"
161                   class="external-link button is-normal is-rounded is-dark">
162                  <span class="icon">
163                      <i class="fas fa-file-pdf"></i>
164                  </span>
165                  <span>Paper</span>
166                </a>
167              </span>
168              <span class="link-block">
169                <a href="https://github.com/facebookresearch/autopartgen"
170                   class="external-link button is-normal is-rounded is-dark">
171                  <span class="icon">
172                      <i class="fab fa-github"></i>
173                  </span>
174                  <span>Code</span>
175                  </a>
176              </span>
177              <span class="link-block">
178                <a href="https://huggingface.co/facebook/autopartgen"
179                   class="external-link button is-normal is-rounded is-dark">
180                  <span class="icon">
181                      <i class="fas fa-cube"></i>
182                  </span>
183                  <span>Model</span>
184                </a>
185              </span>
186              <br>
187              <br>
188              <br>
189            <video controls preload="metadata" playsinline>
190              <source src="./static/assets/video.mp4" type="video/mp4">
191            </video> <br>
192            <h2 class="subtitle">
193              <b>tl;dr:</b> We introduce <b>AutoPartGen</b>, a pipeline that generates compositional 3D objects in an autoregressive manner. AutoPartGen can operate automatically or guided by 2D masks. We also show that AutoPartGen can be applied to scene and city generation.
194            </h2>
195            </div>
196          </div>
197        </div>
198      </div>
199    </div>
200  </div>
201</section>
202
203
204<section class="section" style="padding:0rem">
205  <div class="container is-max-desktop" style="padding: 25px 50px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
206
207    <!-- Abstract. -->
208    <div class="columns is-centered has-text-centered" >
209      <div class="column is-full-width">
210        <h2 class="title is-3">Abstract</h2>
211        <div class="content has-text-justified">
212          <p>
213            We introduce AutoPartGen, a model that generates objects composed of 3D parts in an autoregressive manner. This model can take as input an image of an object, 2D masks of the object's parts, or an existing 3D object, and generate a corresponding compositional 3D reconstruction. Our approach builds upon 3DShape2VecSet, a recent latent 3D representation with powerful geometric expressiveness. We observe that this latent space exhibits strong compositional properties, making it particularly well-suited for part-based generation tasks. Specifically, AutoPartGen generates object parts autoregressively, predicting one part at a time while conditioning on previously generated parts and additional inputs, such as 2D images, masks, or 3D objects. This process continues until the model decides that all parts have been generated, thus determining automatically the type and number of parts. The resulting parts can be seamlessly assembled into coherent objects or scenes without requiring additional optimization. We evaluate both the overall 3D generation capabilities and the part-level generation quality of AutoPartGen, demonstrating that it achieves state-of-the-art performance in 3D part generation.
214          </p>
215        </div>
216    </div>
217    <!--/ Abstract. -->
218  </div>
219  </div>
220</section>
221
222
223<section class="section" style="padding:0rem">
224  <div class="container is-max-desktop" style="padding: 25px 50px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
225    <div class="columns is-centered">
226      <div class="column is-full-width has-text-centered">
227        <div class="content has-text-centered">
228        <h2 class="title is-3">Overview</h2>
229        <div class="content has-text-justified">
230          <p>
231            AutoPartGen generates parts autoregressively.
232            At each step, a 3D latent diffusion model generate the next part, conditioned on the previously generated parts \( z^{(1,\dots,k)} \), the overall object \( \tilde z \), and, optionally, an image \(I\) of the object and an image \( J^{(k)} \) of the part.
233            The latent representation uses 3DShape2VecSet and the diffusion model is a DiT.
234          </p>
235        </div>
236        <div class="content has-text-centered">
237          <img src="https://huggingface.co/datasets/silentchen/AutoPartGen-projectpage-assets/resolve/main/overview.png" width="100%" alt="overview"> <br>
238        </div>
239        </div>
240        </div>
241    </div>
242  </div>
243</section>
244
245
246<section class="section" style="padding:0rem" id="city-scene">
247  <div class="container is-max-desktop" style="padding: 25px 50px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
248    <div class="columns is-centered">
249      <div class="column is-full-width has-text-centered">
250        <div class="content has-text-centered">
251        <h2 class="title is-3">City Generation</h2>
252          <div class="content has-text-centered">
253            <p>
254              Select a city from the gallery below to view the mesh.
255            </p>
256          </div>
257          
258          <!-- Explode Control Slider -->
259          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
260            <div class="column is-half">
261              <div class="field">
262                <div class="control">
263                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
264                    <div class="level-left">
265                      <span class="level-item">Combined</span>
266                    </div>
267                    <div class="level-right">
268                      <span class="level-item">Exploded</span>
269                    </div>
270                  </div>
271                  <input id="city-scene-explode-slider" type="range" min="0" max="100" value="0" 
272                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
273                </div>
274              </div>
275            </div>
276          </div>
277          
278          <!-- Submesh Percentage Slider -->
279          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
280            <div class="column is-half">
281              <div class="field">
282                <div class="control">
283                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
284                    <div class="level-left">
285                      <span class="level-item">Empty</span>
286                    </div>
287                    <div class="level-right">
288                      <span class="level-item">Complete</span>
289                    </div>
290                  </div>
291                  <input id="city-scene-percentage-slider" type="range" min="0" max="100" value="0" 
292                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
293                </div>
294              </div>
295            </div>
296          </div>
297          
298          <!-- Comparison Slider Container -->
299          <div class="comparison-container" style="position: relative; width: 100%; height: 450px; margin: 0 auto; max-width: 800px; border-radius: 10px;">
300            
301            <!-- Left Mesh Viewer -->
302            <div id="city-scene-left-container" class="mesh-container" style="position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
303              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
304                <h4 class="title is-6" style="margin: 0;">Combined</h4>
305              </div>
306              <div id="city-scene-left-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
307                <!-- Three.js canvas will be inserted here -->
308              </div>
309            </div>
310            
311            <!-- Right Mesh Viewer -->
312            <div id="city-scene-right-container" class="mesh-container" style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
313              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
314                <h4 class="title is-6" style="margin: 0;">Exploded</h4>
315              </div>
316              <div id="city-scene-right-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
317                <!-- Three.js canvas will be inserted here -->
318              </div>
319            </div>
320            
321            <!-- Comparison Slider -->
322            <div id="city-scene-comparison-slider" style="position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #3498db; cursor: ew-resize; z-index: 10; transform: translateX(-2px);">
323              <div class="handle" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #3498db; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); border: 2px solid white;">
324                <div style="width: 6px; height: 6px; background: white; border-radius: 50%;"></div>
325              </div>
326            </div>
327            
328          </div>
329          
330          <!-- Image Gallery -->
331          <div class="content has-text-centered" style="margin-top: 2rem;">            
332            <!-- Gallery Container -->
333            <div class="gallery-container" style="position: relative; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box;">
334              
335              <!-- Static Gallery -->
336              <div class="image-gallery" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1rem; margin: 0 auto; width: 100%;">
337                <!-- Gallery items will be populated by JavaScript -->
338              </div>
339            </div>
340          </div>
341          <div class="content has-text-centered">
342            <!-- Selection Instructions -->
343            <div class="column is-full-width has-text-centered" style="background-color: #e8f4f8; border-radius: 8px; border-left: 4px solid #3498db;">
344              <p style="margin: 0; font-size: 0.9rem; color: #2c3e50;">
345                <strong>Instructions:</strong> Click on any image to load the corresponding mesh pair. 
346                <br><strong>Explode:</strong> Use the explode slider to separate parts in the right mesh.
347                <br><strong>Autoregressive part generation:</strong> Use the autoregressive slider to control the generation process of the parts.
348              </p>
349            </div>
350          </div>
351        </div>
352        </div>
353    </div>
354  </div>
355</section>
356
357
358<section class="section" style="padding:0rem" id="scene-generation">
359  <div class="container is-max-desktop" style="padding: 25px 50px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
360    <div class="columns is-centered">
361      <div class="column is-full-width has-text-centered">
362        <div class="content has-text-centered">
363        <h2 class="title is-3">Scene Generation</h2>
364          <div class="content has-text-centered">
365            <p>
366              Select a scene from the gallery below to view the mesh.
367            </p>
368          </div>
369          
370          <!-- Explode Control Slider -->
371          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
372            <div class="column is-half">
373              <div class="field">
374                <div class="control">
375                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
376                    <div class="level-left">
377                      <span class="level-item">Combined</span>
378                    </div>
379                    <div class="level-right">
380                      <span class="level-item">Exploded</span>
381                    </div>
382                  </div>
383                  <input id="explode-slider" type="range" min="0" max="100" value="0" 
384                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
385                </div>
386              </div>
387            </div>
388          </div>
389          
390          <!-- Submesh Percentage Slider -->
391          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
392            <div class="column is-half">
393              <div class="field">
394                <div class="control">
395                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
396                    <div class="level-left">
397                      <span class="level-item">Empty</span>
398                    </div>
399                    <div class="level-right">
400                      <span class="level-item">Complete</span>
401                    </div>
402                  </div>
403                  <input id="scene-generation-percentage-slider" type="range" min="0" max="100" value="100" 
404                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
405                </div>
406              </div>
407            </div>
408          </div>
409          
410          <!-- Comparison Slider Container -->
411          <div class="comparison-container" style="position: relative; width: 100%; height: 450px; margin: 0 auto; max-width: 800px; border-radius: 10px;">
412            
413            <!-- Left Mesh Viewer -->
414            <div id="left-container" class="mesh-container" style="position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
415              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
416                <h4 class="title is-6" style="margin: 0;">Combined</h4>
417              </div>
418              <div id="left-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
419                <!-- Three.js canvas will be inserted here -->
420              </div>
421            </div>
422            
423            <!-- Right Mesh Viewer -->
424            <div id="right-container" class="mesh-container" style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
425              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
426                <h4 class="title is-6" style="margin: 0;">Exploded</h4>
427              </div>
428              <div id="right-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
429                <!-- Three.js canvas will be inserted here -->
430              </div>
431            </div>
432            
433            <!-- Comparison Slider -->
434            <div id="comparison-slider" style="position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #3498db; cursor: ew-resize; z-index: 10; transform: translateX(-2px);">
435              <div class="handle" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #3498db; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); border: 2px solid white;">
436                <div style="width: 6px; height: 6px; background: white; border-radius: 50%;"></div>
437              </div>
438            </div>
439            
440          </div>
441          
442          <!-- Image Gallery -->
443          <div class="content has-text-centered" style="margin-top: 2rem;">            
444            <!-- Gallery Container -->
445            <div class="gallery-container" style="position: relative; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box;">
446              
447              <!-- Static Gallery -->
448              <div class="image-gallery" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1rem; margin: 0 auto; width: 100%;">
449
450            </div>
451          </div>
452          
453        </div>
454        </div>
455    </div>
456  </div>
457</section>
458
459
460<section class="section" style="padding:0rem" id="image-to-parts">
461  <div class="container is-max-desktop" style="padding: 25px 50px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
462    <div class="columns is-centered">
463      <div class="column is-full-width has-text-centered">
464        <div class="content has-text-centered">
465        <h2 class="title is-3">Image to Parts</h2>
466          <div class="content has-text-centered">
467            <p>
468              Select images from the gallery below to compare Combined and exploded meshes.
469            </p>
470          </div>
471          
472          <!-- Explode Control Slider -->
473          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
474            <div class="column is-half">
475              <div class="field">
476                <div class="control">
477                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
478                    <div class="level-left">
479                      <span class="level-item">Combined</span>
480                    </div>
481                    <div class="level-right">
482                      <span class="level-item">Exploded</span>
483                    </div>
484                  </div>
485                  <input id="image-to-parts-explode-slider" type="range" min="0" max="100" value="0" 
486                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
487                </div>
488              </div>
489            </div>
490          </div>
491          
492          <!-- Submesh Percentage Slider -->
493          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
494            <div class="column is-half">
495              <div class="field">
496                <div class="control">
497                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
498                    <div class="level-left">
499                      <span class="level-item">Empty</span>
500                    </div>
501                    <div class="level-right">
502                      <span class="level-item">Complete</span>
503                    </div>
504                  </div>
505                  <input id="image-to-parts-percentage-slider" type="range" min="0" max="100" value="100" 
506                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
507                </div>
508              </div>
509            </div>
510          </div>
511          
512          <!-- Comparison Slider Container -->
513          <div class="comparison-container" style="position: relative; width: 100%; height: 450px; margin: 0 auto; max-width: 800px; border-radius: 10px;">
514            
515            <!-- Left Mesh Viewer -->
516            <div id="image-to-parts-left-container" class="mesh-container" style="position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
517              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
518                <h4 class="title is-6" style="margin: 0;">Combined</h4>
519              </div>
520              <div id="image-to-parts-left-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
521                <!-- Three.js canvas will be inserted here -->
522              </div>
523            </div>
524            
525            <!-- Right Mesh Viewer -->
526            <div id="image-to-parts-right-container" class="mesh-container" style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
527              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
528                <h4 class="title is-6" style="margin: 0;">Exploded</h4>
529              </div>
530              <div id="image-to-parts-right-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
531                <!-- Three.js canvas will be inserted here -->
532              </div>
533            </div>
534            
535            <!-- Comparison Slider -->
536            <div id="image-to-parts-comparison-slider" style="position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #3498db; cursor: ew-resize; z-index: 10; transform: translateX(-2px);">
537              <div class="handle" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #3498db; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); border: 2px solid white;">
538                <div style="width: 6px; height: 6px; background: white; border-radius: 50%;"></div>
539              </div>
540            </div>
541            
542          </div>
543          
544          <!-- Image Gallery -->
545          <div class="content has-text-centered" style="margin-top: 2rem;">            
546            <!-- Gallery Container -->
547            <div class="gallery-container" style="position: relative; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box;">
548              
549              <!-- Static Gallery -->
550              <div class="image-gallery" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1rem; margin: 0 auto; width: 100%;">
551                <!-- Gallery items will be populated by JavaScript -->
552              </div>
553            </div>
554          </div>
555        </div>
556        </div>
557    </div>
558  </div>
559</section>
560
561
562<section class="section" style="padding:0rem" id="object-to-parts">
563  <div class="container is-max-desktop" style="padding: 25px 50px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
564    <div class="columns is-centered">
565      <div class="column is-full-width has-text-centered">
566        <div class="content has-text-centered">
567        <h2 class="title is-3">Object to Parts</h2>
568          <div class="content has-text-centered">
569            <p>
570              Select an object from the gallery below to compare combined and exploded meshes.
571            </p>
572          </div>
573          
574          <!-- Explode Control Slider -->
575          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
576            <div class="column is-half">
577              <div class="field">
578                <div class="control">
579                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
580                    <div class="level-left">
581                      <span class="level-item">Combined</span>
582                    </div>
583                    <div class="level-right">
584                      <span class="level-item">Exploded</span>
585                    </div>
586                  </div>
587                  <input id="explode-slider" type="range" min="0" max="100" value="0" 
588                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
589                </div>
590              </div>
591            </div>
592          </div>
593          
594          <!-- Submesh Percentage Slider -->
595          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
596            <div class="column is-half">
597              <div class="field">
598                <div class="control">
599                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
600                    <div class="level-left">
601                      <span class="level-item">Empty</span>
602                    </div>
603                    <div class="level-right">
604                      <span class="level-item">Complete</span>
605                    </div>
606                  </div>
607                  <input id="object-to-parts-percentage-slider" type="range" min="0" max="100" value="100" 
608                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
609                </div>
610              </div>
611            </div>
612          </div>
613          
614          <!-- Comparison Slider Container -->
615          <div class="comparison-container" style="position: relative; width: 100%; height: 450px; margin: 0 auto; max-width: 800px; border-radius: 10px;">
616            
617            <!-- Left Mesh Viewer -->
618            <div id="left-container" class="mesh-container" style="position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
619              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
620                <h4 class="title is-6" style="margin: 0;">Combined</h4>
621              </div>
622              <div id="left-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
623                <!-- Three.js canvas will be inserted here -->
624              </div>
625            </div>
626            
627            <!-- Right Mesh Viewer -->
628            <div id="right-container" class="mesh-container" style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
629              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
630                <h4 class="title is-6" style="margin: 0;">Exploded</h4>
631              </div>
632              <div id="right-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
633                <!-- Three.js canvas will be inserted here -->
634              </div>
635            </div>
636            
637            <!-- Comparison Slider -->
638            <div id="comparison-slider" style="position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #3498db; cursor: ew-resize; z-index: 10; transform: translateX(-2px);">
639              <div class="handle" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #3498db; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); border: 2px solid white;">
640                <div style="width: 6px; height: 6px; background: white; border-radius: 50%;"></div>
641              </div>
642            </div>
643            
644          </div>
645          
646          <!-- Image Gallery -->
647          <div class="content has-text-centered" style="margin-top: 2rem;">            
648            <!-- Gallery Container -->
649            <div class="gallery-container" style="position: relative; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box;">
650              
651              <!-- Static Gallery -->
652              <div class="image-gallery" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1rem; margin: 0 auto; width: 100%;">
653
654            </div>
655          </div>
656          
657        </div>
658        </div>
659    </div>
660  </div>
661</section>
662
663
664
665<section class="section" style="padding:0rem" id="mask-to-parts">
666  <div class="container is-max-desktop" style="padding: 25px 50px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
667    <div class="columns is-centered">
668      <div class="column is-full-width has-text-centered">
669        <div class="content has-text-centered">
670        <h2 class="title is-3">Mask to Parts</h2>
671          <div class="content has-text-centered">
672            <p>
673              Select a image and mask pair from the gallery below to compare combined and exploded meshes.
674            </p>
675          </div>
676          
677          <!-- Explode Control Slider -->
678          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
679            <div class="column is-half">
680              <div class="field">
681                <div class="control">
682                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
683                    <div class="level-left">
684                      <span class="level-item">Combined</span>
685                    </div>
686                    <div class="level-right">
687                      <span class="level-item">Exploded</span>
688                    </div>
689                  </div>
690                  <input id="explode-slider" type="range" min="0" max="100" value="0" 
691                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
692                </div>
693              </div>
694            </div>
695          </div>
696          
697          <!-- Submesh Percentage Slider -->
698          <div class="columns is-centered" style="margin-bottom: 0.5rem;">
699            <div class="column is-half">
700              <div class="field">
701                <div class="control">
702                  <div class="level" style="font-size: 0.9rem; margin-bottom: -0.3rem;">
703                    <div class="level-left">
704                      <span class="level-item">Empty</span>
705                    </div>
706                    <div class="level-right">
707                      <span class="level-item">Complete</span>
708                    </div>
709                  </div>
710                  <input id="object-to-parts-percentage-slider" type="range" min="0" max="100" value="100" 
711                         style="width: 100%; height: 8px; background: #ddd; border-radius: 4px; outline: none; -webkit-appearance: none;">
712                </div>
713              </div>
714            </div>
715          </div>
716          
717          <!-- Comparison Slider Container -->
718          <div class="comparison-container" style="position: relative; width: 100%; height: 450px; margin: 0 auto; max-width: 800px; border-radius: 10px;">
719            
720            <!-- Left Mesh Viewer -->
721            <div id="left-container" class="mesh-container" style="position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
722              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
723                <h4 class="title is-6" style="margin: 0;">Combined</h4>
724              </div>
725              <div id="left-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
726                <!-- Three.js canvas will be inserted here -->
727              </div>
728            </div>
729            
730            <!-- Right Mesh Viewer -->
731            <div id="right-container" class="mesh-container" style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1;">
732              <div style="padding: 10px; background: rgba(255,255,255,0.9); text-align: center;">
733                <h4 class="title is-6" style="margin: 0;">Exploded</h4>
734              </div>
735              <div id="right-mesh" style="width: 100%; height: calc(100% - 40px); background: linear-gradient(#ffffff, #ada996);">
736                <!-- Three.js canvas will be inserted here -->
737              </div>
738            </div>
739            
740            <!-- Comparison Slider -->
741            <div id="comparison-slider" style="position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #3498db; cursor: ew-resize; z-index: 10; transform: translateX(-2px);">
742              <div class="handle" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #3498db; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); border: 2px solid white;">
743                <div style="width: 6px; height: 6px; background: white; border-radius: 50%;"></div>
744              </div>
745            </div>
746            
747          </div>
748          
749          <!-- Image Gallery -->
750          <div class="content has-text-centered" style="margin-top: 2rem;">            
751            <!-- Gallery Container -->
752            <div class="gallery-container" style="position: relative; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box;">
753              
754              <!-- Static Gallery -->
755              <div class="image-gallery" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1rem; margin: 0 auto; width: 100%;">
756            
757            </div>
758          </div>
759          
760        </div>
761        </div>
762    </div>
763  </div>
764</section>
765
766
767
768
769
770<section class="section" id="BibTeX" style="padding:0rem">
771  <div class="container is-max-desktop content" style="padding: 25px 50px; margin: 25px auto; box-shadow: 0px 0px 10px #999; border-radius: 15px;">
772    <h2 class="title">BibTeX</h2>
773    <pre><code>@article{chen2025autopartgen,
774  title={AutoPartGen: Autoregressive 3D Part Generation and Discovery},
775  author={Minghao Chen and Jianyuan Wang and Roman Shapovalov and Tom Monnier and Hyunyoung Jung and Dilin Wang and Rakesh Ranjan and Iro Laina and Andrea Vedaldi},
776  journal={arXiv preprint arXiv:2507.13346},
777  year={2025}
778}
779    </code></pre>
780  </div>
781</section>
782
783
784<footer class="footer">
785  <div class="container">
786    <div class="columns is-centered">
787      <div class="column is-8">
788        <div class="content">
789          <p>
790            This webpage template is adapted from <a
791            href="https://github.com/nerfies/nerfies.github.io">Nerfies</a> and <a
792            href="https://github.com/OmniPart/OmniPart.github.io">OmniPart</a> under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0 License</a>.
793          </p>
794        </div>
795      </div>
796    </div>
797  </div>
798</footer>
799
800</body>
801</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.