Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

Tutorial: Working with Textures and Materials

In Spark AR Studio, you'll use materials and textures to define the appearance of objects in your scene.

You can create materials in Spark AR Studio, and add color and interest by adjusting their properties. You can also make textures in external software, and combine them with materials to add detail and complexity.

Something Went Wrong
We're having trouble playing this video.


In this guide, we'll:

We've provided all the textures you'll need, along with a 3D object, in the sample content. Download it to follow along.

Creating materials

Materials are applied to the mesh that make up a 3D object.

In the unfinished project, we've already added the 3D object you're going to work with to the scene. It's listed as origami_hand in the Scene Panel. It's a child of a plane tracker, which means it'll be visible through the back camera on a mobile device, when a flat surface like a table is detected.

To create the a material for the object:

  1. Click Add Asset at the bottom of the Assets Panel.
  2. Slect Material.

The material will be listed in the Assets Panel as material0.

You can rename materials if you want to, by right-clicking on the material and selecting Rename. For this tutorial, name the material hand_material.

To apply the material to the hand, click the arrow next to the origami_hand object in the Scene Panel. This will expand the object, and reveal the mesh - origami_hand_mesh. Select the mesh.

Then, in the Inspector:

  1. Go to Materials.
  2. Click the arrow, and select hand_material

You can also use the Materials property of an object to create new materials. They'll already be applied to the object.

Importing textures

Textures can add all kinds of details to an object, when they're applied to a material.

Textures should be PNG or JPG files. They can be added to your project through the Assets panel, again by clicking Add Asset, and this time selecting Import From Computer.....

We've already added 3 textures to this project.

origami_hand_mat_BaseColor will be used to add a base color and a paper-like appearance to the hand, when we make a standard material.

We'll then combine all 3 textures in the physically-based material.

Types of material in Spark AR Studio

You can choose from 6 types of material in Spark AR Studio. The best one to pick depends on the type of object you're using and the effect you're creating. Let's take a quick look at each of them.

Select hand_material in the Assets Panel. In the Inspector you'll see an option labeled Shader Type. This is where you choose which type of material you're going to create.

As you can see, the option here is set to Standard. The standard material is generally used for materials applied to 3D objects, because it responds to lighting in a way that provides realistic depth. We can change this by clicking the dropdown next to Type.

The flat material is generally used for 2D objects, because it doesn't respond to lighting. This mean it has less of an impact on the performance of your effect than a standard material.

The physically-based material can be used to create a realistic looking material, using a combination of different textures and different properties.

The face paint material is best for mask effects that paint textures over the user's face, because it preserves the luminance of the face underneath, but removes the color. This means your own texture can be multiplied over it.

The blended material includes a mode to mix textures and colors.

Finally, if this material was applied to a face mesh, you'd see an option to create a retouching material here. You'd use this material to add a smoothing effect to the face or the whole scene.

Making a standard material

As you can see, the Type is already set to Standard for this material, so we can leave it as it is.

You'll add colors and textures to define the color and general appearance of your object using the Diffuse option. So:

  1. Click the dropdown next to Texture.
  2. Select origami_hand_mat_BaseColor.

The hand now has a color and a slightly textured effect. You can make it look more interesting and realistic by adjusting the Shader Properties.

Start by checking the box next to Specular. Specular defines the shine and highlight color of a surface - adjusting this can make an object more realistic.

Adjusting the slider next to Smoothness will make the specular effect appear stronger or weaker. This is because you're controlling whether the highlight is spread out across a wide area, or concentrated in a smaller area. I think this effect looks better with Smoothness set to about 20%.

The hand looks pretty cool using just a standard material. Now let's try using a physically-based material instead.

Making a physically-based material

Start by changing the Shader Type for hand_material to Physically Based. As you can see, the object looks a little flatter now. This is because physically-based materials mimic light in a different way from the standard material.

Let's add a color above Texture. Select the box next to color. Click pencils icon, and select the yellow pencil - Cantaloupe.

Adding an Environment Texture

Environment textures use images to add realistic lighting effects to objects. There are several to choose from in Spark AR Studio - or you can import your own.

To create an environment texture:

  1. Click Add Asset.
  2. Select Environment Texture (presets).
  3. Choose an option from the list.

Each of these textures mimic lighting from a different environment - for example an office or bathroom.

For this effect, choose Sunny Vondelpark - which will give the hand the effect of light in a park on a sunny day. You'll see the texture listed in the Assets panel as sunnyPark0.

To add the texture to the material:

  1. Select the material.
  2. In the Inspector, check the box next to Environment.
  3. Click the drop down next to Texture, and select SunnyPark0.

You can see the hand now has realistic lighting.

Adding an ORM Texture

ORM stands for occlusion, roughness and metallic. Use an ORM texture to control how metallic or rough an object looks.

To apply the ORM texture, click the dropdown next to ORM texture and select origami_hand_mat_OcclucsionRoughtnessMetallic from the menu.

Using the sliders under Surface Parameters, set:

  • Metallic to 85.
  • Roughness to 30.
  • Occlusion to 100.

Occlusion maps are used to approximate soft shadows baked into the creased areas of a surface. If you're using an ORM map with occlusion baked into its red channel, the occlusion strength slider can be used to control the strength of the occlusion map. Otherwise the slider will have no effect.

The hand will now have a more textured, metallic appearance.

Adding a Normal Map

The final step is to add a Normal map. This will add an illusion of bumpiness to the surface of the object, to make it look more interesting and realistic. You can also add normal maps to standard shaders.

To add the normal map:

  • Check the box next to Normal.
  • Then, next to Texture apply origami_hand_mat_normal.

And there you have it! You've made a complete physically-based material.

Summary

In this tutorial, you've learned to make a standard and physically-based material.

Next, you could try:

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?