Module 10: Creating Custom Materials in Effect House

Materials are assets that define how objects look and react to lighting. Materials can be applied to 3D models to apply realistic finishes, or to the camera feed to create a filtered effect. Material Editor allows you to create custom materials using node-based logic.

This module presents an overview of Material Editor and how to use it to create a custom, metallic material.

Module Objectives: By the end of this module, you should be comfortable with the following objectives:

Be familiar with the Material Editor interface
Create a custom, metallic material based on the Standard PBR shading model
Understand how to use visual scripting to manipulate material properties

note

This video was recorded using Effect House v2.5.0. Later versions of Effect House have features that may not be covered in this video.

Create a Custom Material

Open Template

Like visual scripting, Material Editor is a node-based creation tool that lets you string together nodes with flows of logic to achieve your desired result. In this example, you will learn how to create a custom material that you can apply to the 3D hair model in the Dynamic Chain template.

First open Effect House, go to the Templates tab on the home screen, click the Face tab, and open the Dynamic Chain template.

Click the hair object in the Scene panel. Notice that there are two pieces of hair in the front that both use the preset template Material called Hair Mat in the Inspector panel. You will use Material Editor to create your own material and replace it.

Open Material Editor

To create a new material, click the Add button [+] in the Assets panel, hover over Custom Material, and then select Empty Material. This opens up Material Editor in the same space as the Visual Scripting panel.

Rename your material to "New Metallic Material" by right-clicking it in the Assets panel and then selecting Rename.

Add a Shading Model

Notice that Material Editor resembles the Visual Scripting panel. They are similar, in the sense that Material Editor also uses nodes with inputs and outputs to create flows of logic.

To add a node in Material Editor, you can click the Add button [+] in the Material Editor toolbar, right-click on the panel and select Add node, or simply double-click anywhere on the dotted space.

From the Node menu, go to the Material Mode category and select the Standard PBR shading model. This model uses physics-based rendering to create a realistic response to light.

Link the Standard PBR node's Color:Color output to the Shader node's Color input, which creates a generic Standard PBR material. The Shader node controls what the material looks like with your configured lighting conditions.

Apply your basic material to the hair model. Click the hair object, then click the Material field in the Inspector panel, and choose your new material. Notice that the hair responds realistically to environmental lighting when you play around with the scene's lighting.

Adjust Color

Select your new material in the Assets panel, and notice that it doesn't have many properties yet. As you continue to add new properties to your material, they will show up in the Inspector panel.

You can change the base color of the material using the Albedo input. Click the My Items button in the Material Editor toolbar, click the Add button [+] next to Parameter, and then select Color. To add this Color parameter as a node, click the button next to it.

This is because the Color parameter node's data type does not match the data type of the Standard PBR node's Albedo input, so you cannot connect them. You must first convert the Color parameter node's data type to match the Albedo input, using a node called Cast. Add the Cast node, and then connect the Color parameter node to the Cast node's Value input.

Select the Cast node, and then click the Details button in the in the Material Editor toolbar. Change the Cast Type to Vec3.

Connect the Cast node's output to the Standard PBR node's Albedo input! Now the Color property appears in the Inspector panel when your custom material is selected in the Assets panel. Choose your desired color using the color picker.

Adjust Metallic and Roughness Properties

Add parameters to the remaining inputs of the Standard PBR node.

Click the My Items button, click the Add button [+] next to Parameter, and then select Float. Rename your Float parameter to "Metallic," then add it as a node by clicking the button next to it. Connect the Metallic parameter node to the Standard PBR node's Metallic input.

Notice that the Metallic property appears in the Inspector panel. Change its value to 1, which corresponds to a shiny, metallic appearance.

Next add another Float parameter following the same process. Rename it to "Roughness," then add it as a node by clicking the button next to it. Connect the Roughness parameter node to the Standard PBR node's Roughness input.

Notice that the Roughness property appears in the Inspector panel. Change its value to 0.2, which adds a moderate shine.

Congrats, you've just created a custom, metallic material!

Use a Texture as the Base Color

You can also use textures instead of color as an input to Albedo. To do so, add a Sample Texture 2D node, and connect its RGB: Vector3f output to the Standard PBR node's Albedo input.

Click the My Items button, click the Add button [+] next to Parameter, and then select Texture 2D. Then add it as a node by clicking the button next to it.

Connect the Texture 2D parameter node to the Sample Texture 2D node's Texture 2D input.

Now you have a texture base property that allows you to use a texture as your base color, instead of using a solid color.

Use Visual Scripting with Material Editor

You can use visual scripting to make your material interactive. For example, you can gradually make the metallic hair change color after a person taps on the screen.

First connect the Color parameter/Cast node back to the Standard PBR node's Albedo input, then switch over to the Visual Scripting panel. Make sure your material is selected in the Assets panel. Click on the button next to the Color property in the Inspector panel, and select Set Color, which adds a Color variable node to the Visual Scripting panel.

Then add a Finger Touch 1-Point node to the Visual Scripting panel to represent tapping on the screen.

Now you need a node to control the change in color over a short period of time. Add a Transit by Time node, then click on Transit by Time: Number at the top of the node. Change the type to Color. Then modify the color of From and To. Change the Duration to 3 seconds.

Connect the Finger Touch 1-Point node's On Start: Exec output to the Transit by Time: Color node's Start input. Then connect the Transit by Time: Color node's Stay: Exec output to the Color variable node's Set input. Also connect the Transit by Time: Color node's Current: Color output to the Color variable node's Value input.