A-Frame AR (Augmented Reality) on mobile phone

Tags

, , , , , ,

A-Frame lets you create augmented reality experiences on the web.

I access my A-Frame web page on a mobile phone, and I have the option of selecting an AR (Augmented Reality) or VR (Virtual Reality) experience:

Selecting an AR experience allows my mobile phone camera to provide the background, so that the scalawag is now standing on my living room windowsill:

The A-Frame code is peppered with AR features:

<html>
	<head>
		<title>Saltwash Labs</title>
		
		https://aframe.io/releases/1.3.0/aframe.min.js
		https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js
	</head>
	<body>

		<a-scene webxr="optionalFeatures: hit-test;" ar-hit-test="target: #scalawag; type: map;" renderer="colorManagement: true;">
			<a-assets>
				<a-asset-item id="scalawag-gltf" src="assets/ha_scalawag.gltf"></a-asset-item>
				<a-asset-item id="stage-gltf" src="assets/ha_stage.gltf"></a-asset-item>
			</a-assets>

			<a-entity
			id="scalawag"
			gltf-model="#scalawag-gltf"
			position="-0.9 0 -1.5"
			scale="1.25 1.25 1.25"
			shadow="receive: false"
			animation-mixer></a-entity>

			<a-entity 
			hide-on-enter-ar
			id="stage"
			gltf-model="#stage-gltf"
			shadow="cast: false"></a-entity>

			<a-entity id="rig" position="0 0 2.2">
				<a-entity id="camera" camera look-controls position="0 1.6 0"></a-entity>
			</a-entity>

			<a-entity light="type: ambient; intensity: 0.5;"></a-entity>
			<a-entity light="type: directional; castShadow: true; intensity: 0.6;" position="-1 2 4"></a-entity>

			<a-sky hide-on-enter-ar color="#19ABE5"></a-sky>
		</a-scene>

	</body>
</html>

The ar-hit-test component allows us to use our finger to drag and place the scalawag within the real world, in this case on my living room windowsill.

You’ll also notice that we are using the hide-on-enter-ar component to remove the house and sky from the scene when entering AR, allowing the mobile phone camera to provide my living room as the background.

Here’s the video of the animated scalawag on my living room windowsill:

Try it on your own mobile phone by accessing the following link on your phone’s browser: https://rdmilligan.github.io/saltwash-labs/scalawag/

Next up, I will investigate creating shadows of the scalawag using real world lighting estimations. And I’ll get him chatting away with 3D audio positioning.