How to set-up an avatar renderer in Unity

The Mission

Avatar? Completed. The VRM? Created. What's next? Make it look fancy.
​
The avatar cards are the first thing anyone will see about your cryptoavatar, so better make a good impression!

Resources

• Unity 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 allow 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 untill you see Unity Recorder. Just click it and install

If nothing is appearing, make sure to have "All Packages" on the top left of the window.

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, change the Record Mode to Single Frame and set the frame to 0.

Click on Add New Recorders and add an Image Sequence.

Select your prefered 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 diferent 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, experimentation.

Setting up the scene

---

It's time to set up the scene. At least the basics so you can always start with something.

I'll leave a UnityPackage down below with everything I'm about to do.

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 scenary around it.

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 backlight 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 usefull, if you ask me.

Red: Backlight; yellow: Key light; Blue: Fill light. All of them pointing at the gray cube in the center

Use this link to get the basic set-up of lights.

lights.unitypackage
File Size:	1 kb
File Type:	unitypackage

Download File

---

This is the basic setup we use for the avatars. Regarding the rest of the scenary 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 scenary 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. Uncheck 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 (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.
​
I'll leave another Unity Package down below with everything you need.

Frame with an avatar posed.

canvas.unitypackage
File Size:	59 kb
File Type:	unitypackage

Download File

---

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 ont he 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.

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, exagerated 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 actitude 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 expresive 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 your avatar have and how to complement them accordignly 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 opossite 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 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.

Note that the down arrows arent fully touching the sides of the image, but it doesn't matter since the frame of the card will hide it.

What? You don't know what color is which and you can't figure it out? Don't worry, I have a solution! Adobe Color Wheel!

https://color.adobe.com/create/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 scenary 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 out 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 oposite 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 importants parts to change on your avatar since it will radically change how it looks. See the diference down below.

Just the standard material.

A little more extreme way to show the character

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"

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 use is to not touch post processing until you are satisfied with the result without it. Don't use it until you have it.

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

---

Thats 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!

​Pedro Solan

3D ANIMATOr

​​Junior 3D Animator improving every day possible. Videogame and cat enthusiast.

Twitter