sign uplogin
login with Facebook

or with email / password

How to make augmented reality on web browser?

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 scene an import a 3d model from your hard drive. Supported formats are .obj, .fbx and .dae.

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

If you don’t have any 3D model, is it also possible to make a scene from just an image, 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 edit view

This is the edit view:
– on the left column you can see your model and edit its transformation values ( position, rotation and scale).
– the middle column is the list of all materials used on the the scene.
– the right hand side column displays the list of meshes from the model and settings for lights & environment.

 

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 ), 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 texture image contains an alpha channel.

 

7. Adjusting materials

Some extra material adjustments to darken a bit more the port 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.

 

8. Set a preview image

In the ‘edit preview‘ tab, you can choose the background to be used on the preview thumbnail of your scene. You can also set the position of your object on the background.

 

9. Publish the scene

Almost done, now in the ‘publish‘ tab, set a name and a description for your scene, then press the big ‘publish’ button.
Next to the publish button, you can see the public link to you scene, in this case: http://xr.plus/6ht

 

10. All done

VoilĂ ! The scene is published and available to everyone.

The default augmented reality pattern for xr.plus scene can be found on the homepage: http://xr.plus

 

11. View the scene on your phone

To view the scene from this tutorial, visit http://xr.plus/6ht on your phone browser ( Safari, Chrome of Firefox)