Create a quick lighting setup for avatars in Unity
In this tutorial we will explore the fascinating process of creating VRM avatar cards in Unity, transforming your virtual avatars into captivating works of art
The mission
Your avatar? Completed. The VRM? Created.
What's next? Make it look fancy.
The avatar cards are the first thing anyone will see about your avatar, so better make a good impression!
Resources
- Any version of Unity (we used 2018.3.14f1)
Setting up the Unity project
It's possible that you can use older and newer versions of Unity, but for the sake of not complicating things, I recommend you use Unity 2018.3.14f1, since it's the same I use.
As always, create the Unity project with the correct version. No need for Android versions.
Now you should be on the empty scene. Before creating anything, let's install a couple of things first.
- Unity Recorder.
- Unity Post Processing effects.
- Any shader you want.
Unity Recorder
The Unity Recorder allows us to record videos, gifs and images directly from the program, so no need to screenshot anything. Just Unity.
To install this, you need to go to Window > Package Manager
The package manager will open up, and it'll take a couple of seconds to load everything.
Scroll down until you see Unity Recorder. Just click it and install.
Once you have it installed, go again in Window > General > Recorder > Recorder Window.
A window will appear and I recommend to put it in a column, along side the inspector tab.
This is the recording window. Here is where you are going to make the images.
From top to bottom, chance the “Record Mode” to “Single Frame” and set the frame to 0.
Click on “Add New Recorders” and add an “Image Sequence”.
Select your preferred format and the name and path for the photo.
For now, this is all for the recorder.
Unity post-processing effects
Same as the Recorder, go to Window > Package Manager and search for “Post Processing”.
Now you only need to install it, there's no need to do anything else for now.
Shaders
This is more of a personal preference, but you can search online for different shaders that you can use on your avatars to make them look cooler. The one we use is Toony Colors Pro 2, although there are a lot of free online alternatives that give similar results.
This is the fun in this part of the avatar process, the experimentation.
Setting up the scene
It's time to set up the scene. At least the basics so you can always start with something.
Lights
For a good representation of our characters, we use 3-point lighting method. It is a traditional way of lighting up a scene and it uses, as the name suggests, 3 different points of light to illuminate the avatar. Only the avatar, not the scenery around it.
All of them pointing at the gray cube in the center
The 3 point lighting method uses 3 lights:
- One key light which is the main source of light, the fill light which basically helps the key light to illuminate those spots where the key light can't reach and the back light which is situated on the opposite side of the other 2 and gives a touch of light to the back of the character.
Both 3 lights are parented to an empty object which should be right in the point where the avatar should be posed. This allow us to freely move and rotate around the character both three lights at the
same time. Pretty useful, if you ask me.
This is the basic setup we use for the avatars. Regarding the rest of the scenery I use the standard directional light that comes with every Unity scene and I create any new light that I see necessary to achieve the result I want.
You might be asking yourself, how can I make one set of lights affect the avatar and not the scenery or viceversa?
We use the layer system Unity has by default. For this test I use a cube, but its exactly the same when you have your avatar posed.
First you need to create the layer your avatar will be on.
Select anything from the scene and on the top right you should see the “Layer tab” where you can click it and add a new layer.
Create as many as you need for different things.
If you want to change an object from layer to layer just select what layer you want it to be from the same drop down menu on the top right of the inspector.
For the lights is a bit different. You need to select which layers you want the light to affect. Go to the “Key light” and in culling mask you can select which layers to affect. Un-check everything at the same time by clicking on Nothing and then select the one you created for the avatar to only affect that.
Canvas
Renders need to have a very specific size (in this case 1030x1440px) but what's even more important is that every render will get an automated frame that will explain the licenses and the name of the avatar, so, you should have that in mind to make sure that, for example, a hand doesn't get behind the frame.
For this, we will set up a canvas (an UI element) with the empty frame to give us an idea of where will be the frame positioned.
Game window
We have the canvas ready with the frame but how can I see the final result?
You need to set up the game window to display the correct resolution for it to work.
Go to your game tab, and click on the 16:9 that will appear on the top left of the window. It will show a bunch of different aspect ratios but none of what we want.
Look down till you see a "+" button and you can add a custom resolution. Make sure you enter the correct resolution (1030x1440px) and hit Ok.
If the canvas is active everything will set up correctly and you will see the frame in place.
Poses for your avatar
Now it's time to pose your avatar!
I hope you used Mixamo because if you did, this part will be a lot easier.
Just use the FBX file you used to create the VRM (with the rig and the visemes) and upload it again in Mixamo. This time it won't ask you to put the bones in place, because it already has them!
Anyway, find a pose that you like.
You can move joints on unity also, but it’s way more cumbersome
If you don't like any of the poses that mixamo has available you can always trim down an animation until the first frame of that animation is the pose you are looking for.
Once you have what you need, download the avatar and put it on the scene.
But that's not all!
You can still manually edit the pose by manually moving the bones to get a better, exaggerated and more expressive. Also you can move around any dynamic bones you have manually to get much better results.
Think how your avatar would be like, what kind of personality would have and how it would act.
If you have a nice base pose you can get a much better result if you edit the pose afterwards.
Look at this example:
The pose is not bad but it doesn't show what kind of character it would be.
Doesn't transmit the kind of attitude it's supposed to have.
And now look at the finalized pose.
It's a much more dynamic pose. Very expressive. You can figure out that the avatar is playful and a very expressive kind of character.
You can see the lines that makes the character feel more alive.
Play with the poses so you can represent how cool your avatar is! There is no limit!
Color and composition
Color is one of the most important factors. You need to understand what colors does your avatar have and how to complement them accordingly to make it pop-up in the scene.
Having a basic understanding of the theory of colors will help you tons in this one.
To give you an example, I'll use the Cool Banana render that I made because it shows perfectly what I'm trying to explain.
This is a color wheel. It shows most of the basic colors without getting into saturation or brightness values.
To make and avatar pop-up you need to select the complementary color of the avatar, that is, the opposite from it. The opposite of red is green (Mario and Luigi, see?).
The principal color of Cool Banana is, of course, yellow, which complementary is purple.
Of course this is not a law, but rules. You should not follow these strictly and you can bend it around how you please, so for Cool Banana I used both purple and tones of dark blue.
By using these rules, you will ensure that no avatar will blend with the background and they'll be the first thing you will see. Not only that, it'll make sure complicated poses are easily readable.
What? You don't know what color is which and you can't figure it out? Worry not, for I have brought you a solution! Adobe Color Wheel!
You can select the colors you want and with a click of a button, it will give you your complementary colors. What's even better, is that you can actually upload an image and it'll tell you what are the 5 more prominent colors, so you can then, select a few to color the rest of the background.
One of the most useful tools to have, and with practice, you won't even need it in the future!
Background
Now it's time to set up a scenery for our avatar.
This is really up to you, if you have ideas where your avatar will be posed, make it a reality.
Play with the primitives Unity provides to make a scenario or use Blender or Maya to create an even more detailed background.
Play with perspective, at the end of the day, its just an image, so you can stretch and deform everything to make it look cool. Look at this example of our avatar nº26 Udon.
Looks pretty normal. But look how the scene is set up.
Everything is stretched up to give that feeling that its coming from the back to the front when it could be just the opposite in actuality.
Finishing touches
Material
You can use another shader material to give a different look to you avatar.
The material is one of the most important parts to change on your avatar since it will radically change how it looks. See the difference down below.
Post-processing
Now that you have the background and the avatar in there, it's time to give the final touches, that is, post processing.
Go where you camera is, and add a new component called "Post Processing Volume".
Check and uncheck each box to see
Now it's time to play a bit.
There's not a set way to configure this, you need to see what can improve on your final render.
Be careful, while the post processing is cool, it can make your avatar look completely different or loose some detail, and you don't really want that. Remember that post processing is always to enhance.
A tip I recommend is to not touch any post processing option until you are satisfied with the result without it. Think of Post Processing as enhancement, if the render without it doesn’t look good, no amount of post processing will help.
Snap!
Now it's time to take the picture.
If you have done the steps of how to configure the recordings from before, just open the recording window and hit Start Recording.
It'll automatically render the first frame of the camera and it'll save it on your PC.
Be sure to turn off the frame from the canvas since it'll be already added when you mint your avatar in CryptoAvatars.
Ending words
That’s all I have! Experiment, and look at the renders we and other creators make for inspiration for your own work.
The avatar cards are one of the most important pieces on the whole process since it's the first thing any potential buyer is going to see.
Be creative and have fun!
