Page MenuHomeAnticto

Mutable for Unreal Engine | Texture Layouts
Updated 961 Days AgoPublic

The content discussed in this page is directly related to the Mesh Layout node. More information about the node can be found in its Node Reference page.

As told in the Basic Concepts page, in Mutable, UV layouts of every mesh can be separated and organized into blocks to achieve some rendering, optimization and organization benefits. This page explains three examples of usage with the Mesh Layout node.

The resulting Customizable Object of this example can be found in the Village Demo in Content/HowTo/TextureLayout named "TextureLayout_Object"

Texture and Material merge

Mutable allows different meshes' textures to be merged if they share material. This example shows a simple Customizable Object with a Child Object that adds a mesh and its texture to a base one. The example consists of a yellow and black pillar which can be extended with small pink pillars on the side.

Assets

Assets_1.png (256×740 px, 171 KB)

The base object has its UVs ready to be organized in two blocks

Assets_2.png (256×740 px, 153 KB)

This accessory's UVs will form only one block

All these skeletal meshes share the same material with only a texture parameter that is the color texture map (shown in the middle of the previous images).

Object Structure

The node graph of this example consist of a Base Object with a Child Object. The Child Object uses Extend Material to add a mesh with its texture to the parent.

imagen.png (552×1 px, 138 KB)

This is how the Node Graph looks like.

The Mesh Layout blocks

The Mesh Layout node must be connected to the left connections in a Skeletal Mesh node, in the material that is going to be separated or set in blocks.

In its properties tab, the node allows to set a grid resolution in which to create the blocks. The resolution of the base mesh's Mesh Layout will establish the resolution of all the child meshes of the same Customizable Object hierarchy.

In this example, the base mesh has a resolution of 2x2 and is organized in two blocks. These two blocks were strategically set as the mesh inside one of them will be entirely removed in a future customization.

Blocks_1.png (537×525 px, 100 KB)

In this case, the original texture set in this mesh is 256x256 and the block resolution is 2x2. This means that any block unit of a child mesh will be 128x128.

The following image shows the resulting UV layout if no Child Object is active.

ResultingUV_1.png (747×1 px, 312 KB)

Resulting UV layouts of each material can be displayed by clicking on the "UV" button in the Preview Instance Viewport tab in Mutable editor.

Texture Merge

The Child Object only extends the material of its parent. This means that its mesh is added to the base mesh and its texture is added to the base texture. The block resolution of this child's Mesh Layout is set to 1x1. This 1x1 block will be added to the base blocks.

Blocks_2.png (537×525 px, 50 KB)

In this case, the original texture of this child mesh is 256x256, but as it is set in a 1x1 block, it will be resized to 128x128 when merged with the base object texture. If the texture was already 128x128 no resizing would be applied.

Texture size and block resolution must be planned when creating asset's UV layouts in order to have the most optimized and desired quality and appearence.

The following image shows the resulting UV layout with this Child Object active.

ResultingUV_2.png (747×1 px, 332 KB)

The 1x1 block has been added to the empty spot.

When the number and size of blocks increases (as in the "Bandit_forRPG" character example) Mutable handles the distribution of the resulting merged blocks.

Resulting Textures

The following images show the resulting textures.

ResultingText_1.PNG (256×256 px, 92 KB)

When there is only the base mesh

ResultingText_2.PNG (256×256 px, 88 KB)

When the child mesh is active

Use blocks for mesh removal

Mutable allows mesh removal by selecting blocks in their UV layout. This can be achieved with the Remove Mesh Blocks node.

In this extension of the previous example, a bigger and blue base is added to the yellow pillar. A part of the yellow pillar mesh will be overlapped by the new blue base, so this part will be removed.

Assets

Assets_3.png (256×740 px, 176 KB)

This other accessory's UVs will consist on only one 2x1 block that will replace a block from its parent.

Object Structure

A second Child Object has been added to the example. This child has the same structure as the previous one but with the addition of

imagen.png (765×1 px, 216 KB)

This is how the Node Graph looks like.

How it works

In this case, the child mesh has a Mesh Layout with a resolution of 2x2 and only a 1x2 block.

Blocks_3.png (537×525 px, 78 KB)

One of the two blocks of this child will be placed in the empty space of the base layout and the other will replace the removed mesh of the base mesh.

In addition to the Mesh Layout node, this Child Object has a Remove Mesh Blocks node that refers to the Base Object material. When this is set in the Node Properties tab, the blocks of the base mesh are displayed and they can be selected. The Remove Mesh Blocks node will remove any mesh that is inside a selected block.

RemoveMeshBlocks.png (615×554 px, 112 KB)

In this case, the top-right 1x1 block is selected. This block contains the black base part of the yellow pillar. This part will be removed.

When the Customizable Object is compiled and the blue base Child Object is active, the black base is removed and the blocks of the new blue base are merged to the resulting UV layout.

ResultingUV_3.png (747×1 px, 341 KB)

Resulting textures

The following image shows the resulting texture when the second Child Object is applied.

ResultingText_3.PNG (256×256 px, 105 KB)

Use blocks as masks

Several nodes in Mutable allow to select some parts of the mesh by selecting the needed blocks.

Edit Material node and Texture Project node allows the selection of the parent's material blocks. The selected blocks will be affected by the operation, Unselected blocks won't.

Example with a complex block structure

The following images show the block structure of the Customizable Object example character "Bandit_forRPG".

imagen.png (838×731 px, 421 KB)

Mesh Layout node properties showing the block structure of the character.

Character_1.png (746×1 px, 636 KB)

Parameters of the instance set to default

Character_2.png (746×1 px, 625 KB)

Instance example with its resulting color texture

Character_3.png (746×1 px, 616 KB)

Another instance example with its resulting texture

Last Author
alexei
Last Edited
Feb 10 2021, 2:06 PM

Event Timeline

marc changed the visibility from "All Users" to "Public (No Login Required)".
marc added projects: Restricted Project, Restricted Project.
marc edited the content of this document. (Show Details)
marc edited the content of this document. (Show Details)
marc edited the content of this document. (Show Details)
jordi removed a project: Restricted Project.Jun 16 2020, 6:46 PM