1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="description" content="EgoX: Egocentric Video Generation from a Single Exocentric Video."> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>EgoX</title> 9 <link rel="icon" type="image/png" href="static/images/fevicon-davian.png"> 10 11 <!-- Google Fonts --> 12 <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet"> 13 14 <!-- CSS --> 15 <link rel="stylesheet" href="./static/css/bulma.min.css"> 16 <link rel="stylesheet" href="./static/css/fontawesome.all.min.css"> 17 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"> 18 <link rel="stylesheet" href="./static/css/index.css"> 19 20 <!-- MathJax --> 21
21<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
21 22 23
23<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
23 24
24<script defer src="./static/js/fontawesome.all.min.js"></script>
24 25 26 <style> 27 .strong_acg { 28 color: rgb(0, 90, 190); 29 font-weight: 700 30 } 31 32 .strong_ic { 33 color: rgb(230, 34, 46); 34 font-weight: 700 35 } 36 37 .media-row { 38 display: flex; 39 justify-content: center; 40 align-items: flex-start; 41 gap: 16px; 42 max-width: 1200px; 43 margin: 20px auto 0 auto; 44 padding: 0 8px; 45 width: 100%; 46 } 47 48 .media-cell { 49 flex: 1; 50 max-width: 100%; 51 display: flex; 52 flex-direction: column; 53 align-items: center; 54 } 55 56 .media-cell img, 57 .media-cell video { 58 width: 100%; 59 height: auto; 60 object-fit: contain; 61 image-rendering: auto; 62 border-radius: 0; 63 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); 64 } 65 66 /* ë°ìí ëì */ 67 @media screen and (max-width: 768px) { 68 .media-row { 69 flex-direction: column; 70 gap: 16px; 71 } 72 73 .media-cell { 74 width: 100% !important; 75 } 76 } 77 78 .publication-links .button { 79 text-transform: none; 80 } 81 82 .concept-overview-caption p { 83 width: 90%; 84 } 85 86 .concept-overview { 87 width: 70%; 88 margin: 0 auto; 89 } 90 91 @media screen and (max-width: 768px) { 92 .concept-overview { 93 width: 100%; 94 } 95 96 .concept-overview-caption p { 97 width: 100%; 98 } 99 } 100 101 /* Qualitative Comparison Styles */ 102 .comparison-section { 103 margin: 3rem 0; 104 } 105 106 .comparison-title { 107 text-align: center; 108 margin-bottom: 2rem; 109 color: #333; 110 } 111 112 .comparison-container { 113 display: flex; 114 gap: 2rem; 115 margin: 2rem 0; 116 align-items: stretch; 117 } 118 119 .comparison-panel { 120 flex: 1; 121 background: #f8f9fa; 122 border-radius: 12px; 123 padding: 1rem; 124 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 125 /* position: sticky; */ 126 /* top: 0rem; */ 127 } 128 129 .comparison-item { 130 background: #f8f9fa; 131 border-radius: 12px; 132 padding: 1rem; 133 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 134 transition: transform 0.2s ease, box-shadow 0.2s ease; 135 } 136 137 .comparison-item:hover { 138 transform: translateY(-2px); 139 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); 140 } 141 142 .comparison-item h4 { 143 margin-bottom: 0.5rem; 144 color: #2c3e50; 145 font-size: 1.1rem; 146 font-weight: 600; 147 } 148 149 .comparison-item video { 150 width: 100%; 151 height: auto; 152 border-radius: 8px; 153 margin-bottom: 0.5rem; 154 } 155 156 .compare-label { 157 display: inline-block; 158 padding: 0.25rem 0.75rem; 159 border-radius: 20px; 160 font-size: 0.85rem; 161 font-weight: 500; 162 margin-bottom: 0.5rem; 163 width: fit-content; 164 } 165 166 .compare-baseline { 167 background: rgb(240, 240, 240); 168 color: #4a4a4a; 169 border: 1px solid #4a4a4a; 170 } 171 172 .compare-ensemble { 173 background: #fff6dd; 174 color: #d7a309; 175 border: 1px solid #d7a309; 176 } 177 178 .compare-cfg { 179 background: #ffebec; 180 color: #dc3545; 181 border: 1px solid #dc3545; 182 } 183 184 .compare-noise { 185 background: #e6fcff; 186 color: #17a2b8; 187 border: 1px solid #17a2b8; 188 } 189 190 .compare-smoothing { 191 background: #f1fcde; 192 color: #536e26; 193 border: 1px solid #536e26; 194 } 195 196 .compare-exo { 197 background: #f0f0f0; 198 color: #555555; 199 border: 1px solid #9e9e9e; 200 } 201 202 .compare-ours { 203 background: #e6f4ff; 204 color: rgb(0, 90, 190); 205 border: 1px solid rgb(0, 90, 190); 206 } 207 208 .compare-ego-gt { 209 background: #fff6dd; 210 color: #d7a309; 211 border: 1px solid #d7a309; 212 } 213 214 /* Table separators */ 215 .thick-sep td, 216 .thick-sep th { 217 border-top: 3px solid #333 !important; 218 } 219 220 .logo-row { 221 display: flex; 222 justify-content: center; 223 align-items: center; 224 gap: 2rem; 225 margin-top: 0.5rem; 226 } 227 228 .logo-row img { 229 object-fit: contain; 230 } 231 232 .logo-row img:first-child { 233 height: 55px; 234 } 235 236 .logo-row img:last-child { 237 height: 55px; 238 } 239 240 @media screen and (max-width: 768px) { 241 .logo-row { 242 /* flex-direction: column; */ 243 gap: 1rem; 244 } 245 246 .logo-row img:first-child { 247 height: 42px; 248 /* width: 32%; */ 249 margin-left: 0px; 250 } 251 252 .logo-row img:last-child { 253 height: 42px; 254 /* width: 25%; */ 255 } 256 257 } 258 259 /* Quantitative table outer border and grid */ 260 .quant-table { 261 border: 2px solid #333; 262 border-collapse: collapse; 263 } 264 265 .quant-table th, 266 .quant-table td { 267 border: 1px dotted #bbb; 268 } 269 270 /* Baseline Navigation - Teaser Section (Original Style) */ 271 .baseline-nav { 272 display: flex; 273 justify-content: center; 274 gap: 0.3rem; 275 margin-bottom: 1rem; 276 flex-wrap: wrap; 277 } 278 279 .baseline-nav button { 280 padding: 0.6rem 1.2rem; 281 border: 1px solid #ddd; 282 background: white; 283 border-radius: 20px; 284 cursor: pointer; 285 font-size: 0.95rem; 286 font-weight: 600; 287 transition: all 0.2s ease; 288 white-space: nowrap; 289 } 290 291 .baseline-nav button:hover { 292 background: #f0f0f0; 293 border-color: #999; 294 } 295 296 .baseline-nav button.active { 297 color: white; 298 background: #007bff; 299 border-color: #007bff; 300 } 301 302 /* Category Navigation - Qualitative Results (New Style) */ 303 .category-nav { 304 display: flex; 305 justify-content: center; 306 gap: 0.5rem; 307 margin-bottom: 1rem; 308 flex-wrap: wrap; 309 } 310 311 .category-nav button { 312 padding: 0.6rem 1.5rem; 313 border: 1.5px solid #e8e8e8; 314 background: white; 315 border-radius: 25px; 316 cursor: pointer; 317 font-size: 1rem; 318 font-weight: 500; 319 transition: all 0.2s ease; 320 white-space: nowrap; 321 color: #000; 322 } 323 324 .category-nav button:hover { 325 background: #f5f5f5; 326 } 327 328 .category-nav button.active { 329 background: #9e9e9e; 330 color: white; 331 border-color: #9e9e9e; 332 } 333 334 .baseline-content { 335 height: auto; 336 } 337 338 .baseline-item { 339 display: none; 340 height: auto; 341 text-align: center; 342 } 343 344 .baseline-item.active { 345 display: block; 346 } 347 348 .our-compare-panel video, 349 .baseline-item video { 350 width: 100%; 351 height: auto; 352 object-fit: contain; 353 border-radius: 8px; 354 margin: 0; 355 padding: 0; 356 } 357
358 /* Responsive adjustments */ 359 @media screen and (max-width: 768px) { 360 .comparison-container { 361 flex-direction: column; 362 gap: 1rem; 363 } 364 365 .our-compare-panel { 366 position: static; 367 } 368 369 .baseline-nav { 370 gap: 0.25rem; 371 } 372 373 .baseline-nav button { 374 padding: 0.4rem 0.8rem; 375 font-size: 0.8rem; 376 } 377 } 378 379 /* Simulation Section Styles */ 380 .simulation-section { 381 margin: 0.4rem 0; 382 } 383 384 .simulation-title { 385 text-align: center; 386 margin-bottom: 0.5rem; 387 color: #333; 388 } 389 390 .task-section { 391 margin: 0.3rem 0; 392 } 393 394 .task-title { 395 text-align: center; 396 /* margin-bottom: 2rem; */ 397 margin-bottom: 0rem; 398 color: #2c3e50; 399 font-size: 1.2rem; 400 font-weight: 600; 401 } 402 403 .task-comparison { 404 display: flex; 405 gap: 0.5rem; 406 margin: 1rem 0; 407 /* align-items: flex-start; */ 408 align-items: stretch; 409 } 410 411 .comparison-panel { 412 display: flex; 413 flex-direction: column; 414 align-items: center; 415 width: 100%; 416 } 417 418 .comparison-panel video { 419 width: 100%; 420 height: auto; 421 aspect-ratio: 1 / 1; 422 object-fit: contain; 423 border-radius: 8px; 424 margin: 0; 425 padding: 0; 426 } 427 428 .dexmg .comparison-panel video { 429 aspect-ratio: 16 / 9; 430 } 431 432 .comparison-panel h4 { 433 margin-bottom: 0.5rem; 434 color: #2c3e50; 435 font-size: 1.1rem; 436 font-weight: 600; 437 } 438 439 .comparison-panel .description { 440 font-size: 0.9rem; 441 color: #666; 442 line-height: 1.4; 443 text-align: center; 444 margin-top: 0.5rem; 445 /* margin-top: auto; */ 446 } 447 448 .baseline-item .description { 449 margin-top: 0.1rem; 450 /* margin-top: auto; */ 451 } 452 453 .compare-acg { 454 background: #e6f4ff; 455 color: rgb(0, 90, 190); 456 border: 1px solid rgb(0, 90, 190); 457 } 458 459 .compare-no-acg { 460 background: #f0f0f0; 461 /* light gray */ 462 color: #555555; 463 /* dark gray text */ 464 border: 1px solid #9e9e9e; 465 /* gray border */ 466 } 467 468 /* Responsive for simulation section */ 469 @media screen and (max-width: 768px) { 470 .task-comparison { 471 flex-direction: column; 472 gap: 1rem; 473 } 474 475 /* .comparison-panel video { 476 height: 250px; 477 } */ 478 } 479 480 .custom-footer { 481 padding: 1.5rem 0; 482 background: #fafafa; 483 border-top: 1px solid #e5e5e5; 484 color: #666; 485 } 486 487 @media screen and (max-width: 768px) { 488 .custom-footer { 489 padding: 2rem 0.7rem; 490 } 491 } 492 </style> 493</head> 494 495<body> 496 <!-- 497 <nav class="navbar" role="navigation" aria-label="main navigation"> 498 <div class="navbar-brand"> 499 <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"> 500 <span aria-hidden="true"></span> 501 <span aria-hidden="true"></span> 502 <span aria-hidden="true"></span> 503 </a> 504 </div> 505 <div class="navbar-menu"> 506 <div class="navbar-start" style="flex-grow: 1; justify-content: center;"> 507 <a class="navbar-item" href=""> 508 <span class="icon"> 509 <i class="fas fa-home"></i> 510 </span> 511 </a> 512 </div> 513 </div> 514 </nav> --> 515 516 <section class="hero"> 517 <div class="hero-body"> 518 <div class="container is-max-desktop"> 519 <div class="columns is-centered"> 520 <div class="column has-text-centered"> 521 <h1 class="title is-1 publication-title">
522 <span 523 style="background: linear-gradient(to right, #0056b3, #538ccd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">EgoX</span>: 524 Egocentric Video Generation from a Single Exocentric Video 525 </h1> 526 <div class="is-size-5 publication-authors"> 527 <span class="author-block"><a href="https://keh0t0.github.io/" target="_blank" 528 rel="noopener noreferrer">Taewoong 529 Kang*<sup>1</sup></a></span>, 530 <span class="author-block"><a href="https://kinam0252.github.io/" target="_blank" 531 rel="noopener noreferrer">Kinam 532 Kim*<sup>1</sup></a></span>, 533 <span class="author-block"><a href="https://linkedin.com/in/dohyeon-kim-a79231347" 534 target="_blank" rel="noopener noreferrer">Dohyeon 535 Kim*<sup>2</sup></a></span>, 536 <span class="author-block"><a href="https://pmh9960.github.io/" target="_blank" 537 rel="noopener noreferrer">Minho 538 Park<sup>1</sup></a></span>, 539 <span class="author-block"><a href="https://junhahyung.github.io/" target="_blank" 540 rel="noopener noreferrer">Junha 541 Hyung<sup>1</sup></a></span>, 542 <span class="author-block"><a href="https://sites.google.com/site/jaegulchoo/" 543 target="_blank" rel="noopener noreferrer">Jaegul Choo<sup>1</sup></a></span> 544 </div> 545 <div class="is-size-6 has-text-centered" 546 style="margin-top: 0.25rem; margin-bottom: 0.25rem; color: #666;"> 547 * equal contribution 548 </div> 549 <div class="is-size-5 has-text-centered" style="margin-bottom: 0.75rem; color: #666;"> 550 <sup>1</sup>KAIST AI <sup>2</sup>Seoul National University 551 </div> 552 <div class="is-size-5 publication-authors logo-row"> 553 <!-- <img src="static/images/davian_robotics_2.png" alt="DAVIAN Robotics Logo" /> --> 554 <img src="static/images/kaist_ai_logo.png" alt="KAIST AI Logo" /> 555 <img src="static/images/snu_ui.png" alt="SNU Logo" /> 556 <!-- <img src="static/images/snu_logo.png" alt="Seoul National University Logo" /> --> 557 </div> 558 559 <div class="is-size-4 has-text-centered" 560 style="margin-top: 1.5rem; margin-bottom: 0.5rem; color: #555; font-weight: 500;"> 561 CVPR 2026 562 </div> 563 564 <!-- links --> 565 <div class="column has-text-centered"> 566 <div class="publication-links"> 567 <span class="link-block"> 568 <a href="https://arxiv.org/abs/2512.08269" 569 class="external-link button is-normal is-rounded is-dark"> 570 <span class="icon"> 571 <i class="ai ai-arxiv"></i> 572 </span> 573 <span>arXiv</span> 574 </a> 575 </span> 576 <span class="link-block"> 577 <a href="https://github.com/DAVIAN-Robotics/EgoX" 578 class="external-link button is-normal is-rounded is-dark">
579 <span class="icon"> 580 <i class="fab fa-github"></i> 581 </span> 582 <span>Code</span> 583 </a> 584 </span> 585 </div> 586 </div> 587 </div> 588 </div> 589 </div> 590 </div> 591 </section> 592 593 <!-- Teaser Section --> 594 <section class="section" id="method" style="padding-top: 0rem;"> 595 <div class="container is-max-desktop"> 596 <div class="columns is-centered"> 597 <div class="column is-five-sixths"> 598 <!-- <h2 class="title is-3 simulation-title">Teaser</h2> --> 599 <!-- Navigation Buttons (Outside the comparison boxes) --> 600 <div class="baseline-group"> 601 <div class="baseline-nav" style="margin-bottom: 1rem;"> 602 <button class="baseline-btn active" data-baseline="Joker">𤡠Joker</button> 603 <button class="baseline-btn" data-baseline="ironman">ð¤ Iron Man</button> 604 <button class="baseline-btn" data-baseline="blackwidow">ð·ï¸ Blackwidow</button> 605 <!-- <button class="baseline-btn" data-baseline="captain">ð¡ï¸ Captain America</button> --> 606 <button class="baseline-btn" data-baseline="tabletennis">ð Table Tennis</button> 607 </div> 608 <div class="content" style="margin-bottom: 2rem;"> 609 <figure> 610 <!-- Joker --> 611 <div class="baseline-item active" id="Joker"> 612 <div align="center"> 613 <video controls muted loop playsinline webkit-playsinline autoplay 614 preload="metadata" src="static/videos/joker_infer.mp4" width="100%" 615 type="video/mp4" 616 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 617 </video> 618 </div> 619 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 620 <strong>"The Dark Knight" - Joker</strong> 621 </figcaption> 622 </div> 623 <!-- Ironman --> 624 <div class="baseline-item" id="ironman"> 625 <div align="center"> 626 <video controls muted loop playsinline webkit-playsinline autoplay 627 preload="metadata" src="static/videos/ironman_infer.mp4" width="100%" 628 type="video/mp4" 629 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 630 </video> 631 </div> 632 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 633 <strong>"Iron Man" - Pepper Potts</strong> 634 </figcaption> 635 </div> 636 <!-- Hulk --> 637 <div class="baseline-item" id="blackwidow"> 638 <div align="center"> 639 <video controls muted loop playsinline webkit-playsinline autoplay 640 preload="metadata" src="static/videos/hulk_blackwidow.mp4" width="100%" 641 type="video/mp4" 642 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 643 </video> 644 </div>
645 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 646 <strong>"Avengers: Age of Ultron" - Hulk</strong> 647 </figcaption> 648 </div> 649 <!-- captain --> 650 <div class="baseline-item" id="captain"> 651 <div align="center"> 652 <video controls muted loop playsinline webkit-playsinline autoplay 653 preload="metadata" src="static/videos/captain.mp4" width="100%" 654 type="video/mp4" 655 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 656 </video> 657 </div> 658 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 659 <strong>"Captain America" - Iron Man</strong> 660 </figcaption> 661 </div> 662 <!-- tabletennis --> 663 <div class="baseline-item" id="tabletennis"> 664 <div align="center"> 665 <video controls muted loop playsinline webkit-playsinline autoplay 666 preload="metadata" src="static/videos/tabletennis.mp4" width="100%" 667 type="video/mp4" 668 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 669 </video> 670 </div> 671 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 672 <strong>"PARIS 2024" - Table tennis player</strong> 673 </figcaption> 674 </div> 675 </figure> 676 </div> 677 </div> 678 679 680 <!-- <div class="content" style="margin-bottom: 2rem;"> 681 <figure> 682 <div align="center"> 683 <video controls muted loop playsinline webkit-playsinline autoplay preload="metadata" 684 src="./assets/1_hunyuan_storm.mp4" width="100%" type="video/mp4" 685 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 686 </video> 687 </div> 688 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 689 360-degree panoramic video generated by <em>SphereDiff</em>. Generation Caption is 690 "Storm, Ocean, Storm clouds, White foam swirls, etc." 691 <br> 692 </figcaption> 693 </figure> 694 </div> --> 695 696 </div> 697 </div> 698 </div> 699 </section> 700 701 <!-- Abstract. --> 702 <section class="section" style="padding-top: 0.5rem;"> 703 <div class="container is-max-desktop"> 704 <div class="columns is-centered has-text-centered"> 705 <div class="column is-three-fourths"> 706 <h2 class="title is-3">Abstract</h2> 707 <div class="content has-text-justified"> 708 <p> 709 Egocentric perception enables humans to experience and 710 understand the world directly from their own point of view. 711 Translating exocentric (third-person) videos into egocentric 712 (first-person) videos opens up new possibilities for immersive 713 understanding but remains highly challenging due to 714 extreme camera pose variations and minimal view overlap. 715 This task requires faithfully preserving visible content while 716 synthesizing unseen regions in a geometrically consistent 717 manner. To achieve this, we present <strong>EgoX</strong>, a novel framework 718 for generating egocentric videos from a single exocentric input. 719 <strong>EgoX</strong> leverages the pretrained spatio-temporal 720 knowledge of large-scale video diffusion models through 721 lightweight LoRA adaptation and introduces a unified conditioning 722 strategy that combines exocentric and egocentric 723 priors via width- and channel-wise concatenation. Additionally, 724 a geometry-guided self-attention mechanism selectively 725 attends to spatially relevant regions, ensuring geometric 726 coherence and high visual fidelity. Our approach 727 achieves coherent and realistic egocentric video generation 728 while demonstrating strong scalability and robustness across unseen and in-the-wild videos. 729 </p> 730 </div> 731 <!-- Thumbnail Video --> 732 <!-- <div <figure> 733 <img src="./static/images/teaser.png" alt="Conceptual illustration of ACG" 734 style="height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" />
735 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 736 <strong>SphereDiff enables tuning-free 360° panorama generation via spherical latent. It is 737 compatible with various diffusion backbones, including <a 738 href="https://github.com/black-forest-labs/flux" target="_blank" 739 rel="noopener">FLUX</a>, <a href="https://github.com/NVlabs/Sana" target="_blank" 740 rel="noopener">SANA</a>, and <a 741 href="https://github.com/Tencent-Hunyuan/HunyuanVideo" target="_blank" 742 rel="noopener">HunyuanVideo</a>. 743 </figcaption> 744 </figure> 745 </div> --> 746 </div> 747 </div> 748 </div> 749 </section> 750 751 <!-- Motivation Section --> 752 <!-- <section class="section" id="method" style="padding-top: 2rem;"> 753 <div class="container is-max-desktop"> 754 <div class="columns is-centered"> 755 <div class="column is-five-sixths"> 756 <h2 class="title is-3 simulation-title">Motivation</h2> 757 <div class="content concept-overview" style="margin-bottom: 3rem;"> 758 <figure> 759 <img src="./static/images/motivation.png" alt="Responsive image" 760 style="height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" /> 761 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 762 <strong>Motivation.</strong> Previous finetuning approaches (360 LoRA, PanFusion) often 763 fail 764 to generate 765 continuous 766 scenes near the pole due to the limited ERP dataset. The tuning-free approach 767 (DynamicScaler) also 768 fails to generate a seamless frame due to the ERP latent representation. However, 769 <em>SphereDiff</em>, generates a seamless image. 770 </figcaption> 771 </figure> 772 </div> 773 </div> 774 </div> 775 </div> 776 </section> --> 777 778 <!-- Method Section --> 779 <section class="section" id="method" style="padding-top: 2rem;"> 780 <div class="container is-max-desktop"> 781 <div class="columns is-centered"> 782 <div class="column is-five-sixths"> 783 <h2 class="title is-3 simulation-title">Overall Pipeline</h2> 784 <!-- method --> 785 <div class="content" style="margin-bottom: 2rem;"> 786 <figure> 787 <div style="display: inline-block; background-color: #fff; padding: 1rem; border-radius: 10px; 788 box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 0rem 0;"> 789 <img src="./static/images/egox_overview.png" alt="Method overview" 790 style="display: block; width: 100%; height: auto; border-radius: 8px;" /> 791 </div> 792 793 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 794 Given an exocentric video input, we first lift it into a 3D point cloud and render the 795 scene from the egocentric 796 viewpoint to obtain the egocentric prior video. The clean exocentric video latent and 797 the egocentric prior latent are combined via width- 798 wise and channel-wise concatenation in the latent space, and then fed into a pretrained 799 video diffusion model equipped with the proposed 800 geometry-guided self-attention. 801 </figcaption> 802 </figure> 803 </div> 804 805 </div> 806 </div> 807 </div> 808 </section> 809 810 <!-- Method Section --> 811 <section class="section" id="method" style="padding-top: 2rem;"> 812 <div class="container is-max-desktop"> 813 <div class="columns is-centered"> 814 <div class="column is-five-sixths"> 815 <h2 class="title is-3 simulation-title">Geometry-Guided Self-Attention</h2> 816 <!-- method --> 817 <div class="content" style="margin-bottom: 2rem;"> 818 <figure> 819 <div style="display: inline-block; background-color: #fff; padding: 1rem; border-radius: 10px; 820 box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 0rem 0;"> 821 <img src="./static/images/egox_gga.png" alt="Method overview" 822 style="display: block; width: 100%; height: auto; border-radius: 8px;" /> 823 </div> 824
825 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 826 <strong>Geometry-Guided Self-Attention. </strong>3D direction similarities between 827 egocentric queries and exocentric keys are used 828 as an additive bias in the attention map, guiding the model to focus on geometrically 829 aligned regions. Although the orange and red directions 830 are the same key tokens, their directions differ due to different camera centers. The 831 blueâred pairs have similar directions and thus receive 832 higher scores, whereas the greenâorange pairs have opposite directions and obtain lower 833 scores. 834 </figcaption> 835 </figure> 836 </div> 837 838 <div class="content" style="margin-bottom: 2rem;"> 839 <figure> 840 <div style="display: flex; gap: 1rem; align-items: flex-start;"> 841 <div style="flex: 0.8; display: inline-block; background-color: #fff; padding: 1rem; border-radius: 10px; 842 box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 843 <img src="./static/images/egox_gga_vis.png" alt="GGA Visualization" 844 style="display: block; width: 100%; height: auto; border-radius: 8px;" /> 845 </div> 846 <div style="flex: 1.2; display: flex; flex-direction: column;"> 847 <div style="background-color: #fff; padding: 1rem; border-radius: 10px; 848 box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 1rem;"> 849 <img src="./static/images/egox_gga_stanlee.png" alt="GGA Stan Lee" 850 style="display: block; width: 100%; height: auto; border-radius: 8px;" /> 851 </div> 852 <p class="is-size-6" style="text-align: center; color: #666; margin: 0;"> 853 <em><strong>Attention Visualization. & GGA benefits example.</strong> 854 Visualization of the attention weights when querying the center token of the 855 egocentric view. Without GGA, the model attends to unrelated regions outside 856 the visible area, leading to the generation of unwanted events. With GGA, 857 attention is concentrated on spatially relevant regions, effectively 858 focusing only on the visible area and preventing unwanted event 859 generation.</em> 860 </p> 861 </div> 862 </div> 863 </figure> 864 </div> 865 866 </div> 867 </div> 868 </div> 869 </section> 870 871 <!-- Qualitative Comparison Section --> 872 <section class="section" style="padding-top: 0.5rem;"> 873 <div class="container is-max-desktop"> 874 <div class="columns is-centered"> 875 <div class="column is-five-sixths"> 876 <h2 class="title is-3 comparison-title">Qualitative Results</h2> 877 <!-- <div class="content has-text-centered"> 878 <p class="is-size-5" style="margin-bottom: 2rem; color: #666;"> 879 Visual comparison of different methods on real-world strawberry-picking tasks.<br> 880 ACG produces smoother and more coherent motions than baselines, resulting in higher success 881 rates. 882 </p> 883 </div> --> 884 885 <div class="baseline-group"> 886 <div class="category-nav" style="margin-bottom: 1rem;"> 887 <button class="category-btn active" data-baseline="soccer">â½ï¸ Soccer</button> 888 <button class="category-btn" data-baseline="basketball">ð Basketball</button> 889 <button class="category-btn" data-baseline="cooking">ð³ Cooking</button> 890 <button class="category-btn" data-baseline="dance">ðð» Dance</button> 891 <button class="category-btn" data-baseline="covid">𧪠COVID test</button> 892 </div> 893 <div class="content" style="margin-bottom: 2rem;"> 894 <figure> 895 <div 896 style="display: flex; justify-content: center; gap: 0; margin-bottom: 0.25rem; max-width: 100%;"> 897 <div style="width: 46.67%; display: flex; justify-content: center;">
898 <span class="compare-label compare-exo">Exo view</span> 899 </div> 900 <div style="width: 26.67%; display: flex; justify-content: center;"> 901 <span class="compare-label compare-ego-gt">Ego GT</span> 902 </div> 903 <div style="width: 26.67%; display: flex; justify-content: center;"> 904 <span class="compare-label compare-ours">Ours</span> 905 </div> 906 </div> 907 908 <!-- Soccer --> 909 <div class="baseline-item active" id="soccer"> 910 <div align="center"> 911 <video controls muted loop playsinline webkit-playsinline autoplay 912 preload="metadata" src="./static/videos/cmu_soccer06_6_877_925.mp4" 913 width="100%" type="video/mp4" 914 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 915 </video> 916 <video controls muted loop playsinline webkit-playsinline autoplay 917 preload="metadata" src="./static/videos/cmu_soccer14_5_2451_2499.mp4" 918 width="100%" type="video/mp4" 919 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 920 </video> 921 <video controls muted loop playsinline webkit-playsinline autoplay 922 preload="metadata" src="./static/videos/iiith_soccer_042_6_1000_1048.mp4" 923 width="100%" type="video/mp4" 924 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 925 </video> 926 </div> 927 </div> 928 929 <!-- Cooking --> 930 <div class="baseline-item" id="cooking"> 931 <div align="center"> 932 <video controls muted loop playsinline webkit-playsinline autoplay 933 preload="metadata" src="./static/videos/iiith_cooking_43_1_1000_1048.mp4" 934 width="100%" type="video/mp4" 935 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 936 </video> 937 <video controls muted loop playsinline webkit-playsinline autoplay 938 preload="metadata" src="./static/videos/iiith_cooking_57_2_2451_2499.mp4" 939 width="100%" type="video/mp4" 940 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 941 </video> 942 <video controls muted loop playsinline webkit-playsinline autoplay 943 preload="metadata" src="./static/videos/iiith_cooking_84_2_1000_1048.mp4" 944 width="100%" type="video/mp4" 945 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 946 </video> 947 </div> 948 </div> 949 950 <!-- Covid test --> 951 <div class="baseline-item" id="covid"> 952 <div align="center"> 953 <video controls muted loop playsinline webkit-playsinline autoplay 954 preload="metadata" 955 src="./static/videos/georgiatech_covid_05_8_2000_2048.mp4" width="100%" 956 type="video/mp4" 957 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 958 </video> 959 <video controls muted loop playsinline webkit-playsinline autoplay 960 preload="metadata" src="./static/videos/sfu_covid_009_4_2000_2048.mp4" 961 width="100%" type="video/mp4" 962 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 963 </video> 964 <video controls muted loop playsinline webkit-playsinline autoplay 965 preload="metadata" 966 src="./static/videos/georgiatech_covid_13_8_1000_1048.mp4" width="100%" 967 type="video/mp4" 968 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 969 </video> 970 </div> 971 </div> 972 973 <!-- Dance --> 974 <div class="baseline-item" id="dance"> 975 <div align="center"> 976 <video controls muted loop playsinline webkit-playsinline autoplay 977 preload="metadata" src="./static/videos/uniandes_dance_008_50_877_925.mp4" 978 width="100%" type="video/mp4" 979 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 980 </video> 981 <video controls muted loop playsinline webkit-playsinline autoplay 982 preload="metadata" src="./static/videos/uniandes_dance_013_7_1000_1048.mp4" 983 width="100%" type="video/mp4" 984 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 985 </video> 986 <video controls muted loop playsinline webkit-playsinline autoplay 987 preload="metadata" src="./static/videos/uniandes_dance_020_59_877_925.mp4" 988 width="100%" type="video/mp4" 989 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 990 </video> 991 </div> 992 </div> 993 994 <!-- Basketball --> 995 <div class="baseline-item" id="basketball"> 996 <div align="center"> 997 <video controls muted loop playsinline webkit-playsinline autoplay 998 preload="metadata" src="./static/videos/sfu_basketball014_4_1000_1048.mp4" 999 width="100%" type="video/mp4" 1000 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 1001 </video> 1002 <video controls muted loop playsinline webkit-playsinline autoplay 1003 preload="metadata" src="./static/videos/sfu_basketball_03_16_1000_1048.mp4" 1004 width="100%" type="video/mp4" 1005 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 1006 </video> 1007 <video controls muted loop playsinline webkit-playsinline autoplay 1008 preload="metadata" src="./static/videos/sfu_basketball_05_7_2451_2499.mp4" 1009 width="100%" type="video/mp4" 1010 style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> 1011 </video> 1012 </div> 1013 </div> 1014
1015 <figcaption class="is-size-6" style="margin-top: 0.5rem; color: #666;"> 1016 <strong>Qualitative results. </strong> We compare our generated egocentric videos 1017 (Ours) with the ground truth egocentric videos (Ego GT) given the exocentric input 1018 (Exo view). Our method generates realistic and coherent egocentric videos that 1019 closely match the ground truth. 1020 <br> 1021 <!-- The audio was synthesized via <a href="https://arxiv.org/abs/2412.15322" 1022 target="_blank">MMAudio</a>. --> 1023 </figcaption> 1024 </figure> 1025 </div> 1026 </div> 1027 1028 <div class="content has-text-centered"> 1029 <p class="is-size-5" style="margin-bottom: 0.5rem; margin-top: 1rem; color: #666;"> 1030 <strong>Qualitative comparison </strong> 1031 </p> 1032 </div> 1033 1034 <div class="content" style="margin-bottom: 2rem;"> 1035 <figure> 1036 <img src="static/images/egox_quali_comparison.png" alt="Quantitative Results" 1037 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" /> 1038 </figure> 1039 </div> 1040 1041 <div class="content has-text-centered"> 1042 <p class="is-size-5" style="margin-bottom: 0.5rem; margin-top: 1rem; color: #666;"> 1043 <strong>Ablation qualitative comparison </strong> 1044 </p> 1045 </div> 1046 1047 <div class="content" style="margin-bottom: 2rem;"> 1048 <figure> 1049 <img src="static/images/egox_quali_ablation.png" alt="Quantitative Results" 1050 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" /> 1051 </figure> 1052 </div> 1053 </div> 1054 </div> 1055 </div> 1056 </section> 1057 1058 <!-- Quantitative Results --> 1059 <section class="section" style="padding-top: 0.5rem;"> 1060 <div class="container is-max-desktop"> 1061 <div class="columns is-centered"> 1062 <div class="column is-five-sixths"> 1063 <h2 class="title is-3 comparison-title">Quantitative Results</h2> 1064 <div class="content has-text-centered"> 1065 <p class="is-size-5" style="margin-bottom: 2rem; color: #666;"> 1066 <strong> Quantitative results. </strong> EgoX outperforms previous approaches by a large 1067 margin, achieving state-of-the-art performance on diverse and challenging exo-to-ego video 1068 generation benchmarks 1069 </p> 1070 </div> 1071 1072 <div class="content" style="margin-bottom: 2rem;"> 1073 <figure> 1074 <img src="static/images/egox_quanti.png" alt="Quantitative Results" 1075 style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" /> 1076 </figure> 1077 </div> 1078 <div class="content has-text-centered"> 1079 <p class="is-size-5" style="margin-bottom: 2rem; color: #666;"> 1080 <strong> Ablation Study Results. </strong> Performance comparison by removing each core 1081 component of our framework. 1082 </p> 1083 </div> 1084 1085 <figure> 1086 <img src="static/images/egox_ablation.png" alt="Quantitative Results" 1087 style="width:100%;height:auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);" /> 1088 </figure> 1089 1090 </div> 1091 1092 </div> 1093 </div> 1094 </div> 1095 </section> 1096 1097 <!-- Acknowledgement, Footer --> 1098 <footer class="footer custom-footer"> 1099 <div class="content has-text-centered" style="color: #666;"> 1100 <p style="margin-bottom: 0.5rem;"> 1101 <!-- TODO --> 1102 KAIST AI | 1103 <a href="" target="_blank" rel="noopener">arXiv</a> 1104 · 1105 <a href="" target="_blank" rel="noopener">
1105Code</a> 1106 <!-- · 1107 <a href="" target="_blank" rel="noopener">Project Page</a> --> 1108 </p> 1109 </div> 1110 </footer> 1111 1112
1112<script> 1113 function enforceAutoplayLoop(video) { 1114 // Play on load 1115 if (video.paused) video.play(); 1116 // Always loop 1117 video.addEventListener('ended', function () { 1118 video.currentTime = 0; 1119 video.play(); 1120 }); 1121 // Prevent seeking to pause only if not paused by user 1122 video.addEventListener('seeking', function () { 1123 if (!video.paused) video.play(); 1124 }); 1125 } 1126 1127 // ëìì 모ë ëì¼íê² 0ì´ìì ìì 1128 function syncAllVideos() { 1129 const videos = document.querySelectorAll('video'); 1130 videos.forEach(v => { 1131 try { 1132 v.currentTime = 0; 1133 v.play(); 1134 } catch (e) { } 1135 }); 1136 } 1137 1138 document.addEventListener('DOMContentLoaded', function () { 1139 document.querySelectorAll('video').forEach(enforceAutoplayLoop); 1140 syncAllVideos(); 1141 }); 1142 1143 // Observe for dynamically added/replaced videos 1144 const observer = new MutationObserver(() => { 1145 document.querySelectorAll('video').forEach(enforceAutoplayLoop); 1146 syncAllVideos(); 1147 }); 1148 observer.observe(document.body, { childList: true, subtree: true }); 1149 1150 // Baseline comparison functionality 1151 function initBaselineComparison() { 1152 const groups = document.querySelectorAll('.baseline-group'); 1153 1154 groups.forEach(group => { 1155 const buttons = group.querySelectorAll('.baseline-btn, .category-btn'); 1156 const items = group.querySelectorAll('.baseline-item'); 1157 1158 buttons.forEach(button => { 1159 button.addEventListener('click', function () { 1160 const targetBaseline = this.getAttribute('data-baseline'); 1161 1162 // Remove active class from all buttons and items IN THIS GROUP 1163 buttons.forEach(btn => btn.classList.remove('active')); 1164 items.forEach(item => item.classList.remove('active')); 1165 1166 // Add active class to clicked button and corresponding item 1167 this.classList.add('active'); 1168 const targetItem = document.getElementById(targetBaseline); 1169 if (targetItem) { 1170 targetItem.classList.add('active'); 1171 1172 // Sync videos when switching 1173 setTimeout(() => { 1174 syncAllVideos(); 1175 }, 100); 1176 } 1177 }); 1178 }); 1179 }); 1180 } 1181 1182 // Initialize baseline comparison when DOM is loaded 1183 document.addEventListener('DOMContentLoaded', function () { 1184 initBaselineComparison(); 1185 }); 1186 </script>
1186 1187 1188</body> 1189 1190</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.