More results...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

More results...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Under Construction
UE Feature: Chaos Cloth Editor (added in UE5.3)

UE5.3 introduced a new ‘Chaos Cloth Editor’.

There is an official tutorial page here (EXTERNAL LINK) however it’s very hard to follow, and includes many steps that aren’t necessary (including re-compiling Unreal Engine from source code).

 

How to make your own clothing with this new technique

STEP 1: ADD ‘METAHUMAN’ BODY IN MARVELOUS DESIGNER

In Marvelous Designer, open up a body dummy for your particular MetaHuman’s body type. There are 18 MetaHuman body types, so you’ll need to find out which one your character is.

YouTuber Daniel Newman (in this video) provided a free download link to all the ‘combined mesh’ MetaHuman body dummies from February 2022 here (EXTERNAL LINK) – but they are NOT the latest MetaHuman bodies – there are from February 2022.

STEP 2: MAKE GARMENT IN MARVELOUS DESIGNER

Make a piece of clothing inside Marvelous Designer, and make sure you have UVs generated inside MD. Make sure the UVs are saved in “0-1 space”.

STEP 3: EXPORT GARMENT AS TWO SEPARATE FBX FILES

Now we need to go through the process of making two separate Marvelous Designer projects for your one garment.

  • In the first project we will make it thicker and more complex, which will a high quality version for final rendering in Unreal. We will then export that ‘render’ garment as a an FBX.
  • Then we will make a second project, which will be a lightweight version for simulation in Unreal. Then we will export the ‘simulation’ garment as an FBX.

FIRST – ‘RENDER’ GARMENT

  • Save your Marvelous Designer project as “*_meshforRender“.
  • You need to then make various changes that prepare it as a high quality ‘renderable’ version of the garment. Select clothing panels in the UV window, and adjust them:
    • Under “Simulation Properties”, change “Particle Distance (mm)” to 12 for a shirt, and 5 for a collar.
    • Set “Add’l thickness – rendering” to 3mm.
  • Export the piece of clothing as an FBX:
    • Go to the FILE menu in Marvelous designer and go EXPORT FBX
    • In the dialogue box that appears, match the settings in this image which are:
      • TURN OFF “select an avatar“.
      • Turn ON single object.
      • Turn ON ‘thick‘ (which will disable the weld options).
      • turn ON unified UV coordinates
      • Set the image size to 2048 pixels
      • Set FILL TEXTURE SEAMS to 5 pixels
      • In the checkbox section for maps, turn them all off except DIFFUSE and NORMAL
      • Make the File Type BINARY and set the FBX SDK version to 2020
      • Click OK
    • Name the file as “*_MeshForRender.fbx

SECOND – ‘SIMULATION’ GARMENT

  • Save your Marvelous Designer project as “*_meshforSim“.
  • You need to then make various changes that prepare it as a ‘simulation’ version of the garment.
    • Under “Simulation Properties“, change “Particle Distance (mm)“, add around 5 or 6mm to each item – so it will be set to 18 for a shirt, and 10mm for a collar.
    • Make sure that “Add’l thickness – rendering” is still set to 3mm.
  • Now you need to export an FBX a second time.
    • Go to the FILE menu in Marvelous designer and go EXPORT FBX
    • In the dialogue box that appears, match the settings in this image which are:
      • TURN OFF “select an avatar“.
      • Turn ON single object.
      • Turn ON ‘thin‘, then turn on ‘weld
      • The rest of the settings stay the same:
        • turn ON unified UV coordinates
        • Set the image size to 2048 pixels
        • Set FILL TEXTURE SEAMS to 5 pixels
        • In the checkbox section for maps, turn them all off except DIFFUSE and NORMAL
        • Make the File Type BINARY and set the FBX SDK version to 2020
      • Click OK
    • Name the file as “*_meshforSim.fbx

STEP 4: OPTIONAL – ADJUST TEXTURES IN SUBSTANCE DESIGNER

You might want to make adjustments to your fabrics. You can do so in various programs, but many people use Substance Designer for this step.

Here (EXTERNAL LINK) is a YouTube video about this topic.

STEP 5: CREATE UNREAL PROJECT

  • Create a new Unreal Editor project (Cinematic, raytracing on, no startup items)
  • Go to EDIT menu > PLUGINS
  • Search for the word “chaos” then enable two plugins: CHAOS CLOTH ASSET and CHAOS CLOTH ASSET EDITOR
  • Restart Unreal Editor

STEP 6: ADD METAHUMAN

  • When it reopens, inside UE5 open QUIXEL BRIDGE and add a MetaHuman to your project
  • In the CONTENT BROWSER, find your MetaHuman’s blueprint and drag it onto the map
  • Click to enable all missing assets and plugins, then restart the Unreal Editor

STEP 7: IMPORT CLOTHING MESHES

  • In the Content Browser, go to ALL>CONTENT, and make a new folder called “MDClothing” and open it
  • Make two new folders – RENDERMESH and SIMMESH.
  • Open the “MDClothing/RENDERMESH” folder, and import your “*_MeshForRender.fbx” file as a static mesh.
  • Open the “MDClothing/SIMMESH” folder, and import your “*_meshforSim.fbx” file as a static mesh.

STEP 8: CREATE CLOTH ASSET & DATAFLOW GRAPH

  • In the “MDClothing” folder, create a new folder called “Cloth Asset” and open it
  • In the content browser, right click and go PHYSICS > CLOTHASSET
  • Double click the new “ChaosClothAsset“, and then click ‘CREATE NEW DATAFLOW‘ and for the location, choose your “CLOTHASSET” folder.
  • A new “Cloth Editor” window will open.
  • In the main editor window, go to the FILE menu, SAVE ALL.

Now you will have two files – a CLOTH ASSET and a DATAFLOW GRAPH for that cloth asset.

STEP 9: START THE DATAFLOW GRAPH

  • Right-click in the Dataflow Graph, open the ‘Cloth’ bellow and select ‘StaticMeshImport’.
  • For the first StaticMeshImport node:
    • Import as Sim Mesh,
    • Toggle off Render Mesh – Set UV Scale to 100 for both UVScale values.
    • Assign the ‘SIM’ static mesh to the available slot.
  • For the second StaticMeshImport:
    • Toggle OFF Import as Sim Mesh,
    • Keep Import as Render Mesh toggled on and keep UVScale to 1.0 value for both.
    • Assign the renderable (LOD0) mesh to the Static Mesh slot.

STEP 10: MERGE CLOTH COLLECTIONS

  • Drop a ‘Merge Cloth Collections’ node onto the graph.
  • Right-Click ‘Add Option Pin’ to add a second Collection to the MergeClothCollections node.
  • Then, wire the two StaticMeshImport nodes.

STEP 11: TRANSFER SKIN WEIGHTS

  • Since we’ve imported static meshes and not skeletal meshes there’s no skin weight information for our shirt.  We need to transfer the skin weights from the skeletalMesh (SKM_Quinn_CLOTH, if using the example files) we are using to drive the unskinned simulation mesh.
  • There are two skin weight transfer algorithms currently used:

    • ‘Inpaint Weights’ (Default)
    • ‘Closest Point on Surface’

    The ‘Inpaint Weights’ algorithm can use a weight map which we will explain later.  Also, a more detailed simulation mesh can be piped into the Transfer Weights Collection in order to get a smoother weight transfer between the skeletalMesh and simulation mesh.

  • You may receive this warning after connecting the TransferSkinWeights node.  We’ll fix this next.

STEP 12: CLOTH ASSET TERMINAL

  • As the message states, we need to have a valid ClothAssetTerminal node to create a usable Cloth Asset.
  • Add a Cloth Asset Terminal node by right-clicking in the Dataflow graph and selecting the ClothAssetTerminal.
  • Then wire it to the graph, making sure it is always the last node in your Dataflow graph.  The ClothAssetTerminal node takes the result of the Dataflow graph and places it in the ClothAsset.
  • The Cloth Asset Terminal node (Detail Panel) displays the connection to the Dataflow Asset as well as Materials, Skeleton, Physics Asset (Collision), LODs and the Cloth (Proxy) Deformer.

 

The next steps will set up the simulation configuration parameters as well as show the process for adding the Max Distance paint Map.  Notice we use the term maps and not masks now.

SIMULATION CONFIGS

The Property panel of the Chaos cloth simulation parameters should be familiar to you if you’ve worked with the legacy cloth editor in UE 5.x.  When working with the Panel Editor and Dataflow, we actually recommend that you use separate configs and NOT the all-in-one ‘SimulationDefaultConfig’ node.

Important!

The difference between using separate configs and the all-in-one has to do with how they treat MaxDistance and use weight maps.  The all-in-one, SimulationDefaultConfig node, has to maintain backwards compatibility with the legacy editor, so that’s why it still exists.

However, since we’ve moved to weight maps using a 0 to 1 value and not masks in the new Panel Cloth Editor, (which for Max Distance can require a number in the hundreds or more in the legacy editor) we feel it is easier to understand by using more verbose config nodes during your Dataflow setup. This will also help with reusing various weight maps, all of which will have the 0-1 weight value.

 

STEP 13: Paint/Add Weight Map – Max Distance

Similar to the Legacy Cloth Editor – We need to have a Max Distance in order to let Chaos solver know how far our cloth can travel.

As mentioned previously, the difference is this is a 0-1 scalar paint value.  We will set the distance on a separate config node we’ll demonstrate later.

To paint, first Select your cloth in the 3D Render Viewport.

Note: We have our ‘TransferSkinWeights’ node selected in the Dataflow Graph.  This will cause our new node to be created after the selected Dataflow node.

  • On the left side menu you’ll see the MapPnt button.
  • Press to activate.  The paint tool becomes active and the 2D/3D Panel Editor is ready to paint your weight map.
  • First, add ‘MaxDistance’ (no quotes, name is important!) to the Name slot under Update Node
  • Keep the attribute value at 1.0 and Strength at 1.0.  For now, we’ll keep it very simple and just use the Brush Action.  Feel free to adjust Brush Size based on the size/scale of your simulation mesh.
  • For now, just paint all of the panels with a value of ‘1’.  Similar to using the Max Distance Mask in the legacy cloth editor, this effectively makes every vert dynamic.  You can Flood Fill Current, too, but then we wouldn’t be able to show you the brush tools!
  • Again, keeping this very simple (the paint tools are still in progress), we want to paint ‘0’ values on areas which will hold or ‘pin’ the cloth in place.
  • With a smaller brush size and attribute Value set to 0, we can paint the collar (don’t forget painting all of your panels!) and top of shoulders to lock in place.  With a ‘0’ value we are effectively following the skinned position which was assigned using the ‘TransferSkinWeights’ node.
  • For brevity, we’ll assume this is exactly what we need. Feel free to use Brush Mode: Smooth to soften up the paint edges between the two extremes. Next step is to commit the paint using the ‘Accept’ button at the bottom of the panel editor.

After pressing Accept, you’ll notice a new node created in the Dataflow Graph with our named ‘MaxDistance’ value set.

STEP 14: 3D Render Viewport

At this point, you may have noticed that your cloth has dropped and is now stretching down in the 3D Render Viewport.  This is a good time to familiarize yourself with some of the simulation controls until we get a few more necessary nodes into the Dataflow graph.

From left to right…

  • Toggle Preview Wireframe – Display/toggle wireframe of cloth asset
  • Hard Reset Simulation –  Rebuilds the component context (and the sim) from the ground up
  • Soft Reset Simulation – Teleports the cloth vertices to their skinned positions and zeros out the velocities. So Soft is more like rewind to time=0 and a Hard Reset will scrap everything and rebuild it.
  • Toggle Simulation Suspended – Will toggle off/on cloth simulation

Reset Cloth

To reset your dropped cloth, first ‘Toggle Simulation Suspended’ (Button on far right) and then press the ‘Hard Reset Simulation’ button. (second from left)  The cloth should reset and be deactivated and look similar to the picture above.

More Paint Map Options

When you have a weight map (AddWeightMap_*) created, you can select it at any time and edit your paint map.

Note: You can also switch from 2D panels to 3D to visualize as well as paint on.

STEP 15: Simulation MaxDistanceConfig

NEW – As mentioned at the beginning of this doc, weight maps in the new Chaos Panel Editor are reusable. We created a ‘MaxDistance’ weight map in the previous step and now we can add that map to a MaxDistanceConfig node. We can theoretically apply the same map to any other config, too.

This tutorial will just focus on the SimulationMaxDistanceConfig. The Example Content may have a few more simple weight maps like Backstop Distance and Backstop Radius, but they are not necessary for the tutorial.

 

Add a SimulationMaxDistanceConfig node after the AddWeightMap node. You will need to wire up the connection between the AddWeightMap_* and ClothAssetTerminal Nodes.

In the Max Distance Properties window take note of the Low Weight/High Weight values. These values were painted by hand as hard-coded masks in the legacy editor.

By using a 0-1 scalar weight map, our Low Weight Value of ‘0’ is mapped to our Zero paint value of the MaxDistance AddWeightMap. The High Weight of ‘100’ is mapped to our paint value of 1 on the MaxDistance AddWeightMap. This allows us to reuse our MaxDistance weight map of 0-1 on any other simulation config property, too.

 

Note: The ‘Is Animatable’ toggle is a future feature not currently supported, but demonstrates how we intend to make maps more flexible at runtime in the future.

Finally, connect the ‘Name’ from you AddWeightMap_* node to the SimulationMaxDistanceConfig_* node.

Notice how the Weight Map Override on the node becomes populated with the Max Distance Weight Map. This allows you to effectively name a weight map any name you desire and then you can plug that weight map into any number of Config nodes!

STEP 16: Additional Configs

We’ll quickly add more simulation configs in this step. Add and wire these nodes up in sequence in your Dataflow graph.

  • SimulationMassConfig
    • Mass Mode should be set to DENSITY. Density should be set to 2 which is a curtain.
      • Melton Wool 0.7
      • Heavy leather 0.6
      • Polyurethane 0.5
      • Denim 0.4
      • Light leather 0.3
      • Cotton 0.2
      • Silk 0.1
  • SimulationPBDBendingSpringConfig (default is 1.0 to 1.0)
  • SimulationPBDAreaSpringConfig (default is 1.0 to 1.0)
  • SimulationPBDEdgeSpringConfig (default is 1.0 to 1.0)
  • SimulationAerodynamicsConfig
    • The defaults for this are: FLUID DENSITY 1.225, DRAG 0.035 to 1, LIFT 0.035 to 1 and gravity scale 1
  • SimulationDampingConfig
    • The defaults for this are DAMPING COEFFICIENT 0.01 and LOCAL DAMPING COEFFICIENT 0.0
  • Simulation Solver Config
    4 for Iteration Count, 10 Max iteration count, 3 for Subdivision Count.
  • Set SimulationCollisionConfig
    • The defaults for this are COLLISION THICKNESS 1.0, FRICTION COEFFICIENT 0.8, and CCD OFF
  •  SetPhysicsAsset
    • Choose the metahuman body
  • Then assign your PhysicsAsset. We’re using a modified version of the Mannequin (Quinn) with more collisions added to the torso region as well as some tapered cylinders in the arms.

STEP 17: Final Graph

Your final graph should more or less look like this.

We’ve added a few more weight maps and configs for the Backstop and Backstop Radius to show how you can organize your graph, but they are not necessary for this example.

STEP 18: Skeletal Mesh and Animation Asset in Preview Scene

We’ll add our Mannequin (Quinn) and animation to visualize the motion in our 3D Render viewport of the Panel Cloth Editor.

  • Switch tabs from Details Panel to Preview Scene Details in the panel to the right of the 3D Render viewport
  • Assign the ‘SKM_Quinn_Cloth SkelMesh’ to the ‘Skeletal Mesh Asset’ slot and an animation for the skeleton in the ‘Animation Asset’ slot.
  • The 3D viewport now has a timeline bar revealed to use for playing/scrubbing animation. You may have to unpause the Cloth simulation and Hard Reset your cloth. (To reset your dropped cloth, first ‘Toggle Simulation Suspended’ (Button on far right) and then press the ‘Hard Reset Simulation’ button. (second from left)  The cloth should reset and be deactivated.)
  • Make sure you save your ChaosClothAsset and Dataflow Graph as needed.

STEP 19: Assign Cloth Asset in Editor/Blueprint

Since the new cloth component has been extracted from the SkeletalMesh component, to add your cloth setup in the editor it’s just a matter of adding your created cloth component and assigning it in the Details panel.

  • Using the Mannequin (Quinn), from the ExampleContent/Cloth/Meshes directory, first drag the skeletalMesh asset into the editor. Zero out transforms to make it easier to visualize and then frame the asset in the editor..
  • Select the ‘SKM_Quinn_CLOTH’ (Instance), then press the +Add button and type ‘cloth’ to search for the ‘Chaos Cloth Component’ and select to add.
  • That will add the ChaosClothComponent to the SkeletalMesh. Make sure the ChaosClothComponent is parented to the SkeletalMeshComponent. If your character is created with a Blueprint, this works in a similar manner.
  • With ChaosClothAsset selected, assign your saved ChaosClothAsset to the ClothAsset slot in the Details Panel.
  • Add an animation asset (Use Animation Asset) to the SkeletalMeshComponent of the Mannequin (Quinn)
  • Note: When opening/re-opening your level, if you do NOT see the cloth visible in the editor open the ClothAsset in the Panel Cloth Editor and resave your Dataflow graph. This can happen if your Cloth Asset is saved in an old, invalid state and you will need to rerun the dataflow evaluation and save the asset again.
  • You may see a similar error log message to this : Warning: Invalid Cloth Collection found at LOD 0 while loading Cloth Asset ChaosClothAsset /Game/ExampleContent/Cloth/Cloth_Asset/CA_Longsleeve_shirt.CA_Longsleeve_shirt
  • Press the green ‘Play’ button on the top toolbar in the Editor to see the final Cloth Asset in motion.

 

Conclusion

The Panel Cloth editor is Experimental – It’s the basis for future cloth in engine, but subject to change
Legacy cloth editor not going away, but no future development planned
Runtime Blueprints are NOT exposed – Coming in a future release
Proxy Deformer is not exposed, however multiple materials can now be deformed by one simulation mesh
Various missing items to still be added: Skin Weight Profiles, Copy/Paste, Node encapsulation, HUD items, etc.

 

 

 

Official release information from Epic

Panel Cloth Editor” (new feature) aka “Chaos Cloth Editor Foundation (Experimental)”
See the Panel Cloth Editor Overview for more information about this feature.
Chaos Cloth for UE 5.3 includes the addition of an experimental Cloth Editor.The new Cloth Editor enables having multiple garments per character and the same garment across multiple characters in the future. It also provides panel-based workflows which will make it easier to set up and modify clothing setups. It includes the following features:

 

New base class editor for character physics (cloth/flesh).

First phase of panel-based editor with the Dataflow graph.

Non-destructive workflow.

Cloth is extracted from the skeletal mesh as a separate component.

Extra collision support.

New Skin Weight Transfer tool.

Masks are now replaced by reusable weight maps.

Multiple Materials can be driven by single sim mesh support.

 

 

MORE NOTES

Unreal 5.3 has a new way of simulating clothes inside Unreal Engine, and that’s with something called the “Panel Cloth Editor“.

Let’s go through how you can set it up, using the example files from the official tutorial page.

PROCESS OF TRYING IT

1. Launch unreal 5.3
2. In the new project window, click GAME and then 3rd person.
3. Turn on STARTER CONTENT.
4. Name your project then click CREATE.
5. When the engine opens, go to the top EDIT menu, then click PLUGINS.
6. Type the word CHAOS, then click to enable the CHAOS CLOTH ASSET plugin. Now click to enable the CHAOS CLOTH ASSET EDITOR plugin.
7. It will tell you to restart, but dismiss that warning and close the plugins window.
8. In the content browser, go the ALL directory, then right click CONTENT and choose SHOW IN EXPLORER. You’ll use this a bit later on.
9. Ok so quit Unreal Editor entirely.
10. Now in a web browser, go to this address and download the example content file.
https://dev.epicgames.com/community/learning/tutorials/r287/unreal-engine-panel-cloth-example-files-5-3
11. Unzip the example content file, and you’ll see a folder called “ExampleContent”. Copy this folder. Then go to your Unreal Project’s Content folder and open it, and then paste the “ExampleContent” folder in there.
12. Now go back a level in windows explorer, and launch your Unreal Project again.
13. In the content browser, open “ExampleContent”, “Cloth”, then “Maps”.
14. Double click to open the “Quinn_Cloth_Map”.
15. In the top menu, click to play your scene. Now if you move around the scene you can see that the tshirt on the male mannequin is animated.
16. Press ESCAPE on the keyboard to stop the scene playing.

 





LATEST UPDATES






© Seabridge Films 2024. No warranties are made for the accuracy of content on this website. For educational purposes only. Please do not reproduce, in whole or in part, any resources in this website without express written permission.

Use of code from this website, including scripts and Python-based plugins, is at your own risk.