◫ Spatial UI & XR

Passthrough

패스스루

Showing the headset’s outward cameras live in front of your eyes, so virtual UI sits layered on top of the real room.

Also known as: Mixed reality passthroughVideo see-through

···

js

const root=document.body;
const wrap=document.createElement('div');
wrap.style.cssText='position:absolute;inset:0;perspective:600px;overflow:hidden;background:linear-gradient(180deg,#1c1d2c 0%,#101018 55%,#0a0a10 100%)';
root.appendChild(wrap);
const floor=document.createElement('div');
floor.style.cssText='position:absolute;left:-40%;right:-40%;bottom:0;height:60%;'
 +'background-image:linear-gradient(rgba(140,150,210,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(140,150,210,.35) 1px,transparent 1px);'
 +'background-size:40px 40px;transform:rotateX(72deg);transform-origin:bottom;opacity:.55';
wrap.appendChild(floor);
const noise=document.createElement('div');
noise.style.cssText='position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay';
wrap.appendChild(noise);
const badge=document.createElement('div');
badge.textContent='PASSTHROUGH';
badge.style.cssText='position:absolute;top:14px;left:14px;padding:4px 10px;border-radius:999px;background:rgba(255,90,90,.18);'
 +'border:1px solid rgba(255,120,120,.5);color:#ffb3b3;font:700 10px/1 system-ui;letter-spacing:.08em;animation:blink 1.6s ease-in-out infinite';
wrap.appendChild(badge);
const panel=document.createElement('div');
panel.innerHTML='<div style="width:70%;height:8px;border-radius:4px;background:rgba(255,255,255,.25);margin-bottom:8px"></div>'
 +'<div style="width:45%;height:8px;border-radius:4px;background:rgba(255,255,255,.25)"></div>';
panel.style.cssText='position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(58%,220px);padding:18px;border-radius:16px;'
 +'background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.22);'
 +'backdrop-filter:blur(8px);box-shadow:0 24px 44px rgba(0,0,0,.55)';
wrap.appendChild(panel);
const style=document.createElement('style');
style.textContent='@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}';
document.head.appendChild(style);

Unlike fully occluded VR, passthrough renders the headset's outward-facing camera feed live, so the user can still see their actual room — the couch, the desk, other people. Layering virtual windows, buttons, and notifications on top of that is the basic shape of mixed-reality UI.

With passthrough active, the UI has to make it clear what's real and what's virtual — virtual elements often get a shadow, a slight glow, or a glassy material as a visual cue that sets them apart from the room. Because the real world stays visible, it's also generally safer than full immersion, which is why it's common for short tasks or collaborative scenarios.

The demo puts a translucent UI panel over a simplified "passthrough room" — a grid floor and back wall. The room carries a faint camera-noise flicker while the UI on top renders crisp, contrasting "captured reality" against "rendered virtual".

When to use

Good for brief tasks, tasks that involve walking around, or sharing a room with other people. Give virtual elements a material that sets them apart from reality to avoid confusion.