Skip to content

scanAR/scanar.github.io

Repository files navigation

Cite ScanAR: DOI

scanAR

This is the repository for a GitHub pages based website to experiment with based AR visualization prototypes. https://scanar.github.io/

Get started with AR

  1. Print this marker on paper such that it is about 6cm wide.

https://github.com/scanAR/scanar.github.io/blob/master/img/206_border.png

  1. Head over to: https://scanar.github.io/, allow the webcam to start, hold up the marker, and enjoy the AR magic!

https://github.com/scanAR/scanar.github.io/blob/master/img/test_bunny.gif

Contributing

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.

How to render a 3D model using AR

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

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.

https://github.com/scanAR/scanar.github.io/blob/master/img/206_border.png

Source: https://github.com/nicolocarpignoli/artoolkit-barcode-markers-collection

Background and resources