Skip to content

Latest commit

 

History

History
 
 

aframe

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
build
build
 
 
demos
demos
 
 
examples
examples
 
 
src
src
 
 
Makefile
Makefile
 
 
README.md
README.md
 
 

README.md

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

  • basic.html basic minimal examples. Good to get started
  • marker-events.html: Emit events when markers are found and lost, and register the respective event listeners.

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
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

  • DONE port that into a threex. it is more general. nothing is aframe specific
  • webar-artoolkit: webvr api with artoolkit as positional tracking
    • demo with a simple scene at 0,0,0 and the camera handled as the phone
    • may be related to the threex thing
  • do a better codepen https://codepen.io/jeromeetienne/pen/mRqqzb?editors=1000#0