Page MenuHomeAnticto

Mutable for Unreal Engine 4 | Interpolate between two textures
Updated 8 Days AgoPublic

Overview

This article explains how to interpolate between a base skin texture of a character and a modified sunburned version of the same using Mutable Character Customization System for UE4. The gradient from one to another can be controlled by the end-user by moving a slider to get all the intermediated values as well.

We recommend visiting the Basic Concepts page before start creating any Customizable Object.

Control the gradation of sunburned skin with a slider

The resulting Customizable Object of this example can be found in the Village Demo in Content/HowTo/TextureInterpolation named "Texture Interpolation"

Assets required

  • One material asset or material instance of a character with one color parameter
  • One skeletal mesh of the character with the previous material applied
  • One texture asset of the base skin texture of the character
  • One texture asset of the character’s skin modified (sunburned)
The assets used in this example can be found in the Village Demo in Content/HowTo/TextureInterpolation

Steps

  1. The first step is to create a basic Customizable Object asset with the Base Object, the Material, and the Skeletal Mesh. Link all the connections with the same name.

Step1.png (135×1 px, 42 KB)

In this example, the Customizable Object asset is named "Texture Interpolation", the Reference Skeletal is "Texture Interpolation_BaseBody", the Material is called “TextureInterpolation_M” and the Skeletal Mesh is the same as the Reference Skeletal’s one. Link the “Mesh” connections between them, but leave the “Base Color” disconnected.


  1. The objective of this example is to interpolate between two textures, the base skin and the sunburned skin one and control its gradation by moving a slider. To begin with, a Texture Interpolate node must be created from the “Base Color” connection of the Material node.

Step2.png (279×1 px, 60 KB)


  1. In the Node Properties tab, leave the Number Targets as default, because the interpolation is between two target textures.

Step3.png (109×259 px, 5 KB)


  1. The “Factor” connection allows choosing an interpolation parameter, that in this case should be a slider. Create a Float Parameter node by dragging and dropping from the "Factor" connection of the Texture Interpolate node.

Step4.png (140×377 px, 20 KB)


  1. In the Node Properties tab, change the “Default Value” to "0" to change the slider's selector position and make it be at the starting point, the base skin texture. Write a name for the parameter.

Step5.png (141×343 px, 9 KB)

In this example, the Parameter Name is “Sunburned Skin” and the “Default Value” is changed to “0”.


  1. Now, the “Target 0” should be connected to the base skin texture, because this is the default texture from which the gradation to the sunburned skin starts. Link the “Target 0” connection of the Texture Interpolate node to the “Base Color” of the Skeletal Mesh node. The base color texture is already applied to the Material and the Skeletal Mesh assets, for this reason, it has its own slot.

Step6.png (260×1 px, 67 KB)


  1. Finally, the second target must be set up. Create a Texture from the “Target 1” connection of the Texture Interpolate node.

Step7.png (149×386 px, 27 KB)


  1. In the Node Properties tab, select the modified sunburned skin texture.

Step8.png (150×477 px, 14 KB)

In this case, the selected texture is “TextureInterpolation_SunburnedSkin”


  1. Check that the Source Graph tab looks like the image below.

Step9.png (301×1 px, 82 KB)


  1. Compile. In the Preview Instance Properties tab, a slider called Sunburned Skin should have appeared.

Step10A.png (760×535 px, 289 KB)

Move the slider's selector and verify that the interpolation works properly.

Step10B.png (759×551 px, 292 KB)

Last Author
gerard
Last Edited
Fri, Sep 17, 3:54 PM

Event Timeline

laura changed the title from Interpolate-between-textures to Interpolate between two textures.May 29 2020, 11:21 AM
laura created this object.
laura edited the content of this document. (Show Details)
laura edited the content of this document. (Show Details)