PageSourceSearch

https://twjhlee.github.io/projects/INGRID

html twjhlee.github.io collected 2026-10-03 10:06:29 UTC 36,709 bytes, 769 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>INGRID — Interactive Geometry and Instance Identification for Occluded Scenes</title>
7<meta name="description" content="INGRID: a robotic system that actively interacts with a scene to reveal hidden surfaces and disambiguate object instances and geometry.">
8
9<!-- ============================================================
10     FONTS
11     Space Grotesk = display (technical grotesque, used at scale)
12     Inter         = body
13     JetBrains Mono = labels, data, captions (the "instrument" voice)
14============================================================ -->
15<link rel="preconnect" href="https://fonts.googleapis.com">
16<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
18
19<style>
20/* ============================================================
21   DESIGN TOKENS
22   A "3D viewport" theme: deep slate canvas, the paper's own
23   render colors as accents. Visibility-yellow is the signature —
24   in the paper it marks newly-revealed surface, so here it marks
25   everything the reader should notice.
26============================================================ */
27:root{
28  --bg:            #FFFFFF;
29  --bg-2:          #F5F7FA;
30  --surface:       #FAFBFC;
31  --hairline:      #D1D5DB;
32  --hairline-soft: #E5E7EB;
33
34  --ink:           #111827;
35  --ink-dim:       #4B5563;
36  --ink-faint:     #9CA3AF;
37
38  --geo:           #2563EB;
39  --geo-deep:      #1D4ED8;
40  --instance:      #C74B93;
41  --visible:       #B45309;   /* amber — readable on white      */
42  --recovered:     #EA580C;
43
44  --measure: 68ch;
45  --pad: clamp(1.25rem, 4vw, 4rem);
46
47  --f-display: "Space Grotesk", system-ui, sans-serif;
48  --f-body: "Inter", system-ui, sans-serif;
49  --f-mono: "JetBrains Mono", ui-monospace, monospace;
50}
51
52*{ box-sizing:border-box; }
53html{ scroll-behavior:smooth; }
54@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
55
56body{
57  margin:0;
58  background:var(--bg);
59  color:var(--ink);
60  font-family:var(--f-body);
61  font-size:17px;
62  line-height:1.7;
63  -webkit-font-smoothing:antialiased;
64  text-rendering:optimizeLegibility;
65}
66
67/* subtle voxel grid, only in atmosphere layers */
68.grid-atmos{
69  background-image:
70    linear-gradient(var(--hairline-soft) 1px, transparent 1px),
71    linear-gradient(90deg, var(--hairline-soft) 1px, transparent 1px);
72  background-size: 46px 46px;
73}
74
75a{ color:var(--visible); text-decoration:none; }
76a:hover{ text-decoration:underline; text-underline-offset:3px; }
77
78::selection{ background:var(--visible); color:#fff; }
79
80.mono{ font-family:var(--f-mono); }
81.eyebrow{
82  font-family:var(--f-mono);
83  font-size:.72rem;
84  letter-spacing:.22em;
85  text-transform:uppercase;
86  color:var(--ink-faint);
87}
88
89/* ---------- layout shell ---------- */
90.wrap{ max-width:1180px; margin:0 auto; padding-inline:var(--pad); }
91.narrow{ max-width:760px; }
92
93section{ padding-block: clamp(3.5rem, 8vw, 7rem); }
94
95/* ============================================================
96   NAV
97============================================================ */
98nav.top{
99  position:sticky; top:0; z-index:50;
100  background:rgba(255,255,255,.92);
101  backdrop-filter:blur(12px);
102  border-bottom:1px solid var(--hairline);
103}
104nav.top .wrap{
105  display:flex; align-items:center; justify-content:space-between;
106  padding-block:.85rem;
107}
108.brand{ display:flex; align-items:baseline; gap:.7rem; }
109.brand .name{ font-family:var(--f-display); font-weight:700; letter-spacing:.02em; font-size:1.05rem; }
110.brand .pid{ font-family:var(--f-mono); font-size:.7rem; color:var(--ink-faint); border:1px solid var(--hairline); border-radius:4px; padding:.15rem .45rem; }
111.nav-links{ display:flex; gap:1.6rem; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em; }
112.nav-links a{ color:var(--ink-dim); text-transform:uppercase; }
113.nav-links a:hover{ color:var(--ink); text-decoration:none; }
114@media (max-width:760px){ .nav-links{ display:none; } }
115
116/* ============================================================
117   HERO
118============================================================ */
119.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--hairline); }
120.hero .grid-atmos{
121  position:absolute; inset:0;
122  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%);
123          mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%);
124  opacity:.5; pointer-events:none;
125}
126.hero .wrap{ position:relative; padding-block: clamp(3rem,7vw,5.5rem) clamp(2.5rem,6vw,4rem); }
127
128.venue{ display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; margin-bottom:2rem; }
129.venue .tag{
130  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
131  color:var(--visible); border:1px solid color-mix(in srgb, var(--visible) 40%, transparent);
132  border-radius:100px; padding:.3rem .8rem;
133}
134.venue .anon{ font-family:var(--f-mono); font-size:.75rem; color:var(--ink-faint); }
135
136h1.title{
137  font-family:var(--f-display);
138  font-weight:700;
139  font-size:clamp(2.3rem, 6.2vw, 4.6rem);
140  line-height:1.03;
141  letter-spacing:-.02em;
142  margin:0 0 1.2rem;
143  max-width:16ch;
144}
145h1.title .acr{ color:var(--visible); }
146.lede{
147  font-size:clamp(1.05rem,2vw,1.28rem);
148  color:var(--ink-dim);
149  max-width:58ch;
150  line-height:1.55;
151  margin:0 0 2.2rem;
152}
153
154.actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
155.btn{
156  display:inline-flex; align-items:center; gap:.55rem;
157  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.02em;
158  padding:.7rem 1.15rem; border-radius:8px;
159  border:1px solid var(--hairline);
160  background:var(--surface); color:var(--ink);
161  transition:border-color .2s, transform .2s, background .2s;
162}
163.btn:hover{ border-color:var(--geo); transform:translateY(-2px); text-decoration:none; }
164.btn.primary{ background:var(--visible); color:#fff; border-color:var(--visible); font-weight:600; }
165.btn.primary:hover{ background:#92400e; }
166.btn svg{ width:15px; height:15px; }
167
168/* teaser figure */
169.teaser{ margin-top:clamp(2.5rem,5vw,3.5rem); }
170
171/* ============================================================
172   IMAGE PLACEHOLDERS
173   Swap any .ph block for <img class="fig" src="..."> when ready.
174============================================================ */
175.figure{ margin:0; }
176.ph{
177  position:relative;
178  border:1px dashed var(--hairline);
179  border-radius:12px;
180  background:
181    repeating-linear-gradient(45deg, var(--bg-2) 0 14px, var(--surface) 14px 28px);
182  display:flex; flex-direction:column; align-items:center; justify-content:center;
183  gap:.5rem; text-align:center; padding:2rem;
184  color:var(--ink-faint);
185  min-height:180px;
186}
187.ph .ph-badge{
188  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
189  color:var(--visible);
190  border:1px solid color-mix(in srgb,var(--visible) 35%, transparent);
191  border-radius:100px; padding:.25rem .7rem;
192}
193.ph .ph-hint{ font-family:var(--f-mono); font-size:.8rem; max-width:52ch; line-height:1.5; }
194.ph.wide{ aspect-ratio:16/6; }
195.ph.tall{ aspect-ratio:4/3; }
196.ph.square{ aspect-ratio:1; }
197img.fig{ width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--hairline); }
198figcaption{
199  font-family:var(--f-mono); font-size:.78rem; color:var(--ink-faint);
200  line-height:1.55; margin-top:.9rem;
201}
202figcaption b{ color:var(--ink-dim); font-weight:500; }
203
204/* ============================================================
205   SECTION HEADS
206============================================================ */
207.head{ margin-bottom:2.5rem; }
208.head .eyebrow{ display:block; margin-bottom:.9rem; }
209.head h2{
210  font-family:var(--f-display); font-weight:600;
211  font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.1; letter-spacing:-.015em;
212  margin:0; max-width:20ch;
213}
214.head p.sub{ color:var(--ink-dim); max-width:var(--measure); margin:1rem 0 0; }
215
216/* prose */
217.prose p{ max-width:var(--measure); }
218.prose p + p{ margin-top:1.1rem; }
219.prose strong{ color:var(--ink); font-weight:600; }
220
221/* abstract block */
222.abstract{
223  border-left:2px solid var(--visible);
224  padding-left:1.6rem;
225}
226.abstract .eyebrow{ margin-bottom:.8rem; }
227.abstract p{ font-size:1.08rem; color:var(--ink); max-width:var(--measure); }
228
229/* ============================================================
230   THE PROBLEM — two ambiguity cards
231============================================================ */
232.amb-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:2.5rem; }
233@media (max-width:760px){ .amb-grid{ grid-template-columns:1fr; } }
234.amb{
235  background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
236  padding:1.6rem; display:flex; flex-direction:column; gap:1rem;
237}
238.amb .kind{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--instance); }
239.amb h3{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; margin:0; }
240.amb p{ color:var(--ink-dim); margin:0; font-size:.96rem; }
241
242/* ============================================================
243   PIPELINE — genuine 4-step sequence (i–iv), so numbering earns its place
244============================================================ */
245.pipeline{ display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:14px; overflow:hidden; }
246.step{
247  background:var(--surface);
248  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
249  padding:1.7rem clamp(1.2rem,3vw,2.2rem);
250  transition:background .25s;
251}
252.step:hover{ background:var(--bg-2); }
253.step .num{
254  font-family:var(--f-display); font-weight:700; font-size:1.15rem;
255  color:var(--visible);
256  border:1px solid color-mix(in srgb,var(--visible) 30%, transparent);
257  border-radius:8px; width:2.7rem; height:2.7rem;
258  display:grid; place-items:center; align-self:start;
259}
260.step h3{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; margin:0 0 .4rem; }
261.step p{ color:var(--ink-dim); margin:0; font-size:.98rem; max-width:64ch; }
262.step .k{ color:var(--geo); font-family:var(--f-mono); font-size:.9em; }
263
264/* ============================================================
265   BEFORE / AFTER REVEAL — the signature interaction.
266   Literally embodies the paper: drag to reveal the hidden surface.
267============================================================ */
268.reveal{ margin-top:2.5rem; }
269.reveal-stage{
270  position:relative; border-radius:14px; overflow:hidden;
271  border:1px solid var(--hairline);
272  aspect-ratio:16/8;
273  cursor:ew-resize; user-select:none;
274  background:var(--bg-2);
275}
276.reveal-layer{ position:absolute; inset:0; display:grid; place-items:center; }
277.reveal-layer .lbl{
278  position:absolute; top:1rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
279  padding:.3rem .7rem; border-radius:100px; z-index:4;
280}
281/* base = "before change" */
282.layer-before{ background:
283    radial-gradient(60% 80% at 40% 60%, color-mix(in srgb,var(--instance) 22%, var(--bg-2)) 0%, var(--bg-2) 70%); }
284.layer-before .lbl{ left:1rem; color:var(--ink-dim); border:1px solid var(--hairline); background:rgba(14,17,22,.6); }
285/* top clip = "after change / revealed" */
286.layer-after{ background:
287    radial-gradient(60% 80% at 60% 60%, color-mix(in srgb,var(--geo) 26%, var(--bg-2)) 0%, var(--bg-2) 70%);
288  clip-path:inset(0 50% 0 0); }
289.layer-after .lbl{ right:1rem; color:var(--visible); border:1px solid color-mix(in srgb,var(--visible) 40%, transparent); background:rgba(14,17,22,.6); }
290.reveal-ph{ font-family:var(--f-mono); font-size:.82rem; color:var(--ink-faint); text-align:center; padding:1.5rem; line-height:1.6; }
291.reveal-ph b{ color:var(--ink-dim); }
292.reveal-handle{
293  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--visible); z-index:6;
294  transform:translateX(-1px);
295}
296.reveal-handle::after{
297  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
298  width:38px; height:38px; border-radius:50%;
299  background:var(--visible);
300  box-shadow:0 0 0 6px rgba(242,201,76,.18);
301}
302.reveal-handle .grip{
303  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
304  z-index:7; font-family:var(--f-mono); font-size:.9rem;
304 color:#1a1500; font-weight:700;
305}
306.reveal input[type=range]{
307  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:8;
308}
309
310/* ============================================================
311   RESULTS TABLES
312============================================================ */
313.table-scroll{ overflow-x:auto; border:1px solid var(--hairline); border-radius:14px; }
314table{
315  border-collapse:collapse; width:100%; min-width:640px;
316  font-family:var(--f-mono); font-size:.82rem;
317}
318caption{
319  caption-side:top; text-align:left; padding:1.1rem 1.2rem .3rem;
320  font-family:var(--f-mono); font-size:.78rem; color:var(--ink-faint); line-height:1.55;
321}
322thead th{
323  text-align:right; padding:.7rem .9rem;
324  color:var(--ink-dim); font-weight:500; letter-spacing:.03em;
325  border-bottom:1px solid var(--hairline); white-space:nowrap;
326}
327thead th:first-child{ text-align:left; }
328tbody td{ padding:.6rem .9rem; text-align:right; border-bottom:1px solid var(--hairline-soft); color:var(--ink-dim); white-space:nowrap; }
329tbody td:first-child{ text-align:left; color:var(--ink); }
330tbody tr:last-child td{ border-bottom:none; }
331tbody tr.ours{ background:color-mix(in srgb,var(--visible) 7%, transparent); }
332tbody tr.ours td:first-child{ color:var(--visible); }
333.best{ color:var(--ink); font-weight:600; }
334.group-rule td{ border-top:1px solid var(--hairline); }
335.tbl-note{ font-family:var(--f-mono); font-size:.74rem; color:var(--ink-faint); margin-top:.8rem; }
336
337.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
338@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }
339
340/* ============================================================
341   CONTRIBUTIONS
342============================================================ */
343.contribs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem; }
344@media (max-width:860px){ .contribs{ grid-template-columns:1fr; } }
345.contrib{ border-top:2px solid var(--geo); padding-top:1.1rem; }
346.contrib .n{ font-family:var(--f-mono); font-size:.75rem; color:var(--ink-faint); letter-spacing:.1em; }
347.contrib p{ margin:.5rem 0 0; color:var(--ink-dim); font-size:.98rem; }
348
349/* ============================================================
350   LIMITATIONS
351============================================================ */
352.limits{ display:grid; gap:1rem; margin-top:1.5rem; }
353.limit{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline; padding:1.1rem 0; border-bottom:1px solid var(--hairline-soft); }
354.limit .dot{ width:8px; height:8px; border-radius:50%; background:var(--recovered); margin-top:.5rem; }
355.limit p{ margin:0; color:var(--ink-dim); max-width:var(--measure); }
356.limit p b{ color:var(--ink); font-weight:600; }
357
358/* ============================================================
359   BIBTEX
360============================================================ */
361.bibtex{ position:relative; }
362.bibtex pre{
363  background:var(--bg-2); border:1px solid var(--hairline); border-radius:12px;
364  padding:1.4rem 1.5rem; overflow-x:auto;
365  font-family:var(--f-mono); font-size:.82rem; line-height:1.7; color:var(--ink-dim);
366  margin:0;
367}
368.copy-btn{
369  position:absolute; top:.9rem; right:.9rem;
370  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
371  background:var(--surface); border:1px solid var(--hairline); color:var(--ink-dim);
372  border-radius:6px; padding:.35rem .7rem; cursor:pointer; transition:.2s;
373}
374.copy-btn:hover{ border-color:var(--visible); color:var(--visible); }
375
376/* ============================================================
377   FOOTER
378============================================================ */
379footer{ border-top:1px solid var(--hairline); padding-block:2.5rem; }
380footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
381footer p{ font-family:var(--f-mono); font-size:.76rem; color:var(--ink-faint); margin:0; }
382
383/* ============================================================
384   SCROLL REVEAL
385============================================================ */
386.rise{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
387.rise.in{ opacity:1; transform:none; }
388@media (prefers-reduced-motion: reduce){
389  .rise{ opacity:1; transform:none; transition:none; }
390}
391
392/* ============================================================
393   VIDEO EMBED
394============================================================ */
395.video-wrap{
396  position:relative; width:100%; padding-top:56.25%; /* 16:9 */
397  border-radius:14px; overflow:hidden;
398  border:1px solid var(--hairline);
399  background:var(--bg-2);
400}
401.video-wrap iframe{
402  position:absolute; inset:0; width:100%; height:100%; border:none;
403}
404
405/* focus visibility */
406:focus-visible{ outline:2px solid var(--visible); outline-offset:3px; border-radius:4px; }
407</style>
408</head>
409<body>
410
411<!-- ========================= NAV ========================= -->
412<nav class="top">
413  <div class="wrap">
414    <div class="brand">
415      <span class="name">INGRID</span>
416      <span class="pid">Paper&nbsp;ID&nbsp;24</span>
417    </div>
418    <div class="nav-links">
419      <a href="#abstract">Abstract</a>
420      <a href="#video">Video</a>
421      <a href="#problem">Problem</a>
422      <a href="#method">Method</a>
423      <a href="#results">Results</a>
424      <a href="#bibtex">BibTeX</a>
425    </div>
426  </div>
427</nav>
428
429<!-- ========================= HERO ========================= -->
430<header class="hero">
431  <div class="grid-atmos"></div>
432  <div class="wrap">
433    <div class="venue">
434      <span class="tag">Interactive Perception · Robotics</span>
435      <span class="anon">// Junho Lee, Sangmin Kim, Yonghyeon Lee, Young Min Kim</span>
436    </div>
437
438    <h1 class="title"><span class="acr">INGRID</span>: Interactive Geometry and Instance Identification for Occluded Scenes</h1>
439
440    <p class="lede">A robotic manipulator that <em>acts</em> to see. INGRID physically nudges a cluttered scene to expose surfaces a static camera can never reach — then resolves what is one object and what is two.</p>
441
442    <div class="actions">
443      <!-- Replace href="#" with real links when available -->
444      <a class="btn primary" href="#">
445        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3v5h5M8 13h8M8 17h8M8 9h2"/><path d="M6 2h9l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/></svg>
446        Paper (PDF)
447      </a>
448      <a class="btn" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M8 8h8v8H8z"/></svg> arXiv</a>
449      <a class="btn" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.3 4.3 0 0 0-.1-3.2s-1-.3-3.5 1.3a12 12 0 0 0-6.3 0C6.5 2.8 5.5 3.1 5.5 3.1a4.3 4.3 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg> Code</a>
450      <a class="btn" href="https://youtu.be/zDi0jirDK80" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m10 8 6 4-6 4V8z"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg> Video</a>
451    </div>
452
453    <!-- ===== TEASER FIGURE (Fig. 1) ===== -->
454    <figure class="figure teaser rise">
455      <img class="fig" src="RSS_INGRID/imgs/fig1_teaser-1.png" alt="Overview of INGRID showing two panels: Unobservable Surface Discovery and Instance Disambiguation" style="padding:1.5rem; background:var(--surface);">
456      <figcaption><b>Fig. 1 — Overview.</b> INGRID discovers previously unobservable surfaces by executing robot-arm actions that maximize scene visibility, refines geometry through selective finetuning, and resolves instance-level ambiguities by interacting with the environment.</figcaption>
457    </figure>
458  </div>
459</header>
460
461<main>
462
463<!-- ========================= VIDEO ========================= -->
464<section id="video" style="background:var(--bg-2); border-block:1px solid var(--hairline);">
465  <div class="wrap">
466    <div class="head rise">
467      <span class="eyebrow">Video</span>
468      <h2>Overview video.</h2>
469    </div>
470    <div class="video-wrap rise">
471      <iframe src="https://www.youtube.com/embed/zDi0jirDK80" title="INGRID overview video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
472    </div>
473  </div>
474</section>
475
476<!-- ========================= ABSTRACT ========================= -->
477<section id="abstract">
478  <div class="wrap narrow abstract rise">
479    <span class="eyebrow">Abstract</span>
480    <p>Identifying object instances and reconstructing their geometry are fundamental to manipulation, yet passive observation of a static scene is bounded by occlusion — which breeds both geometric and semantic ambiguity in cluttered, multi-object settings. INGRID lets a manipulator interact with the scene to reveal hidden surfaces and separate ambiguous instances. The first challenge is deciding <em>where</em> to interact to induce the most informative change;
480 the second is efficiently updating instances and geometry once new views arrive. INGRID answers both with a four-step pipeline, and proves robust in severely occluded scenes both in simulation and the real world.</p>
481  </div>
482</section>
483
484<!-- ========================= THE PROBLEM ========================= -->
485<section id="problem" style="background:var(--bg-2); border-block:1px solid var(--hairline);">
486  <div class="wrap">
487    <div class="head rise">
488      <span class="eyebrow">Why static vision isn't enough</span>
489      <h2>Occlusion creates two kinds of ambiguity a camera alone can't resolve.</h2>
490      <p class="sub">When surfaces are hidden, the scene supports more than one explanation. INGRID's answer is to change the scene, not just look harder at it.</p>
491    </div>
492
493    <div class="amb-grid">
494      <div class="amb rise">
495        <span class="kind">Geometric ambiguity</span>
496        <h3>Hollow, or solid?</h3>
497        <p>Two cups stacked vertically: the lower cup is occluded. From images alone there is no way to tell whether its interior is hollow or filled in.</p>
498      </div>
499      <div class="amb rise">
500        <span class="kind">Instance ambiguity</span>
501        <h3>One block, or two?</h3>
502        <p>A block that is actually two separable pieces shares near-identical semantic features across the seam — so passive segmentation cannot decide whether it is one instance or two.</p>
503      </div>
504    </div>
505  </div>
506</section>
507
508<!-- ========================= METHOD ========================= -->
509<section id="method">
510  <div class="wrap">
511    <div class="head rise">
512      <span class="eyebrow">The pipeline</span>
513      <h2>Four steps, from a hierarchy of guesses to instance-wise geometry.</h2>
514      <p class="sub">Building on normal, density, and three-level feature fields, INGRID decides where to push, executes the action, then re-identifies and refines only what changed.</p>
515    </div>
516
517    <!-- This is a genuine ordered process, so roman numbering carries real information -->
518    <div class="pipeline rise">
519      <div class="step">
520        <div class="num">i</div>
521        <div>
522          <h3>Instance candidate tree</h3>
523          <p>Cluster the coarse/mid/fine affinity fields with <span class="k">HDBSCAN</span>, then build a tree where each node is a candidate point cloud and every child is a subset of its parent. The action space lives on the leaf nodes.</p>
524        </div>
525      </div>
526      <div class="step">
527        <div class="num">ii</div>
528        <div>
529          <h3>Optimize an informative action</h3>
530          <p>A 3D <span class="k">visibility field U</span> records how well each voxel was seen during training. Over every leaf node × 12 directions × 20 magnitudes (1–40&nbsp;cm), pick the push that maximizes newly-revealed surface area: <span class="k">arg max Q(a)</span>.</p>
531        </div>
532      </div>
533      <div class="step">
534        <div class="num">iii</div>
535        <div>
536          <h3>Identify instances under rigid-body assumption</h3>
537          <p>After the push, jointly solve for the set of instances and their <span class="k">SE(3)</span> transforms against sparse new views, minimizing 2D Chamfer distance. Start coarse; split nodes and re-solve until alignment error drops below threshold.</p>
538        </div>
539      </div>
540      <div class="step">
541        <div class="num">iv</div>
542        <div>
543          <h3>Selective geometric finetuning</h3>
544          <p>Cut-and-paste high-visibility regions to a strong starting point, then finetune <em>only</em> the instances that still hold low-visibility surface — efficient, and more robust in the few-shot regime than finetuning from scratch.</p>
545        </div>
546      </div>
547    </div>
548
549    <!-- ===== METHOD FIGURES ===== -->
550    <div class="two-col" style="margin-top:2.5rem;">
551      <figure class="figure rise">
552        <img class="fig" src="RSS_INGRID/imgs/fig4_interaction-1.png" alt="Interaction process showing visibility U, action space A, and updated visibility with gain highlighted in yellow">
553        <figcaption><b>Fig. 4 — Where to interact.</b> For each candidate action, INGRID predicts the updated visibility and scores it by the visibility gain (sh
553own in yellow).</figcaption>
554      </figure>
555      <figure class="figure rise">
556        <img class="fig" src="RSS_INGRID/imgs/fig5_finetuning-1.png" alt="Selective finetuning process: scene change, rendered visibility of newly-visible surface, and instance-wise geometry update">
557        <figcaption><b>Fig. 5 — Refine only what's new.</b> Newly-visible surface (yellow) marks the instances worth finetuning; well-observed geometry is preserved.</figcaption>
558      </figure>
559    </div>
560  </div>
561</section>
562
563
564<!-- ========================= RESULTS ========================= -->
565<section id="results">
566  <div class="wrap">
567    <div class="head rise">
568      <span class="eyebrow">Experiments · simulation + real world</span>
569      <h2>Accurate geometry and cleaner instances, in seconds rather than minutes.</h2>
570      <p class="sub">Evaluated on a photo-realistic Blender dataset for ground truth and on a Franka Panda real-world setup. Lower VSD is better; higher IoU and precision/recall are better.</p>
571    </div>
572
573    <!-- ===== QUALITATIVE FIGURE (Fig. 6) ===== -->
574    <figure class="figure rise" style="margin-bottom:2.5rem;">
575      <img class="fig" src="RSS_INGRID/imgs/fig6_qual-1.png" alt="Qualitative results across scenes: before change, instance candidate tree, after change, visibility, and instance-wise geometry">
576      <figcaption><b>Fig. 6 — Across scenes.</b> INGRID builds the candidate tree, exploits scene change, and recovers instance-wise geometry; recovered instances are shaded orange in the tree.</figcaption>
577    </figure>
578
579    <!-- ===== TABLE I ===== -->
580    <div class="table-scroll rise">
581      <table>
582        <caption><b>Table I — Geometric update.</b> Visual Surface Discrepancy (VSD ↓) and IoU (↑) over 33 novel viewpoints, averaged across three viewpoint sets per image count. Bold = best. Runtime is the average.</caption>
583        <thead>
584          <tr>
585            <th>Model</th>
586            <th>VSD · 2</th><th>VSD · 4</th><th>VSD · 8</th><th>VSD · 16</th>
587            <th>IoU · 2</th><th>IoU · 4</th><th>IoU · 8</th><th>IoU · 16</th>
588            <th>Runtime</th>
589          </tr>
590        </thead>
591        <tbody>
592          <tr class="ours">
593            <td>INGRID (Update + Finetune + Visibility)</td>
594            <td class="best">0.0385</td><td class="best">0.0330</td><td class="best">0.0307</td><td class="best">0.0302</td>
595            <td>0.8672</td><td class="best">0.8973</td><td>0.9132</td><td>0.9142</td>
596            <td>17&nbsp;sec</td>
597          </tr>
598          <tr class="ours">
599            <td>INGRID (Update + Finetune)</td>
600            <td>0.0465</td><td>0.0413</td><td>0.0387</td><td>0.0383</td>
601            <td>0.8673</td><td>0.8967</td><td>0.9131</td><td>0.9134</td>
602            <td>17&nbsp;sec</td>
603          </tr>
604          <tr class="ours">
605            <td>INGRID (Update)</td>
606            <td>0.0433</td><td>0.0416</td><td>0.0407</td><td>0.0406</td>
607            <td class="best">0.8771</td><td>0.8875</td><td>0.8937</td><td>0.8921</td>
608            <td>3&nbsp;sec</td>
609          </tr>
610          <tr class="ours">
611            <td>INGRID (Scratch)</td>
612            <td>0.1842</td><td>0.0427</td><td>0.0343</td><td>0.0333</td>
613            <td>0.5155</td><td>0.8894</td><td class="best">0.9550</td><td class="best">0.9578</td>
614            <td>62&nbsp;sec</td>
615          </tr>
616          <tr class="group-rule"><td>Dex-NeRF (Update)</td><td>3.0190</td><td>2.6412</td><td>0.0934</td><td>0.0506</td><td>0.0769</td><td>0.8053</td><td>0.9353</td><td>0.9461</td><td>25&nbsp;min</td></tr>
617          <tr><td>Dex-NeRF (Scratch)</td><td>2.7979</td><td>2.6319</td><td>0.0992</td><td>0.0535</td><td>0.0695</td><td>0.4382</td><td>0.9351</td><td>0.9453</td><td>50&nbsp;min</td></tr>
618          <tr><td>NeRF (Update)</td><td>0.8672</td><td>1.0712</td><td>0.1003</td><td>0.0687</td><td>0.0769</td><td>0.8053</td><td>0.9353</td><td>0.9461</td><td>25&nbsp;min</td></tr>
619          <tr><td>NeRF (Scratch)</td><td>1.7426</td><td>0.9968</td><td>0.0881</td><td>0.0716</td><td>0.0695</td><td>0.4382</td><td>0.9351</td><td>0.9453</td><td>50&nbsp;min</td></tr>
620          <tr><td>Instant-NGP (Update)</td><td>0.7123</td><td>1.1015</td><td>0.3884</td><td>
6200.0981</td><td>0.5807</td><td>0.7565</td><td>0.8472</td><td>0.8617</td><td>25&nbsp;sec</td></tr>
621          <tr><td>Instant-NGP (Scratch)</td><td>0.3973</td><td>0.4515</td><td>0.3791</td><td>0.0900</td><td>0.1617</td><td>0.4455</td><td>0.7821</td><td>0.8665</td><td>50&nbsp;sec</td></tr>
622        </tbody>
623      </table>
624    </div>
625    <p class="tbl-note">With only 2 images, INGRID transforms objects in 3D and finetunes newly-visible parts in 17 seconds — where field-based baselines take minutes.</p>
626
627    <!-- ===== TABLE II + UncOS ===== -->
628    <div class="two-col" style="margin-top:2.5rem;">
629      <div class="table-scroll rise">
630        <table>
631          <caption><b>Table II — Instance identification.</b> Precision (mean IoU over predicted instances) and recall (mean IoU over ground-truth instances) of 3D bounding boxes. Bold = best.</caption>
632          <thead><tr><th>Model</th><th>Precision ↑</th><th>Recall ↑</th></tr></thead>
633          <tbody>
634            <tr class="ours"><td>INGRID</td><td class="best">0.7449</td><td class="best">0.7002</td></tr>
635            <tr><td>INGRID (coarse)</td><td>0.5707</td><td>0.6403</td></tr>
636            <tr><td>INGRID (mid)</td><td>0.6393</td><td>0.6816</td></tr>
637            <tr><td>INGRID (fine)</td><td>0.6226</td><td>0.5500</td></tr>
638            <tr class="group-rule"><td>Garfield (0.00)</td><td>0.5652</td><td>0.4218</td></tr>
639            <tr><td>Garfield (0.05)</td><td>0.5268</td><td>0.4026</td></tr>
640            <tr><td>Garfield (0.10)</td><td>0.4562</td><td>0.4361</td></tr>
641            <tr><td>Garfield (0.15)</td><td>0.3055</td><td>0.3107</td></tr>
642            <tr><td>OmniSeg3D</td><td>0.5033</td><td>0.5567</td></tr>
643          </tbody>
644        </table>
645      </div>
646      <figure class="figure rise">
647        <img class="fig" src="RSS_INGRID/imgs/fig7_uncos-1.png" alt="Mask recall comparison between INGRID and UncOS, showing INGRID's more consistent multi-view detection">
648        <figcaption><b>Fig. 7 — Multi-view beats single-view.</b> Against UncOS (single-view RGB-D), INGRID's multi-view aggregation gives more consistent detection in occlusion-heavy scenes, where UncOS swings sharply with viewpoint.</figcaption>
649      </figure>
650    </div>
651  </div>
652</section>
653
654<!-- ========================= CONTRIBUTIONS ========================= -->
655<section id="contributions" style="background:var(--bg-2); border-block:1px solid var(--hairline);">
656  <div class="wrap">
657    <div class="head rise">
658      <span class="eyebrow">Contributions</span>
659      <h2>What INGRID adds.</h2>
660    </div>
661    <div class="contribs">
662      <div class="contrib rise">
663        <div class="n">01</div>
664        <p>An interaction algorithm that autonomously induces change to expose occluded objects.</p>
665      </div>
666      <div class="contrib rise">
667        <div class="n">02</div>
668        <p>An efficient instance-wise geometric finetuning scheme driven by a visibility metric.</p>
669      </div>
670      <div class="contrib rise">
671        <div class="n">03</div>
672        <p>An optimization that jointly recovers instances and their transforms from a few images after change.</p>
673      </div>
674    </div>
675  </div>
676</section>
677
678<!-- ========================= LIMITATIONS ========================= -->
679<section id="limitations">
680  <div class="wrap narrow">
681    <div class="head rise">
682      <span class="eyebrow">Conclusion &amp; limitations</span>
683      <h2>Honest edges.</h2>
684      <p class="sub">INGRID reliably reconstructs instances and geometry in occlusion-prone scenes — with room to grow.</p>
685    </div>
686    <div class="limits">
687      <div class="limit rise"><span class="dot"></span>
687<p><b>Fixed candidate tree.</b> True instances must appear in the initially built tree; dynamic node splitting or merging could add flexibility.</p></div>
688      <div class="limit rise"><span class="dot"></span><p><b>Needs viewpoint coverage.</b> Fully unobservable regions — e.g. items on a shelf — remain hard; shape priors like symmetry or superquadrics could help.</p></div>
689      <div class="limit rise"><span class="dot"></span><p><b>Rigid-body assumption.</b> Deformable objects like cloth or dolls fall outside scope; a piecewise-rigid model is a promising extension.</p></div>
690    </div>
691  </div>
692</section>
693
694<!-- ========================= BIBTEX ========================= -->
695<section id="bibtex" style="background:var(--bg-2); border-block:1px solid var(--hairline);">
696  <div class="wrap narrow">
697    <div class="head rise">
698      <span class="eyebrow">Cite</span>
699      <h2>BibTeX</h2>
700      <p class="sub">Placeholder entry — replace with the final venue and author list once de-anonymized.</p>
701    </div>
702    <div class="bibtex rise">
703      <button class="copy-btn" id="copyBib">Copy</button>
704      <pre id="bibText">@inproceedings{
705lee2026ingrid,
706title={{INGRID}: Interactive Geometry and Instance Identification for Occluded Scenes},
707author={Junho Lee and Sang Min Kim and Yonghyeon Lee and Young Min Kim},
708booktitle={3rd Workshop on Semantic Reasoning and Goal Understanding in Robotics (RSS 2026)},
709year={2026},
710url={https://openreview.net/forum?id=vHBgykM7eZ}
711}</pre>
712    </div>
713  </div>
714</section>
715
716</main>
717
718<!-- ========================= FOOTER ========================= -->
719<footer>
720  <div class="wrap">
721    <p>
721INGRID · Interactive Geometry and Instance Identification</p>
722    <p>Paper ID 24 · Anonymous review · Project page</p>
723  </div>
724</footer>
725
726<script>
727/* ---------- scroll reveal ---------- */
728(function(){
729  const els = document.querySelectorAll('.rise');
730  if(!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('in')); return; }
731  const io = new IntersectionObserver((entries)=>{
732    entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }});
733  },{ threshold:.12 });
734  els.forEach(e=>io.observe(e));
735})();
736
737/* ---------- before/after reveal ---------- */
738(function(){
739  const range  = document.getElementById('revealRange');
740  const after  = document.getElementById('revealAfter');
741  const handle = document.getElementById('revealHandle');
742  if(!range) return;
743  function set(v){
744    after.style.clipPath = `inset(0 ${100-v}% 0 0)`;
745    handle.style.left = v + '%';
746  }
747  range.addEventListener('input', e => set(+e.target.value));
748  set(50);
749})();
750
751/* ---------- copy bibtex ---------- */
752(function(){
753  const btn = document.getElementById('copyBib');
754  const txt = document.getElementById('bibText');
755  if(!btn) return;
756  btn.addEventListener('click', async () => {
757    try{
758      await navigator.clipboard.writeText(txt.textContent);
759      const old = btn.textContent; btn.textContent = 'Copied';
760      setTimeout(()=>btn.textContent = old, 1400);
761    }catch(_){
762      const old = btn.textContent; btn.textContent = 'Select all →';
763      setTimeout(()=>btn.textContent = old, 1400);
764    }
765  });
766})();
767</script>
767
768</body>
769</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.