hello-cube

A glasses-free 3D element inside an ordinary web page — the DisplayXR inline-3D "hello world".

Everything on this page is flat 2D HTML — this paragraph, the headings, the two columns below. The one exception is the canvas: it requests an inline-3d WebXR session, binds an XRDisplayLayer, and renders a rotating cube as a stereo pair re-projected off-axis from your eyes every frame. In the DisplayXR Browser on a DisplayXR display it weaves to glasses-free 3D and looks-around as you move; in any other browser it degrades to a plain spinning cube.

initializing…

What to look for

On hardware, the cube should have real depth and shift perspective as you move your head — the 2D text around it stays flat. That look-around is the session feeding the page your eye positions each frame.

How it works

The page does normal WebGL rendering into the canvas; the browser's compositor weaves that element's rectangle. No special GPU code in the page — just the inline-3d session + XRDisplayLayer. See the source.

All samples · Get the DisplayXR Browser