SecondLive
Search
K
Comment on page

Specifications for Clothing Blank Template Designs

1. Prerequisites

To fully understand this guide and create clothing blank templates, ensure you have the following knowledge:
  • Art: This document uses 3ds Max as an example; for other 3D software like Maya or Blender, please make comparisons accordingly.
    • 3D modeling, UV unwrapping, texture painting
    • Rigging, skinning
    • Exporting art assets
  • Unity:
    • Basic operations, importing packages, adding objects, adding script components, creating prefabs, adjusting resource properties
    • Adding materials, selecting shaders, adjusting material properties to meet artistic requirements, etc.
    • Properly packaging all prepared resources
This guide covers the entire process for creating clothing blank templates. Properly submitted clothing should:
  • Follow body movements without clipping;
  • Adjust with base model's body shape without clipping;
  • Allow players to draw textures;
  • Have movable parts (like ribbons and skirt hems) performing realistic physics movements.

2. Modelling

  • No more than 5,000 Tris; the 3D max unit setup is shown below:
  • Base model reference:
Body and Head.zip
6MB
Binary
  • Create the clothing based on the provided base model in A-Pose
Content: Create models and map UV of clothes, hairstyles, and accessories for the characters based on their nude models. The designs should reflect the ideas of the original drawings.
Principles: Models should reproduce character settings, including physical features, personality, and equipment feel. Ensure proper structure, neat topology, and basic animation compatibility.
To achieve the best results, maintain consistent topology for inner and outer models to prevent animation issues, and follow the base model's topology at the waist.
  • While creating clothing components, pay special attention to natural and reasonable connections between sections, avoiding intersections, especially considering mix-and-match possibilities for tops and bottoms.
(Tops and bottoms connections in a single style)
(Mix-and-match connections)
  • Voluminous pleats and folds should be reflected in the outline.
  • The cross sections of models need to be sealed to prevent clipping-through errors in the animation. Sealing is particularly important when:
    a. The model is thick in volume;
    b. The model is prone to cause the clipping-through;
  • UV unwrapping and layout rules:
  • Consider model splitting rules and ease of player drawing during UV unwrapping.
  • Maximize space usage and minimize seams by splitting UVs into larger pieces. Keep UVs flat to prevent normal flipping. Orient UVs vertically and not upside-down. Ensure model and UV directions match for easier player texture drawing. Avoid overlapping UVs.
  • Straighten edges of UVs that require decorative borders and seams as much as possible.
  • Straighten edges as much as possible.
  • Hide seams—place seams at object's distinct bends or inconspicuous areas.
  • When arranging UVs, ensure even distribution (uniform checkerboard size), and allocate UV precision evenly and reasonably. Avoid stretching as much as possible.
  • The axis of the model is (90, 0, 0) in the World space. Please refer to the figure below:
  • Naming FBX file and model mesh must follow these rules:
    • Names must only contain English letters, numbers, and underscores; no other special characters.
    • The name is divided into four parts by underscores: avatar type, clothing type, clothing name, and clothing number.
    Avatar type: F for ACG style females, M for ACG style males, WF for Realistic style females, WM for Realistic style males, and Ani for Bipedal style.
    Clothing type: Upper for tops, Lower for bottoms, Shoes for footwear, Gloves for gloves.
    Clothing name: Self-named.
    Clothing number: Self-assigned.
For example, an ACG male's top can be named as: M_Upper_shirt_01.
  • Since clothes should partly cover base models, special processing of materials and textures will be needed:
    • If you use toony materials, proceed with normal production
    • If using PBR materials, add an extra piece (preferably inside the model) for masking material. Use multi-dimensional sub-materials for the model, ensuring the added piece has a material index of 1, and the actual model material has an index of 2, as shown in the diagram:

3. Texture Creation

You need to create four types of textures (all in .png format)
Sample files (including required textures and FBX files)
F_Upper_Ugc_016_02.rar
617KB
Binary
  • For textures with the same naming as prefab, like M_Shoes_Ugc_009_01, draw the shadows and structure of the base model. Keep layers separate in the PSD file, retaining gradients or shadows with transparency on individual layers. This texture is used on the clothing display page.
  • For textures with the _AO suffix, like M_Shoes_Ugc_009_01_AO, draw layers with transparency from the previous texture, including shadows and structures. Note that dark areas should be drawn with transparent black, while light areas should be transparent, not white. (The texture should only have transparent black, and the area outside the UV frame must be pixel-free.) This texture will be overlaid on player-created textures, adding volume and detail.
  • For textures with suffixes like _1, _2 added to the prefab name, e.g., M_Shoes_Ugc_009_01_01, M_Shoes_Ugc_009_01_02, these correspond to segmented model textures. No need to draw, just fill the corresponding UV area with white. (Keep areas outside the UV frame transparent and pixel-free.) Ensure the texture names match their corresponding segmented models.
  • Textures with the _mask suffix are clothing mask textures, used to remove covered body parts and prevent clipping.
Creation Method:
a. Body: Enter polygon selection mode, select the body parts completely covered by clothing (ensure they are fully covered, as these parts will become hollow when wearing the clothing, selecting too much may expose hollow parts), as shown in the image:
b. Separate these body parts into a new object, select the new object, apply the UV unwrapping command, open the UV editor, and enter UV editing mode. See the image below:
c. Click Tools->Render UVW Template, in the popped-up Render UV window, set width and height both to 512, choose Solid for Mode, then click Render UV Template, and save. See the image below:
d. Open the generated image in Photoshop, remove (transparent) areas with content, and fill the rest with black (opaque), as shown in the image. Save and name the file as: clothing_name_mask.png

4. Skinning/ Adding Slot Bones

  • Clothing such as skirts or ribbons that require additional bones should have extra bones added as usual, and for their naming rules, please refer to “Clothing/Accessory Bones Naming Rules” in the Reference for Naming Bone and Slot Bone . If not necessary, use existing base model bones for skinning and avoid creating new ones.
  • Extra bones for skirts, ribbons, etc., must be linked to biped bones, not body adjustment bones, to avoid unexpected deformations when adjusting body shapes.
  • To prevent clipping, link skirt bones to thigh or calf bones and allocate less weight to them during skinning to reduce swing range.
  • See the diagram below for bone layout and naming of a dress, with three columns of four bones each linked to the thigh bone. For example, Thigh → Dress_1_F → Dress_1_C_1 → Dress_1_C_2 → Dress_1_C_3.
  • For short skirts, consider skipping extra bones and skinning to the thigh bone.
  • Compare the clothing skinning carefully to the base model, using skin wrapping if necessary to inherit the base model's skinning. Include the adjustment bones in the base model when skinning clothing to ensure it adjusts with the body during shape adjustments.
  • As in the case of skinning over base models, each model vertex is affected by up to four bones;
  • The skinning bone list only includes bones involved in skinning. Irrelevant bones are omitted.
  • For accessory, the model won’t deform as the character animates, thus there is only the need for adding slot bones and no need for skinning. The details are as below:
    • The type of the slot bone is “Bone”, then, the slot bone should be named exclusively based on accessory placing locations and the names shall not be changed. Please refer to the Reference for Naming Bone and Slot Bone, e.g. the slot bone name for head accessory below is fixed as “Head_node”:
  • The axis of the slot bone is (90, 0, 0) in the World space. Please refer to the figure below:

5. Model Separation

  • Model separation does not require skinning.
  • Separation principle for tops: divide the body part into front and back blocks.
Split sleeves into left and right blocks.
Separate collars, hoods, or other decorative structures individually.
  • Separation principle for bottoms: divide the bottom into front and back blocks.
  • Shoe separation principle: each part should be divided into left and right blocks and correspond to each other. (Note that UVs should not overlap either.)
After separation, mesh names in Max and exported FBX files should match their corresponding texture names.

6. Resource Export

  • When exporting, only export the model and the bones or slot bones that are involved in skinning, and do not export any other elements. Do not select the option to export animations.
  • FBX files should also be exported for separated models (FBX files for separated models do not include skinning).
  • When exporting, the FBX file name should be the same as the model and mesh names.

7. Resource Import and Making a Prefab

  • Open Unity and build a new project. Import the BasicModel.unitypackage below containing necessary scripts and shaders, then import clothes resources concerned. Note that the Unity should be 2021.2.9 version. When importing clothing resources, make sure to check the "Read/Write" for both the model and texture.
BasicModel.unitypackage
807KB
Binary
Instructions for using BasicModel.unitypackage:
  1. 1.
    Install the Jobs package in the Package Manager using the following URL: com.unity.jobs.
  2. 2.
    This package includes:
    a) the MToonClothing and MToon shaders with accompanying scripts;
    b) the DIYSpringBoneInfos script for saving spring bone data and its related scripts.
  • Prefab 1: The prefab name is the same as the fbx name, such as F_Upper_Ugc_013_01 (need to be exported with skin)
  • Prefab 2: The prefab name with the suffix _A, such as F_Upper_Ugc_013_01_A, contains the FBX exported from the disassembled model (F_Upper_Ugc_013_01_01, F_Upper_Ugc_013_01_02) and does not include skin. Unpack and remove Mesh Renderer from Component, then add Mesh Collider. (This prefab serves to pick up the disassembled model.)
  • Prefab 3: This prefab should only be created when the clothing contains spring bone components. The contents of the prefab are identical to Prefab 1, but with the suffix "_B" added to the name. For example, F_Upper_Ugc_013_01_B.
  • Material: Currently we only support two materials: toony material MToon (Instructions for MToon Shader) and PBR material GLTF (Instructions for PBR Shader)
    • If you use toony material, no extra processing is required. Just pay attention to the texture for masking the body;
    • If you use PBR material, make sure the first layer in your material slot is for the masking material. Subsequent layers in the slot are for the materials of the model. Please refer to the figure below:
Element 0 is for placing the masking material. Use MToonClothing shader. Select Cutout for Rendering Type, Back for Cull Mode and the masking texture you made for Clothing Mask for body (please refer to our Instructions for MToon Shader). Set Cutoff at 1. All other attributes can be set as default. Please refer to the figure below:
Element 1 and all following materials are used to place the PBR material of the actual clothes.

8. Adding Ribbon Spring Bones

Add this component to clothing with dynamically simulated bone ribbons, only in Prefab 1.
  • Add an empty GameObject to the prefab, rename it SpringBoneInfo, and then add DIY Spring Bone Info Script;
  • After completing the script, create ribbons groups according to your desired effects (e.g., the stiffness force, gravity power, gravity dir and drag force, etc);
The clothes in the figure above have two groups of ribbons with different effects. Lower_1_F~Lower_6_F have the same softness, gravity, and drag force effects. They are softer and have a physical effect that closely resembles a piece of fabric. Lower_7_F and Lower_8_F, on the other hand, are stiffer, with a physical effect closer to springs.
  • Detailed attribute description:
    • Stiffness Force: stiffness
    • Gravity Power: gravity size
    • Gravity Dir: gravity direction
    • Drag Force: damping
    • Root Bone Names: root bone name
    • Hit Radius: collider radius
    • Collider Group Types: the body parts involved in the collision
    • Update Type: generally keep Late Update
  • After adding the component, test with common animations to ensure the desired ribbon effect and avoid clipping.

9. Making Follow-up Prefab

  • Add a camera center point to the model
    • When the model is displayed in Gobeti, it will be shown respectively on the pages for preview, edit, and icon capture, as shown in the figure below:
  • At this moment, the camera will automatically search for and align the preset center points in the model for shooting, so all models need to have this center point;
  • Ways for adding center points and rules for naming them:
    a. Put it in【Prefab】as shown in the figure below;
b. Create an empty GameObject in【Prefab】and rename it “UGCCenterPoint”;
c. Move the “UGCCenterPoint” to the center of the model.

10. Clothing Icon Rendering

  • Render icons in the engine with a transparent background, 300x300 pixels, and prefix "icon_".
  • Refer to below example:
icon_F_Upper_Ugc_018_05.png
icon_F_Upper_Ugc_018_05.png
24KB
Image
Rendering Tool:
ScreenShotTaker.zip
2KB
Binary
Usage instructions:
  • After extraction, place it in the Assets directory with the following structure:
  • Then, in the Unity toolbar, select Tools -> Instant High-Res Screenshot, as shown below:
  • Set width and height to 300*300, select a Save Path, choose a rendering Camera, adjust the camera's Clear Flags to Solid Color, check Transparent Background, and click "Take Screenshot" to render the icon. See the images below:

11. Submit UnityPackage

Now that all resources are ready, please package them into a UnityPackage and submit it. The package should include the following items:
  • All model resources in FBX format (including complete skinned models and segmented models)
  • All texture resources (clothing textures, AO maps, segmented textures, mask textures)
  • All prefabs (clothing prefabs, segmented prefabs, spring bone prefabs)
  • Rendered icon image
The following image is an example:
Starting from this point, the following features are not yet implemented. You can now follow the above guide to submit the UnityPackage for completion.

12. Packing and Submitting Google Form

  • After finishing prefab, create a resource pack together with the Info File. A complete resource pack should include the following contents:
  1. 1.
    F_Upper_Ugc_013_01.png: This is the complete UV texture of the garment, used for the preview;
  2. 2.
    F_Upper_Ugc_013_01.prefab: This is the prefab of the model, used for the preview;
  3. 3.
    F_Upper_Ugc_013_01_A.prefab: This prefab contains two childnodes, which represent all of editable parts of the garment (for example: chest, back);
  4. 4.
    F_Upper_Ugc_013_01_01.png, and F_Upper_Ugc_013_01_02.png: These two textures correspond to those of the editable parts (chest, back);
  5. 5.
    F_Upper_Ugc_013_01_AO.png; This texture keeps the shadow with transparency and structural layers separate for the full UV texture. It will be superimposed on subsequent textures drawn by creators to increase the sense of bulk and detail;
  6. 6.
    info.json: Each info file indicates the type of the avatar that the garment is designed for. For example, if an accessory is made for both men and women of ACG Style, it needs to be packaged respectively with the info files of ACG Style men and ACG Style women.
  • To make a resource package, you need to distinguish between platforms. We currently support windows and mac;
  • After packing, you can submit the Google form.

13. Info File

Currently, the info file contains:
{"role":"girl","part":13,"add":0,"type":0,"mutex":[],"recolor":0,"version":"0.1.0"}
需要关注的配置
Attention should be paid to the following configurations including:
  • role: human model of blank clothing template corresponding to avatar type, which currently includes types below:
    • “ACG Male”: boy
    • “ACG Female”: girl
    • “Realistic Male”: westm
    • “Realistic Female”: westf
  • part: e.g., “13”, used to identify the part of blank clothing template , currently including following parts:
    • Upper: 3
    • Lower: 4
    • Shoes: 5
    • One Piece (like dress): 6
    • Head Accessory (like hat): 8
    • Eye Accessory (like glasses): 9
    • Mouth Accessory (like mask): 10
    • Ear Accessory (like earrings): 11
    • Neck Accessory (like necklace, tie): 12
    • Back Accessory (like cloak, wing): 13
    • Waist Accessory (like belt, tail): 14
    • Arm Accessory (like armband): 16
After completing prefab making, if corresponding info file of clothes needed, you can directly copy the corresponding info file in the attached Info File Configuration:
Info File Configuration.zip
78KB
Binary