Tutorial 1 - Hello, World!

Introduction

After getting your development environment set up, we want you to hit the ground running in your Augmented Reality endeavors starting with classical "Hello, World!" application. After getting hold of Metaio SDK, navigate to Demo app for your favorite platform to start with tutorials.

At the end of this tutorial you would be able to see 3D model, which stands on the prepared image (we would use term "tracking reference" or "tracking pattern" further on for that). Please print reference image in color or clack and white, and have this available next to you. Of course you can simply open attached PDF file on your screen. But it is handy to have a printed copy nearby, because we will use this pattern frequently in a future tutorials.

Another thing before we get started. Please make sure that you have iOS or Android device next to you, since we need to have access to real smartphone camera, the demo application will NOT run on simulator.

Assets

Looking at the Tutorial sample code, let's check what assets do we need to prepare for the demo. Navigate to the Tutorial1/Assets1 folder in iOS or assets/Assets1 if you are using Android platform. Find following files:

metaioman.md2 is a our 3D geometry or simply Model, we call this one "Metaio Man", because it became essential part of the routine. Our SDK can load your MD2, OBJ and FBX models.
metaioman.png is a Texture. We also need a texture to make the model look better. Therefore we use a PNG image which has to have the same name as the model
metainman_target.jpg is a Pattern. The tracking pattern/image the Metaio Man should stand on. This is also a simple image file.
TrackingData_MarkerlessFast.xml is the tracking data configures the tracking component of the SDK. It is an XML file including all relevant information for tracking. We will go into the details of this one in Tutorial 3, for now, just make sure it is included in the project.
arelConfig1.xml, arelTutorial1.html and arelGlue1.js are necessary files to run this example in HTML5 and JavaScript without a single line of native code

Implementation

Now, we will take a look at the code. Implementation is done within only one class called

Tutorial1ViewController for iOS and Tutorial1 for Android. This class is a subclass of the MetaioSDKViewController or MetaioSDKViewActivity respectively, which encompass number of the system calls needed to create augmented reality experience in your application. You custom classes can extend it and overwrite necessary methods for your application logic. We have to overwrite -(void)viewDidLoad method for iOS and loadContent() for Android.

Pay attention on the headings import used in the tutorial, not to forget to include them.

There is a few simple steps that need to be done to show the model at the tracking reference:

Assign tracking reference file to the SDK
Load the model to the scene
and Set scale and rotation to the model (if necessary)

Loading tracking configuration

To load out tracking configuration we simply execute following method

bool setTrackingConfiguration(trackingDataFile);

m_metaioSDK is a instance of the SDK class, so we going to call the method from it

metaioSDK.setTrackingConfiguration(trackingDataFile);

m_metaioSDK->setTrackingConfiguration(trackingDataFile);

trackingDataFile is a path for tracking configuration XML file used in the scene. For different tracking configurations please follow up in the Tutorial 3. In our example we as agreed will be using tracking configuration with an image of the Metaio Man as a reference pattern.

Loading 3D model to the scene

To load the model we shall create 3D geometry with following system call:

IGeometry createGeometry(metaioManModel);

where IGeometry is a class within SDK that handles objects in the scene and metaioManModel is a path for the file that contains our 3D model.

Please note, that texture will be applied automatically to the model and specified in the MD2 file itself. You can learn in the Content Creation section how to create custom 3D models from popular 3D modeling software like Blender, 3D Studio Max etc.

Applying model transformations

When model is successfully loaded we will scale it little bit down using

setScale(Vector3d(0.8,0.8,0.8));

This will scale model in all X-Y-Z axis on 20%

mModel.setScale(new Vector3d(0.8, 0.8, 0.8));

theLoadedModel->setScale(metaio::Vector3d(0.8,0.8,0.8));

In a similar fashion you can move (translate) and rotate model simply by calling setTranslation and setRotation methods.

After performing these three simple steps, connect your device to the computer and hit the Run button! When the applications loads select and start "Hello, World!" tutorial and when camera fires up, point your device to the printed image of Metaio Man and you should see 3D model in the scene.

Implementation AREL

It is important to know that all the tutorials can be run in AREL (Augmented Reality Experience Language). It will expand development opportunities by bringing HTML5 and JavasScript to mobile AR experiences. This tutorial does not need any additional JavaScript code to present the model in the scene.

Loading tracking configuration, creating geometry and scaling of the model is specified in arelConfig1.xml in the Tutorial1 folder in iOS or assets/Assets1 in Android. It is quite self explanatory. It will load arelTutorial1.html HTML5 file, which contains application logic, and add necessary content to the scene.

Tutorial 1 - Hello, World!

Introduction

Assets

Implementation

Loading tracking configuration

Loading 3D model to the scene

Applying model transformations

Implementation AREL

Further reading

This tutorial teaches you

Key SDK functions

Table of Contents

Table of Contents

Table of Contents

Table of Contents

Table of Contents

Table of Contents

Table of Contents