Project

General

Profile

Project textures

What is the HowTo about?

Mutable allows to project textures on materials through the Texture Project node. This might be very useful to create tattoos, wounds, dirt, images on clothes... Texture Project nodes are ruled by Projector values, which can be Projector Constants or Projector Parameters. The Projector Constant node allows the developer to set the position/rotation/scale of the image projection to a fixed value (not editable by the end-user). The Projector Parameter allows the end-user to set the pos/rot/sca of the projection by adjusting the widget in the viewport.

This HowTo shows 2 examples of Projectors. The simplest one projects a texture on a shirt, without toggleable or editable parameters. The second one makes the projection toggleable and allows to select between two different textures.

Constant Projector

In this example we'll create a basic projection of a texture on the shirt of a character.

What assets are needed?

All the assets from the basic customizable character HowTo.

All the assets to create a Shirt, as seen in the remove mesh HowTo.

A texture with the image to be projected with its alpha channel (if needed). In this example, we'll use this Fleur-de-lis texture.

The object of this example can be found as Bandit_Projector_Static in MutableExamples/HowTo

Steps

1- Create a basic Customizable Object with the base body and a Child Object inside it for the shirt.


2 - Create a Texture Project node. Create a Project Constant node and connect it to the Texture Project node. Import the texture for the projection and drag it inside the object. Connect the Texture to the 'Image 0' connection in the Texture Project node.

This will create the projection with the texture we've set and with the values from the Projector Constant node.


3 - Connect the skeletal mesh of the shirt to the Texture Project node to set the mesh that will be affected by the projection.


4 - Create a Texture Layer node and add a new Layer inside of it. We are blending the projected image from the Texture Project node with the base color of the shirt. Set the blending effect of the new layer to Modulate (or whathever you need). Import/Drag and drop the base color texture from the shirt and connect it to the Texture Layer. Connect the Texture Project node to the 'Layer 0' of the Texture Layer. In order to mask the texture, we can get the Alpha channel from the projected image. To do that, create a Texture To Channels node and connect it to the Texture Project node. Connect the alpha channel (A) to the 'Mask 0' connection in the Texture Layer. Connect the Texture Layer to the shirt Material's color paramter.

The graph should look similar to this:


6 - When the Projector Constant node is selected, you can edit the pos/rot/sca of the projection with the widget in the Preview Viewport tab. Save and compile.

Selectable Constant Projector

In this example, we'll expand the previous example of projecting textures. We'll create a Group and a Child Object inside the shirt object in order to make the projection toggleable. To make this, we'll need to edit the shirt material through an Edit Material node. Also, we'll create a Texture Switch with an Enum Parameter in order to make the two different textures selectable.

What assets are needed?

All the assets from the basic customizable character HowTo.

All the assets to create a Shirt, as seen in the remove mesh HowTo.

Two different textures with the images to be projected with their alpha channel (if needed). In this example, we'll use these two textures.

  

The object of this example can be found as Bandit_Projectors_Static_Selectable in MutableExamples/HowTo

Steps

1- Create a Group node and set it as Toggle. Connect it to the shirt object. Create a Child Object and connect it to the new group.


2- Create an Edit Material node connected to the Child Object. Select the parent's material (the shirt material) and select all the blocks from this material that will be affected by the projection (in this case, we've selected all the shirt blocks).


3- Connect the Texture Project node to the Color parameter of the Edit Material node. Get the alpha channel of the projection with the Texture To Channels node and connect it to the Color Mask connection in the Edit Material node.


4- Create a Projector Constant and connect it to the Texture Project node.


5- To set two selectable textures, (from the previous example) replace the texture node connected to the 'Image 0' connection in the Texture Project node for a Texture Switch node. Add 2 new elements inside the Texture Switch node and connect the two Textures to each one. Create an Enum Parameter node and connect it to the Switch Parameter in the Texture Switch node. Name the Enum Parameter and add 2 new elements inside of it. Name the two elements as they will be the selectable options in the viewport tab.

The whole node graph should look like this:


6 - Save and compile. With the Projector Constant node selected, you can adjust the pos/rot/sca of the projection in the viewport. Now, the projection is toggleable and, when active, two textures can be selected.

Projector Parameter

The previous examples are made with Projector Constant values that can be edited by the developers in the Customizable Object. There is a way to make the projector editable in the Object Instance and, therefore, accessible to the player in the game. This can be done with Projector Parameters.

The object of this example can be found as Bandit_Projector_Movable in MutableExamples/HowTo

Steps

We'll take the same graph structure as the previous example, but making the projector affect directly the base mesh (the body).

1 - From the basic body character, add a toggleable Group and a Child Object. Create an Edit Material node to edit the body material and a Texture Project node as in the previous example. Connect the Texture to be projected in the Texture Project node. Create a Projector Parameter node and connect it to the Texture Project node.

The graph should look like this:


2 - Name the parameter. Save and compile. Now, when the Child Object is active in the Instance Viewport, a 3D widget can be adjusted on the character in real-time.

Adding angle fading

Another option of the Texture Project node, available in both Constant and Parameter options, is to set an angle range in the mesh where the projection is done or not. This is useful when tricky angles of the projection affect side or back parts of the mesh.

Steps

Having a functioning graph structure with a Texture Project:

1 - Create a Float Constant node and connect it to the 'Fade Start Angle' connection in the Texture Project node. Set the value of the Float to 25.


2 - Create another Float Constant node and connect it to the 'Fade End Angle' connection in the Texture Project node. Set the value of the Float to 45.


3 - Save and compile. The angle range will set when the projection starts to fade off:

You can adjust the fading angles to your needs.

Cylindrical Projector

Texture projectors have two ways of projecting onto the model’s geometry. So far we’ve used the planar projection type, but there’s also the option to use cylindrical projection.

What assets are needed?

All the assets from the basic customizable character HowTo.

A texture with the image to be projected with its alpha channel (if needed). In this example, we'll use this Santiago cross texture.

The object of this example can be found as Bandit_Projector_Cylincrical in MutableExamples/HowTo

Steps

We’ll show how to make a cylindrical projector and how to automatically adjust it to a character's skeleton bone.

1 - In the Mutable Editor, select the Projector Parameter Node, and in the Graph Node Properties, select the Cylindrical Projection type in the Projection Type drop down list.


 

2 - The gizmo of the projector will turn into a cylinder with two orange stripes.

 

The orange stripes describe the projection angle, i.e. the span around the cylinder surface where the texture will be projected onto the geometry inside the cylinder volume. The projection angle starts at the positive y axis arrow (green arrow) and spans at both sides:


 

3 - Set the projection value to 120 degrees, and now, with the help of the gizmo, position the cylindrical projector around the left arm of the character:


 

4 - Press the Compile button, the projected texture will show up around the character’s arm:


 

5 - To avoid most of the work of step 3, a snap to bone functionality is available in the Projector Parameter Graph Node Details tab: by selecting from the Projector Bone drop-down list the bone you want the projector to match, the projector gizmo will match that bone’s transform: