Want a browser experience that reaches beyond a flat screen? WebXR is the emerging successor to WebVR, named to include augmented reality and other immersive modes alongside virtual reality. WebVR defined a JavaScript API for displaying VR and receiving headset and controller position and rotation input; experiments with it helped motivate a new round of standards work. Do not treat the transition as a settled compatibility guarantee. section 15.2
For a feel for the surrounding 3D workflow, an A-Frame scene declares objects with HTML-like elements while a canvas renders the result. That is a WebVR example, not a demonstration of direct WebXR API calls. section 15.2
Listing 15.2. A-Frame hello WebVR scene
<html>
<head>
<title>Hello, WebVR! • A-Frame</title>
<script src="aframe.min.js"></script> #1
</head>
<body>
<a-scene background="color: #ECECEC"> #2
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow>
</a-box> #3
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow>
</a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color=
"#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4"
color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>
Explore the small A-Frame WebVR scene to see the kind of immersive page motivating the WebXR transition. section 15.2
