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 XML, HTML5 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.

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 7 and up. 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 does AREL work

AREL makes use of the following components:

The XML part defines which content should be loaded in AREL, like 3D models or billboards. It also defines the 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 OpenGL renderer.
All callbacks from the metaioSDK are forwarded to your javascript application logic, so you can react to these at runtime.

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:

<?xml version="1.0" encoding="UTF-8"?>
<results>
<arel>simpleAREL.html</arel>
<object id=“Tiger“>
<assets3d>
<model>Assets/tiger.md2</model>
<texture>Assets/tiger.png</texture>
<transform>
<translation>
<x>10.0</x><y>0.0</y><z>0.0</z>
</translation>
<rotation type="eulerdeg">
<x>90.0</x><y>0.0</y><z>0.0</z>
</rotation>
</transform>
<properties>
<coordinatesystemid>1</coordinatesystemid>
</properties>
</assets3d>
</object>
</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 90degrees 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>
   <script type="text/javascript" src="http://dev.junaio.com/arel/js/arel.js">  <!-- Integrates the arel javascript bridge -->
   </script>
   <script  type="text/javascript" src="logic.js">  <!-- Links to the AREL logic -->
   </script>
</head>
 
<body>
</body>
</html>

Javascript Application logic

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

arel.sceneReady(function()
{
// scale up (x2) loaded 3D model
arel.Scene.getObject("Tiger").setScale( new arel.Vector3D(2,2,2) );
//set a listener for tracking events
arel.Events.setListener(arel.Scene,
function(type, param){trackingHandler(type, param);}
);
});
function trackingHandler(type, param)
{
// called when a pattern is tracked / lost
};

Above, we're defining a function that is executed when the AREL content has finished loading ( arel.sceneReady ).
Here we're dynamically scaling our 3D object by factor 2 as well as defining a callback function to receive events from the tracking-system.

AREL and the metaio SDK

How does AREL work

Static content definition

HTML5 layer

Javascript Application logic

Metaio Contests