Wikiversity

3D Modelling/Examples/AR with Markers

< 3D Modelling | Examples
AR.js Example with Kanji Marker and Water Molecule as 3D object
Kanji Marker[1] for AR.js - places the 3D model on the marker in camera image.

AR.js

edit

With AR.js you can place a 3D model in the camera image of your smartphone. AR.js is based on the concept of ARToolkit[2]. The 3D is placed into the camera image by recognition of a marker. Turning and moving the marker in the camera image will turn and move the 3D model in the camera image. AR.js is also capable of geolocation based augmented reality.

Learning Task

edit

Explore AR.js with your Smartphone or Laptop

edit

AR.js can be explored with laptop or smartphone, that has a camera of webcam.

  • You need a marker like the Hiro or Kanji marker to place it in front of the camera,
  • you start a web page that embeds the AR.js library to display specific 3D content elements in the camera on the marker,
  • move the 3D object in the camera image of the laptop by moving and turning the marker in front of the webcam

Marker Printout for Hiro and Kanji

edit

Example Hiro Marker

edit

Example Kanji Marker

edit

Create your own Markers

edit

Applications of AR.js for interactive molecular visualization in Chemitry

edit

Animated Example

edit
 
3D model with AR.js displayed on Hiro marker - mobile device scanned Wikiversity page on laptop screen - Android: Browser Firefox

Try that for yourself:

  • Scan the QR Code with your privacy friendly QR-Code scanner (e.g. install QR-Scanner with w:F-Droid) or
  • just display the following link with firfox browser in your mobile device:
https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html
  • Print out the Hiro-marker and place the marker in front of your table or
  • display this page on your tablet and place the tablet in front of you.
https://en.wikiversity.org/wiki/3D_Modelling#AR.js

Place the Hiro-marker in your camera image of your mobile device (smart phone).

   

Further information can be explored at:

See also

edit

References

edit
  1. ↑ Kanji Marker provided by ARToolkit on Github (accessed 2017/12/12) - https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf
  2. ↑ Abawi, D. F., Bienwald, J., & Dorner, R. (2004, November). Accuracy in optical tracking with fiducial markers: an accuracy function for ARToolKit. In Proceedings of the 3rd IEEE/ACM International Symposium on Mixed and Augmented Reality (pp. 260-261). IEEE Computer Society.
  3. ↑ Online Marker Creator for AR.js (2017) by Alexandra Etienne - URL: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html (acessed 2020/07/14)
  4. ↑ Towards Commodity, Web-Based Augmented Reality Applications for Research and Education in Chemistry and Structural Biology Luciano A. Abriata (Submitted on 21 Jun 2018 (v1), last revised 24 Jul 2018 (this version, v4)) - https://arxiv.org/abs/1806.08332
Retrieved from "https://en.wikiversity.org/w/index.php?title=3D_Modelling/Examples/AR_with_Markers&oldid=2428183"