# Making a custom wassie avatar for webaverse (& vTubing)

Since I wanted to make the process as easy as possible, I abstracted all of the subsequent steps into a Blender add-on that's easy to setup and use.

## Pre-requisite

- Install Blender
- Install VRM ADDON : https://vrm-addon-for-blender.info/en/
- (Once downloaded, open Blender then go to edit => preferences => addon => install then choose the zip file you downloaded)

Other reference links :
- In-depth explanation & webaverse implementation : https://docs.webaverse.com/docs/art/character-workflow
- Making a simple .vrm humanoid using only Blender addon : https://vrm-addon-for-blender.info/en/create-humanoid-vrm-from-scratch/?

Install my own custom script to generate a wassie : https://github.com/platote/wassie_generator, and click on "Download ZIP" (EDIT : The code has changed a bit, I'll update it soon enough)


## Start

Once downloaded, extract it somewhere, and launch Blender.

For it to work properly, make sure to save your Blender file directly in the **same** folder where u have extracted everything (aka the same as generator.py)

DISCLAIMER : THIS GUIDE WILL PROBABLY CHANGE, BASE .VRM MODELS WILL BE REPLACED WITH CUSTOMIZABLE WASSIE LEGO PARTS AND AN EASY-TO-USE .BLEND FILE WILL BE ADDED SO STAY TUUUNED

This guide won't teach you all the details to make a custom .VRM avatar, as there is a lot to take in (modeling, rigging, textures, etc.. ). We will get there one day, but to start I have designed a simple Blender file with the help of byWassies wonderful 3D artists so you can start right away creating a custom avatar.

This guide will also be an introduction to Blender, a great & free 3D software that is worth understanding to start creating on webaverse.

Link to weba scene : https://app.webaverse.com/?src=https://platote.github.io/assets/scenes/island_forest.scn

## Pre-requisite

- Install Blender
- Install VRM ADDON : https://vrm-addon-for-blender.info/en/
- (Once downloaded, open Blender then go to edit => preferences => addon => install then choose the zip file you downloaded)

Other reference links :
- In-depth explanation & webaverse implementation : https://docs.webaverse.com/docs/art/character-workflow
- Making a simple .vrm humanoid using only Blender addon : https://vrm-addon-for-blender.info/en/create-humanoid-vrm-from-scratch/?

### 1. Download a .vrm wassie you want to customize

Go here : https://github.com/platote/assets/tree/main/workshop_assets/avatars. You'll find some already-made .vrm wassies (nothing official here, only wassies I made using @byWassies 3D assets for testing purposes but that you can actually use & customize these are CC0 v0 vrm wassies)


### 2. Import in Blender

- File -> Import -> VRM -> then select the wassie you downloaded

- To orbit around press & hold MIDDLE MOUSE BUTTON
- To go in front / left / up / down views, press ALT while clicking MIDDLE MOUSE BUTTON
- To pan, press & hold SHIFT + MIDDLE MOUSE BUTTON

Now, you can show the overlay by clicking this icon, this will make it easier to select our meshes.

 => 

### 2. Changing the wassie body

- Now, let's make this wassie even more fat
- Select the body, then go in sculpt mode 
- Let's select the "Grab" tool 
- You can change the dimension of the brush by pressing F & dragging the mouse, as well as the strenght by clicking SHIFT + F and dragging
- Activate symmetry on the X axis : 
- Then have fun ! (Try to keep the meshes align with the bones)


### 3. Changing the wassie colors

- Now that my wassie has eaten enough let's change its colors
- To do that, go here : https://github.com/platote/assets/tree/main/workshop_assets/avatars/textures
- Select and download the texture of the wassie you selected
- Go to [photopea](https://www.photopea.com/) and open the image texture file you just downloaded for the body
- Photopea is a free Photoshop copy working directly in a web browser, but if you prefer / have access to Photoshop, or Gimp, or any other image editing software feel free to use it :)


- Select the magic wand tool 
- Click on the color you want to change, & shift click to select all the areas concerned
- Create a new layer then select this layer  => 
- use the paint tool to paint another color
- Now export your new image as png


- Go back to blender
- Now make sure you have your wassie selected and look into the materials panel 
on the right : 
- And select the body texture
- Expand a shader editor by clicking on the top left of one viewport & selecting shader editor 
- You should get something like this : 
- You can now change the image texture by replacing the current with the new one you created !
- 

### 4. Adding your custom metadata infos

- Select the armature in object mode
- Click the Object Properties icon  => 
- Go to VRM and change the metadata accordingly 

### 5. Testing the .vrm file in webaverse

- Let's see if everything is working now
- Select everything in blender by pressing A
- Then file => Export => VRM
- Choose a location & export it
- You can go in this [weird forest](https://app.webaverse.com/?src=https://platote.github.io/assets/scenes/island_forest.scn), or in this lost [fridge drawer ](https://app.webaverse.com/?src=https://platote.github.io/assets/scenes/birth.scn), or your local scene created in workshop #1, or simply app.webaverse.com
- Once you're in, drag'n drop the file you created

Et voilà ! Now you have a semi-custom wassie. You can actually speak with it by clicking on the Microphone icon on top.


### 6. Adding a hat

- Ok so now, we want to create a hat for our wassie, and find a way to easily use it in webaverse

#### a) Find a hat model and upload it to Github
We could create one ourselves, but let's keep it simple and find one to download.
I'll go with this one : https://poly.pizza/m/5D_ieYZ0HUp, (download as .GLB)
- Import the model into the blender file
- Resize it & replace it for it to go right on top of the wassie
- Now select the hat
- Then file => Export => GLTF, make sure you're only exporting selection
- Now upload it to github.
- To do this, go to https://github.com/platote/hat
- Fork it
- Then go to the settings of the repo => PAGES => select branch main, now the repo is accessible at https://USERNAME.github.io/hat/
- Go back to the repo then upload your hat file

#### b) Creating the .metaversefile

- For next steps, refer to : https://webaverse.notion.site/Creating-Wearables-94673f0fc6a042ae8b156392eccfdb17
- Create a file named "".metaversefile" containing this code (change the "start_url" for the url corresponding to your asset)

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

#### c) Testing in webaverse

- Go back in webaverse
- Then drag n drop the .metaversefile you created
- Ok the hat is way too high
- 2 solutions :
- Either dropping the position in blender directly
- Or simply dropping it in the .metaversefile

- Let's do the 2nd one, and change the .metaversefile for

{
  "start_url": "https://platote.github.io/hat/hat.glb",
  "components": [
    {
      "key": "wear",
      "value": {
        "boneAttachment": "head",
        "position": [0, -0.11, -0.02],
        "quaternion": [0, 0, 0, 1]
      }
    }
  ]
}


With glasses !


Made by the @ ByWassies team
- Blender file and tutorial "Making a custom wassie avatar for webaverse" (https://hackmd.io/@platote/ryik4slc9) by @ platote
- 3D model by @ uwualice & @ luiscordovadsgn