A common thing that people want to set up on their VRChat avatars is the ability to switch between different materials, such as to change color schemes or the like. This requires some fairly complicated setup, and this setup tends to be quite difficult to port between platforms, so as a result, creators will usually only set it up on PC and eschew it on Quest.
Here is a tutorial for how to set things up in a cross-platform manner that also makes the entire process somewhat easier; this particular method is what I developed for my critter avatar (which comes with even more thorough documentation for this and other setup tasks), and if you find this tutorial helpful, I’d appreciate you buying that avatar base or sending me a tip on Ko-Fi or the like.
General overview
Setting up material changes requires the following parts to work together:
One or more materials to apply to the avatar
Animations that apply the material change
An animator controller that can trigger these animations based on parameters
Menus to initiate the animation triggers
VRChat provides some limited documentation on the animator controller; in particular, they use the idea of playable layers. Material changes, being non-transform animations, live on the “FX” layer.
A note on naming
For most of the things in this writeup, the name doesn’t actually matter; you might also notice occasional mismatches between the names given in the text and the names in the screenshot, which is due to some of these images coming from my critter-specific documentation.
The only name that absolutely must match everywhere is the expression parameter, which I call MaterialChoice. You can call this whatever you want, but you must make sure that you call it the same thing everywhere!
Initial setup
The very first thing to do is install VRCFury. This is a set of VRChat-related Unity scripts which make it much easier to keep your avatar setup modular, and makes your life infinitely easier when it comes to setting up the animator controller, and especially making it cross-platform. (It also gives you a lot of quality-of-life improvements for setting up blend shapes, expression gestures, and much, much more.)
Create two subdirectories in your project to store your materials, controllers, and animations; I like to call them “Materials PC” and “Materials Quest.” If you have multiple material slots or meshes, it’s helpful to in subdirectories inside of them to keep those straight as well. For example, on my avatar I have this directory structure:
Animations/: for expression and customization animations, not for material animations
Materials PC/: contains the animations for the PC materials
body/: contains the PC materials for the “body” material slot
details/: contains the PC materials for the “details” material slot
Materials Quest/: contains the animations for the Quest materials
body/: contains the Quest materials for the “body” material slot
details/: contains the Quest materials for the “details” material slot
Menus/: contains the various expression menus
Textures/: the actual textures used by the animations (shared between the materials)
body/: textures used by the “body” material slot materials
details/: textures used by the “details” material slot materials
Creating the animator controller
Go into your Materials PC directory and create a new Animator Controller. Call it _Materials-PC or the like.
Open up the animator controller, and rename the Base Layer to “Material Change PC” or the like. Also go to the “Parameters” tab and add an Int named MaterialChoice.
Right-click in the state graph and create a new state. It should be orange, indicating that it is the default state. Name it something appropriate, such as “Default” or “Loading” or the like (the name doesn’t matter).
Creating the animations
Before creating any animations, you’ll need to attach your material animator controller to the avatar; this tells Unity’s editor where to create the new animation clips.
First material animation
Creating the first material animation is a bit different than the others, because Unity.
Open up the Animation window (from the Window menu, or by pressing ctrl-6 on Windows or cmd-6 on macOS). You’ll have a little window with a message, “To begin animating [name of avatar], create an Animation Clip” and a button labeled “Create.” Click that button, and you’ll get a file dialog which should be pointing to your Materials PC directory. Give it a file name for your first material.
This wakes up the rest of the user interface. To actually create the animation, click the “record” button (a red dot inside of a circle), then go to your Scene tab, and drag your materials into place. If your correct materials are already on the avatar, however, you’ll need to first drag the wrong materials on and then the correct materials; otherwise Unity won’t see this as a change to animate.
You should have one property row for each material slot that you’ve assigned. When you’re happy with this, press the record button again.
Now you can create the rest of your animations.
Subsequent animations
On the “animation” window, open the dropdown list, and then select “Create New Clip…” and then once again give it a meaningful name for the animation.
Press the record button, drag your materials into the right place, then press record again.
Repeat for all of your materials.
Once you’re done, I recommend using the dropdown to select a different material, which will reset your avatar back to its rest state.
Also, after you’ve finished recording your animations, remove the animator from your avatar, by clicking on the avatar, clicking on the dot in the Controller setting, and then selecting “None” from the list that pops up. If you don’t do this, then the avatar will probably not work right in-game.
Wiring up the animator
Go back to your animator. You should see a big pile of boxes, one for each animation you just created. Move them around to make some sort of sense.
Now you’ll need to assign ID numbers to each one. Unity doesn’t actually have any built-in way for doing this; as a matter of convention I like to put the number at the start of the node name, by clicking on the node, then changing the name in the inspector (for example, changing “My First Material” to “01 my first material” or the like).
There’s no specific approach that you must use for your material numbering; they just all need to be different from one another, and you’ll need these numbers to match between platforms later on.
Anyway, now comes a bit of tedium; for each node, right-click on your default (orange) node, select “Make Transition,” click on the animation node (which draws an arrow in one direction), then right-click on the animation node, select “Make Transition,” then click on the default node, which draws another arrow going back.
After you’ve drawn all your arrows, click on the default node, and in the inspector you’ll see a big list of transitions, one for each arrow. For each transition:
Click on it in the inspector
Underneath you’ll see some properties; uncheck “Has Exit Time,” and open up the Settings triangle and set Transition Duration to 0
In the “Conditions” section, click the +, and set the newly-created condition to “MaterialChoice Equals (id)”, where (id) is replaced by the number that you assigned to the material
Now for each animation node:
Click on the node
Click on its transition back to default in the inspector
Uncheck “Has Exit Time,” and set Transition Duration to 0
In the “Conditions” section, click the +, and set the new condition to “MaterialChoice NotEqual (id),” where again (id) is the number you assigned to that material.
Set up the menu
If you don’t already have one, create an Expression Parameters for your avatar, by going to your main folder, right-clicking, and selectiong Create > VRChat > Avatars > Expression Parameters. Add this to your avatar descriptor (in the “Expressions” section), and add a parameter called MaterialChoice with type of “Int”. Make sure that Saved and Synced are both set, and also set the Default to whatever you want your default material ID to be if you ever reset your avatar in-game.
Go into your Menus/ directory, right-click, and select Create > VRChat > Avatars > Expression Menu. Name the menu something meaningful, like “Materials.”
Add an option for each material you want in your menu. It should be set to type “Toggle,” with Parameter set to “MaterialChoice, int” and the value set to the material’s assigned ID.
Note that if you have more than 4-5 materials you’ll want to organize them into submenus. Hopefully the process for doing that is fairly straightforward.
Connect the menus and animator to the avatar
Finally, this is where VRCFury comes into play.
Go to your PC avatar, and in the inspector, click “Add Component,” then type “VRC Fury” and select it from the list. You’ll now have an empty VRC Fury component. Click the little + at the bottom of the component, and select “Full Controller.” This will give you another section of UI.
Under Controllers, click + and drag your material controller into the box, and set it to the FX layer.
Under Menus, click + and drag your material menu into the box, and give it a Path Prefix of “Materials.”
Under Global Parameters, add an entry for MaterialChoice.
Congratulations, you have now wired it all up.
Advanced VRCFury setup
I actually prefer to put the material change VRCFury component onto a separate GameObject that lives inside the avatar object. This isn’t actually necessary, but it makes managing different avatar versions slightly easier; in my case it makes it easier for me to maintain both the avatar base and my own customized version, and similarly it makes it a bit easier to keep track of multiple versions where you have, for example, different accessories added on or the like.
Quest setup
Setting this up on Quest is exactly the same as on PC, only you’d make a Quest version of the controller, Quest-specific materials and animations, and you’d attach these to a VRCFury component on your Quest avatar version. When you set up your materials, make sure that the assigned IDs match between PC and Quest, if you want PC and Quest users to both see the same overall material.
I do highly recommend that you give your Quest materials and animations names that indicate they’re the Quest version, as this makes things much easier to keep track of down the road.
Any material that doesn’t exist on one platform will fall back to whatever it was set up with in the editor. Alternately, you can put a fallback material animation on your default node.
Incidentally, the reason we use VRCFury is so that we can separate the PC and Quest animator controllers for materials without having to redo everything on the FX layer for both platforms. This is especially useful if you have other blendshape-based body customizations or expression gestures (where you can reuse the animations between meshes).
Common Problems
I cannot add a new animation
Make sure that all of these things are in place:
You have set the avatar’s animator controller to the material setup controller
You have the avatar selected in the scene hierarchy
My material won’t stick, or I can’t change materials after going to one, or my avatar is stuck in a weird pose
Check your material animator:
You have a transition both from “Loading” to the new material animation
The transition from “Loading” to the material has a condition of “MaterialChoice Equals (id)”
The transition from the material back to “Loading” has a condition of “MaterialChoice NotEqual (id)” and that the animator ID is the same
Check other things, too:
The menu item for the material is set to Toggle (not Button!) and that the ID matches the material’s animator ID
You have removed the material setup controller from the avatar’s animator controller
My material is appearing as solid purple on Quest
This indicates that you’ve accidentally wired up a PC material on Quest. Make sure that your Quest animator controller is referencing the Quest animation, and that turn is referencing the Quest version of the material. (This is why I like to specifically name the Quest versions of things as such.)
comments
#VRChat
#Quest
#PC
#avatars
#customization
#tutorials
(via busybee)
beesbuzz.biz