DisplayGlasses.dev Display Glasses Simulator Guide Back to Simulator

How it works

How the Simulator works

The Simulator reproduces the one property that makes display glasses different from every other screen: the image is added to the light already reaching your eye. This page explains that model and walks through each control.

A meeting agenda application rendered in the heads-up display over a conference room scene
The composited result: application content on the right side of the field of view, with the room visible through it. Illustrative composite using a sample application.

The model

Your application is loaded into an <iframe> and composited over a background scene with mix-blend-mode: plus-lighter. That operation adds your pixels to the scene behind them, which is what an optical waveguide does when it injects projected light into the eye alongside the light passing through the lens.

One consequence governs everything else. Black emits nothing. Any area drawn at #000 is fully transparent on the glasses, and the brightness of a pixel in your design is its brightness on the lens.

Side by side comparison of a wayfinding application on a black background and the same frame composited over a parking garage scene
Left: the application as designed, on black. Right: the same frame composited additively over a scene. The black background disappears entirely.

Using the Simulator

1. Load an application

Enter any publicly reachable https:// URL and press Load. The page renders inside the display and stays fully interactive, so you can operate it the way a wearer would. Applications you load are kept under Recent apps for the session.

The URL field and Load button in the Simulator sidebar

2. Set placement, size and brightness

The real display is monocular and sits in the right lens, so position defaults to the right of the field of view. Size approximates how much of that field the image occupies, and brightness stands in for display output and ambient conditions.

Placement controls for position, size and brightness

3. Change the background scene

Contrast on a see-through display depends entirely on what is behind it. Scenes cover a range of lighting and motion conditions, and the Dark and Blur sliders adjust ambient level. You can also upload your own footage or image.

Background scene picker with darkness and blur sliders
The same notification composited over a bright interior, a low light scene and a night scene
The same frame across three lighting conditions. A design that reads at night can lose most of its contrast against a bright interior, which is the case worth testing before committing.

4. Capture, share, or open on glasses

Capture saves a still of the composited view. Record produces video, which is the only accurate way to show performance over motion. Share copies a link that restores the exact setup, including application, scene, brightness, and placement.

Capture, Record, QR Code and Share buttons

QR Code generates a scannable code for the loaded application. On glasses, say "Hey Meta, scan this QR code" and follow the notification to open it on the display. The panel can also encode the Simulator itself, so a phone camera opens your setup on another device.

The QR code panel with On Glasses and On Phone modes

What the Simulator does not model

The Simulator reproduces compositing, not optics. Waveguide artifacts such as rainbow fringing, eyebox falloff, focal distance, and direct glare are not represented. Field of view, resolution, and peak brightness also vary by device and change between hardware generations.

Note: use the preview to evaluate layout, legibility, and contrast. Verify anything specification-critical against Meta's official documentation and physical hardware.