PageSourceSearch

https://dave.ml/layoutlearning/

html dave.ml collected 2026-09-25 15:25:34 UTC 99,586 bytes, 2,433 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head>
vendor: 68 bytes, lines 3-4
3
4    <script async src="https://www.googletagmanager.com/gtag/js?id=
4G-ZWTD5V0L2H
vendor: 16 bytes, lines 4-5
4"></script>
5    
5<script>
6        
vendor: 177 bytes, lines 6-14
6window.dataLayer = window.dataLayer || [];
7
8        function gtag() {
9            dataLayer.push(arguments);
10        }
11
12        gtag('js', new Date());
13
14        gtag('config', '
14G-ZWTD5V0L2H
vendor: 8 bytes, lines 14-15
14');
15    
15</script>
15
16    <meta charset="UTF-8">
17    <meta name="description" content="Disentangled 3D Scene Generation with Layout Learning">
18    <!--    <link rel="stylesheet"-->
19    <!--          href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"/>-->
20    <meta name="viewport"
21          content="width=device-width,initial-scale=1.0">
22    <meta http-equiv="X-UA-Compatible" content="ie=edge">
23
24
25    <!-- Primary Meta Tags -->
26    <title>Disentangled 3D Scene Generation with Layout Learning</title>
27    <meta name="title" content="Disentangled 3D Scene Generation with Layout Learning">
28    <meta name="description"
29          content="Text-to-3D generation of scenes decomposed automatically into objects, using only a pretrained diffusion model.">
30
31    <!-- Open Graph / Facebook -->
32    <meta property="og:type" content="website">
33    <meta property="og:url" content="https://dave.ml/layoutlearning/">
34    <meta property="og:title" content="Disentangled 3D Scene Generation with Layout Learning">
35    <meta property="og:description"
36          content="Text-to-3D generation of scenes decomposed automatically into objects, using only a pretrained diffusion model.">
37    <meta property="og:image" content="https://dave.ml/layoutlearning/static/layout_preview_.jpg">
38
39    <!-- Twitter -->
40    <meta property="twitter:card" content="summary_large_image">
41    <meta property="twitter:url" content="https://dave.ml/layoutlearning/">
42    <meta property="twitter:title" content="Disentangled 3D Scene Generation with Layout Learning">
43    <meta property="twitter:description"
44          content="Text-to-3D generation of scenes decomposed automatically into objects, using only a pretrained diffusion model.">
45    <meta property="twitter:image" content="https://dave.ml/layoutlearning/static/layout_preview_.jpg">
46
47    <!--    <link rel="preconnect" href="https://fonts.googleapis.com">-->
48    <!--    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>-->
49    <!--    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">-->
50    <!--    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap"-->
51    <!--          rel="stylesheet">-->
52    <!--    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">-->
53    <!--    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap"-->
54    <!--          rel="stylesheet">-->
55
56    <!--    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">-->
57
58
59    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
60    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
61    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
62    <link rel="manifest" href="static/site.mp4anifest">
63    <link rel="mask-icon" href="static/safari-pinned-tab.svg" color="#00a300">
64    <meta name="msapplication-TileColor" content="#00a300">
65    <meta name="theme-color" content="#ffffff">
66
67
68    <link rel="stylesheet" href="/fonts/google_fonts.css">
69    <!--    <meta name="theme-color" content="#2032ac">-->
70    <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
71           integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
72     
72<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
73             integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
74             crossorigin="anonymous"></script>
74-->
75    <!--    
75<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
75-->
76    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
77          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
78    
78<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
79            integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
80            crossorigin="anonymous"></script>
80
81    <!--    
81<script src="https://kit.fontawesome.com/bfb9ec991a.js" crossorigin="anonymous"></script>
81-->
82    
82<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
82
83    <!-- Latest compiled and minified CSS -->
84
85    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
86    <!--
86<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/defaults-*.min.js"></script>
86-->
87    <!--    <link rel="stylesheet" href="static/wordart.css">-->
88
89    <style>
90        /** {*/
91        /*    font-family: 'Google Sans', sans-serif !important;*/
92        /*    letter-spacing: -0.02em !important;*/
93        /*}*/
94        h2, h3, h4, h5 {
95            letter-spacing: -0.02em !important;
96        }
97
98        b {
99            font-weight: 600;
100        }
101
102        .subcaptions code {
103            font-size: 0.95em;
104            margin-left: -2px;
105            /*padding: 0 2px;*/
106        }
107
108        .select_prompt {
109            /*margin-top: .75em !important;*/
110            line-height: 2em;
111            /*margin-bottom: .75em !important;*/
112        }
113
114        .select_prompt > div {
115            display: inline;
116            /*white-space: nowrap;*/
117            transition: color, background-color, transform 0.2s;
118        }
119
120        .select_prompt > div:hover {
121            /*transform: scale(1.2);*/
122        }
123
124        .select_prompt code {
125            /*background-color: #f0f0f0;*/
126            border-radius: 5px;
127            border: #555 1px solid;
128            padding: 0.2em 0.35em;
129            letter-spacing: -0.01em !important;
130            position: relative;
131            cursor: pointer;
132            -webkit-box-decoration-break: clone;
133            box-decoration-break: clone;
134            --img-bgc: #333;
135            transition: all 0.3s;
136            --img-txc: #fff;
137            font-size: 0.9em;
138            font-weight: 400;
139            color: #555;
140        }
141
142        .select_prompt code:hover em {
143            /*background-color: #e0e0e0;*/
144            /*text-decoration: underline;*/
145        }
146
147        .select_prompt code:hover {
148            background-color: #e0e0e0;
149            /*font-weight: bold;*/
150            /*transform: scale(1.2) !important;*/
151        }
152
153        .select_prompt div:nth-child(even) code {
154            /*background-color: #f7f7f7;*/
155            /*color: #fff;*/
156        }
157
158        .select_prompt div:not(:last-child) {
159            margin-right: 2px;
160        }
161
162        .select_prompt code.selected {
163            background-color: var(--img-bgc) !important;
164            color: var(--img-txc) !important;
165            font-weight: 600;
166            /*transform: scale(1.1);*/
167        }
168
169        .select_prompt_vid .selected {
170            /*color: #fff !important;*/
171            /*background-color: #333 !important;*/
172            border: 2px solid rgb(17, 17, 17);
173        }
174
175
176        img {
177            max-width: 100%;
178        }
179
180
181        .material-symbols-rounded {
182            font-variation-settings: 'FILL' 1,
183            'wght' 400,
184            'GRAD' 0,
185            'opsz' 48;
186            display: none !important;
187        }
188
189
190        /*@font-face {*/
191        /*    font-family: 'Code';*/
192        /*    src: url('/fonts/IBMPlexMono-Light.ttf');*/
193        /*}*/
194        .video_flex {
195            display: flex;
196            column-gap: 1em;
197            row-gap: 0.5em;
198            flex-wrap: wrap;
199            justify-content: center;
200        }
201
202        .video_flex video {
203            border: 1px solid #999;
204            border-radius: 5px;
205        }
206
207        h3 span i, h5 span i {
208            order: -1;
209        }
210
211        body {
212            position: relative;
213        }
214
215        .squareimg img {
216            position: absolute !important;
217            width: 100%;
218            height: 100%;
219            object-fit: cover;
220        }
221
222        html, body {
223            /*font-family: 'Patron', sans-serif !important;*/
224            font-family: 'Google Sans', sans-serif !important;
225            font-weight: 300;
226            /*letter-spacing: -0.01em !important;*/
227            /*letter-spacing: -0.01em;*/
228            font-size: 16.5px;
229            overflow-x: hidden;
230            box-sizing: border-box;
231            color: #1f1f1f;
232            /*line-height: 1.6em;*/
233            background-color: #ffffff;
234
235            /*     background-color: #1f1e1d;*/
236            /*color: #d7c0af;*/
237            /*font-family: sans-serif;*/
238        }
239
240        *, *:before, *:after {
241            box-sizing: inherit;
242        }
243
244        .obj_btn_wrapper {
245            /*display: flex;*/
246            align-items: center;
247            justify-content: start;
248        }
249
250        .obj_btn_container {
251            /*display: grid;*/
252            grid-template-columns: repeat(2, 1fr);
253            grid-template-rows: repeat(auto-fill, minmax(2em, 1fr));
254            justify-content: space-evenly;
255            grid-column-gap: 0;
256            align-items: center;
257            grid-row-gap: 0;
258
259        }
260
261        .obj_btn_container > *:nth-child(1) {
262            grid-area: 1 / 1 / 2 / 3;
263            justify-self: center;
264        }
265
266        .obj_btn_container > *:nth-child(2) {
267            grid-area: 2 / 1 / 3 / 3;
268        }
269
270        .obj_btn_container > *:nth-child(3) {
271            grid-area: 3 / 1 / 4 / 2;
272            justify-self: end;
273        }
274
275        .obj_btn_container > *:nth-child(4) {
276            grid-area: 3 / 2 / 4 / 3;
277            justify-self: start;
278        }
279
280        .obj_btn_container > *:nth-child(5) {
281            grid-area: 4 / 1 / 5 / 2;
282            justify-self: end;
283        }
284
285        .obj_btn_container > *:nth-child(6) {
286            grid-area: 4 / 2 / 5 / 3;
287            justify-self: start;
288        }
289
290        .obj_btn:hover {
291
292        }
293
294        .label {
295            letter-spacing: -0.02em !important;
296
297        }
298
299        .obj_btn_container .label {
300            font-weight: 400;
301            letter-spacing: -0.01em !important;
302        }
303
304        #results img:not(.ltx), .teaser img {
305            transition: all .2s;
306            transition-property: transform;
307            -webkit-border-radius: 5px;
308            -moz-border-radius: 5px;
309            border-radius: 5px;
310            position: relative;
311        }
312
313        .ltx {
314            position: relative;
315            top: -1.5px;
316        }
317
318        .arrow .ltx {
319            top: 0;
320        }
321
322
323        /*.teaser .insetwrap:hover img.inset {*/
324        /*    width: 100%;*/
325        /*    z-index: 0;*/
326        /*    position: relative;*/
327        /*    border: none;*/
328        /*}*/
329
330
331        header {
332            text-align: center;
333        }
334
335        a {
336            /*color: #2032ac !important;*/
337            color: #4e62df !important;
338            text-decoration: none;
339            /*color: rgb(44,56,129) !important;*/
340            font-weight: 600;
341        }
342
343        a:hover {
344            text-decoration: underline;
345            /*color: #184477 !important;*/
346            /*font-weight: 700;*/
347            color: #2032ac !important;
348        }
349
350        /* Heart beat animation */
351
352
353        /*  .heart:hover div * {
354              color: #B33951 !important;
355              cursor: initial !important;
356          }*/
357
358        .authors {
359            display: flex;
360            justify-content: space-around;
361            max-width: 750px;
362            flex-wrap: wrap;
363            margin: 0 auto;
364            font-size: 1.1em;
365        }
366
367        .autoplaytoggle button {
368            align-items: center;
369        }
370
371        .autoplaytoggle span.material-symbols-rounded {
372
373            font-size: 1.25rem !important;
374        }
375
376        .insts {
377            display: flex;
378            justify-content: center;
379        }
380
381        header h1 {
382            margin-bottom: 0;
383            font-weight: 700;
384        }
385
386        /*.carousel-item img {
387            max-width: 100%;
388        }*/
389
390        .insts {
391            font-weight: 400;
392            font-size: 0.9em;
393        }
394
395        .linkscontainer {
396            max-width: 950px;
397            margin: 0 auto;
398        }
399
400        video.main_vid {
401            /*max-width: calc(200px + 0.5em) !important;*/
402            max-height: 256px;
403
404        }
405
406        div.row_vid {
407            display: flex;
408            position: relative;
409        }
410
411        .row_vid {
412            width: 0;
413            max-width: 200px;
414            flex-grow: 1;
415        }
416
417        .row_vid video {
418            max-width: 100%;
419        }
420
421        [data-label] {
422            position: relative;
423        }
424
425        [data-label]:after {
426            position: absolute;
427            content: attr(data-label);
428            color: black;
429            font-weight: 400;
430            top: 100%;
431            left: 50%;
432            width: 300%;
433            transform: translate(-50%, 5px);
434            text-align: center;
435        }
436
437
438        .flex-break {
439            flex-basis: 100%;
440            height: 0;
441        }
442
443        .main_vid_wrapper {
444            position: relative;
445            align-self: center;
446        }
447
448        .main_vid_container {
449            display: flex;
450            position: absolute;
451            justify-content: center;
452            top: 0;
453            opacity: 0;
454            transition: opacity 0.5s;
455        }
456
457        .main_vid_container:first-child {
458            position: relative;
459            opacity: 1;
460        }
461
462        .small_vid_container video:nth-child(1) {
463            margin-bottom: .25em;
464        }
465
466        .small_vid_container video:nth-child(2) {
467            margin-top: .25em;
468        }
469
470
471        .links {
472            /*font-size: 5rem;*/
473            /*margin: 0 -20px;*/
474            display: flex;
475            gap: 15px;
476            justify-content: center;
477            flex-wrap: wrap;
478        }
479
480        .links a span.material-symbols-rounded {
481            max-width: 25px;
482        }
483
484        span.material-symbols-rounded {
485            max-width: 25px;
486        }
487
488        .links a, .obj_btn {
489            font-weight: 600;
490            /*flex-direction: column;*/
491            text-align: center;
492            align-items: center;
493            text-decoration: none;
494            border-radius: 5px;
495            font-size: 1em;
496            padding: 3px 8px;
497            cursor: pointer;
498            /*color: #f3f3f3 !important;*/
499            /*color: #fff !important;*/
500            /*font-family: 'Google Sans', sans-serif !important;*/
501            /*font-weight: 600;*/
502            /*margin: 0 10px;*/
503            /*font-size: 1.5em;*/
504            /*font-weight: 600;*/
505            transition: all .2s;
506            /*color: var(--btn-bgc) !important;*/
507            color: #111 !important;
508            letter-spacing: -0.01em !important;
509            background-color: #e0e0e0;
510        }
511
512        .obj_btn {
513            border: 2px solid white;
514            margin: 0.1em;
515            /*width: 100%;*/
516        }
517
518        .obj_btn_sm {
519            padding: 3px;
520            width: 2.14em;
521        }
522
523        .links a {
524            display: inline-flex;
525        }
526
527        .links a:hover, .obj_btn:hover, .citation a:hover {
528            transform: scale(1.2);
529        }
530
531        /*  .links a:nth-child(1) {
532              --btn-bgc: #ff66cf;
533          }
534
535
536          .links a:nth-child(2) {
537              !*--btn-bgc: 248,233,36;*!
538              --btn-bgc: #ff6700;
539          }
540
541          .links a:nth-child(3) {
542              --btn-bgc: #f7ff00;
543          }
544
545          .links a:nth-child(4) {
546              --btn-bgc: #a6fd29;
547          }
548
549          .links a:nth-child(5) {
550              --btn-bgc: #55ffe1;
551          }
552
553          .links a:nth-child(6) {
554              --btn-bgc: #c358ff;
555          }*/
556
557
558        .links a span.material-symbols-rounded {
559            margin-right: .25rem;
560        }
561
562        .links a:not(:last-child) {
563            /*margin-right: 20px;*/
564        }
565
566
567        .links .material-symbols-rounded {
568            font-size: .95em;
569        }
570
571
572        .links i {
573            font-size: 28px;
574        }
575
576        .teaser {
577            text-align: center;
578            /*margin-bottom: 1rem;*/
579        }
580
581        .teaser + section {
582            /*margin-top: 1rem;*/
583        }
584
585        .teaser video {
586            /*max-width: 256px !important;*/
587        }
588
589        .teaser video {
590            /*max-width: 600px;*/
591            /*width: 100%;*/
592        }
593
594        img.teaser {
595            max-width: 90%;
596        }
597
598        .videowrapper iframe {
599            position: absolute;
600            top: 0;
601            left: 0;
602            width: 100%;
603            height: 100%;
604        }
605
606        p {
607            margin: 0 !important;
608        }
609
610        /*section {*/
611        /*    margin: 2rem 0 !important;*/
612        /*}*/
613
614        section h5 {
615            margin: 2rem 0 0.75rem 0 !important;
616        }
617
618        .iconbutton span.material-symbols-rounded {
619            font-size: 1.5rem;
620            /* font-weight: 700; */
621        }
622
623        .playpause span.material-symbols-rounded {
624            font-variation-settings: 'wght' 700;
625
626
627        }
628
629        .iconbutton span.material-symbols-rounded:hover {
630            color: #fafafa !important;
631        }
632
633        /* .iconbutton:hover, .iconbutton:focus {
634             background-color: hsl(259 79% 41% / 1) !important;
635             !*#3a1b4b !important;*!
636             border-color: none !important;
637             color: #fff !important;
638         }*/
639
640        [data-clipboard-target] {
641            cursor: pointer;
642        }
643
644        [data-clipboard-target]:hover {
645            color: #2032ac !important;
646        }
647
648        /* .emptyrooms {
649             max-width: 80%;
650         }*/
651
652        .teaser > .row {
653            justify-content: center;
654        }
655
656        .emptyrooms img:first-child {
657            width: 16.196944%;
658            margin-right: 0.6%;
659        }
660
661        .emptyrooms img:last-child {
662            width: 82.8862479%;
663        }
664
665
666        section h3 {
667            margin-bottom: 1rem;
668            display: flex;
669            align-items: center;
670        }
671
672        section h5, section h3 {
673            justify-content: space-between;
674            font-weight: 600;
675            display: flex;
676            align-items: center;
677        }
678
679        h3, h5 {
680            scroll-margin-top: 25px;
681            /*display: inline-block;*/
682        }
683
684        .carousel-item .row {
685            margin: 0;
686        }
687
688        /*.carousel-item.row.active {
689            display: flex;
690        }
691*/
692        h3[data-exclude-link], h5[data-exclude-link] {
693            cursor: initial;
694        }
695
696        h3 span, h5 span {
697            display: inline-flex;
698            align-items: center;
699            cursor: pointer;
700        }
701
702        h3 span:hover, h5 span:hover {
703
704            color: #2032ac !important;
705        }
706
707        /*
708                h3[data-exclude-link]:hover, h5[data-exclude-link]:hover {
709                    color: initial !important;
710                }*/
711        code {
712            font-family: 'Google Sans';
713            font-size: 0.9rem;
714
715            word-wrap: normal;
716            padding: 0 3px;
717            /*position: relative;*/
718            /*bottom: 1px;*/
719            /*color: #3f3f3f;*/
720            /*color: rgb(255,154,0);*/
721            color: #999;
722        }
723
724        code em, .mono em {
725            font-style: normal;
726            /*text-decoration: underline;*/
727            font-weight: 600;
728            /*top: -0.5px;*/
729            position: relative;
730        }
731
732        .selected em {
733            text-decoration: underline;
734        }
735
736        /*.carousel {
737            margin: 1rem 0;
738        }*/
739
740        ltx img {
741            -webkit-border-radius: 0 !important;
742            -moz-border-radius: 0 !important;
743            border-radius: 0 !important;
744            vertical-align: text-top;
745            /* height: 0.8em; */
746            /* position: relative; */
747            top: 0.2em;
748            margin: 0 1px;
749        }
750
751        .cit {
752            background-color: rgba(26, 26, 26, 0.05);
753            color: #666;
754            padding: 10px;
755            letter-spacing: 0;
756            border-radius: 5px;
757            font-size: 12px;
758            display: inline-block;
759            max-width: 600px;
760            line-height: 17px;
761            margin: 0 auto;
762            overflow-y: hidden;
763            overflow-x: auto;
764            white-space: pre-wrap;
765            white-space: -moz-pre-wrap;
766            white-space: -pre-wrap;
767            white-space: -o-pre-wrap;
768            word-wrap: break-word;
769            /*font-family: 'Code', monospace;*/
770            font-family: 'Google Sans';
771
772        }
773
774        .cit_cont {
775            display: flex;
776        }
777
778        /* .video-container .video-border {
779             position: absolute;
780             width: 100%;
781             height: 100%;
782             top: 0;
783             left: 0;
784             box-shadow: inset 0px 0px 0px 6px #eeeeee;
785         }*/
786
787        .video-container video {
788            width: 100%;
789            display: block;
790            clip-path: inset(5px 5px);
791        }
792
793        .video-container img {
794            width: 100%;
795        }
796
797        .splide > * {
798            font-weight: 600;
799            position: initial;
800        }
801
802        .move-cont > video {
803            max-width: 100%;
804        }
805
806        .styletransfer img {
807            max-width: 100%;
808            clip-path: inset(2px 2px);
809        }
810
811        .inversion span {
812            text-align: center;
813        }
814
815        .inversion img {
816            max-width: 100%;
817            clip-path: inset(2px 2px);
818        }
819
820
821        #inversion ~ .splide img {
822            max-width: 100%;
823            padding: 0.3rem;
824        }
825
826        .styletransfer span {
827            text-align: center;
828        }
829
830        .styletransfer span:nth-child(2) {
831            grid-column-start: 3;
832            grid-column-end: 6;
833        }
834
835        .styletransfer span:nth-child(3) {
836            grid-column-start: 7;
837            grid-column-end: 10;
838        }
839
840        @media (max-width: 359px) {
841            .d-xxs-block {
842                display: block !important;
843            }
844
845            .d-xxs-none {
846                display: none !important;
847            }
848        }
849
850        @media (max-width: 399px) {
851            .obj_btn_container {
852                justify-content: space-between;
853                /*padding: 0 calc(var(--bs-gutter-x) * .5);*/
854            }
855
856            /*.small_btn_container */
857            .label {
858                /*font-size: 0.9em;*/
859            }
860
861            .obj_btn, .select_prompt code {
862                padding-left: 6px;
863                padding-right: 6px;
864                /*font-size: 0.9em;*/
865            }
866
867            .select_prompt div:not(:last-child) {
868                margin-right: 3px;
869            }
870
871            /*             .select_prompt  {*/
872            /*    line-height: 1.95em;*/
873            /*}*/
874        }
875
876        @media (min-width: 992px) {
877
878            .container {
879                max-width: 1400px;
880            }
881
882            .container section {
883                max-width: 950px;
884                margin: 0 auto;
885            }
886
887            section.teaser {
888                max-width: 1200px;
889            }
890
891            .container section p, h3, h5 {
892                max-width: 950px;
893                margin-left: auto !important;
894                margin-right: auto !important;
895                /*display: block;*/
896            }
897
898            /* #overviewfig {
899                 max-width: 800px !important;
900                 margin: 0 auto !important;
901             }*/
902        }
903
904        /*
905                .move-cont .video-container:nth-child(8), .move-cont .video-container:nth-child(7) {
906                    display: none;
907                }*/
908
909        @media (max-width: 991px) {
910            /*
911                        .move-cont .video-container:nth-child(5), .move-cont .video-container:nth-child(6) {
912                            display: none;
913                        }*/
914            .move-cont > video {
915                max-width: 150%;
916                clip-path: inset(0 33.333333% 0 0);
917            }
918
919            header h3 {
920                font-size: 1.5rem;
921            }
922
923            .cit {
924                /*font-size: 12px !important;*/
925            }
926
927            .emptyrooms img:last-child {
928                width: 99.6% !important;
929            }
930
931            .emptyrooms img:first-child {
932                width: 19.46% !important;
933                margin-right: 0.7522% !important;
934            }
935
936            .styletransfer img:nth-child(9n+3), .styletransfer img:nth-child(9n-1) {
937                display: none;
938            }
939
940            .styletransfer span:nth-child(2) {
941                grid-column-start: 3;
942                grid-column-end: 5;
943            }
944
945            .styletransfer span:nth-child(3) {
946                grid-column-start: 6;
947                grid-column-end: 8;
948            }
949        }
950
951        .author {
952            /*padding: 0 0.6rem;*/
953            letter-spacing: -0.01em !important;
954        }
955
956        @media (max-width: 767px) {
957
958            /*.teaser .insetwrap:hover img.inset:not(.hidden)+img:not(.inset)  {*/
959            /*    width: 33%;*/
960            /*    bottom: 0;*/
961            /*    right: 0;*/
962            /*    border: 1px solid #333;*/
963            /*    position: absolute;*/
964            /*    z-index: 1;*/
965            /*}*/
966            /*.teaser .insetwrap:hover img.inset {*/
967            /*    width: 100%;*/
968            /*    z-index: 0;*/
969            /*    position: relative;*/
970            /*    border: none;*/
971            /*}*/
972            .d-under-md-none {
973                display: none !important;
974            }
975
976            html, body {
977
978                font-size: 16px;
979            }
980
981            code {
982                font-size: 0.9rem;
983            }
984
985            .author {
986                /*font-size: 18px;*/
987            }
988
989            .insts {
990                /*font-size: 15px;*/
991            }
992
993            /*.move-cont .video-container:nth-child(4) {
994                display: none;
995            }*/
996            .move-cont > video {
997                max-width: 200%;
998                clip-path: inset(0 50% 0 0);
999            }
1000
1001            .obj_btn_wrapper {
1002                flex-grow: 1;
1003                justify-content: end;
1004            }
1005
1006            .inversion *:nth-child(5n+2) {
1007                display: none;
1008            }
1009
1010            .emptyrooms img:last-child {
1011                width: 124.477307% !important;
1012            }
1013
1014            .emptyrooms img:first-child {
1015                width: 24.3243243% !important;
1016                margin-right: 0.9% !important;
1017            }
1018
1019            .styletransfer img:nth-child(9n+2), .styletransfer img:nth-child(9n-2) {
1020                display: none;
1021            }
1022
1023            .styletransfer span:nth-child(2) {
1024                grid-column-start: 3;
1025                grid-column-end: 4;
1026            }
1027
1028            .styletransfer span:nth-child(3) {
1029                grid-column-start: 5;
1030                grid-column-end: 6;
1031            }
1032
1033        }
1034
1035        @media (max-width: 540px) {
1036            .links a span.material-symbols-rounded {
1037                max-width: 20px;
1038            }
1039
1040            .links {
1041                gap: 12px;
1042            }
1043
1044            .video_flex {
1045
1046                /*display: flex;*/
1047                column-gap: 0.5em;
1048                /*row-gap: 0.25em;*/
1049            }
1050
1051        }
1052
1053        @media (max-width: 420px) {
1054
1055        }
1056
1057        @media (max-width: 399px) {
1058            .label {
1059                font-size: 0.9em;
1060            }
1061
1062            .obj_btn {
1063                /*padding-left: 6px;*/
1064                /*padding-right: 6px;*/
1065                font-size: 0.9em;
1066            }
1067        }
1068
1069        @media (max-width: 510px) {
1070
1071
1072            /*
1073                        .move-cont .video-container:nth-child(3) {
1074                            display: none;
1075                        }*/
1076            .move-cont > video {
1077                max-width: 300%;
1078                clip-path: inset(0 66.6666666% 0 0);
1079            }
1080
1081            .inversion span:nth-child(n+4) {
1082                grid-row: 3;
1083            }
1084
1085            .links .material-symbols-rounded {
1086                /*display: none;*/
1087                font-size: 1rem;
1088            }
1089
1090            .links a span.material-symbols-rounded {
1091                max-width: 18px;
1092            }
1093
1094        }
1095
1096        @media (max-width: 399px) {
1097            html, body {
1098                font-size: 16px !important;
1099            }
1100        }
1101
1102        @media (max-width: 380px) {
1103            /*.links .material-symbols-rounded {*/
1104            /*    display: none;*/
1105            /*    padding: 5px 10px;*/
1106            /*    !*font-size: 1rem;*!*/
1107            /*}*/
1108
1109        }
1110
1111        @media (max-width: 575px) {
1112
1113            .d-xs-none {
1114                display: none !important;
1115            }
1116
1117            html, body {
1118                font-size: 16px;
1119            }
1120
1121            .emptyrooms img:last-child {
1122                width: 165.941536% !important;
1123            }
1124
1125            .emptyrooms img:first-child {
1126                width: 32.4269205% !important;
1127                margin-right: 1.15% !important;
1128            }
1129
1130            video.main_vid {
1131                max-width: calc(100% - 0.5 * var(--bs-gutter-x));
1132            }
1133
1134            /*.obj_btn_container {*/
1135            /*    font-size: 0.9em;*/
1136            /*}*/
1137            .main_vid_container {
1138                justify-content: unset;
1139            }
1140
1141        }
1142
1143        @media (min-width: 768px) and (max-width: 991px) {
1144
1145            .container > *, .container-md > *, .container-sm > *, .container section p, h3, h5 {
1146                max-width: calc(720px - var(--bs-gutter-x));
1147                margin-left: auto !important;
1148                margin-right: auto !important;
1149            }
1150
1151            section.teaser {
1152                max-width: calc(100vw - 45px);
1153            }
1154
1155        }
1156
1157        @media (min-width: 576px) and (max-width: 767px) {
1158
1159            .container > *, .container-md > *, .container-sm > *, .container section p, h3, h5 {
1160                max-width: calc(540px - var(--bs-gutter-x));
1161                margin-left: auto !important;
1162                margin-right: auto !important;
1163            }
1164
1165            section.teaser {
1166                max-width: calc(100vw - 35px);
1167            }
1168
1169        }
1170
1171        @media (min-width: 768px) {
1172
1173
1174        }
1175
1176
1177        @media (max-width: 950px) and (min-width: 768px), (max-width: 1190px) and (min-width: 992px) {
1178
1179
1180            .orig > img, #compositional_gen .row .prompt + div img, #non_objects_container .row.d-md-flex div:first-child img, #limitations_container .row.d-md-flex div:first-child img {
1181                /*transform:scale(3) translate(33.333333%,0) !important;*/
1182                transform-origin: center left;
1183            }
1184        }
1185
1186    </style>
1187</head>
1188<body class="h-100 d-flex flex-column">
1189
1190
1191<main class="container flex-grow-1" style="">
1192    <header class="pt-sm-3 pt-2 pb-3">
1193        <!--        <h1 class="mt-3">BlobGAN</h1>-->
1194        <!--        <h3 data-exclude-link="">Spatially Disentangled Scene Representations</h3>-->
1195        <h2 class="mt-1 mt-sm-3 mt-md-3" style="font-weight: 900; font-size: calc(1.32rem + .9vw);">Disentangled 3D
1196            Scene Gen&shy;eration with Layout
1197            Learning</h2>
1198        <!--<div class="mt-3 mt-sm-3 mt-md-3 mb-4" >
1199            <div class="wordart radial " style="font-weight: 900;font-size: 2.3em;line-height: 1.1;"><span class="text" data-text="Diffusion Self-Guidance for Controllable Image
1200             Generation">Diffusion Self-Guidance for Controllable Image
1201             Generation</span></div></div>-->
1202        <div class="authors mt-3">
1203            <div class="author"><a href="https://dave.ml">Dave Epstein</a><sup class="d-xs-none">1,2</sup></div>
1204            <div class="author"><a href="https://poolio.github.io/">Ben Poole</a><sup class="d-xs-none">2</sup></div>
1205            <div class="author"><a href="https://bmild.github.io/">Ben Mildenhall</a><sup class="d-xs-none">2</sup>
1206            </div>
1207            <div class="author"><a href="https://people.eecs.berkeley.edu/~efros/">Alexei A. Efros</a><sup
1208                    class="d-xs-none">1</sup>
1209            </div>
1210            <div class="author"><a href="https://holynski.org/">Aleksander Hołyński</a><sup class="d-xs-none">1,2</sup>
1211            </div>
1212        </div>
1213        <div class="d-xs-none insts mt-1">
1214            <div class="inst pe-3"><sup>1</sup>UC Berkeley</div>
1215            <div class="inst"><sup>2</sup>Google Research</div>
1216        </div>
1217        <div class="d-xs-none insts mt-1">
1218ICML 2024
1219</div>
1220        <!--         <div class="insts mt-1">-->
1221        <!--          NeurIPS 2023-->
1222        <!--        </div>-->
1223        <!--        <div class="insts mt-0">-->
1224        <!--            <div class="inst"><sup>&dagger;</sup>Work done while at Google</div>-->
1225        <!--        </div>-->
1226        <!--        <div class="insts mt-1">-->
1227        <!--            <b>ECCV 2022</b>-->
1228        <!--        </div>-->
1229        <div class="linkscontainer">
1230            <div class="links mt-3">
1231                <a href="https://arxiv.org/abs/2402.16936" target="_blank">Paper</a>
1232                <!--                <a href="#" target="_blank">Talk</a>-->
1233                <!--                <a href="#">Demo</a>-->
1234                <!--                 <a href="#" onclick="return false">Code (soon<span style="margin-right: -3px">!</span>)</a> -->
1235                <a href="#results">Results</a>
1236                <!-- <a id="citelink" data-clipboard-target=".cit" data-bs-toggle="tooltip" data-bs-placement="right"
1237                    title="BibTeX copied!"><span class="material-symbols-rounded">
1238 format_quote
1239 </span><span>Cite</span></a>-->
1240                <a href="#citation">Cite</a>
1241                <a href="static/layoutlearning.pdf" target="_blank">
1242                    PDF
1243                </a>
1244            </div>
1245        </div>
1246    </header>
1247    <section class=" mt-md-0 mt-0 mb-sm-4 mb-3 mb-md-0">
1248        <p class="mb-3 d-xs-none" style="text-align: center"><b>TL;DR: </b>Text-to-3D generation of scenes decomposed
1249            automatically into
1250            objects,
1251            using only a pretrained diffusion model.
1252        </p>
1253        <p class="mb-3 d-sm-none" style="text-align: center"><b>TL;DR: </b>Text-to-3D generation of scenes that are
1254            decomposed automatically into
1255            objects.
1256        </p>
1257
1258    </section>
1259    <section class="teaser mb-sm-3">
1260
1261        <div class="row mt-sm-4 mt-3 mt-md-3  d-flex">
1262            <div class="col-auto pe-0 col-sm-auto main_vid_wrapper">
1263                <div class="main_vid_container visible_video" data-id="teaser" data-key="full">
1264                    <video disableRemotePlayback src="static/512/teaser/rat/full_tiled_labeled.mp4" class="main_vid"
1265                           autoplay
1266                           loop muted playsinline
1267                           data-suffix="_tiled_labeled.mp4"></video>
1268                </div>
1269                <div class="main_vid_container" data-id="teaser" data-key="0">
1270                    <video disableRemotePlayback src="static/512/teaser/rat/0_tiled_labeled.mp4" class="main_vid"
1271
1272                           loop muted playsinline
1273                           data-suffix="_tiled_labeled.mp4"></video>
1274                </div>
1275                <div class="main_vid_container" data-id="teaser" data-key="1">
1276                    <video disableRemotePlayback src="static/512/teaser/rat/1_tiled_labeled.mp4" class="main_vid"
1277
1278                           loop muted playsinline
1279                           data-suffix="_tiled_labeled.mp4"></video>
1280                </div>
1281                <div class="main_vid_container" data-id="teaser" data-key="2">
1282                    <video disableRemotePlayback src="static/512/teaser/rat/2_tiled_labeled.mp4" class="main_vid"
1283
1284                           loop muted playsinline
1285                           data-suffix="_tiled_labeled.mp4"></video>
1286                </div>
1287                <div class="main_vid_container" data-id="teaser" data-key="3">
1288                    <video disableRemotePlayback src="static/512/teaser/rat/3_tiled_labeled.mp4" class="main_vid"
1289
1290                           loop muted playsinline
1291                           data-suffix="_tiled_labeled.mp4"></video>
1292                </div>
1293            </div>
1294            <div class="col-12 col-sm-auto pt-3 pt-sm-0 obj_btn_wrapper d-block d-sm-flex select_prompt_vid select_prompt_forvid"
1295                 data-for="teaser"
1296                 data-suffix="">
1297                <div class="obj_btn_container ps-md-2 d-flex d-sm-grid">
1298                    <div>
1299                        <div class="obj_btn selected d-xxs-none" data-val="full" id="teaser_btn_full">Entire scene</div>
1300                        <div class="obj_btn selected d-xxs-block d-none" data-val="full">Scene</div>
1301                    </div>
1302                    <div class="label d-none d-sm-block mb-1 mt-3" style="text-align: center">Objects</div>
1303                    <div class="obj_btn obj_btn_sm d-none d-sm-block" style="background-color:rgb(242, 242, 98);"
1304                         id="teaser_btn_0"
1305                         data-val="0">1
1306                    </div>
1307                    <div class="obj_btn obj_btn_sm d-none d-sm-block" id="teaser_btn_1"
1308                         style="background-color:rgb(238, 121, 53); color: white !important;" data-val="1">2
1309                    </div>
1310                    <div class="obj_btn obj_btn_sm d-none d-sm-block" id="teaser_btn_2"
1311                         style="background-color:rgb(160, 110, 243); color: white !important;" data-val="2">3
1312                    </div>
1313                    <div class="obj_btn obj_btn_sm d-none d-sm-block" id="teaser_btn_3"
1314                         style="background-color:rgb(87, 48, 241); color: white !important;" data-val="3">4
1315                    </div>
1316                    <!--                    <div class="d-sm-none d-flex align-items-center">-->
1317                    <!--                    <div style="flex-grow: 1" class="d-flex d-sm-none"></div>-->
1318                    <div class="label me-1 d-sm-none d-flex" style="justify-content: end; flex-grow: 1">Objects:</div>
1319                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1320                         style="background-color:rgb(242, 242, 98);" data-val="0">1
1321                    </div>
1322                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1323                         style="background-color:rgb(238, 121, 53); color: white !important;" data-val="1">2
1324                    </div>
1325                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1326                         style="background-color:rgb(160, 110, 243); color: white !important;" data-val="2">3
1327                    </div>
1328                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1329                         style="background-color:rgb(87, 48, 241); color: white !important;" data-val="3">4
1330                    </div>
1331                    <!--                    </div>-->
1332                </div>
1333            </div>
1334        </div>
1335    </section>
1336    <section class=" mt-md-2 mt-3 mb-sm-0 mb-0 mb-md-0">
1337        <p class=" " style="text-align: center" id="clickthenumbers"><span style="background: linear-gradient(90deg, #dada56 0%, rgba(255,121,53,1) 40%, rgba(160,110,243,1) 70%, rgba(87,48,241,1) 100%); font-weight: bold; background-clip: text; -webkit-background-clip: text;
1338-webkit-text-fill-color: transparent;">Click the numbers</span> to discover different objects!
1339        </p>
1340
1341    </section>
1342    <section class="mt-0 mt-sm-0">
1343        <div class="row mt-sm-2 mt-3 tldr" style="text-align: left">
1344            <div class="col-12">
1345                <div class="select_prompt select_prompt_forvid mt-sm-1 mb-sm-2" data-for="teaser"
1346                     data-prefix="static/512/teaser/"
1347                     data-order="0">
1348                    <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose a prompt:</b>
1349                    <div>
1350                        <code class="selected" data-val="rat/"
1351                              style="--img-bgc: rgb(24,45,79); --img-txc: rgb(115,248,75);">“a chef
1352                            rat on a tiny stool cooking a stew”</code>
1353                    </div>
1354                    <div><code data-val="chicken/"
1355                               style="--img-txc: rgb(197,48,203); --img-bgc: rgb(173,255,252);">“a chicken hunting for
1356                        easter eggs”</code></div>
1357                    <div><code data-val="pigeon/" style="--img-bgc: rgb(18,45,32); --img-txc: rgb(240,136,255);">“a
1358                        pigeon having some coffee and a bagel, reading the newspaper”</code></div><!--
1359           -->
1360                    <div><code data-val="dog/" style="--img-bgc: rgb(0,0,127); --img-txc: rgb(255,253,77);">“two
1361                        dogs in matching outfits padding a kayak”</code></div>
1362                    <div><code data-val="sloth/" style="--img-bgc: rgb(61,9,5); --img-txc: rgb(244,244,193);">“a
1363                        sloth on a beanbag with popcorn and a remote control”</code></div>
1364                    <div><code data-val="eagle/" style="--img-bgc: rgb(78,42,10); --img-txc: rgb(236,158,41);">“a
1365                        bald eagle having a drink and a burger at the park”</code></div>
1366                    <div><code data-val="bear/" style="--img-bgc: rgb(10,24,33); --img-txc: rgb(245,61,21);">“a bear
1367                        wearing a flannel camping and reading a book by the fire”</code></div>
1368                </div>
1369
1370
1371                <!-- <p class="mt-2 pt-1" style="text-align:center;"><b class=" d-none d-md-inline">
1372                    Hover over any image on this page to enlarge.
1373                </b></p>-->
1374            </div>
1375            <!--        <div class="col-12">-->
1376            <!--             <p class="">-->
1377            <!--                    Our method creates entire 3D scenes composed of multiple NeRFs arranged according to a learned layout. Each NeRF learns to represent a different object in the scene.-->
1378            <!--                </p>-->
1379            <!--        </div>-->
1380        </div>
1381    </section>
1382    <!-- <section>
1383         <h3 data-exclude-link=""><span>Overview</span>
1384             <div>
1385                 <a href="static/blobgan_slides.pptx" target="_blank" class="btn px-2 py-1 iconbutton btn-dark"><span
1386                         class="me-2 material-symbols-rounded">
1387 file_download
1388 </span> Slides</a>
1389                 &lt;!&ndash;  <button type="button" data-action="pause" data-target-id="${el.id}" class="btn btn-dark"><i class="fa-solid fa-xs fa-pause"></i></button>&ndash;&gt;
1390             </div>
1391         </h3>
1392         <div class="wrapwrap">
1393             <div class="videowrapper">
1394                 <iframe width="560" height="315" src="https://www.youtube.com/embed/KpUv82VsU5k"
1395                         title="YouTube video player" frameborder="0"
1396                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
1397                         allowfullscreen></iframe>
1398             </div>
1399         </div>
1400     </section>-->
1401    <section class="abstract" id="abstract">
1402        <h3 class="pt-0 pt-md-0 mt-5 mt-sm-5 mt-md-5 mb-2" data-id="abstract">
1403            <div style="display: inline-flex;
1404    align-items: center;">
1405                <div class="me-2 material-symbols-rounded">
1406                    draw_abstract
1407                </div>
1408                Abstract
1409            </div>
1410        </h3>
1411        <p class="">
1412            We introduce a method to generate 3D scenes that are disentangled into their component objects. This
1413            disentanglement is unsupervised, relying only on the knowledge of a large pretrained text-to-image model.
1414            Our key insight is that objects can be discovered by finding parts of a 3D scene that, when rearranged
1415            spatially, still produce valid configurations of the same scene.
1416
1417
1418        </p>
1419        <p>
1420            <img class="my-3 d-block d-md-none" src="static/layoutlearning_fignarrow.jpg" id="overviewfigsm" alt=""
1421                 style="max-width:100%">
1422            <!--            <img class="my-3 d-none d-sm-block d-md-none" src="static/layoutlearning_figwide.jpg" id="overviewfigsm" alt=""-->
1423            <!--                 style="max-width:100%">-->
1424
1425            <img class="my-3 d-none d-md-block" src="static/layoutlearning_figwide.jpg" id="overviewfig" alt=""
1426                 style="    max-width: min(calc(100vw - var(--bs-gutter-x) * 2), 788.5px);
1427    position: relative;
1428    left: calc((100% - min(calc(100vw - var(--bs-gutter-x) * 2), 788.5px)) / 2);">
1429            <!--            <img class="my-3 d-none d-lg-block" src="static/layoutlearning_verywide.jpg" id="overviewfiglg" alt=""-->
1430            <!--                 style=" max-width: min(calc(100vw - var(&#45;&#45;bs-gutter-x)), 1095.75px);-->
1431            <!--    position: relative;-->
1432            <!--    left: calc((100% - min(calc(100vw - var(&#45;&#45;bs-gutter-x)), 1095.75px)) / 2);">-->
1433        </p>
1434        <p>
1435            Concretely, our method jointly optimizes
1436            multiple NeRFs from scratch – each representing its own object – along with a set of layouts that composite
1437            these objects
1438            into scenes. We then encourage these composited scenes to be in-distribution according to the image
1439            generator. We show that despite its simplicity, our approach successfully generates 3D scenes decomposed
1440            into individual objects, enabling new capabilities in text-to-3D content creation.
1441        </p>
1442
1443
1444    </section>
1445    <section id="results">
1446        <h3 class="mt-5 mt-sm-4 mt-md-5 mb-2" data-id="results"><span class="me-2 material-symbols-rounded">
1447palette
1448</span>Applications</h3>
1449
1450
1451        <h5 class="mt-3" id="cond_optim"><span class="me-2 material-symbols-rounded">
1452open_with
1453</span>Building scenes around objects</h5>
1454        <p>We can take advantage of our structured representation to learn a sce
1454ne given a 3D
1455            asset in addition to a text prompt, such as a specific cat or motorcycle. By freezing the NeRF weights but
1456            not the layout
1457            weights, the model learns to arrange the provided asset in the context of the other objects it discovers. We
1458            show the
1459            entire scenes the model creates along with surface normals and a textureless
1460            render.</p>
1461
1462        <div class="select_prompt select_prompt_forvid my-2" data-for="cond_optim" data-prefix="static/512/cond_optim/"
1463             data-order="0">
1464            <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose an asset:</b>
1465            <div><code class="selected" data-val="grumpycat"
1466                       style="--img-txc: rgb(74,59,28); --img-bgc: rgb(178,241,236);">😾 grumpy cat</code></div>
1467            <div>
1468                <code data-val="ninja" style="--img-txc: rgb(6,13,22); --img-bgc: rgb(115,241,73);">🏍 sport
1469                    motorbike</code>
1470            </div><!--
1471           -->
1472
1473        </div>
1474
1475        <div class="select_prompt select_prompt_forvid mb-2" data-for="cond_optim" data-show="grumpycat"
1476             data-hide="ninja" data-infix=""
1477             data-order="0">
1478            <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose a prompt:</b>
1479            <div>
1480                <code class="selected" data-val="santa/"
1481                      style="--img-txc: rgb(255,255,255); --img-bgc: rgb(192,27,52);">“a cat wearing a
1482                    santa costume holding a present next to a miniature christmas tree”</code>
1483            </div><!--
1484           -->
1485            <div><code data-val="hawaii/"
1486                       style="--img-bgc: rgb(13,36,65); --img-txc: rgb(253,69,54);">“a cat wearing a hawaiian shirt and
1487                sunglasses, having a drink on a beach towel”</code></div>
1488        </div>
1489
1490        <div class="select_prompt select_prompt_forvid my-2" data-for="cond_optim" data-hide="grumpycat"
1491             data-show="ninja" data-infix=""
1492             style="display:none;" data-order="0">
1493            <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose a prompt:</b>
1494
1495            <div><code class="selected" data-val="nightstand/"
1496                       style="--img-bgc: rgb(58,37,13); --img-txc: rgb(255,97,91);">“a modern
1497                nightstand with a lamp and a miniature motorcycle model on it, on top of a small rug”</code></div>
1498            <div><code data-val="lion/" style="--img-bgc: rgb(2,10,39); --img-txc: rgb(226,160,57);">“a lion in a
1499                leather jacket riding a motorcycle between two differently colored cones”</code></div><!--
1500           -->
1501        </div>
1502        <div class="row mt-sm-4 mt-3 mt-md-3 justify-content-center d-flex">
1503            <div class="col-auto pe-0 col-sm-auto main_vid_wrapper">
1504                <div class="main_vid_container visible_video" data-id="cond_optim" data-key="full">
1505                    <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/full_tiled_labeled.mp4"
1506                           class="main_vid"
1507                           autoplay
1508                           loop muted playsinline
1509                           data-suffix="_tiled_labeled.mp4"></video>
1510                </div>
1511                <div class="main_vid_container" data-id="cond_optim" data-key="0">
1512                    <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/0_tiled_labeled.mp4"
1513                           class="main_vid"
1514
1515                           loop muted playsinline
1516                           data-suffix="_tiled_labeled.mp4"></video>
1517                </div>
1518                <div class="main_vid_container" data-id="cond_optim" data-key="1">
1519                    <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/1_tiled_labeled.mp4"
1520                           class="main_vid"
1521
1522                           loop muted playsinline
1523                           data-suffix="_tiled_labeled.mp4"></video>
1524                </div>
1525                <div class="main_vid_container" data-id="cond_optim" data-key="2">
1526                    <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/2_tiled_labeled.mp4"
1527                           class="main_vid"
1528
1529                           loop muted playsinline
1530                           data-suffix="_tiled_labeled.mp4"></video>
1531                </div>
1532                <div class="main_vid_container" data-id="cond_optim" data-key="3">
1533                    <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/3_tiled_labeled.mp4"
1534                           class="main_vid"
1535
1536                           loop muted playsinline
1537                           data-suffix="_tiled_labeled.mp4"></video>
1538                </div>
1539            </div>
1540            <div class="col-12 col-sm-auto pt-3 pt-sm-0  obj_btn_wrapper d-block d-sm-flex select_prompt_vid select_prompt_forvid"
1541                 data-for="cond_optim"
1542                 data-suffix="">
1543                <div class="obj_btn_container ps-md-2 d-flex d-sm-grid small_btn_container">
1544                    <div class="d-flex d-sm-block">
1545                        <!--                        <div>-->
1546                        <div class="obj_btn selected d-xxs-none" data-val="full">Entire scene</div>
1547                        <div class="obj_btn selected d-xxs-block d-none" data-val="full">Scene</div>
1548                        <!--                        </div>-->
1549                        <div class="obj_btn mt-sm-2" data-val="0"><img style="    height: 15px;
1550    position: relative;
1551    top: -1.5px;
1552    margin-right: 2px;" src="static/lock.svg" alt="Lock"> Asset
1553                        </div>
1554                    </div>
1555                    <div class="label d-none d-sm-block mb-1 mt-3" style="text-align: center">Objects</div>
1556                    <!--                    <div class="obj_btn obj_btn_sm d-none d-sm-block"-->
1557                    <!--                         style="background-color:rgb(242, 242, 98); color:transparent !important; text-shadow: 0 0 0 black;"-->
1558                    <!--                         data-val="0">🔒-->
1559                    <!--                    </div>-->
1560                    <div class="d-none d-sm-flex" style="grid-area: 3 / 1 / 4 / 3;
1561    justify-self: center;">
1562                        <div class="obj_btn obj_btn_sm "
1563                             style="background-color:rgb(238, 121, 53); color: white !important;" data-val="1">1
1564                        </div>
1565                        <div class="obj_btn obj_btn_sm "
1566                             style="background-color:rgb(160, 110, 243); color: white !important;" data-val="2">2
1567                        </div>
1568                        <div class="obj_btn obj_btn_sm"
1569                             style="background-color:rgb(87, 48, 241); color: white !important;" data-val="3">3
1570                        </div>
1571                    </div>
1572                    <!--                    <div class="d-sm-none d-flex align-items-center">-->
1573                    <!--                    <div style="flex-grow: 1" class="d-flex d-sm-none"></div>-->
1574                    <div class="label me-1 d-sm-none d-flex" style="justify-content: end; flex-grow: 1">Objects:</div>
1575                    <!--                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"-->
1576                    <!--                         style="background-color:rgb(242, 242, 98);" data-val="0">1-->
1577                    <!--                    </div>-->
1578                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1579                         style="background-color:rgb(238, 121, 53); color: black !important;" data-val="1">1
1580                    </div>
1581                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1582                         style="background-color:rgb(160, 110, 243); color: white !important;" data-val="2">2
1583                    </div>
1584                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1585                         style="background-color:rgb(87, 48, 241); color: white !important;" data-val="3">3
1586                    </div>
1587                    <!--                    </div>-->
1588                </div>
1589            </div>
1590        </div>
1591
1592        <!--  <div class=" visible_video mt-3 video_flex" data-id="cond_optim"
1593                 data-key="">
1594                <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/rev/0_nobg.mp4"
1595                       autoplay
1596                       loop muted playsinline
1597                       data-suffix="rev/0_nobg.mp4" class="row_vid"></video>
1598                <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/rev/1_nobg.mp4"
1599                       autoplay
1600                       loop muted playsinline
1601                       data-suffix="rev/1_nobg.mp4" class="row_vid"></video>
1602                <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/rev/2_nobg.mp4"
1603                       autoplay
1604                       loop muted playsinline
1605                       data-suffix="rev/2_nobg.mp4" class="row_vid"></video>
1606              <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/rev/3_nobg.mp4"
1607                       autoplay
1608                       loop muted playsinline
1609                       data-suffix="rev/3_nobg.mp4" class="row_vid"></video>
1610                <span style="align-self: center;
1611
1612    font-size: 3em" class="d-none d-sm-block">→</span>
1613                <div class="flex-break d-sm-none"></div>
1614                <span style="align-self: center;
1615    font-size: 3em; margin: -0.5em 0 -0.42em 0" class="d-block d-sm-none">↓</span>
1616                <div class="flex-break d-sm-none"></div>
1617                <video disableRemotePlayback src="static/512/cond_optim/grumpycatsanta/rev/full_nobg.mp4"
1618                       autoplay
1619                       loop muted playsinline
1620                       data-suffix="rev/full_nobg.mp4" class="row_vid"></video>
1621
1622            </div>-->
1623
1624        <h5 id="nerf_decomp"><span class="me-2 material-symbols-rounded">
1625open_with
1626</span>Separating a NeRF into objects</h5>
1627        <div>
1628            <p>Given a NeRF representing a scene and a caption, layout learning is able to
1629                parse the scene into the objects it contains without any per-object supervision. We accomplish this by
1630                requiring renders
1631                of one of the
1632                <ltx>N</ltx>
1633                learned layouts to match the same view rendered from the target NeRF, using a simple
1634                <ltx>L_2</ltx>
1635                reconstruction
1636                loss.
1637            </p>
1638            <div class="select_prompt select_prompt_forvid my-2" data-for="nerf_decomp"
1639                 data-prefix="static/512/nerf_decomp/"
1640                 data-order="0">
1641                <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose a prompt:</b>
1642                <div><code class="selected" data-val="bird/"
1643                           style="--img-bgc: rgb(250,220,75); --img-txc: rgb(11,35,103);">“a bird having some sushi and
1644                    sake”</code></div>
1645                <div>
1646                    <code data-val="cat/" style="--img-bgc: rgb(255,85,70); --img-txc: rgb(27,27,166);">“two cute cats
1647                        wearing baseball uniforms playing catch”</code>
1648                </div>
1649                <!--                <div>-->
1650                <!--                    <code data-val="sunset" style="&#45;&#45;img-bgc: rgb(61,65,75); &#45;&#45;img-txc: rgb(255,239,62);">“a giant husk-->
1651                <!--                        of corn grilling hot dogs by a pool with an inner tube”</code>-->
1652                <!--                </div>-->
1653
1654            </div>
1655
1656        </div>
1657        <div class="row mt-sm-4 mt-3 mt-md-3 justify-content-center d-flex">
1658            <div class="col-auto pe-0 col-sm-auto main_vid_wrapper">
1659                <div class="main_vid_container visible_video" data-id="nerf_decomp" data-key="full">
1660                    <video disableRemotePlayback src="static/512/nerf_decomp/bird/full_tiled_labeled.mp4"
1661                           class="main_vid"
1662                           autoplay
1663                           loop muted playsinline
1664                           data-suffix="_tiled_labeled.mp4"></video>
1665                </div>
1666                <div class="main_vid_container" data-id="nerf_decomp" data-key="recon2">
1667                    <video disableRemotePlayback src="static/512/nerf_decomp/bird/recon2_tiled_labeled.mp4"
1668                           class="main_vid"
1669
1670                           loop muted playsinline
1671                           data-suffix="_tiled_labeled.mp4"></video>
1672                </div>
1673                <div class="main_vid_container" data-id="nerf_decomp" data-key="0">
1674                    <video disableRemotePlayback src="static/512/nerf_decomp/bird/0_tiled_labeled.mp4" class="main_vid"
1675
1676                           loop muted playsinline
1677                           data-suffix="_tiled_labeled.mp4"></video>
1678                </div>
1679                <div class="main_vid_container" data-id="nerf_decomp" data-key="1">
1680                    <video disableRemotePlayback src="static/512/nerf_decomp/bird/1_tiled_labeled.mp4" class="main_vid"
1681
1682                           loop muted playsinline
1683                           data-suffix="_tiled_labeled.mp4"></video>
1684                </div>
1685                <div class="main_vid_container" data-id="nerf_decomp" data-key="2">
1686                    <video disableRemotePlayback src="static/512/nerf_decomp/bird/2_tiled_labeled.mp4" class="main_vid"
1687
1688                           loop muted playsinline
1689                           data-suffix="_tiled_labeled.mp4"></video>
1690                </div>
1691                <div class="main_vid_container" data-id="nerf_decomp" data-key="3">
1692                    <video disableRemotePlayback src="static/512/nerf_decomp/bird/3_tiled_labeled.mp4" class="main_vid"
1693
1694                           loop muted playsinline
1695                           data-suffix="_tiled_labeled.mp4"></video>
1696                </div>
1697            </div>
1698            <div class="col-12 col-sm-auto pt-3 pt-sm-0  obj_btn_wrapper d-block d-sm-flex select_prompt_vid select_prompt_forvid"
1699                 data-for="nerf_decomp"
1700                 data-suffix="">
1701                <div class="obj_btn_container ps-md-2 d-flex d-sm-grid">
1702                    <div class="d-flex d-sm-block">
1703                        <!--                        <div>-->
1704                        <div class="obj_btn selected d-xxs-none" data-val="full">Original</div>
1705                        <div class="obj_btn selected d-xxs-block d-none" data-val="full">Orig.</div>
1706                        <!--                        </div>-->
1707                        <div class="obj_btn mt-sm-2" data-val="recon2">
1708                            <span class="d-none d-md-inline-block">Reconstructed</span>
1709                            <span class="d-none d-md-none d-sm-inline-block">Reconstr.</span>
1710                            <span class="d-sm-none">Recon.</span>
1711                        </div>
1712                    </div>
1713                    <div class="label d-none d-sm-block mb-1 mt-3" style="text-align: center">Objects</div>
1714                    <div class="obj_btn obj_btn_sm d-none d-sm-block"
1715                         style="background-color:rgb(242, 242, 98); color:black !important; "
1716                         data-val="0">1
1717                    </div>
1718                    <div class="obj_btn obj_btn_sm d-none d-sm-block"
1719                         style="background-color:rgb(238, 121, 53); color: white !important;" data-val="1">2
1720                    </div>
1721                    <div class="obj_btn obj_btn_sm d-none d-sm-block"
1722                         style="background-color:rgb(160, 110, 243); color: white !important;" data-val="2">3
1723                    </div>
1724                    <div class="obj_btn obj_btn_sm d-none d-sm-block"
1725                         style="background-color:rgb(87, 48, 241); color: white !important;" data-val="3">4
1726                    </div>
1727                    <!--                    <div class="d-sm-none d-flex align-items-center">-->
1728                    <!--                    <div style="flex-grow: 1" class="d-flex d-sm-none"></div>-->
1729                    <div class="label me-1 d-sm-none d-flex" style="justify-content: end; flex-grow: 1">Objects:</div>
1730                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1731                         style="background-color:rgb(242, 242, 98);" data-val="0">1
1732                    </div>
1733                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1734                         style="background-color:rgb(238, 121, 53); color: white !important;" data-val="1">2
1735                    </div>
1736                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1737                         style="background-color:rgb(160, 110, 243); color: white !important;" data-val="2">3
1738                    </div>
1739                    <div class="obj_btn obj_btn_sm d-sm-none d-flex justify-content-center"
1740                         style="background-color:rgb(87, 48, 241); color: white !important;" data-val="3">4
1741                    </div>
1742                    <!--                    </div>-->
1743                </div>
1744            </div>
1745        </div>
1746
1747
1748        <h5 id="layout_optim"><span class="me-2 material-symbols-rounded">
1749open_with
1750</span>Automatically arranging existing objects</h5>
1751        <div>
1752            <p>Allowing gradients to flow
1753                only into layout parameters while freezing a set of provided
1754                3D assets results in reasonable object configurations, such
1755                as a chair tucked into a table with spaghetti on it, despite no
1756                such guidance being provided in the text conditioning.</p>
1757            <div class="select_prompt select_prompt_forvid my-2" data-for="layout_optim"
1758                 data-prefix="static/512/layout_optim/"
1759                 data-suffix="" data-order="0">
1760                <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose assets:</b>
1761                <div><code class="selected" data-val="pasta/"
1762                           style="--img-bgc: rgb(197,192,136); --img-txc: rgb(60,27,12);">🍝 spaghetti / 🪑 chair / 🔴
1763                    table</code></div>
1764                <div>
1765                    <code data-val="bath/" style="--img-bgc: rgb(15,15,15); --img-txc: rgb(250,250,75);">🦆 rubber duck
1766                        / 🛁 bathtub / 🚿 shower head</code>
1767                </div>
1768                <div>
1769                    <code data-val="monitor_loop/"
1770                          style="--img-bgc: rgb(60,60,60); --img-txc: rgb(31,228,255); white-space: nowrap;">🖥️ monitor
1771                        /
1772                        ⌨️ keyboard / 🖱️ mouse</code>
1773                </div><!--
1774           -->
1775
1776
1777            </div>
1778            <div class=" visible_video mt-3 video_flex" data-id="layout_optim"
1779                 data-key="">
1780                <div class="row_vid">
1781                    <video disableRemotePlayback src="static/512/layout_optim/pasta/0_bg.mp4"
1782                           autoplay
1783                           loop muted playsinline
1784                           data-suffix="0_bg.mp4"></video>
1785                </div>
1786                <div data-label="Input objects" class="row_vid">
1787                    <video disableRemotePlayback src="static/512/layout_optim/pasta/1_bg.mp4"
1788                           autoplay
1789                           loop muted playsinline
1790                           data-suffix="1_bg.mp4"></video>
1791                </div>
1792                <div class="row_vid">
1793                    <video disableRemotePlayback src="static/512/layout_optim/pasta/2_bg.mp4"
1794                           autoplay
1795                           loop muted playsinline
1796                           data-suffix="2_bg.mp4"></video>
1797                </div>
1798                <ltx class="d-none d-sm-flex arrow" style="margin: 0 -0.4em">\LARGE \boldsymbol{\rightarrow}</ltx>
1799                <div class="flex-break d-sm-none"></div>
1800                <ltx class="d-block d-sm-none" style="margin-top: 1.2em;margin-bottom: -0.4em;">\LARGE
1801                    \boldsymbol{\downarrow}
1802                </ltx>
1803                <div class="flex-break d-sm-none"></div>
1804                <div class="row_vid" data-label="Learned layout">
1805                    <video disableRemotePlayback src="static/512/layout_optim/pasta/full_bg.mp4"
1806                           autoplay
1807                           loop muted playsinline
1808                           data-suffix="full_bg.mp4"></video>
1809                </div>
1810
1811            </div>
1812        </div>
1813
1814
1815        <h5 class="mt-5" id="layout_diversity"><span class="me-2 material-symbols-rounded">
1816open_with
1817</span>Sampling different layouts</h5>
1818        <div>
1819            <p>Our method discovers different
1820                plausible arrangements for objects. Here, we optimize each
1821                example over
1822                <ltx>N=4</ltx>
1823                layouts and show differences in composited scenes, e.g. flamingos wading inside vs. beside the
1824                pond.
1825            </p>
1826            <div class="select_prompt select_prompt_forvid my-2" data-for="layout_diversity"
1827                 data-prefix="static/512/layout_diversity/"
1828                 data-suffix="" data-order="0">
1829                <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose a prompt:</b>
1830                <!-- <div><code class="selected" data-val="raccoon"
1831                            style="&#45;&#45;img-bgc: rgb(64,7,42); &#45;&#45;img-txc: rgb(81,231,35);">“two cats in fancy suits playing
1832                     snooker”</code></div>-->
1833                <div>
1834                    <code class="selected" data-val="flamingo/"
1835                          style="--img-bgc: rgb(211,126,43); --img-txc: rgb(255,255,255);">“two
1836                        flamingos sipping on cocktails in a desert oasis”</code>
1837                </div>
1838                <div>
1839                    <code data-val="slippers/" style="--img-bgc: rgb(206,183,171); --img-txc: rgb(76,10,5);">“a robe, a
1840                        pair of slippers, and a candle”</code>
1841                </div>
1842
1843            </div>
1844
1845
1846            <div class=" visible_video video_flex mt-3" data-label="Learned layouts" data-id="layout_diversity"
1847                 style="column-gap: 1em !important;"
1848                 data-key="">
1849                <video disableRemotePlayback src="static/512/layout_diversity/flamingo/0_bg.mp4"
1850                       autoplay
1851
1852                       loop muted playsinline
1853                       data-suffix="0_bg.mp4" class="row_vid"></video>
1854                <video disableRemotePlayback src="static/512/layout_diversity/flamingo/1_bg.mp4"
1855                       autoplay
1856                       loop muted playsinline
1857
1858                       data-suffix="1_bg.mp4" class="row_vid"></video>
1859                <div class="flex-break d-sm-none"></div>
1860                <video disableRemotePlayback src="static/512/layout_diversity/flamingo/2_bg.mp4"
1861                       autoplay
1862                       loop muted playsinline
1863
1864                       data-suffix="2_bg.mp4" class="row_vid"></video>
1865                <video disableRemotePlayback src="static/512/layout_diversity/flamingo/3_bg.mp4"
1866                       autoplay
1867
1868                       loop muted playsinline
1869                       data-suffix="3_bg.mp4" class="row_vid"></video>
1870
1871
1872            </div>
1873        </div>
1874
1875        </div>
1876
1877        <h3 class="pt-0 pt-md-0 mt-5 mt-sm-5 mt-md-5 mb-2" data-id="analysis"><span style="" class="pe-1"
1878                                                                                    data-clipboard-text="http://localhost:8009/layoutlearning/#analysis"
1879                                                                                    data-bs-toggle="tooltip"
1880                                                                                    data-anchor=""
1881                                                                                    data-bs-placement="right"
1882                                                                                    data-bs-original-title="Copy link">
1883            <div style="display: inline-flex;
1884    align-items: center;">
1885                Analysis
1886            </div>
1887        </span></h3>
1888        <h5 id="ablations" class="mt-3"><span class="me-2 material-symbols-rounded">
1889open_with
1890</span>Ablation</h5>
1891        <div id="ablations_container">
1892            <p>We optimize different variants of our model with
1893                <ltx>K=3</ltx>
1894                NeRFs on a list of 30 prompts, each containing three objects. Training
1895                <ltx>K</ltx>
1896                NeRFs provides some decomposition, but most objects are
1897                scattered across 2 or 3 models. Learning one layout alleviates some of these issues, but only with
1898                multiple layouts do we see
1899                strong disentanglement. We show two representative examples of emergent objects to visualize these
1900                differences.
1901            </p>
1902            <div class="select_prompt select_prompt_forvid my-2" data-for="ablations"
1903                 data-prefix="static/512/ablations/"
1904                 data-order="0">
1905                <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose a prompt:</b>
1906                <div><code class="selected" data-val="backpack/"
1907                           style="--img-bgc: rgb(7,27,191); --img-txc: rgb(102,223,238);">“a backpack, water bottle, and
1908                    bag of chips”</code></div>
1909                <div>
1910                    <code data-val="cake/" style="--img-bgc: rgb(65,23,8); --img-txc: rgb(226,230,230);">“a slice of
1911                        cake, vase of roses, and bottle of wine”</code>
1912                </div>
1913
1914            </div>
1915            <div class="select_prompt select_prompt_forvid my-2" data-for="ablations" data-suffix=""
1916                 data-order="0">
1917                <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose a model variant:</b>
1918
1919                <div><code data-val="knerfs/"
1920                           style="--img-bgc: #555; --img-txc: #fff;">Learn K NeRFs</code></div>
1921                <div><code data-val="1layout/"
1922                           style="--img-bgc: #555; --img-txc: #fff;">+ learn 1 layout</code></div>
1923                <div><code class="selected" data-val="ours/"
1924                           style="--img-bgc: #555; --img-txc: #fff;">+ learn N layouts</code></div>
1925                <div><code data-val="perobj/"
1926                           style="--img-bgc: #555; --img-txc: #fff;">
1926Per-object SDS</code></div>
1927            </div>
1928            <div class=" visible_video video_flex mt-3" data-label="Discovered objects" data-id="ablations"
1929
1930                 data-key="">
1931                <video disableRemotePlayback src="static/512/ablations/backpack/ours/0_nobg.mp4"
1932                       autoplay
1933                       loop muted playsinline
1934                       data-suffix="0_nobg.mp4" class="row_vid"></video>
1935                <video disableRemotePlayback src="static/512/ablations/backpack/ours/1_nobg.mp4"
1936                       autoplay
1937                       loop muted playsinline
1938                       data-suffix="1_nobg.mp4" class="row_vid"></video>
1939                <!--                <div class="flex-break d-sm-none"></div>-->
1940                <video disableRemotePlayback src="static/512/ablations/backpack/ours/2_nobg.mp4"
1941                       autoplay
1942                       loop muted playsinline
1943                       data-suffix="2_nobg.mp4" class="row_vid"></video>
1944                <!--                <video disableRemotePlayback src="static/512/layout_diversity/flamingo/3_bg.mp4"-->
1945                <!--                       autoplay-->
1946                <!--                       loop muted playsinline-->
1947                <!--                       data-suffix="3_bg.mp4" class="row_vid"></video>-->
1948
1949
1950            </div>
1951        </div>
1952
1953
1954        <h5 id="limitations" class="mt-5"><span class="me-2 material-symbols-rounded">
1955open_with
1956</span>Limitations</h5>
1957        <div id="limitations_container">
1958            <p> Layout learning inherits failure modes from SDS, such as the Janus problem. It also may undesirably
1959                group objects that always move together,
1960                such as a horse and its rider, or segment objects in undesired ways, such as breaking off an arm from
1961                the ninja's body. For certain prompts that generate many
1962                small objects, choosing
1963                <ltx>K</ltx>
1964                correctly is challenging, hurting disentanglement. Finally, in some cases, despite different initial
1965                values,
1966                layouts converge to very similar final
1967                configurations.
1968            </p>
1969            <div class="select_prompt select_prompt_forvid my-2" data-for="limitations"
1970                 data-prefix="static/512/limitations/"
1971                 data-suffix="" data-order="0">
1972                <b style="padding: 0 0;vertical-align: bottom;" class="label">Choose a prompt:</b>
1973                <!-- <div><code class="selected" data-val="moose"
1974                            style="&#45;&#45;img-bgc: rgb(176,206,249); &#45;&#45;img-txc: rgb(95,49,14);">“a moose staring down a
1975                     snowman by a cabin”</code></div>-->
1976                <div>
1977                    <code class="selected" data-val="horse"
1978                          style="--img-bgc: rgb(40,80,161); --img-txc: rgb(255,194,88);">“some
1979                        astronauts forming a human pyramid riding a horse”</code>
1980                </div>
1981                <div>
1982                    <code data-val="llama" style="--img-bgc: rgb(215,249,128); --img-txc: rgb(41,95,91);">“two fancy
1983                        llamas enjoying a tea party”</code>
1984                </div>
1985                <div>
1986                    <code data-val="ninja" style="--img-bgc: rgb(143,31,33); --img-txc: rgb(209,246,166);">“a ninja
1987                        slicing different fruit in mid-air with a katana”</code>
1988                </div>
1989
1990                <div>
1991                    <code data-val="monkey" style="--img-txc: rgb(175,175,175); --img-bgc: rgb(56,23,2);">“a monkey
1992                        having a whiskey and a cigar, using a typewriter”</code>
1993                </div>
1994
1995            </div>
1996            <div class="video_flex visible_video mt-3" data-id="limitations"
1997
1998                 data-key="">
1999                <div class="row_vid">
2000                    <video disableRemotePlayback src="static/512/limitations/horse/0_nobg.mp4"
2001                           autoplay
2002                           loop muted playsinline
2003                           data-suffix="/0_nobg.mp4" class="row_vid"></video>
2004                </div>
2005
2006                <div class="row_vid" data-hide="ninja" data-show="horse,llama,monkey">
2007                    <video disableRemotePlayback src="static/512/limitations/horse/1_nobg.mp4"
2008                           autoplay
2009                           loop muted playsinline
2010                           data-suffix="/1_nobg.mp4" class="row_vid"></video>
2011                </div>
2012                <div class="row_vid" data-label="Discovered objects" data-show="ninja" data-hide="horse,llama,monkey"
2013                     style="display:none;">
2014                    <video disableRemotePlayback src="static/512/limitations/horse/1_nobg.mp4"
2015                           autoplay
2016                           loop muted playsinline
2017                           data-suffix="/1_nobg.mp4" class="row_vid"></video>
2018                </div>
2019
2020                <div class="row_vid" data-hide="monkey,ninja" data-show="horse,llama" data-label="Discovered objects">
2021                    <video disableRemotePlayback src="static/512/limitations/horse/2_nobg.mp4"
2022                           autoplay
2023                           loop muted playsinline
2024                           data-suffix="/2_nobg.mp4" class="row_vid"></video>
2025                </div>
2026                <div class="row_vid" data-show="monkey,ninja" data-hide="horse,llama" style="display: none">
2027                    <video disableRemotePlayback src="static/512/limitations/horse/2_nobg.mp4"
2028                           autoplay
2029                           loop muted playsinline
2030                           data-suffix="/2_nobg.mp4" class="row_vid"></video>
2031                </div>
2032                <div data-show="llama,astronaut,moose,monkey,horse" data-hide="ninja" class="row_vid">
2033                    <video disableRemotePlayback src="static/512/limitations/horse/3_nobg.mp4"
2034                           autoplay
2035
2036                           loop muted playsinline
2037                           data-suffix="/3_nobg.mp4" class="row_vid"></video>
2038                </div>
2039                <div class="row_vid" data-show="llama,astronaut,horse" data-hide="ninja,moose,monkey">
2040                    <video disableRemotePlayback src="static/512/limitations/horse/4_nobg.mp4"
2041                           autoplay
2042
2043
2044                           loop muted playsinline
2045                           data-suffix="/4_nobg.mp4"></video>
2046                </div>
2047                <!--                <div data-show="llama,moose,ninja,astronaut,horse" data-hide="monkey"-->
2048                <!--                     class="padding mx-sm-2 mx-0 d-none d-md-block"></div>-->
2049
2050                <!--                <span style="margin: 0 -0.4em" data-show="llama,moose,ninja,astronaut,horse"-->
2051                <!--                      data-hide="monkey" class="d-xs-none arrow">-->
2052                <!--<span style="height:100%;display:flex">-->
2053                <!--                    <ltxstyle="margin: 0 -0.4em">\LARGE \boldsymbol{\rightarrow}</ltx></span>-->
2054                <!--                </span>-->
2055                <ltx data-show="llama,moose,ninja,astronaut,horse"
2056                     data-hide="monkey" class="d-under-md-none arrow" style="margin: 0 -0.4em">\LARGE
2057                    \boldsymbol{\rightarrow}
2058                </ltx>
2059
2060                <div data-show="llama,moose,ninja,astronaut,horse"
2061                     data-hide="monkey" class="flex-break d-md-none"></div>
2062
2063                <!--
2064                                <ltx class="d-sm-none" data-show="" style="display:none;"
2065                                     data-hide="monkey,horse,llama">\Huge {\downarrow}
2066                                </ltx>
2067                -->
2068                <ltx class="d-md-none" data-show="horse,llama,ninja" style="margin-top: 1.2em;margin-bottom: -0.4em;"
2069                     data-hide="monkey">\LARGE \boldsymbol{\downarrow}
2070                </ltx>
2071
2072
2073                <div data-show="llama,moose,ninja,astronaut,horse"
2074                     data-hide="monkey" class="flex-break d-md-none"></div>
2075                <div class="row_vid" data-label="Scene" data-show="llama,moose,ninja,astronaut,horse"
2076                     data-hide="monkey">
2077                    <video disableRemotePlayback src="static/512/limitations/horse/full_nobg.mp4"
2078                           autoplay
2079                           loop muted playsinline
2080
2081                           data-suffix="/full_nobg.mp4"></video>
2082                </div>
2083
2084                <!--                <video disableRemotePlayback src="static/512/layout_diversity/flamingo/3_bg.mp4"-->
2085                <!--                       autoplay-->
2086                <!--                       loop muted playsinline-->
2087                <!--                       data-suffix="3_bg.mp4" class="row_vid"></video>-->
2088
2089
2090            </div>
2091        </div>
2092    </section>
2093    <section id="citation">
2094        <h3 class="mt-5 mt-sm-4 mt-md-5" data-exclude-link="true"><span style="display: inline-flex;
2095    align-items: center;" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy BibTex"
2096                                                                        data-clipboard-target=".cit"><span
2097                class="me-2 material-symbols-rounded">
2098format_quote
2099</span>Citation</span>
2100            <div style="font-size: 1rem;" class="links">
2101
2102                <a href="static/layoutlearning.pdf" target="_blank" style="display: unset" class="obj_btn px-2 py-1">
2103                    Paper PDF
2104                </a>
2105                <!--                 &lt;!&ndash;  <button type="button" data-action="pause" data-target-id="${el.id}" class="btn btn-dark"><i class="fa-solid fa-xs fa-pause"></i></button>&ndash;&gt;-->
2106            </div>
2107        </h3>
2108        <div class="cit_cont">
2109        <pre class="cit" data-clipboard-target=".cit" data-bs-toggle="tooltip" data-bs-placement="right"
2110             title="Copy BibTex">
2111@misc{epstein2024disentangled,
2112      title={Disentangled 3D Scene Generation with Layout Learning},
2113      author={Dave Epstein and Ben Poole and Ben Mildenhall and Alexei A. Efros and Aleksander Holynski},
2114      year={2024},
2115      eprint={2402.16936},
2116      archivePrefix={arXiv},
2117      primaryClass={cs.CV}
2118}		</pre>
2119        </div>
2120
2121
2122    </section>
2123    <section class="pb-4">
2124        <h3 class="mt-5 mt-sm-4 mt-md-5" data-exclude-link="">
2125            Acknowledgements
2126        </h3>
2127        <p>
2128            We thank Dor Verbin, Ruiqi Gao, Lucy Chai, and Minyoung Huh for their helpful comments, and Arthur Brussee
2129            for help with an NGP implementation. DE was
2130            partly supported by the PD Soros Fellowship. DE conducted part of this research at Google, with additional
2131            funding from an ONR MURI grant.
2132        </p>
2133    </section>
2134</main>
2135
2136
2137<script>
2138    document.querySelectorAll('h3, h5').forEach(
2139        e => {
2140            if (e.getAttribute('data-exclude-link') === null) {
2141                let el = e;
2142                e.innerHTML = `<span style="" class="pe-1">${e.innerHTML}</span>`
2143                let link = location.href.replace(location.search, '').replace(location.hash, '') + '#' + (e.id || e.getAttribute('data-id'));
2144                eid = e.id
2145                e = e.firstChild
2146                e.setAttribute('data-clipboard-text', link)
2147                e.setAttribute('data-bs-toggle', 'tooltip')
2148                e.setAttribute('data-anchor', eid);
2149                e.setAttribute('data-bs-placement', "right")
2150                e.setAttribute('title', 'Copy link')
2151
2152            }
2153        }
2154    )
2155    document.querySelectorAll('ltx').forEach(e => {
2156        let txt = e.innerHTML;
2157        let params = e.getAttribute('data-latex-params');
2158        params = params || '';
2159        if (params) params += '&';
2160        let cls_str = '';
2161        let attr_str = '';
2162        if (e.hasAttributes()) {
2163            for (const attr of e.attributes) {
2164                if (attr.name === 'class') cls_str = attr.value;
2165                else attr_str += `${attr.name}="${attr.value}" `;
2166            }
2167        }
2168        e.outerHTML = `<img class="ltx ${cls_str}" ${attr_str} src="https://math.vercel.app?${params}inline=${txt}" alt="${txt}">`;
2169    })
2170    let clip = new ClipboardJS('[data-clipboard-target],[data-clipboard-text]');
2171    clip.on('success', function (e) {
2172        if (e.trigger.parentElement.classList.contains('links')) {
2173            tooltipList.get(document.getElementById('citelink')).enable();
2174            tooltipList.get(document.getElementById('citelink')).show();
2175            setTimeout(function () {
2176                tooltipList.get(document.getElementById('citelink')).hide();
2177                tooltipList.get(document.getElementById('citelink')).disable();
2178            }, 2000);
2179        } else {
2180            let orig = e.trigger.getAttribute('data-bs-original-title');
2181            if (e.trigger.classList.contains('cit')) e.trigger.setAttribute('data-bs-original-title', 'Citation copied!');
2182            else e.trigger.setAttribute('data-bs-original-title', 'Link copied!');
2183            tooltipList.get(e.trigger).show();
2184            e.clearSelection();
2185            if (e.trigger.hasAttribute('data-clipboard-text')) {
2186                // jump(e.trigger.getAttribute('data-anchor')); // this one is good - uncomment if functionality is desired
2187                // e.trigger.scrollIntoView({behavior: 'smooth'});
2188            }
2189            setTimeout(function () {
2190                e.trigger.setAttribute('data-bs-original-title', orig);
2191            }, 2000);
2192        }
2193    })
2194
2195    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
2196    var tooltipList = new Map(tooltipTriggerList.map(function (tooltipTriggerEl) {
2197        return [tooltipTriggerEl, new bootstrap.Tooltip(tooltipTriggerEl)]
2198    }),);
2199
2200    try {
2201        tooltipList.get(document.getElementById('citelink')).disable();
2202    } catch (e) {
2203
2204    }
2205    /*  document.querySelectorAll('#results img, .teaser *:not(.insetwrap) > img, .teaser .insetwrap').forEach(e => {
2206          e.addEventListener("click", function () {
2207              let zoomed = e.classList.contains('zoom');
2208              document.querySelectorAll('#results img, .teaser *:not(.insetwrap) > img, .teaser .insetwrap').forEach(ee => {
2209                  ee.classList.remove('zoom');
2210              });
2211              if (!zoomed) e.classList.add('zoom');
2212          })
2213      });
2214
2215      window.addEventListener('click', function (e) {
2216          let imgclick = [...document.querySelectorAll('#results img, .teaser *:not(.insetwrap) > img, .teaser .insetwrap')].map(ee => ee.contains(e.target)).some(x => x);
2217          if (!imgclick) {
2218              document.querySelectorAll('#results img, .teaser *:not(.insetwrap) > img, .teaser .insetwrap').forEach(ee => {
2219                  ee.classList.remove('zoom');
2220              });
2221          }
2222      });
2223  */
2224    document.querySelectorAll('.hoverteaser').forEach(e => {
2225        e.addEventListener('mouseover', function () {
2226            let tags = ['move', 'resize', 'replace', 'newstyle', 'newlayout'];
2227            let tag = e.getAttribute('data-for');
2228            tags.forEach(t => {
2229                if (t != tag) {
2230                    document.querySelectorAll(`.teaser .${t}`).forEach(ee => {
2231                        ee.style.opacity = "0.2";
2232                    });
2233                }
2234
2235            });
2236        });
2237        e.addEventListener("mouseout", function () {
2238            let tags = ['move', 'resize', 'replace', 'newstyle', 'newlayout'];
2239            // let tag = e.getAttribute('data-for');
2240            tags.forEach(t => {
2241                // if (t != tag) {
2242                document.querySelectorAll(`.teaser .${t}`).forEach(ee => {
2243                    ee.style.opacity = "1.0";
2244                });
2245                // }
2246
2247            });
2248        });
2249    });
2250
2251    document.querySelectorAll('.select_prompt code, .select_prompt_vid .obj_btn').forEach(e => {
2252        e.addEventListener("click", function () {
2253            let dad = e.parentElement.parentElement;
2254            if (dad.classList.contains('obj_btn_container')) dad = dad.parentElement;
2255            let tgtid = dad.getAttribute('data-for');
2256            let tgt = document.getElementById(tgtid);
2257            let orig = document.getElementById(tgtid + '_orig');
2258            let orig2 = document.getElementById(tgtid + '_orig2');
2259            let origdb = document.getElementById(tgtid + '_origdreambooth');
2260            dad.querySelectorAll('code, .obj_btn').forEach(e => e.classList.remove('selected'))
2261            e.classList.add('selected');
2262            let prefixsel = document.querySelector(`.select_prompt[data-for="${tgtid}"][data-prefix], .select_prompt_vid[data-for="${tgtid}"][data-prefix]`);
2263            let prefix = prefixsel.querySelector('.selected').getAttribute('data-val');
2264            let str = prefixsel.getAttribute('data-prefix') + prefix;
2265            document.querySelectorAll(`[data-show*="${prefix}"]`).forEach(e => {
2266                e.style.setProperty('display', 'inherit'); //, 'important');
2267            });
2268            document.querySelectorAll(`[data-hide*="${prefix}"]`).forEach(e => {
2269                e.style.setProperty('display', 'none'); //, 'important');
2270                e.classList.remove('selected');
2271            });
2272            let suffixsel;
2273            let suffix;
2274            let infixsel;
2275            let infix;
2276            infixsel = document.querySelector(`.select_prompt[data-for="${tgtid}"][data-infix][data-show="${prefix}"], .select_prompt_vid[data-for="${tgtid}"][data-infix][data-show="${prefix}"]`);
2277            if (infixsel !== null) {
2278                try {
2279                    infix = infixsel.querySelector('.selected').getAttribute('data-val');
2280                } catch (e) {
2281                    infix = infixsel.firstElementChild.nextElementSibling.firstElementChild.getAttribute('data-val');
2282                    infixsel.firstElementChild.nextElementSibling.firstElementChild.classList.add('selected');
2283                }
2284                str += infix;
2285                // console.log('infix', infix);
2286            }
2287
2288            suffixsel = document.querySelector(`.select_prompt[data-for="${tgtid}"][data-suffix][data-show="${prefix}"], .select_prompt_vid[data-for="${tgtid}"][data-suffix][data-show="${prefix}"]`);
2289            if (suffixsel !== null) {
2290                try {
2291                    suffix = suffixsel.querySelector('.selected').getAttribute('data-val');
2292                } catch (e) {
2293                    suffix = suffixsel.firstElementChild.nextElementSibling.firstElementChild.getAttribute('data-val');
2294                    suffixsel.firstElementChild.nextElementSibling.firstElementChild.classList.add('selected');
2295                }
2296            } else {
2297                suffixsel = document.querySelector(`.select_prompt[data-for="${tgtid}"][data-suffix], .select_prompt_vid[data-for="${tgtid}"][data-suffix]`);
2298                suffix = suffixsel.querySelector('.selected').getAttribute('data-val');
2299            }
2300            if (suffixsel.querySelector('.selected').hasAttribute('data-hideorig2') && orig2) {
2301                orig2.style.display = 'none';
2302                orig2.classList.add('hidden');
2303            } else if (orig2) {
2304                orig2.style.display = 'inherit';
2305                orig2.classList.remove('hidden');
2306            }
2307            if (orig2) orig2.src = prefixsel.getAttribute('data-prefix') + suffix + 'original' + suffixsel.getAttribute('data-suffix');
2308            if (origdb) origdb.src = prefixsel.getAttribute('data-prefix') + 'dreambooth' + suffix + suffixsel.getAttribute('data-suffix');
2309            if (orig) orig.src = str + 'original' + suffixsel.getAttribute('data-suffix');
2310            if (prefixsel.querySelector('.selected') === suffixsel.querySelector('.selected')) suffix = "";
2311            if (dad.classList.contains('select_prompt_forvid')) {
2312                if (dad.classList.contains('select_prompt_vid')) {
2313                    document.querySelectorAll(`[data-id="${tgtid}"][data-key="${suffix}"]`).forEach(e_ => {
2314                        // e_.style.display = 'flex';
2315                        let t = document.querySelector(`.visible_video[data-id="${tgtid}"] video`).currentTime;
2316                        e_.style.opacity = '1';
2317                        e_.querySelectorAll('video').forEach(v => {
2318                            v.play();
2319                            v.currentTime = t;
2320                        });
2321                        e_.classList.add('visible_video');
2322                    });
2323                    document.querySelectorAll(`[data-id="${tgtid}"]:not([data-key="${suffix}"])`).forEach(e_ => {
2324                        e_.style.opacity = '0';
2325                        e_.classList.remove('visible_video');
2326                    });
2327                } else {
2328                    document.querySelectorAll(`[data-id="${tgtid}"]`).forEach(e_ => {
2329
2330                        e_.querySelectorAll('video').forEach(e => {
2331                            e.src = str + (e.parentElement.getAttribute('data-key') || (suffix + suffixsel.getAttribute('data-suffix'))) + e.getAttribute('data-suffix');
2332                        })
2333                    });
2334                    if (tgtid == "teaser" || tgtid == "cond_optim" || tgtid == "nerf_decomp") {
2335                        document.querySelectorAll(`[data-id="${tgtid}"][data-key="full"]`).forEach(e_ => {
2336                            // e_.style.display = 'flex';
2337                            // let t = document.querySelector(`.visible_video[data-id="${tgtid}"] video`).currentTime;
2338                            e_.style.opacity = '1';
2339                            // e_.querySelectorAll('video').forEach(v => {
2340                            //     v.currentTime = t;
2341                            // });
2342                            e_.classList.add('visible_video');
2343                        });
2344                        document.querySelectorAll(`[data-id="${tgtid}"]:not([data-key="full"])`).forEach(e_ => {
2345                            e_.style.opacity = '0';
2346                            e_.classList.remove('visible_video');
2347                        });
2348                        document.querySelectorAll(`.select_prompt_vid[data-for="${tgtid}"] .obj_btn`).forEach(e_ => {
2349                            if (e_.getAttribute('data-val') == "full") e_.classList.add('selected');
2350                            else e_.classList.remove('selected');
2351                        });
2352                    }
2353                }
2354            } else {
2355                str += suffix + suffixsel.getAttribute('data-suffix');
2356                tgt.src = str;
2357            }
2358        });
2359    });
2360
2361    // document.querySelectorAll('.main_vid_wrapper').forEach(e => {
2362    //     let vids = e.querySelectorAll('video');
2363    //     let vid = vids[0];
2364    //     vid.addEventListener("play", function () {
2365    //         vids.forEach((v, i) => {
2366    //             if (i) v.play();
2367    //         });
2368    //     });
2369    //     vid.addEventListener("seeking", function () {
2370    //         vids.forEach((v, i) => {
2371    //             if (i) v.currentTime = vid.currentTime;
2372    //         });
2373    //     });
2374    //     vid.addEventListener("seeked", function () {
2375    //         vids.forEach((v, i) => {
2376    //             if (i) v.currentTime = vid.currentTime;
2377    //         });
2378    //     });
2379    // })
2380
2381    function playPauseVideo() {
2382        let videos = document.querySelectorAll("video");
2383        videos.forEach((video) => {
2384            // We can only control playback without insteraction if video is mute
2385            video.muted = true;
2386            // Play is a promise so we need to check we have it
2387            video.onloadeddata = function () {
2388                let playPromise = video.play();
2389                if (playPromise !== undefined) {
2390                    playPromise.then((_) => {
2391                        let observer = new IntersectionObserver(
2392                            (entries) => {
2393                                entries.forEach((entry) => {
2394                                    if (
2395                                        entry.intersectionRatio !== 1 &&
2396                                        !video.paused
2397                                    ) {
2398                                        video.pause();
2399                                    } else if (video.paused) {
2400                                        video.play();
2401                                    }
2402                                });
2403                            },
2404                            {threshold: 0.2}
2405                        );
2406                        observer.observe(video);
2407                    });
2408                }
2409            }
2410        });
2411    }
2412
2413
2414
2415    function render_vid(l, to) {
2416        l.shift().click();
2417        setTimeout(() => {render_vid(l, to);}, to);
2418    }
2419
2420    // cond optim
2421    // [document.querySelector('[data-val="grumpycat"]')]
2422
2423    // get all buttons
2424    // [...document.querySelectorAll('[data-for="cond_optim"][data-suffix] .obj_btn:not(.selected)')].filter((e) => e.offsetParent !== null)
2425
2426
2427
2428
2429    // playPauseVideo();
2430    // "[0]pad=iw+16:ih:color=black[0v];[1]pad=iw:ih+33:color=black[1v];[1v][2:v]vstack=inputs=2[v01];[v01]scale=-1:512[v02];[0v][v02]hstack=inputs=2[v03];[v03]scale=-1:256"
2431</script>
2431
2432</body>
2433</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.