Creating Wearables:

We have made creating and importing wearables into a game engine as simple as possible. Just Drag & Drop. Boom! You’ve got Interactable and (of course) Wearable assets.

Webaverse enables two types of wearables: Skinned and Unskinned.

Skinned Wearables:

Skinned Wearables, just as the name suggests include those wearables that fit on a particular, flexible body part; they’re attached to the bone/rig and they deform based on body/skin movement. For example, a t-shirt, hoodie or socks would be skinned wearables. A hat may or may not be a skinned wearable, depending on the model. Sunglasses usually wouldn’t be skinned.

Model Attachment

Skinned wearables require a glb model with a vertex group attached. For more information about creating one with Blender: ***Blender User Manual.*** Pre-existing Webaverse models can be found here: ***Webaverse Loot assets.***

Unskinned Wearables:

Unskinned wearables are those that simply get attached to a bone via the .metaversefile, but do not deform with movement. This can be a potion or a wand or simply a hat.

Animations

Unskinned wearables can have animations such as drinking from a held potion pot. In order to add animations, just add a “use” key/value pair following the “wear” key/value pair.

Wearing the Wearable

Bring the wearable to life by importing it into Webaverse

Webaverse loads interactable models with the help of a file named “.metaversefile”.

Just drag & drop that .metaversefile into the browser window of a running Webaverse (i.e., https://app.webaverse.com) and away you go!

.metaversefile Examples

{
  "start_url": "<https://webaverse.github.io/loot-assets/head/Helm/helm.glb>",
  "components": [
    {
      "key": "wear",
      "value": {
        "skinnedMesh": "helm"
      }
    }
  ]
}

{
  "start_url": "<https://webaverse.github.io/witch-hat/witch-hat.glb>",
  "components": [
    {
      "key": "wear",
      "value": {
        "boneAttachment": "head",
        "position": [0, 0.1, 0],
        "quaternion": [0, 0, 0, 1]
      }
    }
  ]
}

{
  "name": "potion",
  "start_url": "potion.glb",
  "components": [
    {
      "key": "wear",
      "value": {
        "boneAttachment": "leftHand",
        "position": [-0.05, -0.1, -0.05],
        "quaternion": [0.7071067811865475, 0, 0, 0.7071067811865476],
        "scale": [0.3, 0.3, 0.3]
      }
    },
    {
      "key": "use",
      "value": {
        "animation": "drink",
        "boneAttachment": "leftHand",
        "position": [-0.05, -0.1, -0.05],
        "quaternion": [0.7071067811865475, 0, 0, 0.7071067811865476],
        "scale": [0.3, 0.3, 0.3]
      }
    }
  ]
}

More examples:

.metaversefile Breakdown

start_url - references a .glb model. Use any of ours: GitHub repository or create your own.

<aside> 💡 If hosting on GitHub, a GitHub Pages site is the preferred method as referencing the direct GH file download URL can cause problems. To enable GH Pages for your repo: go to the settings for your repo and in Pages section, enable Pages.

</aside>

A quick tutorial on how to start your own repo and enable GitHub Pages

A quick tutorial on how to start your own repo and enable GitHub Pages
components - object properties
- keys - can have various actions like “wear” or “use” that specify what function(s) the object should perform
- values - corresponding values to the associated keys
  - For Skinned:
    - For “wear”
      - skinnedMesh - references the mesh to which the wearable should be attached. It can be the exact name of the .glb file.
  - For Unskinned:
    - For “wear”
      - boneAttachment - to which bone the wearable should be attached
        
        Available bones - head, spine, leftHand, rightHand, leftFoot, rightFoot, neck, chest
    - For “use” (optional) - used when an animation or behavior need to be attached to a .glb model. Example: drinking a held potion.
      - animation - builtin animations associated with wearable use action
        
        Available animations - combo, slash, rifle, pistol, magic, eat, drink, throw, bowDraw, bowIdle, bowLoose
      - behavior - builtin behaviors associated with wearable use action
        
        Available behaviors - sword, throw, eat, drink
    - position - 3D coordinates (x,y,z) relative to the bone
    - quaternion - 4D rotation coordinates (w,x,y,z) relative to the bone

For more information about .metaversefile, look here.

Wearable Video Tutorial

Tutorial on how to create a skinned wearable