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 a classical "Hello, World!" application. After getting hold of the Metaio SDK, run the Demo app on your favorite platform to get started with the tutorials.

Choose "Hello World" and follow the instructions in order to see a 3D model standing on the prepared image. From here on, we will call this image "tracking reference" or "tracking pattern". Please print the reference image in color or black and white, and have it available next to you. Of course you can also simply open the attached PDF file on your screen. Yet it is handy to have a printed copy nearby, since the pattern is used frequently in  future tutorials.

Please note that the demo application will not run within the iOS or Android simulator, since it requires access to a real smartphone camera.

Assets

Looking at the Tutorial sample code, let's check what assets do we need to prepare for the demo. Navigate to the TutorialHelloWorld/Assets folder in iOS or assets/TutorialHelloWorld/Assets 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
  • metaioman_target.png 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 which 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.
  • arelConfig.xml, arelTutorial.html and arelGlue.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 

HelloWorldViewController for iOS and TutorialHelloWorld 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. Your 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 Tracking Samples . 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 arelConfig.xml in the TutorialHelloWorld folder in iOS or assets/TutorialHelloWorld/Assets in Android. It is quite self explanatory. It will load arelTutorial.html HTML5 file, which contains application logic, and add necessary content to the scene.

Further reading

Now, let us look little bit under the hood how the things are connected to each other.

MetaioSDKViewController (MetaioSDKViewActivity) will be called right after the instance of our class TutorialHelloWorld is created. It is being initialized and set up camera and OpenGL view, which renders the content.

To explorer more you can add AR view to your own app, follow this tutorial.

User Interface is being defined in HelloWorld.xib and tutorial_hello_world.xml respectfully for iOS and Android.

To connect UI to the code, we overwrite getGUILayout() for Android and initialize HelloWorldViewController with appropriate xib in iOS.

As an exercise, please change the position of the model with respect to the reference image and also rotate the model looking away from you. Please refer to our API reference library to find right methods to do such a simple exercise .

We encourage you to start to play further with our SDK following up with the Content types tutorial, where we will learn about different content apart of the model to be attached to the scene.

This tutorial teaches you

Placing 3D model to the scene
Apply model transformations

Table of Contents

  • dummy
  • Table of Contents

    • dummy
    • Table of Contents

      • dummy
      • Table of Contents

        • dummy
        • Table of Contents

          • dummy
          • Table of Contents

            • dummy
            • Table of Contents

              • dummy