How to make an interactive composition in web AR

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

(updated on august 2020)

Let’s have a simple step by step tutorial on making a web AR scene from images.

This tutorial is about making a composition from images, if you’re looking for the 3D model tutorial, go here

If you don’t have yet an xr.plus account, create one
Click here to create a free account

We are going create a simple composition that will look like this when finished.

You can download all the images used in this composition here: tutorial-composition.zip. Of course you can also use your own images.

1. Create a new scene

in the XR+ editor, create a new scene.

2. Import the first image

Click “import a file”. and import the image ‘bg gradient.png’, then click on “add to composition”.

XR+ web AR tutorial image 1
XR+ web AR tutorial image 2

3. Add white octogons

Next, reopen the library and import the ‘octogon.png’ image and add it to the composition.

There’s a gray area all around the white octogon, let’s hide it.
To do so, we need to set the transparency of this image, so only the white shape is visible.
Turn on ‘color transparency’, and as a key color, choose the same gray as the one around the white shape.

Now that the transparency is setup, scale down a bit the element on the composition and place it to a bit on the left. You can use the rotation tool to give it a nice little angle.

Open the library to add it one more time to the composition and place it in the center, then add it one last time and place it a bit to the right.

XR+ web AR tutorial image 3
XR+ web AR tutorial image 4

4. Add the animal

Now import the ‘creature.png’ image, This image is a transparent png, so no need to set a key color.
Add it to the composition, scale it down a bit, and move it a bit in front and a bit down.

XR+ web AR tutorial image 6

5. Add the back images

One by one, import the 4 screenshots images and place them at the back of the composition.

XR+ web AR tutorial image 7

6. The logo

Import the ‘Little XR’ logo and place it on the top left area of the composition.

XR+ web AR tutorial image 9

7. The button

Finally, import the ‘play-now.png’ image, add it to the composition, and set its shape to circle, to make a nice rounded shape.

Let’s bring attention to this button by adding a pulse animation. Note that the animation is not visible on the editor, but only when viewing the scene on your phone or in the simulator.

XR+ web AR tutorial image 10

Let’s add an interaction
Click on “set an action”, to open the action editor. Choose ‘open webpage’, set https://littlexr.co as the web address. When users will touch the button, they will be redirected the his web address.

XR+ web AR tutorial image 11

8. Publish the scene

Almost done, now in the ‘publish‘ tab, press the ‘publish scene’ button.

Next to the QR code, you can see the public link to you scene, in this case: https://xr.plus/d20 (yours will be different).

Type this web address on your phone web browser or scan the QR code in the editor to view the scene in web augmented reality.

XR+ web AR tutorial image 12
Alexandre Negre

Alexandre Negre

Leave a Replay

About XR.+

XR.+ provides a studio to create in minutes AR / VR engaging experiences and publish them at scale on all supports online as offline.

Recent Posts

Follow Us

Weekly Tutorial

XR+, the most advanced Experience Management System