Overview

AREL ( Augmented Reality Experience Language ) is a JavaScript binding of the metaio SDK's API in combination with a static XML content definition.

AREL allows scripting of powerful, highly interactive Augmented Reality experiences based on common web technologies such as HTML5, XML and JavaScript. You can use it for creating junaio Channels as well as to work with the metaio SDK.

AREL adds HTML5 overlays and easy GUI creation to each metaio SDK project or junaio Channel, allowing cross platform usage of your created Augmented Reality Experience.

Similar to a regular website, an AR experience based on AREL consist of a static part, AREL XML, which defines all the content and links and a dynamic part, AREL JavaScript, which defines the interactions and behaviors of the single Objects or your entire scene. Of course you are not required to define all content statically in an XML file but can as well load it in JavaScript code whenever you want, just like you could with the metaio SDK from native code.

For getting started with AREL in junaio, please have a look at the junaio quickstarts.

For using AREL and the metaio SDK, please have a look at the SDK Tutorials.

 

AREL and the metaio SDK

With the metaio SDK you are able to create one platform independent Augmented Reality experience with AREL instead of using platform specific programming languages - Java for the Android SDK, Objective C for iOS and C++ for Windows. You can then deploy it to your target platform/s based on the metaio SDK and are able to extend your platform portfolio easily with little extra effort.

Of course you are still given the ability to add extra – platform specific – functionality and to access the metaio SDK via the platform specific interface independently.

 

How AREL works

AREL makes use of the following components:

The XML part defines which content should be loaded, like 3D models or billboards. It also defines the initial properties of these object like size, coordinate system, transformations, etc.

The HTML5 layer provides the graphical user interface and interacts using the JavaScript bridge with the metaio SDK. You can design it like any mobile website, with the exception that the background is transparent to let the user see the camera view and any AR content rendered on top of the camera image.
All callbacks from the metaio SDK are forwarded to your JavaScript application logic, so you can react to these at runtime, e.g. in the event your tracking pattern is being tracked.

Below you can find an example of how these components interact with each other.

Static content definition

Below you can find a simple example of how the AREL XML looks like:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <results>
  3.     <arel>simpleAREL.html</arel>  <!-- HTML GUI that should be loaded -->
  4.     <object id=“Tiger“>
  5.         <assets3d>
  6.            <model>Assets/tiger.md2</model>
  7.            <texture>Assets/tiger.png</texture>
  8.            <transform>
  9.             <translation>
  10.                 <x>10.0</x><y>0.0</y><z>0.0</z>
  11.             </translation>
  12.             <rotation type="eulerdeg">
  13.                 <x>90.0</x><y>0.0</y><z>0.0</z>
  14.             </rotation>
  15.            </transform>
  16.            <properties>
  17.             <coordinatesystemid>1</coordinatesystemid>
  18.            </properties>
  19.         </assets3d>
  20.     </object>
  21. </results>

The <arel> tag defines the HTML GUI that will be loaded. The object tags contain the actual (3D content) that is loaded in junaio / metaio SDK. In the example above the object is an MD2 model that is translated by 10mm in x direction and rotated by 90 degrees around the X axis.

HTML5 layer

Based on the example above, the following segmented shows a very simple HTML5 file that integrates the AREL javascript bridge.

simpleAREL.html
 
<html>
<head>
   <!-- Integrates the arel javascript bridge -->
   <script type="text/javascript" src="http://dev.junaio.com/arel/js/arel.js"></script>
   <!-- Includes application logic -->
   <script  type="text/javascript" src="logic.js"></script>
</head>
 
<body>
</body>
</html>
 

Javascript Application logic

Extending our example from above, you can find a simple AREL logic snippet below:

  1. function trackingHandler(type, param)
  2. {
  3.    // called when a pattern is tracked / lost
  4. }
  5.  
  6. arel.sceneReady(function()
  7. {
  8.    // scale up loaded 3D model by factor 2
  9.    arel.Scene.getObject("Tiger").setScale(new arel.Vector3D(2, 2, 2));
  10.                
  11.    // set a listener for tracking events
  12.    arel.Events.setListener(arel.Scene, trackingHandler);
  13. });
  14.  

In the above code, we're defining a function that is executed when the AREL content has finished loading (arel.sceneReady).
Here, the 3D object with the ID "Tiger" gets scaled by factor 2 and we define a callback function to receive events from the tracking system.