Neil Haddley - Developer & Technical Consultant

WebXR

Neil Haddley • April 22, 2022

Create Augmented Reality Experiences.

WebXR supports both Virtual Reality (VR) and Augmented Reality (AR).

WebXR has replaced the WebVR standard.

Scene with markers

This scene includes two Augmented Reality markers.

A sphere is added to the camera output when the Hiro marker is recognised.

A dinosaur is added to the camera output when the '6' barcode marker is recognised.

For convenience the barcode marker can be added to a web page QR Code.

QR Code

Barcode marker

Augmented Reality Marker

Barcode Marker

Barcode Marker embedded in a QR Code

Scene

HTML

1<!DOCTYPE html>
2<html>
3<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
4<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
5
6<body style="margin : 0px; overflow: hidden;">
7    <a-scene embedded arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
8
9        <a-marker preset="hiro">
10            <a-sphere position='0 0.5 0' material="opacity: 0.5" radius="1"></a-sphere>
11        </a-marker>
12
13        <a-marker type="barcode" value="6">
14            <a-entity position="0 0 0" scale="0.05 0.05 0.05"
15                gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf">
16            </a-entity>
17        </a-marker>
18        <a-entity camera></a-entity>
19    </a-scene>
20</body>
21
22</html>