index file template

Your first Web AR Project

In this tutorial, you will learn how to create a very simple Web AR Project with an image.

1. Create your account

First of all, you will need an XR.+ account, so go to the register page and create a free acount. Follow the steps to complete your registration, and now, let’s start your project!

On the XR+ studio home screen, click on the “Create your first project” button.

2. Create your first project

Here you can choose a project template to see the possibilities of the studio, in this tutorial, we will use “Empty project”. Name your project and click on “Create project”.

3. Import an image

Welcome to the main project edition screen! This is your assets library, which is empty for now.
Import your image by clicking on the button named “Import a File”, then click on the “Add to composition” button.

4. Add the asset to the composition

Now, we have your image in the 3D space of the editor. You can move it by selecting one of the two main tools of the view in the bottom left corner. Place it at your will. You can resize it or move it by entering the coordinates in the coordinates bar at the bottom of the 3D view.

5. And you’re done!

Your project is already published and live, above to the QR code, you can see the public link to the project, in this case: https://xr.plus/nnz (yours will be different).

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

Congratulation you’ve made it!

Simple 3D model based webAR tutorial

Here’s a simple tutorial on how to publish a 3D model in augmented reality on the web ( aka webAR ).
Let’s go through the various steps on the xr.plus platform…

If you don’t have yet an xr.plus account, create one ( the basic plan is free )
Click here to create a free account

1. Import a model

Create a new project and import a 3D model from your hard drive. Supported formats are .obj, .fbx and .glb (gltf).

For this tutorial, I’m using a Bonsai tree available here (download the fbx version).
This model was made by Scopia Visual Interfaces Systems, s.l. and Eteks,
available under the Creative Commons license ( https://resources.blogscopia.com/license-2/ ).

Is it also possible to make a project only from images, but I’ll only cover the 3D model process in this tutorial.

2. Import materials

If the imported model includes materials, you will be asked if you wish to import them.
For this model I’m choosing ‘yes’, so materials will be automatically assigned to the meshes.

3. The composition view

This is the 3D composition view:
– on the left column you can see the list of all items dropped in the composition (here there is only the bonsai tree)
– on the left column you can also switch the pages, materials and lights listing.
– the right hand side column displays the list of meshes from the model. This is where you can assign materials to meshes of your model

4. Set pot color

The top material is used on the tree pot, I’m choosing a dark gray for its color

5. Trunk wood texture

Adding the texture for the trunk (included with the model zip file), on the ‘bark’ material

6. Soil & leaves textures

Adding textures for the soil and leaves. I’m turning on transparency for the leaves texture as the .png image contains an alpha channel.

7. Adjusting materials

Some extra material adjustments to darken a bit more the pot and the trunk (changing the default white color of a material to a darker color will also affect the texture), and lowering the shininess of the trunk.

9. All done!

Your project is now ready and already published!
On the left column, you can see the public link to your project, in this case: https://xr.plus/2m5

10. Optional: edit the project cover

You can customize the project cover image, to do so, go to ‘Publish settings’ > ‘Project cover’.
You can select an image for the cover background and adjust the position and size of the Bonzai tree.
You can import an image from your hard drive to be used as a cover.

Press ‘save cover’ to save your cover.

Simple image based webAR tutorial

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 project

in the XR+ editor, create a new project.

2. Import the first image

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

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 keying’, 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.

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.

5. Add the back images

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

6. The logo

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

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.

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.

8. Project cover

Almost done, now in the ‘publish settings‘ tab, choose a cover background, press the ‘save cover’ button.

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

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

States interactions module tutorial

Let’s learn how to add interactions to XR.+ projects using the interactions module.

For this tutorial we’ll be using a simple 3D model file made of 3 objects (meshes): a sphere, a cube and a pyramid.

This tutorial will explain how to create states and buttons to hide and show those 3 objects.

You can download the Blender file and the fbx exported from Blender to make this tutorial by clicking here.

Create a new project in the studio, and start by importing the fbx file and adding it to the composition.

1. Activate the module

In the modules section, turn on the ‘states interactions’ module

2. The default state

For now there is only one state, the default one. This defaut state is applied as soon as the scene in loaded and ready.

States actions are applied when the scene switch into the corresponding state.

On this first state, we’ll only show the sphere and hide the cube and the pyramid, to do so, we need 2 actions.

The first action will show the sphere, the second one will hide the cube and the pyramid.

3. The other states

Let’s create another state, this new state will only show the cube. Again, we need 2 actions: one to show, another one to hide.

Then the the last state will show only the Pyramid, and like the other states, will hide the other 2 objects.

The 3 states now look like this, each with 2 actions:

4. Buttons

Now that we have created our 3 states add added action to each of them, we need buttons to switch between those.

Create a first button to switch to the state 1.

We need 3 buttons: one for each state. The second button will switch to state 2, and the third button will switch to state 3.

5. Adding buttons to states

And finally we need to add the buttons to each state so they can be visible during the experience, at the bottom of the screen.

Optional: adding some animations

We can add 3 actions to the first state to animates the objects. Choose ‘play basic animation’, select the mesh to animate and choose an animation.

Final result