Augmented Reality Effects on Your Poster Using Facebook’s Spark AR
Augmented reality (AR) greatly increases the impact of your poster, making it to a dynamic communication tool. With Facebook’s Spark AR this will only require several simple steps.
Posters are a great way of presenting your results, but they are inherently static and thus require more effort as compared to say oral presentations. By adding AR effects to a poster, you can create a cool interactive experience and let the poster literally speak for itself!
Using the Facebook’s Spark AR for creating your effects makes sense if you already have Facebook or Instagram installed and don’t want to install a separate app just for handling of one specific AR effect. Besides, with Apark AR you can create an effect which runs on Facebook and Instagram for both Android and iOS devices. Finally, creating and publishing with Spark AR is free and fun.
Disclaimer: The steps below have been tested for Spark AR v74 under Windows 10 with Facebook as target platform, and the resulting effect has been run on a Samsung Galaxy A5.
Getting things ready
The AR effect we want to create is to pop up a 3D structure and play an audio narrative once a target image is scanned. In my case, I want the reader of my poster to appreciate the complexity of the fracture network I am working with (by the way, you are welcome to have a look at our recent work). So here are the assets I will be using:

Here petrel_fracs contains a description of a 3D fracture network in the glTF format (the data can be exported from the VTK format e.g. using ParaView 5.7.0).
The audio narrative MM poster narrative - compressed.m4a was recorded using a phone mic and compressed down to 64 kbps.
petrel_standard.png is the target image, and petrel_standard_rotated.png is the same file, rotated counterclockwise (see below).
Setting up Spark AR
Installation is straightforward: just go to sparkar.com, download Spark AR Studio, and install it to a default location on your computer. On your mobile, download the Spark AR Player app.
Launching Spark AR Studio will bring you to the following startup screen:

There is a bunch of options and capabilities which we will not be covering in this post. For details, see the official documentation.
First, let us select the target platform to be Facebook only. For that, go to Project->Edit properties and unselect Instagram.
Creating the Spark AR project
Let us import the assets to the project. For that, click on the Add Asset button at the bottom left, and choose Import From Computer… Add assets one by one until your assets panel looks like the following:

Now we need to add the Audio Playback Controller asset which will take care of our narrative. In the inspector panel to the right set up the audio file to be played and check the Play and (optionally) Loop checkboxes:

Now we are all set and can actually create the effect. For that, click Add Object in the scene panel at top left and choose Fixed Target Tracker. Set the texture of the tracker to petrel_standard_rotated.png and enable the tracker for the back camera, so that the inspector panel for the tracker looks like this:

Observe that your rotated texture has appeared in the viewport. For some reason this trick with the rotated texture is needed to get your effect working correctly on the mobile device..
In order to add the action which will be triggered once the target image is detected, drag and drop the 3D object to the target tracker so that the scene panel looks like this:

Observe that the 3D fracture network has appeared in the viewport, we just need to fix its global and/or local position. In order to change the global position, select the 3D object in the scene panel and modify the properties as needed:

In order to change the local coordinates, click on the 3D object in the viewport and fix the position and rotation in the inspector panel:

Now let us add the sound. For that, right-click the staticTargetTracker0 in the scene panel and choose the Speaker. Set the audio for the speaker to the playback controller, so that the inspector panel for the speaker looks like this:

Finally we can add a prompt so that the user knows how to activate the AR effect. For that, right-click Camera in the scene panel, and add 3D Text. Edit the text properties in the inspector panel by setting the coordinates and applying the desired front, side, and back materials:

Note that contrary to the target texture, we don’t need to do any tricks with rotations.
The final project looks like this:

Testing the effect on your mobile
In order to test how the effect works on your mobile device, connect the device with the computer via an USB cable and click the Test on device button left to the assets panel:

Exporting the project
Once you are happy with your effect, click the upward facing arrow just below the Test on device button to export the project to an .arexport file. If you publish on Facebook, your effect has to be less than 2 Mb:

Finally you need to go to Spark AR Hub and upload the project there together with an icon and a effect demonstration video, and wait for an approval. For me it took one day :)
