AR.js

aframe-ar

Augmented reality for a-frame.

<!-- add arjs into your scene -->
<a-scene arjs>
        <!-- define a marker -->
        <a-anchor>
                <!-- define the content to be displayed on top of the marker -->
                <a-box color="#2EAFAC"></a-box>
        </a-anchor>
        <!-- define a simple camera -->
        <a-camera-static/>
</a-scene>

Show, Don’t Tell

Here are the demos

artoolkit system

Attribute Description  
debugUIEnabled true if one should display artoolkit debug canvas, false otherwise  
detectionMode the mode of detection - [‘color’, ‘color_and_matrix’, ‘mono’, ‘mono_and_matrix’]  
matrixCodeType type of matrix code - valid iif detectionMode end with ‘matrix’ - [3x3, 3x3_HAMMING63, 3x3_PARITY65, 4x4, 4x4_BCH_13_9_3, 4x4_BCH_13_5_5]  
cameraParametersUrl url of the camera parameters  
maxDetectionRate tune the maximum rate of pose detection in the source image  
sourceType type of source - [‘webcam’, ‘image’, ‘video’]  
sourceUrl url of the source - valid if sourceType = image video
sourceWidth resolution of at which we initialize the source image  
sourceHeight resolution of at which we initialize the source image  
displayWidth resolution displayed for the source  
displayHeight resolution displayed for the source  
canvasWidth resolution of at which we detect pose in the source image  
canvasHeight resolution of at which we detect pose in the source image  

<a-marker>

Here are the attributes for this entity

Attribute Description Component Mapping
type type of marker - [‘pattern’, ‘barcode’, ‘unknown’ ] artoolkitmarker.type
size size of the marker in meter artoolkitmarker.size
url url of the pattern - IIF type=’pattern’ artoolkitmarker.patternUrl
value value of the barcode - IIF type=’barcode’ artoolkitmarker.barcodeValue
preset parameters preset - [‘hiro’, ‘kanji’] artoolkitmarker.preset
emitevents emits ‘markerFound’ and ‘markerLost’ events - [‘true’, ‘false’] -
smooth turn on/off camera smoothing - [‘true’, ‘false’] - default: false -
smoothCount number of matrices to smooth tracking over, more = smoother but slower follow - default: 5 -
smoothTolerance distance tolerance for smoothing, if smoothThreshold # of matrices are under tolerance, tracking will stay still - default: 0.01 -
smoothThreshold threshold for smoothing, will keep still unless enough matrices are over tolerance - default: 2 -

<a-marker-camera>

Usually the model used in augmented reality is about changing the modelViewMatrix based on the marker position. the camera being static in 0,0,0 looking toward negative z.

We define as well a model where we move the camera, instead of the object. It changes the camera transform matrix.

This cameraTransform mode seems more instinctive than the modelView mode. cameraTransform would fit well a room-scale setup, with multiple markers connected to each other. modelView is able to provide multiple independent markers.

<!-- add artoolkit into your scene -->
<a-scene artoolkit>
        <!-- define your scene as usual -->
        <a-box></a-box>
        <!-- define a camera inside the <a-marker-camera> -->
        <a-marker-camera preset='hiro'><a-marker-camera>
</a-scene>

Links

Futures