# Uploading your own virtual clothing

## Overview

Virtual clothing items can be uploaded as individual pieces that integrate with Breakroom's standard humanoid avatars, or they can take the form of self-contained costume avatars. You can restrict use of these items to your World or list them for sale in the [Sine Wave Shop](https://docs.breakroom.tech/getting-started/customizing-your-avatar/using-the-sinewave-shop), making them available to users throughout the Breakroom/Sinespace Metaverse.

{% hint style="info" %}
Within our advanced documentation, you may see different words used to describe the same concept or tool. This is because Breakroom is based on the Sinespace virtual world platform. Please be aware of the following:

* When you [install](https://docs.breakroom.tech/advanced-tutorials/uploading-your-own-region/installing-unity-and-the-breakroom-sdk) the Breakroom SDK, you may notice that certain tools and menus refer to *Sinespace, Sinespace components,* or the *Sinespace SDK*. This is normal and has no effect on performance.
* When testing and uploading virtual items, you may see documentation, menus, and buttons that refer to Breakroom Worlds as *grids*.
  {% endhint %}

{% hint style="info" %}
The instructions provided in this section presume an advanced working knowledge of Breakroom, virtual assets, and third-party 3D software. Please consult our documentation if you need help [installing](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor) and [positioning](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor/editing-and-moving-objects) virtual objects, or editing the [RoomFurniture component](https://docs.breakroom.tech/running-your-event/customizing-the-conference-system-components/the-roomfurniture-component).
{% endhint %}

{% hint style="warning" %}
Only [World Owners, World Administrators, and World Developers](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) can upload custom items to Breakroom.
{% endhint %}

## Importing your clothing items and textures

To get started, locate the clothing template and textures you want to use. You can import clothing made in Blender or another 3D modeling application, and you are also welcome to utilize our [library](https://mod.io/g/sinespace) of clothing templates. These templates were designed specifically for the Breakroom platform, and are completely free to use.

Item templates can be formatted as FBX or OBJ files. Textures can be formatted as PSD, TIFF, JPG, TGA, PNG, GIF, BMP, IFF, or PICT files.

Once you have your clothing template and textures selected, you can import all of your files either by dragging them into the Project Asset panel in Unity, or by clicking the **Assets drop-down menu > Import Asset.**

## Setting up your clothing item

Once you've imported your clothing template into Unity, you can drag it into the **Hierarchy**.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FA0xpmlzTS8X7Ft4i7VS4%2FClothes_001.png?alt=media&#x26;token=252c814f-f981-48d2-948a-d2f400cb5fc4" alt=""><figcaption><p>Pictured: An example clothing item, added to the Hierarchy and currently highlighted.</p></figcaption></figure>

Next, drag your **texture** onto the clothing, and add the normal, height, and occlusion maps as required.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FllzfDG6bx4M9ASBJPQ5I%2FClothes_002.png?alt=media&#x26;token=09762757-ac0f-4ce7-8d3d-b1ca79b46770" alt=""><figcaption><p>Pictured: The same highlighted clothing item, with textures applied.</p></figcaption></figure>

### Adding the Clothing Item Settings component

Next, make sure the clothing model is selected in the Hierarchy and click the **Add Component button.** Search for "clothing," and add the **Clothing Item Settings component** to the model.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FqAJLj6OBFqlEqAEU3DFY%2FClothes_003.png?alt=media&#x26;token=0bdb055e-1212-49ea-a365-40ed18115199" alt=""><figcaption><p>Pictured: The same highlighted clothing item, with the Clothing Item Settings component added.</p></figcaption></figure>

### Setting the skeleton and selecting clothing type

In the Clothing Item Settings component, we will now set our skeleton. The item should be set to the same skeleton for which it was rigged in the original 3D software. You have the choice of unisex, base male, and base female skeletons.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2Ff4Xu8SjzlFWBhfFZbxNF%2FClothes_004.png?alt=media&#x26;token=08b7339f-395e-43e9-968e-9cd068964c85" alt=""><figcaption><p>Pictured: The Clothing Items Setting, with the Base Female skeleton selected.</p></figcaption></figure>

Expand the **Clothing** **tab** by clicking the arrow located to the left, and select the clothing type. As we are uploading clothing, we will select **Rigged Clothing.**

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2F3SiMlow8XZz3laBz2ktd%2FClothes_005.png?alt=media&#x26;token=6cf378c5-c996-45bb-862b-8757237f079b" alt=""><figcaption><p>Pictured: The Clothing tab expanded, and Rigged Clothing selected as the clothing type.</p></figcaption></figure>

### Selecting layers and slots

Expand the **Fittings & Slots tab** by clicking the arrow located to the left. You will be asked to choose which layer the clothing item will occupy. You can visualize virtual clothing layers just as you would physical clothing layers—for example, layering a t-shirt under a pullover, with the t-shirt tucked under the pullover.

*Underwear* is the default setting, and the layer that sits closest to the avatar skin. Each layer. working downwards through the menu, will be laid on top of the previous layer.

In this tab, you will also select the slot your clothing will occupy on the avatar. The slot and the layer work in conjunction with each other in the avatar wardrobe. You can only wear one item per layer/slot—trying to wear two items in the same layer/slot will remove the first item that was worn. Selecting one or more slots will add a wireframe avatar to the scene view. This can be used to ensure that your clothing is positioned correctly on the avatar.

{% hint style="warning" %}
Care should be taken to only check the slots that are required. For example, a t-shirt would occupy the upper chest and back, leaving other slots open for use.
{% endhint %}

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2F4rxHqq7ULYpsYLxCOsCn%2FClothes_006.png?alt=media&#x26;token=b5380789-c72e-4083-be47-19aa60d3679a" alt=""><figcaption><p>Pictured: The item positioned on a wireframe avatar. A layer and several slots have been selected.</p></figcaption></figure>

### Editing materials and patterns

Next, we will take a look at the **Materials & Patterns** **tab** located under the Clothing Item Settings component. You can expand this tab by clicking the arrow located to the left.

If you are using only one material for your clothing item, you will need to check the box beside the "Keep Materials Always" option. Failing to enable this option will cause the material to be removed upon processing.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FMMotDhsqMAZPwpcgm5oG%2FClothes_007.png?alt=media&#x26;token=b28835b0-4f2e-4fd6-b74e-ea6a4683ecef" alt=""><figcaption><p>Pictured: The Materials &#x26; Patterns tab expanded, and "Keep Materials Always" enabled.</p></figcaption></figure>

### Auto-rigging and weighting clothing

Finally, you will need to auto-rig and weight your clothing in preparation for upload. This can be achieved by expanding the **Automatic Skin Weighting tab**, and then clicking the **Convert to Skinned** **button**.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2Fq0V6wjgJ0eaL2mH9fSKj%2FClothes_008.png?alt=media&#x26;token=a79304a8-09b1-465e-9a8f-19121c7f793b" alt="" width="343"><figcaption><p>Pictured: The Automatic Skin Weighting tab, with the Covert to Skinned button highlighted.</p></figcaption></figure>

When rigging is complete, you'll notice that the Automatic Skin Weighting tab will update to detail bone counts and bind counts, and offer the ability to re-rig if necessary.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FnrFQP5BAgZSIC9uvzoCW%2FClothes_009.png?alt=media&#x26;token=74314a09-8340-4303-8668-227d04d2b6c6" alt="" width="342"><figcaption><p>Pictured: The expanded Automatic Skin Weighting tab, updated with rigging information.</p></figcaption></figure>

You will also see that the Finalize/Prepare button has changed to a bright cyan. This tells us that the clothing item is now ready for finalization. Click the **Finalize/Prepare button** to complete the clothing setup.

{% hint style="info" %}
It's normal for clothing preparation to take a few minutes, depending on the complexity of the clothing item.
{% endhint %}

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FKznDLIGWEMBJxOVHUrce%2FClothes_010.png?alt=media&#x26;token=b6fe778e-89ea-42b3-83e2-cd10ded920ff" alt=""><figcaption><p>Highlighted: The location of the Finalize/Prepare button.</p></figcaption></figure>

## Adding the Virtual Good component

In order to upload the finished clothing item to your grid, you will need to add the **Virtual Good component.** Select your clothing item in the Hierarchy, and then click the **Add Component button** in the Inspector window. Search for "virtual good," and add the Virtual Good component.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FSZYTKj4De38m2dSNpwAR%2FClothes_011.png?alt=media&#x26;token=a7f64349-3d30-4832-ad45-d39c6acb453e" alt=""><figcaption><p>Pictured: A finished clothing item, with the Virtual Good component added.</p></figcaption></figure>

From here, you will need to navigate through the Virtual Good component tabs and edit certain information to complete setup of your clothing item. Here are the key steps you will need to take.

### 1. Provide basic item information

In the Virtual Good component, under the **Basic tab**, you will need to select the clothing type and the clothing category. The clothing category you select will influence where your item appears in your users' inventories and/or where your item is displayed within the Sine Wave Shop. For example, selecting the Clothes/Tops/Shirts category for the vest pictured above will file the item under the Tops tab of the [Outfit window](https://docs.breakroom.tech/getting-started/customizing-your-avatar/editing-avatars-in-the-outfit-window), and also under the Tops tab of the Shop should you decide to list your item for sale.

There are additional details under the Basic tab that you will need to provide:

* Name: The item's name.
* Description: A brief description of the item. This will be used to describe your item in the Shop, so it's an excellent place to list your item's features.
* Brand: Your clothing brand name.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FEiLM9MmEoAkoKkEICp8f%2FClothes_012.png?alt=media&#x26;token=fe131a90-0b1e-4ac5-9111-f36bbbfc6913" alt="" width="341"><figcaption><p>Pictured: Here a clothing item has been named, described, and branded.</p></figcaption></figure>

### 2. Edit the Pricing information or restrict the item from sale

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2Fe2KLeB7hncJ2U62VsTI2%2FClothes_013.png?alt=media&#x26;token=70679751-e7f9-4a5b-9e2f-feae308f436a" alt="" width="340"><figcaption><p>Pictured: An example of how the Pricing tab may appear.</p></figcaption></figure>

If you want to sell your item in the Sine Wave Shop, you will need to enter your desired price in [Silver or Gold](https://docs.breakroom.tech/getting-started/customizing-your-avatar/using-the-sinewave-shop#breakroom-currencies) under the **Pricing** **tab.** (You can list a price in both currencies if you wish.) There are also several other options that you can enable or disable as the seller.

<table><thead><tr><th width="234">Option</th><th>Sales Result</th></tr></thead><tbody><tr><td>Derivation Allowed</td><td>Enabling this option permits purchasers to edit your original product and list their edited version for sale in the Shop. (For example, a user may change the upholstery texture on a chair you created and then sell their derivative version.)</td></tr><tr><td>Allow Use In Promotions</td><td>As explained in the image text above, this option encompasses two different types of promotions. For items that sell for Silver, Breakroom/Sinespace may include your goods on starter avatars or in special giveaways. For items that sell for Gold, Breakroom/Sinespace may include your items in platform operated sales events.</td></tr><tr><td>Max Discount in Sales</td><td>If you opt into promotions for your Gold-listed items, you can set a maximum discount for platform operated sales. (For example, you may indicate that your products should never be sold for more than 20% off.)</td></tr><tr><td>Max Owned</td><td>As explained in the image text above, setting this number higher than zero will limit the maximum copies a user can own at any one time to the number specified. This option cannot be enabled if your item is on sale for Gold.</td></tr></tbody></table>

{% hint style="danger" %}
If you do not intend to sell your item, *do not* enter a price into either the Price Gold or Price Silver fields. Instead, be sure to check the box beside the "Not for Sale" option.
{% endhint %}

### 3. Edit the Icons information

The **Icons tab** allows you to associate images with your item, such as a store image, inventory image, or brand logo. Click on the **Select buttons** to pick the images you would like to use.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FL79xg2DFoPMbFSdzfjti%2FClothes_014.png?alt=media&#x26;token=d69527ad-c27e-4dce-b4be-f1b76f446b65" alt="" width="344"><figcaption><p>Pictured: An example of how the Icons tab may appear.</p></figcaption></figure>

{% hint style="info" %}
You can use the **Take Screenshots** **button** located under the **Icons** **tab** to auto-generate images for your item based on the Unity model. You will need to finish prefabbing your item before this function will work. See the section that follows about[ prefabbing and uploading your clothing item](#prefabbing-and-uploading-your-clothing).
{% endhint %}

### 4. Edit the Author information

The Author tab allows you to add relevant author information, such as the developer name and copyright.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FrqkhoKGdoLpEK9G3N8Z4%2FClothes_015.png?alt=media&#x26;token=1fc3e90f-14c3-4e4a-961a-99f69b8ae4eb" alt=""><figcaption><p>Pictured: An example of how the Author tab may appear.</p></figcaption></figure>

If in doubt, leave the **Unique Status drop-down menu** set to *Available Elsewhere*, enter your name into the **Developer Name field** (as the grid Owner), and set the **Copyright field** to your company name.

### 5. Edit the Upload information

When uploading a clothing item intended for sale, you do not need to make any changes to the information listed under the Upload tab. If you want to upload a clothing item to your grid alone, however, you will need to specify your grid ID. You can obtain your grid ID from multiple places.

**Finding your grid ID on Dashboard**

1. Navigate to your [Dashboard](https://docs.breakroom.tech/building-new-worlds/breakroom-dashboard-tour).
2. Look in the top left corner of the screen. You will see your world name followed by an ID number. This ID number is your grid ID.

**Finding your grid ID on Curator**

1. Navigate to your[ Dashboard](https://docs.breakroom.tech/building-new-worlds/breakroom-dashboard-tour).
2. Click the **Advanced button** at the top of the page. This will take you to Curator.
3. In the Curator window that appears, locate the **Grid listing** for your World. Your grid ID will be displayed next to the World name.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2F0whaulPQHB5jNEBIjl4i%2FClothes_016.png?alt=media&#x26;token=9e4a8c65-4d3c-455c-a277-e6a5272acaeb" alt=""><figcaption><p>Pictured: An example of what you might see in Curator.</p></figcaption></figure>

Now that you have your grid ID, it can be entered into the **Grid ID field** under the **Upload** **tab** as shown.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FuGjqgWschY7PNqdAasfg%2FClothes_017.png?alt=media&#x26;token=4ca43a7b-cd9c-49b4-8df7-2ee706b72842" alt="" width="340"><figcaption><p>Pictured: The Upload tab, with the grid number entered into the appropriate field.</p></figcaption></figure>

## Prefabbing and uploading your clothing

To complete setup on your clothing item, you will need to prefab it by dragging the model from the Hierarchy to the Project Asset panel. Once the item is prefabbed, you can right click on the clothing item in the Project Asset panel and select **Upload to Sinespace** to upload your item.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2Fx1jCdQBtg7NkQfPEy3bo%2FClothes_018.png?alt=media&#x26;token=940f1219-9b61-4614-ae33-365430914f47" alt=""><figcaption><p>Pictured: You will need to drag your completed model to the Project Asset folder to prefab it.</p></figcaption></figure>

Once uploaded, your clothing item will be available for testing on the [preview server](https://docs.breakroom.tech/advanced-tutorials/uploading-your-own-region/testing-items-on-the-preview-server). When you have tested the item and are happy with how it performs, you can push it to the [live server](https://docs.breakroom.tech/advanced-tutorials/uploading-your-own-region/pushing-items-to-the-live-server) for your users.
