3D Modelling/Examples/AR with Markers
< 3D Modelling | Examples
AR.js
[edit | edit source]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 | edit source]- Test the markers in your camera image of your smartphone displaying the selected AR.js HTML file,
- Explain the geometry background, how a movement of markers could displace the 3D model in the camera image.
- Create your own 3D-Model with JSON3D4Aframe or explore Javascript tools for webbased visualisation in (bio-)chemistry on http://lucianoabriata.altervista.org/jsinscience/ provided by Luciano Abriata (2018)
- (AR VR in Primary Schools) Analyze the use of animations on marker to visualize simplified movements of planets on marker.
Explore AR.js with your Smartphone or Laptop
[edit | edit source]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 | edit source]Example Hiro Marker
[edit | edit source]- Water Molecule with AR.js and Hiro Marker. Place Hiro Marker in camera image.
Example Kanji Marker
[edit | edit source]- Water Molecule with AR.js and Kanji Marker. Place Kanji Marker in camera image.
Create your own Markers
[edit | edit source]Applications of AR.js for interactive molecular visualization in Chemitry
[edit | edit source]- Website with chemical AR.js examples by Luciano Abriata (2018) - Use Hiro-Marker and/or Kanji-Marker in Webcam
- ArXiv: Explanatory Preprint - Towards Commodity, Web-Based Augmented Reality Applications for Research and Education in Chemistry and Structural Biology (2018)[4]
- Working with two Markers (Kanji and Hiro) to visualise molecule interaction (Youtube Demo Video by Luciano Arbiata)
Animated Example
[edit | edit source]
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:
- 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.
Place the Hiro-marker in your camera image of your mobile device (smart phone).
Further information can be explored at:
- AR.js - GitHub Organisational Account based on the brilliant work AR.js by Jerome Etienne
- Create your own 3D Markers for AR.js
See also
[edit | edit source]- AR.js - Offical Documentation
- Augmented Reality/Tutorial
- AR Conference
- AR VR in primary schools
- AR examples by Lee Stemkoski (Fork with added examples)
References
[edit | edit source]- ↑ Kanji Marker provided by ARToolkit on Github (accessed 2017/12/12) - https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf
- ↑ 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.
- ↑ 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)
- ↑ 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