[Memorandum] How to easily publish AR on multiple platforms using AR.js
How to implement AR on the web using your own 3D model (plane) modeled in Blender with AR.js
What is WebAR?
Augmented Reality (AR) runs on a web browser.
By activating the camera on the browser and reading AR markers, contents such as 3D models can be displayed.
What is AR.js
AR.js is one of the open source software for WebAR development.
It is available for free and allows you to implement WebAR with simple and short code. Originally, AR.js was started in Jerome Etienne's personal repository. In recent years, the repository has been reorganized and AR.js v3.0 has been released, taking a new step forward.
What AR.js can do
- Marker Based
- Image Tracking
- Location Based
AR.js has the main functions listed above.
1. Maker Based
Marker-based AR, also called recognition-based AR, relies on markers to function. Marker-based AR requires a marker for identification in order to use AR. A marker is a distinct pattern that is easy for a camera to recognize and process and is visually independent of the surrounding environment, and can be paper-based or something that exists in the real world.
2. Image Tracking
AR.js can be used to implement the type of AR that is often seen, where something AR is displayed when you hold it over a photo or illustration instead of a marker. Until now, it has been difficult to use with AR.js, but with the update, AR.js can be used.
3. Location Based
It is possible to create location-based AR displays, such as Pokémon GO's AR+, an area in which Niantic, the developer of Pokémon GO, is putting a great deal of effort.
What is NFT ( Natural Feature Tracking ) ?
When we talk about Image Tracking, the term NFT (not a cryptographic asset) comes up, which stands for Natural Feature Tracking, a recognition technique that uses Natural Features.
Creation procedure
1. Create a project folder
First, create a folder to store the data.
In this case, we created a folder called "index.html" and a folder called "assets" in a folder called "AR.js_sample".
The 3D model in .glb format and the AR marker in .patt format are stored in the assets folder.
2. Prepare 3D model
Save 3D models created with a 3d editor such as Blender in glTF format.
As it was my first time to use blender, I struggled a lot with its unique operation method and complicated 3d model handling. So please refer to other articles about Blender.
Since we used a cube, we did not need to do anything too complicated.
3. Creating AR markers
AR.js Marker Training, an AR marker creation generator, is used to create AR markers.
It is said that it is possible to create your own AR markers, but since this requires specialized knowledge, we will not explain it here.
5. Coding the actual HTML
Code:
<head>
#read A-Frame
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
#read AR.js
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
Code:
<a-scene embedded arjs vr-mode-ui="enabled: false">
<a-assets>
<a-asset-item id="model" src="./assets/modelname.glb"></a-asset-item>
</a-assets>
<a-marker type="pattern" url="./assets/pattern-name.patt">
<a-entity gltf-model="#model" rotation="360 90 0" scale="0.5 0.5 0.5">
</a-entity>
</a-marker>
add the camera
<a-entity camera></a-entity>
</a-scene>
Rotation can be adjusted with rotation and scale can be adjusted with size.
6. Deploying
AR.js requires http to work, so you need to deploy it properly instead of using a local server. github pages is recommended for easy deployment.
Finally.
AR.js is a leading library for easy implementation of WebAR.
Recently, paid libraries provided by companies are the mainstream in WebAR development, but AR.js has democratized WebAR as an open source that anyone in the world can use.
I was surprised at how easy it was to implement, more so than I had imagined.
You don't have to be an engineer to get your hands on it, so why not give it a try?
