Introduction: Augmented Reality Product Showcase (TfCD)

Selling products during flight is becoming more and more popular nowadays. However on the airplane the first and nearly only information the passenger (possible buyer) sees is a printed brochure.

This instructable will show a way to innovate on airplane brochures and impress passengers with a new product showcase by using the Augmented application. That application uses augmented reality, which means it is possible to scan a tracker file (brochure page) with a mobile phone or tablet application to see a 3D visualization of a product appear on the screen of the used device. This way the passengers can see a better picture of the product, turn it around, and inspect the virtual model, making it easier to imagine it in real life.

Step 1: Create a 3D Model of the Product

In this step create a 3D model of your product by using a modelling program, such as Sketchup, 3DSMax, Blender or Solidworks. Mind the 3D guidelines provided by Augment website.

As an example a perfume was chosen (Santini, London Berry), and Soliworks was used as a modelling tool. The modelling instructions are specified for that one product (and in some cases for the program as well). Every other step is general, can be used in any other case.

Below three gifs can be seen, which shows a step by step build up for the parts in the model.

Step 2: Perfume Bottle + Labels

First measure every important distances. Choose your staring planes in a way, the bottle will not be upside down. The model mainly builds up from Extrudes (cuboids and cylinders). The empty parts were made by an Extruded cut, then the sides were tilted with 3° and 5° using the Draft option. Nearly all of the edges are rounded (Fillet option) of cut (Chamfer option). See the Solidworks Part below.

Add the logo and text written on the bottle to the front side using Decals. Use PNG format to have a transparent background fro the labels. Some type of models (if they are compressed) will not contain the decals. It is possible to use them as an underlayer to model the shapes onto the bottle. See the files for the labels in a .zip below.

Step 3: Closing Lid

Measure the closing lid too. This model is fairly simple, made from an empty cylinder and a cuboid. The edges are rounded or chamfered, to give a diamond cut feeling to the top part. Mind the extra part cut out from the cuboid. See the Solidworks Part below.

Step 4: Perfume (liquid) Inside the Bottle

This part cannot be measured in real life, but the measurements from the perfume bottle 3D model can be taken as a guide. Use the Measure tool in you program to see the exact numbers. From the nearly finished model it is possible to cut the top off, that way the bottle will be more empty. See the Solidworks Part below.

Step 5: Assembly and Materials

Assemble the pieces using the Mate function along their touching edges.

The bottle is made from glass, so a transparent material will create a life-like model. In that case plastic was used instead of glass, because it is less reflective and more opaque. The liquid inside can have a water or transparent plastic material with edited colour. The metal parts inside have a non-shiny aluminium material.

See the Solidworks Assembly below.

Step 6: Photo Render (not Necessary)

Make a nice Photo render of the 3D model, so it is possible to check how lifelike it looks. Also the renders can be used in the brochure as well. A nice soft light background works really well with the transparent bottle.

Step 7: Save Your Model in a Preferred Format for the Augmented App

The Augmented website has a detailed list on what exported format works the best from different programs. Also several plugins can be found on the site as well.

In case of Solidworks, they recommend .igs (including materials) format. Also, it is possible to download a plugin from here, which exports the model in .obj (preferred file format). Watch the video to see how to use the plugin. (The video is made by the Augmented app's group).

After exporting the model, make a .zip file from the .obj and .mtl files. See all the listed files below.

Step 8: Creating Brochure and Tracker File

1. Design a perfume brochure with a clear and eye-catching advertisement for your product. For this example, it has a Christmas theme, and works as a gift guide.

2. Don't forget to add some short introductions, so the customers will know that there is a possibility to see the products in 3D. Also include how to download and use the Augment application (see example below).

"Dear passengers!

This is a short introduction on how to use the product showcase. Our brochure makes it possible to see the products in 3D by using augmented reality. For the 3D experience please download the Augment app from your tablet’s or smartphone’s App Store. After installation, open the application and select the scan option. Then scan the product you wish to see in 3D with your camera. You will instantly see the product popping up on your screen. Enjoy!"

3. Export the page with your product on it in .jpg or .png, that will be used as a tracker file to place the model on it in Augmented Reality.

4. Print the brochure (recommended to do it double sided and in colour) and bind it in the middle.

Step 9: Create Augmented Content - 3D Model

In this step the augmented content gets created, by uploading the 3D model and the tracker to the Augmented website. The website will link the model to the tracker. When the tracker is scanned with a mobile (tablet) camera through the Augment application the 3D visual will pop up on the scanner picture.

First you have to create an account and log in.

Uploading the 3D model

After you log in the website will automatically show the My models/ All models folder (see on the picture above), if not go to that page. Click on Add model, and upload the .zip file (created in Step 7) or any file in another supported file format. Fill in the rubrics with your product information, select a category, and choose if you want your model to be public or private. Then click on Save and publish in the upper right corner. It is possible to edit the uploaded file later too. Wait for the model to be processed fully.

Step 10: Create Augmented Content - Tracker

Go to My trackers/ All trackers folder (see on the picture above), and click on Add tracker, and upload the .jpg or .png file created in Step 8. Here are some useful information on trackers, if you want to use something else than the picture. Name your tracker, then link it to your uploaded 3D model (choose from the list). Click on Save and publish in the upper right corner. It is possible to edit the uploaded file later too. Wait for the tracker to be processed fully, it can take several minutes.

Step 11: Testing With the Application

Download and install the Augmented application to your phone or tablet (work on Android and iOS platform as well). You do not need to log into the app to use it.

After the installation is finished open the app, allow it to the use the camera (if the question pops up). Get your printed brochure and open it on the page of your product (used as tracker). Select the scan option in the application, and point your camera towards the tracker. After a short loading time the 3D visual should appear on the screen. It is possible to see the model from different angles by turning your camera or the paper. Also inside the application there are some options to resize, replace or rotate the model.

If problems still appear, check every step before this, to be sure they are executed correctly, or leave a comment and we will try to help you out.


by Shaoyun and Julia

made for TfCD course at TU Delft, 2017.