Web Ar

0. Let's Try AR

To implement AR on web and mobile platforms, there are various tools available such as AR.js, Babylon.js, Three.js, and Letsee.
Among these, I chose AR.js because it’s free, widely used, and supports image tracking.
For non-developers who want a more convenient AR experience, opting for a paid service might be a better choice.

---

1. AR.js

I had previously used AR.js with QR codes or markers, so I decided to check if it could handle image markers.
According to the official site, image tracking is supported, but I decided to try it myself. After some trial and error, here's what I found:

To use AR.js, you need to combine it with either A-Frame.js or Three.js.
Since I’ve worked consistently with Three.js recently, I decided to use that.

The AR.js site provides a Three.js demo and GitHub link:
AR.js Three.js Demo and GitHub Link

The source I referred to is from October 2020, but the link could change anytime.
Using this source, I implemented it locally.

---

2. Adjustments

Some adjustments were necessary to adapt the source to my environment:

• Download all required scripts and place them in a local directory to avoid issues caused by updates.
• Modify the path settings, including the new THREEx.ArMarkerControls properties, to match your local file paths.

Here’s an overview of the key components:

• THREEx.ArToolkitSource: Can be a webcam, video, or image source.
• THREEx.ArToolkitContext: The main engine that detects marker positions in the image source.
• THREEx.ArMarkerControls: Manages the position of markers and places content directly above them using the Three.js control API.

Important Step:
To recognize an image as a marker, you need to register it.

Use this site:
NFT Marker Creator

Upload your image, click the Generate button, and download the resulting files.
You should get three files.

Place these files in the folder specified by the descriptorsUrl property in THREEx.ArMarkerControls.

For example:

javascript

 

descriptorsUrl: '/test/media/obj/data/imgmarker'

 

In this case:

• /test/media/obj/data/ is the folder location.
• imgmarker is the filename for the three downloaded files (though their extensions differ, the filenames must match).

Finally, update the threeGLTFLoader.load function with the file path and name of your 3D object, e.g., "/test/media/obj/Flamingo.glb".

Make sure to refresh properly (clear cache if necessary) before testing.

---

3. Testing

I tested with a webcam but expect the same results on a mobile device.
Point the camera at the designated image marker. You can either display the image on a monitor or print it out.

Once detected, your 3D object will appear around the image. That’s it!

---

4. Errors Encountered

Console Errors in Chrome:
If errors like missing files appear, download the required files from GitHub, place them in your local directory, and update the paths.

Error: 'Error in loading marker on Worker 404':
This means the image marker could not be found. Follow the steps above to resolve this:

1. Upload the image, download the three files, and set up the correct paths.
2. Ensure the files are in the specified folder and the names match.
3. Clear your browser cache and refresh properly.

---

5. Next Steps

I plan to test whether objects with .ply and .obj extensions can load properly since they’re commonly used.
Additionally, I will verify if multiple .ply or .obj objects can be displayed simultaneously.