https://zitonglan.github.io/project/versa/versa.html

1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <base href="https://zitonglan.github.io/project/versa/">
7  <meta name="description" content="Resounding Acoustic Fields with Reciprocity">
8  <meta property="og:title" content="Versa">
9  <meta property="og:description" content="Versa: Resounding Acoustic Fields with Reciprocity">
10  <meta property="twitter:title" content="Versa">
11  <meta property="twitter:description" content="Versa: Resounding Acoustic Fields with Reciprocity">
12  <meta property="og:type" content="website">
13  <meta name="keywords" content="Acoustic volume Rendering, Spatial Audio">
14  <meta name="viewport" content="width=device-width, initial-scale=1">
15  <title>Versa</title>
16
17  <!-- Google tag (gtag.js) -->

17
18  <script async src="https://www.googletagmanager.com/gtag/js?id=

18G-D65ZW4CJYF

18"></script>
19  

19<script>
20    

20window.dataLayer = window.dataLayer || [];
21
22    function gtag() {
23      dataLayer.push(arguments);
24    }
25    gtag('js', new Date());
26
27    gtag('config', '

27G-D65ZW4CJYF

27');
28  

28</script>

28
29
30  <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
31
32  <link rel="stylesheet" href="./static/css/bulma.min.css">
33  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
34  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
35  <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
36  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
37  <link rel="stylesheet" href="./static/css/index.css">
38
39  <!-- 

39<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

39 -->
40  

40<script src="./static/js/jquery-3.6.4.min.js"></script>

40
41  

41<script defer src="./static/js/fontawesome.all.min.js"></script>

41
42  

42<script src="./static/js/bulma-carousel.min.js"></script>

42
43  

43<script src="./static/js/bulma-slider.min.js"></script>

43
44  

44<script src="./static/js/lazy.js"></script>

44
45  

45<script src="./static/js/faster.js"></script>

45
46  

46<script src="./static/js/index.js"></script>

46
47</head>
48
49<style>
50  .video-grid {
51    display: grid;
52    grid-template-columns: repeat(1, 1fr);
53    /* Three columns */
54    grid-template-rows: repeat(1, 1fr);
55    /* Two rows */
56    gap: 0px 4px;
57    /* Gap between videos */
58    width: 65%;
59    /* Set the container width to 80% */
60    margin: 0 auto;
61    /* Center the container horizontally */
62  }
63
64  .video-grid video {
65    width: 100%;
66    /* Videos fill the container width */
67    height: auto;
68  }
69</style>
70
71<style>
72  .video-grid-two-cols {
73    display: grid;
74    grid-template-columns: repeat(2, 1fr);
75    /* Two columns */
76    gap: 10px;
77    /* Gap between videos */
78    width: 60%;
79    /* Set the container width to 60% */
80    margin: 0 auto;
81    /* Center the container horizontally */
82  }
83
84  .video-grid-two-cols video {
85    width: 100%;
86    /* Videos fill the container width */
87    height: auto;
88  }
89
90  .interpolation-image {
91    width: 70%;
92    /* Videos fill the container width */
93    height: auto;
94  }
95</style>
96
97
98<style>
99  /* Section spacing */
100  .section-wrap {
101    max-width: 1200px;
102    margin: 0 auto;
103    padding: 40px 16px;
104  }
105
106  .section-title {
107    margin-bottom: 10px;
108  }
109
110  .section-subtitle {
111    color: #555;
112    font-size: 18px;
113    line-height: 1.5;
114    margin-bottom: 22px;
115  }
116
117  /* Video wrapper */
118  .yt-wrap {
119    display: flex;
120    justify-content: center;
121    align-items: center;
122  }
123
124  .yt-iframe-box {
125    position: relative;
126    width: min(980px, 100%);
127    padding-bottom: 56.25%;
128    /* 16:9 */
129    height: 0;
130    border-radius: 16px;
131    overflow: hidden;
132    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
133    background: #000;
134  }
135
136  .yt-iframe-box iframe {
137    position: absolute;
138    inset: 0;
139    width: 100%;
140    height: 100%;
141    border: 0;
142  }
143
144  /* TLDR callout */
145  .tldr-box {
146    background: #f9f9f9;
147    border-left: 4px solid #3273dc;
148    padding: 14px 16px;
149    border-radius: 12px;
150    margin: 20px auto 0;
151    width: min(980px, 100%);
152  }
153
154  .tldr-box p {
155    margin: 0;
156    font-size: 20px;
157  }
158
159  /* Method layout */
160  .method-grid {
161    display: grid;
162    grid-template-columns: 1.15fr 0.85fr;
163    gap: 28px;
164    align-items: start;
165    margin-top: 18px;
166  }
167
168  .method-figure {
169    background: #fff;
170    border: 1px solid #eee;
171    border-radius: 16px;
172    padding: 14px;
173    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
174  }
175
176  .method-figure img {
177    width: 100%;
178    height: auto;
179    border-radius: 12px;
180    display: block;
181  }
182
183  .method-text {
184    background: #fafafa;
185    border: 1px solid #eee;
186    border-radius: 16px;
187    padding: 18px;
188  }
189
190  .method-text p {
191    font-size: 18px;
192    line-height: 1.6;
193    margin-bottom: 14px;
194  }
195
196  .method-text ul {
197    margin-left: 18px;
198    font-size: 18px;
199    line-height: 1.6;
200  }
201
202  /* ELE/SSL cards */
203  .cards-grid {
204    display: grid;
205    grid-template-columns: 1fr 1fr;
206    gap: 22px;
207    margin-top: 24px;
208  }
209
210  .method-card {
211    background: #fff;
212    border: 1px solid #eee;
213    border-radius: 16px;
214    padding: 16px;
215    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
216  }
217
218  .method-card h3 {
219    margin: 0 0 8px;
220    font-size: 20px;
221    font-weight: 800;
222  }
223
224  .method-card p {
225    margin: 0 0 12px;
226    color: #444;
227    font-size: 16px;
228    line-height: 1.55;
229  }
230
231  .method-card img {
232    width: 100%;
233    height: auto;
234    border-radius: 12px;
235    border: 1px solid #f0f0f0;
236    display: block;
237  }
238
239  .caption {
240    margin-top: 10px;
241    color: #666;
242    font-size: 14px;
243    line-height: 1.45;
244  }
245
246  /* Responsive */
247  @media (max-width: 900px) {
248    .method-grid {
249      grid-template-columns: 1fr;
250    }
251
252    .cards-grid {
253      grid-template-columns: 1fr;
254    }
255
256    .tldr-box p {
257      font-size: 18px;
258    }
259  }
260</style>
261
262
263<body>
264  <section class="hero">
265    <div class="hero-body">
266      <div class="container is-max-desktop">
267        <div class="columns is-centered">
268          <div class="column has-text-centered">
269            <h1 class="title is-2 publication-title">Resounding Acoustic Fields with Reciprocity
270            </h1>
271
272            <div class="is-size-5 publication-authors">

273              <span class="author-block">
274                <a href="https://zitonglan.github.io/">Zitong Lan</a>, </span>
275              <span class="author-block">
276                <a href="https://yiduohao.github.io/">Yiduo Hao</a>, </span>
277              <span class="author-block">
278                <a href="https://www.cis.upenn.edu/~mingminz/">Mingmin Zhao</a></span>
279              <span class="author-block">
280            </div>
281
282            <div class="is-size-5 publication-authors">
283              <span class="author-block">University of Pennsylvania &nbsp; </span>
284            </div>
285
286            <h1 style="font-size:24px;">
287              <span style="color:black;">NeurIPS'25</span>
288            </h1>
289
290            <div class="column has-text-centered">
291              <div class="publication-links">
292                <!-- PDF Link. -->
293                <span class="link-block">
294                  <a href="https://arxiv.org/abs/2510.20602" class="external-link button is-normal is-rounded is-dark">
295                    <span class="icon">
296                      <i class="fas fa-file-pdf"></i>
297                    </span>
298                    <span>Paper</span>
299                  </a>
300                </span>
301                <span class="link-block">
302                  <a href="https://github.com/penn-waves-lab/AVR"
303                    class="external-link button is-normal is-rounded is-dark">
304                    <span class="icon">
305                      <i class="fab fa-github"></i>
306                    </span>
307                    <span>Code</span>
308                  </a>
309                </span>
310
311              </div>
312            </div>
313          </div>
314        </div>
315      </div>
316    </div>
317  </section>
318
319
320
321  <!-- <div class="container" style="max-width: 40%;">
322    <div class="columns is-centered">
323      <div style="background-color: #f9f9f9; border-left: 2px solid #3273dc; padding: 10px; margin-bottom: 10px;">
324        <p style="font-size:20px;"><strong>TL;DR:</strong> We propose <b>Versa</b>, a reciprocity-guided framework for
325          resounding. Versa leverages physical wave symmetry to learn physically consistent acoustic fields even under
326          sparse emitter configurations.
327      </div>
328    </div>
329  </div>
330  <br>
331
332
333  <div class="columns is-centered has-text-centered">
334    <h2 class="title is-3"> Project presentation</h2>
335  </div>
336  <div style="display:flex; justify-content:center; align-items:center;">
337    <div style="position:relative; padding-bottom:20.25%; height:0; width:50%; max-width:800px;">
338      <iframe src="https://www.youtube.com/embed/Zu1JsYG_k5E" title="Project Presentation" frameborder="0"
339        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
340        allowfullscreen style="position:absolute; top:0; left:0; width:100%; height:100%;">
341      </iframe>
342    </div>
343  </div>
344
345  <br> <br>
346  <br>
347
348
349  <div class="video-grid">
350    <div class="has-text-centered">
351      <h2 class="title is-3 has-text-centered">Method</h2>
352
353      <div>
354        <img src="./static/images/reciprocity_method.png" class="interpolation-image"
355          alt="Interpolate start reference image." />
356      </div>
357      <div class="content has-text-justified" style="width: 60%; margin: 0 auto;">
358        <p style="font-size:22px;">a) The vanilla method uses direct supervision with measured impulse responses. <br>
359          b) Versa-ELE enforces response invariance under pose exchange to create physically valid virtual samples. <br>
360          c) Versa-SSL aligns emitter and listener gain pattern to maintain consistency under pose exchange and to
361          enable reciprocity-based self-supervision.
362        </p>
363        </p>
364      </div>
365    </div>
366  </div>
367
368  <div class="content has-text-justified" style="width:70%; margin: 0 auto;">
369    <p style="font-size:20px;">
370      <strong>Resounding.</strong>
371      Given only a few measured emitters, we want to synthesize room impulse responses at arbitrary new source locations
372      — analogous to <em>relighting</em> in graphics.
373      However, sparse emitters make learning physically consistent acoustic fields extremely challenging.
374    </p>
375  </div>
376 -->
377
378  <div class="tldr-box">
379    <p>
380      <strong>TL;DR:</strong> We propose <b>Versa</b>, a reciprocity-guided framework for resounding.
381      Versa leverages physical wave symmetry to learn <b>physically consistent</b> acoustic fields even with
382      <b>sparse emitters</b>.
383    </p>
384  </div>
385
386  <section class="section-wrap" id="presentation">
387    <div class="has-text-centered">
388      <h2 class="title is-3 section-title">Project Presentation</h2>
389      <p class="section-subtitle">
390        A quick overview of the key idea: <b>acoustic reciprocity</b> as supervision for learning physically consistent
391        acoustic fields under sparse emitter configurations.
392      </p>
393    </div>
394
395    <div class="yt-wrap">
396      <div class="yt-iframe-box">
397        <iframe src="https://www.youtube.com/embed/Zu1JsYG_k5E" title="Versa Project Presentation"
398          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
399          allowfullscreen>
400        </iframe>
401      </div>
402    </div>
403
404
405  </section>
406
407
408  <!-- ===== Method ===== -->
409  <section class="section-wrap" id="method">
410    <div class="has-text-centered">
411      <h2 class="title is-3 section-title">Method</h2>
412      <p class="section-subtitle">
413        Versa turns <b>reciprocity</b> into supervision: swapping emitter ↔ listener provides physically grounded
414        training
415        signals to improve generalization when emitter coverage is sparse.
416      </p>
417    </div>
418
419    <!-- Overview figure + explanation -->
420    <div class="method-grid">
421      <div class="method-figure">
422        <img src="./static/images/reciprocity.png" alt="Versa method overview figure">
423        <div class="caption">
424          <b>Reciprocity principle.</b>In vision, reciprocity says the light can travel reversely. Similarly in
425          acoustic, swapping emitter and
426          listener positions leaves the acoustic response unchanged.
427        </div>
428      </div>
429
430      <div class="method-text">
431        <p>
432          <b>Problem (Resounding).</b> We want to synthesize impulse responses at new source positions, even when only a
433          few
434          emitters are observed during training. Naïvely training on sparse emitters often leads to physically
435          inconsistent
436          fields and poor generalization.
437        </p>
438
439        <p>
440          <b>Key insight: Acoustic reciprocity.</b> The propagation path is symmetric under swapping emitter and
441          listener.
442          This symmetry lets us “relabel” dense microphones as virtual emitters and generate additional supervisory
443          signals.
444        </p>
445
446      </div>
447    </div>
448
449    <!-- ELE / SSL detail cards -->
450    <div class="cards-grid">
451      <div class="method-card">
452        <h3>Versa-ELE: Emitter–Listener Exchange</h3>
453        <p>
454          Create physically valid virtual emitters by swapping emitter and listener poses. This transforms sparse
455          emitter coverage into denser supervision for training.
456        </p>
457        <img src="./static/images/versa_ele.png" alt="Versa-ELE figure">
458        <div class="caption">
459          <b>Versa-ELE.</b> Exchange emitter and listener poses to generate physically consistent pseudo-labels.
460        </div>
461      </div>
462
463      <div class="method-card">
464        <h3>Versa-SSL: Reciprocity Self-Supervision</h3>
465        <p>
466          When emitter/listener gain patterns break naïve symmetry, Versa-SSL aligns gain effects and enforces
467          reciprocity
468          consistency, enabling stable learning under real hardware differences.
469        </p>
470        <img src="./static/images/versa_ssl.png" alt="Versa-SSL figure">
471        <div class="caption">
472          <b>Versa-SSL.</b> Reciprocity-based self-supervision that remains valid under asymmetric gain patterns.
473        </div>
474      </div>
475    </div>
476
477  </section>
478
479
480
481  <section id="demos" class="demo-section">
482    <div class="demo-header">
483      <h2>Demos</h2>
484      <p class="demo-subtitle">
485        Compare <b>Vanilla</b>, <b>Versa (Ours)</b>, and <b>GT</b> side-by-side. Use the toggle to switch Ours between

486        ELE and SSL when available.
487      </p>
488
489      <div class="demo-toolbar">
490        <div class="toggle">
491          <span class="toggle-label">Ours variant:</span>
492          <button class="toggle-btn is-active" data-ours="ele">Versa-ELE</button>
493          <button class="toggle-btn" data-ours="ssl">Versa-SSL</button>
494        </div>
495
496        <div class="filters">
497          <label class="filter">
498            <span>Scene</span>
499            <select id="caseFilter">
500              <option value="all">All</option>
501            </select>
502          </label>
503
504          <label class="filter">
505            <span>Scenario</span>
506            <select id="scenarioFilter">
507              <option value="all">All</option>
508            </select>
509          </label>
510
511          <!-- <button id="expandAll" class="ghost-btn">Expand all</button>
512          <button id="collapseAll" class="ghost-btn">Collapse all</button> -->
513        </div>
514      </div>
515    </div>
516
517    <div class="demo-grid">
518      <div class="demo-grid-head">
519        <div class="demo-col label-col"></div>
520        <div class="demo-col">Vanilla</div>
521        <div class="demo-col">Ours</div>
522        <div class="demo-col">GT</div>
523      </div>
524
525      <div id="demoRows" class="demo-rows"></div>
526    </div>
527  </section>
528
529
530  <section class="section" id="BibTeX">
531    <div class="container is-max-desktop content">
532      <h2 class="title is-3">BibTeX</h2>
533      <pre><code>
534      @inproceedings{lanresounding,
535        title={Resounding Acoustic Fields with Reciprocity},
536        author={Lan, Zitong and Hao, Yiduo and Zhao, Mingmin},
537        booktitle={The Thirty-ninth Annual Conference on Neural Information Processing Systems}
538      }
539        </code></pre>
540    </div>
541  </section>
542
543
544
545</body>
546
547</html>