Applications with declarative HTML
Use webar-scene for the camera, renderer and controls. Put each model or video inside its webar-target in image mode. In surface mode, put the content directly in the scene. See the complete first app.
Scene attributes
| Attribute | Default or effect |
|---|---|
mode |
image; use slam for markerless placement |
backend |
auto in image mode; optical-flow in SLAM mode |
slam |
Adds the transition control to an image scene |
keep-content-on-lost |
Holds the last displayed transform when enabled |
loss-grace |
500 ms |
performance |
auto, balanced, battery or quality |
camera-width, camera-height, fps |
Requested capture settings; the browser negotiates the stream |
analysis-width, analysis-pixels |
Analysis limits; auto/balanced cap at 640 px wide and 307,200 pixels |
pixel-ratio, antialias |
Renderer controls; default maximum pixel ratio 2 and MSAA enabled |
asset-base, opencv-url, draco-path |
Optional explicit paths for external runtime and decoder assets |
gestures, min-scale, max-scale |
Opt-in selection, rotation and scaling; initial bounds 0.1 and 100 |
scan-guide, surface-grid |
Marker scan guide and surface grid, enabled by default |
placement |
auto or manual; manual optical placement needs a recent proposal |
media-menu, fullscreen-view |
Optional capture menu and full-viewport session controls |
diagnostics, keyframe-correction |
Optional local reports and experimental optical keyframe correction |
Boolean attributes accept an empty value, true or false. Use CSS to override the default 100dvh height. Camera/backend configuration is read at startup. Stop, apply the new values and start again when changing those settings. Camera details
Image and content attributes
webar-target takes a JPG, PNG or compiled WART file through src, a target-id, and physical-width in meters. Omitted IDs become target-0, target-1 and so on. The default physical width is 0.2 m. Use up to eight different images. Multiple markers
webar-model loads a self-contained GLB, including Draco and Meshopt. Use size for the largest dimension (default 0.16), scale for uniform or XYZ scaling, rotation for XYZ degrees, and position for local XYZ coordinates. animation accepts an exact name, zero-based index or none. By default the first available clip plays.
webar-video accepts MP4, width, orientation, autoplay, muted, loop and chroma options. Interaction reference
Camera and media controls
Use media-menu for camera presets, photo and microphone video. Saving and sharing use browser capabilities. The composited recording path applies to web camera scenes. Native immersive WebXR camera imagery is outside that path. Use fullscreen-view for full-viewport viewing and a session dialog.
Use JavaScript with HTML elements
const scene = document.querySelector('webar-scene');
scene.addEventListener('targetFound', event => console.log(event.detail.targetId));
scene.addEventListener('trackingQuality', event => console.log(event.detail.issues));
scene.addEventListener('ar-error', event => console.error(event.detail));
| Event | Payload or meaning |
|---|---|
ar-ready, ar-stopped |
Prepared {app}, or null after stopping |
ar-error, ar-status |
Error, or {message} |
ar-pose, ar-slam |
Accepted ARPose, or transition result |
modelLoaded, animationFinished |
{animations}, or {name} |
videoLoaded, videoPlayBlocked |
{width,height}, or playback error |
ar-select, ar-gesture |
Pointer selection and transforms |
contentUpdated, ar-placement |
Synchronized content, or placement {state} |
targetFound, targetLost, targetVisibility, trackingQuality |
Same payloads as the engine events |
start(), stop(), refresh() and enableSLAM(options?) return promises. Await model.updateComplete after changing a model source. Use scene.refresh() after changing the hierarchy. scene.app and scene.engine are available during the session. Scene stop() disposes the managed renderer and resources. Removing the element in an SPA also frees resources.