Working with Textures and Materials

Materials and textures define the appearance of objects in your scene.

Textures are created in external software and combined with materials to give objects in your scene a unique look. Materials determine how light interacts with your object/texture, and can be created and adjusted directly in Spark AR Studio.

We've provided all the textures and objects you'll need for this tutorial in the sample project. 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. You can see the mesh highlighted in the Scene panel and Viewport, here:

The 3D mesh is highlighted in the Scene panel.

The 3D object is a child of a plane tracker. This 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 3D object:

  1. Click Add Asset at the bottom of the Assets panel.
  2. Select 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:

A material is created and renamed.

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, which is where you'll add the material. The mesh in this object is called origami_hand_mesh. Select it.

Then, in the Inspector:

  1. Go to Materials.
  2. Select hand_material

Importing textures

Textures can add all kinds of details to an object when they're applied to the object's 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:

Importing textures from the computer.

You won't need to do this though, as we've already added 3 textures to the project.

origami_hand_mat_BaseColor will be used to add a base color and a paper-like appearance to the hand as our standard material texture. 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 labelled Shader Type. This is where you choose which type of material you're going to create.

The Shader Type property is shown in the Inspector.

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 Shader Type:

The dropdown is open and the shader type options can be seen.

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, with the hand_material selected:

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

The hand now has a color and a slightly textured effect:

The 3D object now has the appearance of brown paper.

Next, we'll make it look more interesting and realistic by adjusting the other 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 specular settings.

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%.

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:

Changing the shader type.

Next, let's add a color. Select the box next to Color. Click the 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 Textures.
  3. Select Environment Texture

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

For this effect, click Sunny Vondelpark and then Import Free.

This texture 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 8_sunny_vondelpark.

Adding the environment texture.

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 8_sunny_vondelpark.

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, select the material in the Assets panel and then click the dropdown next to ORM texture in the Inspector. Now, select origami_hand_mat_OcclucsionRoughtnessMetallic.

Adding the ORM texture.

Using the sliders under Surface Parameters, set:

  • Metallic to 85.
  • Roughness to 30.
  • Occlusion strength 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 materials.

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.

Was this tutorial helpful?