Augmented Reality with Blippar Part 2

Blippar (https://www.blippar.com/) offers a few different methods to create augmented really experiences. For the purposes of this overview we will focus on creating an experience that will allow participants o place our scene i their own environment without the need for any apps. For information on creating a location or marker based experience using the Blippar app view Part 1 of this series. (For other examples of Immersive Experiences see this post)

Getting Started

Once you have an account and are logged in to Blippar you will choose whether you want to use Blippbuilder or the WebSDK. Choose Blippbuilder, then click the button to create a new project and give it a name. You will then see the 3 types of projects you can create, for this tutorial we will choose “Select Surface”. This will allow the viewer to see our scene in their own environment and walk around the objects.

Navigating the Interface

1. In the middle of the screen is the main editing space.
   • Note the navigation buttons towards the top right. You can use these to rotate and change the view.
   • Towards the bottom right you will see the zoom tools, you can also zoom with the scroll wheel on a mouse.
   • At the top you will see the scene navigation, click the name of the current scene to create new scenes
2. On the left hand side of the editor you will see a number of sections with headings. Click teh heading to open or close each section
   • Your Library contains all the media you have uploaded to your account
   • Widgets can be used to add elements such as text
   • The 3D Library contains 3D shapes you can use in your project
   • Lights allows you to change the lighting of the project
3. The right hand column is where you will find properties for whichever item is selected in the main editing window. Depending on the element, you can change position, size, actions, font colors etc.
4. At the very bottom of the screen are the motion effects and timeline.

Adding Elements

To add elements to your scene simply drag them from the left column to your canvas. Click on the Your Library tab to load any images or media you want to use then drag them into your canvas. Most image file formats are accepted as are MP4 and mp3 files.

Adjust the properties as desired (size, position, actions etc). You can assign actions to items such as images. These are primarily for linking to webpages and social media sites but also used as links to go to a different scene. Make sure you provide navigation on all scenes so participant doesn’t get stuck. Make sure they can always jump to another scene.

Using Images

Images must be smaller than 5MB to be added to your project. When you initially add and image it will probably be very large so you will have to scale it down. I have also found that Blippar does not work well with some images, especially ones that have been rotated. You may have to experiment to get them to display properly. You may want to have the image show full screen when a user taps on a smaller thumbnail. To do this you have to be able to use an action to go to a webpage, make sure it is on the web somewhere: either your own space (Domains would be a great option), another website or you could use a Google Drive public link.

Working with 3d Models

The app version requires models to be in glb format.

The web version requires glb formatted models which can be exported directly from Blender after decimating the mesh as needed to reduce the number of vertices.

Adding Motion Effects

You can set elements to move, fade in/out etc by adding Motion effects via the panel at the bottom of the screen. Select the element, then drag the appropriate motion affect to the corresponding timeline. There is a separate line for each element in your scene. I have had problems getting elements to render properly with motion effects, YMMV.

Previewing and Publishing Your Project

When you preview your project built for the web you will be given a temporary QR code you can scan as well as a URL you could share to access the project. Once published you will have a persistent QR code and link.