Multiple interacting markers
In this demo we use multiple markers to position AR objects and show interactions between the objects.
Prerequisites
For the first demo you will need to print out two barcode markers, representing the barcodes for the numbers 6 and 7:
- Print Barcode 1
- Print Barcode 2
- Barcode generator - use this utility to create other printable barcode markers.
The second demo uses the letters A and B as markers:
- Print Letter A marker
- Print Letter B marker
Demo 1: multiple markers with barcodes
The first demo and video shows the basics: the use of bardcode markers to demonstrate the acquisition of multiple targets.
A sphere and a cube will display at each detected barcode marker.
Demo 2: interacting objects on multiple markers
In the previous example of multiple markers we used A-frame.js to experiment with object persistence. In the second example we want to demonstrate more complex interactions between AR objects, and for that we need three.js.
A ball follows a parabolic path from a Letter-A marker a to a Letter-B marker. The ball casts shadows, and a clipping plane hides the ball when it is 'below' the B marker.
Note, we used an image of the two letter markers displayed on the screen of my laptop in lieu of printed markers; this caused some issues with reflection that threw off the targeting of the ball significantly. However, without interference from reflections the animation was reasonably effective, and was maintained adequately whilst the iPad moved.
Demo 3: interacting objects on moving markers
In this demo we animated the motion of the letter markers. To try it yourself, load this page containing the animated letters on a separate device (laptop or iPad) and load demo 3 below on the device (mobile) you want to view the demo on.