Cloth Physics + Morph Targets

Why use morph targets on cloth assets?

The traditional way to handle something like "shape-changing cloth" on a skinned mesh is to use bone manipulations via translating or scaling bones. This is a straightforward method since it requires just a few nodes, and if your character creator already uses this method to change character proportions, this guide may be unnecessary.

However, in many cases it's desirable to use morph targets to customize character shapes, rather than relying on bone changes alone. This is because morph targets allow for precise adjustment on a per-vertex basis, which can be tricky and cumbersome to accomplish with bone manipulations.

This method allows you to use cloth simulation and enables the use of morph targets on the simulating cloth. It's important to understand that morph targets are handled by the GPU, and collisions are handled by the CPU. Therefore, in order to maintain accurate collisions when a morph target is applied, a combination of morph targets and bone manipulations must be used. This is explained on the Collisions page.

Solution

Using deformer graph we can enable morph targets on simulating cloth assets. The idea is to read the morph delta data from a skinned mesh with morph targets, and apply the offset to a simulating cloth asset. Naturally this will require two components: A component to read from (the morphed mesh), and a component to write to (the simulating mesh).

This guide uses cloth assets from the experimental Panel Cloth Editor plugin. It will also work with the 'legacy' cloth paint tool. I prefer the new cloth assets as they allow for tighter control over simulation params as well as the option to add kinematic colliders for more accurate collisions.

After you enable the chaos cloth asset and editor plugins, the first thing you need is a skinned mesh with morph targets:

Next you'll need to create a Cloth Asset for use with the panel cloth plugin. If you're not familiar with the new panel cloth workflow, read the Epic page.

Add a SkeletalMeshImport node and select your mesh:

Then add the following nodes and paint the simulation area:

After that you can add whichever simulation config nodes you want to use. Refer to Epic documentation or the default cloth asset as an example on how these can be configured. Ensure your data flow graph contains a "Set Physics Asset" node so we get collisions from the character's physics asset (create and set one up with colliders if you don't have one already).

Once you have the cloth simulating in the preview window you can proceed.

Now that we have a skinned mesh with morphs and a simulating cloth asset, we can apply the deformer graph. For this to work we need a skeletal mesh component and cloth asset component added to the character blueprint:

Ensure the SkeletalMesh component has its leader pose set to Mesh, which is typically done in the construction script, or by adding it dynamically at runtime when an item is equipped (I prefer this method, in C++).

We don't want the skeletal mesh component visible, since it's only there to read morph data from. However if you disable its visibility, it won't render in the scene, and therefore the deformer graph can't read from it. The best solution is to apply a masked material with an opacity value of 0:

If your clothing item has multiple material slots, apply the transparent masked material to all of them

Next you need to assign the deformer graph to the cloth component. You can download my ClothMorphSimple graph here:

13.4 KB file on MEGA

Note the graph is for UE 5.5+, versions prior to that will need to download 5.5 and backport the graph by creating a new one in the previous version and copying nodes.

Once you import the graph, apply it here:

Open the graph and take note of the component binding tag:

This tag is how the deformer graph knows which component to read from. Naturally, we need to assign this tag to our skeletal mesh component, since that's what we're reading the morph data from:

Next, in the deformer graph, there is a node "ColorInfluence." It reads a vertex color channel from the skeletal mesh, and that's how it knows where to apply the cloth/morph blend.

The kernel reads from the red vertex color channel, specified by .r. Other acceptable values are .g, .b, and .w for alpha channel

The graph is reading from the red vertex color channel. Therefore we need to apply red paint to the skeletal mesh's vertex color attributes.

Add a new vertex color attribute on your mesh and paint it red. The gradient should roughly match the cloth weight you painted in either the cloth asset editor or the legacy cloth paint tool:

Here the vertex color is added to the red channel in Blender using the Vertex Color Master addon linear gradient tool. You can also add vertex paint using the UE editor's mesh paint tools, however as of 5.5, no in-editor gradient tool is available for vertex painting. I strongly recommend your vertex paint consist of a smooth gradient, otherwise the end result may have noticeably hard edges.

After you've added the vertex paint, re-import your mesh. Confirm the paint was imported correctly by enabling Show > Advanced > Vertex Colors in the skeletal mesh asset viewer:

Now that the vertex color has been added, you're done! Simply add the mesh to the skeletal mesh component in BP_Character, ensure your cloth asset is selected on the chaos cloth component, and you're good to go. Apply a morph and watch the simulating cloth update to match.