Augmented Reality Tutorial - Build Your Own Augmented Portal

Hey guys, ZapWorks is a tool for creating augmented reality experiences.

If you are looking to start making some awesome things in AR, then we have this super easy tutorial for you guys to follow along with.

ZapWorks is free for personal use, so make sure to sign up for a personal account today.

We have three tools to choose from, but this tutorial is going to focus on ZapWorks Studio. Studio allows you to incorporate 3D models into your AR experiences.

This Instructable will walk you through building an augmented reality experience from start to finish in one sitting. No experience with AR development is required!

If you get stuck, please check out our extensive Documentation that you can find on our website. You can also head to our Forum, a handy way to ask questions of other ZapWorks users.

Let's get started!

Difficulty Level: Easy

Coding Knowledge Required: Absolute Beginner

Time to Complete: 30 minutes

Step 1: Create a New Studio Zapcode

Enter your my.zap.works account and click the ‘Make a New Zapcode’ button in the top left. Give your code a name, and choose between either a circle or lozenge style and select ‘Studio’ as your tool. Widgets and Designer codes will not work for this tutorial.

Step 2: Create a New Project in ZapWorks Studio

Open ZapWorks Studio (download here) and create a ‘New Project’.

Choose to start with a ‘Blank’ template and give your project a name, e.g. “Masked Scene” and click ‘Create’.

Step 3: Download the Asset Pack

Click here to download a zip file containing all the assets we'll need for this experience.

Step 4: Import Image Files Into the Media Library

Unzip the file you downloaded in step 3 and drag the files from the 'Image Asset' folder into the Media Library import box, located in the top right of the window. You can select multiple files and import them at the same time.

Step 5: Train Tracking Image

Tracking Images are images that content appears attached to as they move around in the camera view.

Click the plus (+) sign in top right of the Media Library. From the dropdown, select ‘Train Image File’. This will open up your Explorer / Finder and allow you to select your tracking image, named “Space Page.png”, in the folder ‘Tracking Image’.

The image will then be trained. During this process, which may take up to a minute, the image is analysed from multiple angles and a target file is produced. This file is added to your Media Library, with the file extension ZPT.

Step 6: Drag Your Target Into the Hierarchy

Drag your target file from the Media Library into the root node within the Hierarchy.

Once in the Hierarchy a preview of the target will appear in the 3D view. The icons at the bottom right of the screen can be used to move the target in the view, just as if it were being physically moved in a camera view.

Targets in the Hierarchy act like groups. Content placed inside a target will appear attached to it in the 3D view and when viewed in the app.

Step 7: Create a Group to Keep Your Hierarchy Organised

Groups are incredibly useful for organizing your content. When you create more complex experiences it is good practice to use groups where appropriate.

In order to keep the items in your Hierarchy organised, we are going to create a group. Right click on the target and select 'New > Group'. Name this new group "Scene Ornaments".

Step 8: Add the Wall Asset Into the Scene Ornaments Group

Click and drag the wall.png from the Media Library and into the Scene Ornaments group.

Once completed, you will be able to rotate the target in the 3d view and see that the wall is tracked to the target image.

Step 9: Position and Scale the Wall

Click on the Wall in the Hierarchy. Using the Properties panel on the left hand side below the Hierarchy (image attached), scroll to find the ‘Transform’ section.

Set the position and scale the wall as follows:

Position (0, 0, -5)

Scale ( 10, 10, 10)

Rotation ( 0, 0, 0)

Step 10: Make the Wall Invisible

You are now going to make the wall invisible. This will allow you to easily position the rest of the items correctly in the scene. You will make it visible again once you have everything where you want it.

Making sure that the wall is still selected, scroll in the Properties panel to the ‘Appearance’ section and untick 'visible'.

Step 11: Positioning the Rest of the Content

Click on the 'Set View' option in the top right of the 3D view (it should look like an eye icon) and select 'Front'. This allows us to view the target image straight on, useful for lining up our content.

You will now set up the rest of the scene. Drag the remaining files into the scene ornaments group beneath the previous object in turn. Follow the coordinates below to position each object accordingly.

It is important to make sure that each new asset sits underneath the previous one in the Hierarchy. This is because the order in the Hierarchy determines the order of rendering on screen.

Step 12: Position the Telescope

Place the telescope below the wall within the Hierarchy.

Position (1.07, -0.95, -3.00)

Scale ( 0.5, 0.5, 0.5)

Rotation ( 0, 0, 0)

Step 13: Position the Cushion

Place the cushion below the telescope within the Hierarchy.

Position (-0.70, -1.05, -4.00)

Scale ( 0.63, 0.63, 0.63)

Rotation ( 0, 0, 0)

Step 14: Position the Books

Place the books below the cushion within the Hierarchy.

Position (0.25, -0.99, -2)

Scale ( 0.4, 0.4, 0.4) 

Rotation ( 0, 0, 0)

Step 15: Position the Poster

Place the poster below the books within the Hierarchy.

Position (-0.72, 0.72, -4.90)

Scale ( 0.9, 0.9, 0.9)

Rotation ( 0, 0, 0)

Step 16: Position the Shelves

Place the shelves below the poster within the Hierarchy.

Position (1.1, 0.75, -4.90)

Scale ( 0.6, 1.2, 1.2)

Rotation ( 0, 0, 0)

Step 17: Creating a Floor

Drag the Plane object from the Media Library into the Hierarchy. Place the Plane beneath wall.png and above telescope.png. Right click on the plane node and rename it as ‘Floor’.

Step 18: Position the Floor

Position (0.0, -1.5, -2.5)

Scale ( 5, 2.5, 1)

Rotation ( -90, 0, 0)

We have rotated the floor so that it is coming towards us from the target image. This will be important in giving the impression of depth.

Step 19: Set the Floor Color

Remaining in the Properties section, head to the 'Appearance' section and then click the color box, and set the HEX value to #ff7ebb93.

Step 20: Make the Wall Visible

Click on the wall in the Hierarchy, head to the Appearance section of the Properties panel and check the 'visible' box.

Step 21: Set Scene Ornaments to Test_3d

You are now going to set the 'layerMode' of the objects in our Scene Ornaments group to 'test_3d'. Start from the wall and go through the Scene Ornaments group.

Click the object node, then within the Properties panel, scroll to the ‘Appearance’ section and change the layerMode from overlay to 'test_3d'. Do this individually for each item in the Scene Ornaments group.

Changing the 'layerMode' to 'test_3d' means that these objects will have to be closer to the camera than other 'test_3d' or 'full_3d' objects in order to be visible.

Step 22: Create a Square Mask in the Media Library

Click the (+) icon in the Media Library and select the 'Square Mask'. This will add a Square Mask into your Media Library.

Step 23: Set the Square Mask LayerMode to Full_3d

Click on the Square Mask in your Hierarchy. Go into the Properties panel and in the Appearance section, set the 'layerMode' to 'full_3d'.

The mask object will still hide the other objects but will be drawn to the screen first.

Step 24: Set the Transparency of the Square Mask to 0%

Click on your Square Mask within the Hierarchy. Head to the 'Appearance' section of the Properties panel and click the color box.

This will open a dialogue box. Set the transparency to 0% and click ‘OK’ to close the box.

The mask object now will not be visible but will still hide the objects behind it.

Step 25: Previewing Your Experience

At this stage the experience can be previewed on a device. If you do not have it already, download the Zappar App on Android or iOS to preview on your smartphone / tablet.

You can preview your Zap by clicking the ‘Preview’ button in to top left of your ZapWorks Studio. Use the target image below to test whether you are happy with your scene.

You will be asked to authenticate your ZapWorks account.

Step 26: Publishing Your Experience to Your Zapcode

Hit ‘Publish’ in the top left corner to publish it to your previously created zapcode.

Choose the zapcode that you created in Step 0.

The code must be a Studio code in order to be published to.

Step 27: Congratulations!

That’s it. You have completed all the steps in this tutorial and created your own augmented reality portal. You are well on your way to learning ZapWorks Studio. Nice!

We hope you enjoyed this Instructable. If you feel like doing more, check out our website for more tutorials like this one.

Learn more

Discover the full potential of ZapWorks Studio!

ZapWorks Studio provides a complete toolkit for building dynamic and immersive 3D augmented or virtual reality experiences.

To know more about the concepts covered in this tutorial, please visit the following pages on ZapWorks:

Masking Objects - More information on the masking process.

Tracking Images - How tracking images work.

Using layerMode - Further details on all layerModes.