This is the repository for a GitHub pages based website to experiment with based AR visualization prototypes. https://scanar.github.io/
- Print this marker on paper such that it is about 6cm wide.
- Head over to: https://scanar.github.io/, allow the webcam to start, hold up the marker, and enjoy the AR magic!
If you want to help feel free to fork this repository and propose changes in a pull request. Also feel free to approach the developers to request to join the team of developers.
The code below is a snippet of how one can render an OBJ model based on a marker.
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 4x4_BCH_13_9_3;'>
<a-marker type='barcode' value='206'>
<a-entity obj-model="obj: url(bunny.obj); mtl: url(bunny.mtl)"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Specifically the following code helps render a 3D model called bunny.obj
whose shading is defined with the aid of bunny.mtl
(which in turn requires bunny.png
). The 3D model is rendered using the barcode
marker number 206
.
<a-marker type='barcode' value='206'>
<a-entity obj-model="obj: url(bunny.obj); mtl: url(bunny.mtl)"></a-entity>
</a-marker>
Therefore to render an alternative model users may replace the model, and optionally also the marker used.
Markers can be found in the /markers
folder. Currently the code uses markers of the type 4x4_bch_13_9_3
which are contained in the folder /markers/4x4_bch_13_9_3
. To test a marker, print it such that the black square is about 4cm in size, and ensure it has a white border of about 1 cm. An example for marker 206
is shown below.
Source: https://github.com/nicolocarpignoli/artoolkit-barcode-markers-collection
-
AR-js documentation: https://ar-js-org.github.io/AR.js-Docs/
-
AR-js repository https://github.com/AR-js-org/AR.js
-
Repository for emscripten port of ARToolKit to JavaScript: https://github.com/artoolkitx/jsartoolkit5
-
Old ARToolKit site https://www.wikiwand.com/en/ARToolKit
-
ARToolKit was originally presented in: H. Kato and M. Billinghurst, “Marker tracking and HMD calibration for a video-based augmented reality conferencing system”, in Proceedings 2nd IEEE and ACM International Workshop on Augmented Reality (IWAR’99), Oct. 1999, pp. 85–94. doi: https://doi.org/10.1109/IWAR.1999.803809.
See also this open access link