Polygonal Mind
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets

Blog

Animating a 2D face on 3D Characters

5/27/2021

2 Comments

 
The Mission
Resources
Have you ever wondered how, in some games, they are able to use 2D expressions and faces on 3D characters? How would you even fit a sphere for the character's eyes and make it not poke through the other side of the head mesh? Well, sometimes we can use 2D offset of the textures to create the illusion of draw frames on top of 3D geometry. Some famous games that do this are: Animal Crossing, The Legend of Zelda Franchise...

The mission today is show in an easily understandable way how to setup and animate the facial features of a character by offsetting and overlaying 2D textures. 
  • Maya 2018.1+ LT
  • Unity 2018.2+
  • Photoshop CC 2014+ or you drawing program of preference
Animating a 2D face on 3D Characters
Preparing the model

This way of doing facial animation should be considered when starting and through the process of creating the character.
character base mesh
character base mesh
This will be my character base mesh for this case study. As you can see, it's very heavily inspired on Animal Crossing's, though it's not a direct copy and it was made from scratch.
Once we have the mesh of our character mesh ready, we can start getting some references from other games and other pieces of media to choose the extreme poses they'll be able to perform with facial animation. I'm going to choose one of my favourite 3d animated movies as an example: Wreck it Ralph. Let's use Vanellope since the proportions for the example is closer to hers more than Ralph.
Wreck it Ralph Vanellope
So now we have some references, let's plan in how many parts we need to divide the whole puzzle to make it work... We need to separate:
  • Eyes
  • Eyelids
  • Eyebrows
  • Mouth/Rest of the face
That leaves us with 4 different pieces + the basemesh.
Character face parts
VERY IMPORTANT: after duplicating and separating the meshes from the original one, you can see the cuts where the normals broke.
​
We can use Maya's Transter Attributes to copy the normals from the base mesh.
Cut base mesh
Cut base mesh
Cut base mesh
See? Much better! None of the cuts are visible :)
Clean base mesh
Texturing the model

Let's start texturing the eyes. The principle which all of this system is based on is an offset the UVs of the mesh or the material. Once we have the eyes in place let's proceed with the eyelids and make them blink!
Eye expression grid animation
As you can see, we need to leave some extra space on the sides of the eye so we only get one iris for each eye, even if we push the UVs to the limits.
​

When painting the eye, I use the Base Iris we already have to draw the eye itself, but the point will be to leave only the eyelids and the red part as opaque, and leave as transparent the center so the eyeballs can offset under this new layer on top. Let's draw the rest of the frames and then we'll organize them in a texture atlas!
Eye expression grid animation
This is the result of the 4 frame animation.
Eye expression grid animation
Let's now organize them so we can have more variations with other expressions in the future! We can use a 4x4 grid, giving us 4 animations of 4 frames each, 2 animations of 8 frames, or however you like to organize it! Thanks to Photoshop guides we can organize them in a regular way, with 1/4 of the total width of the texture.
Eye expression grid animation
The red parts are going to be painted white so we can change the skin tone inside Unity, and the insides of the eyes are going to be removed so they're transparent, looking like this when exporting the texture:
Eye expression grid animation
The checker pattern is the transparency bit.
​

Let's import our character into Unity now and try how our system works. Assign all the materials to the correct mesh. Make sure the Eyelids' Material is set on "Fade" so it lets the underneath colours go through.
Eyelids material
Animating the model

The next part is where different workflows can be used to make the eyes, eyelids and facial parts animate we setup before.

The optimal way to do this would be to setup a script in Unity that receives the offset of different facial parts with a setup of bones that control those offset from Maya, so the Animator in Maya can see what they're doing. It's a more complex topic and I hope I can make a blog post in the future about that.
​
We can also setup an animator that controls each part separately to modify the offset of the materials (this is the one we're using in this example since it's a very simple workflow, and can be compatible with Mixamo animations), but it's not really optimized.
3D Character blinking
We have to be mindful of the type of curves we're creating for a sprite sheet kind of texture (eyelids in this case), since if it was linear it would look super strange panning from one frame to the next. We need it to snap from frame to frame, hence we'll be using a "constant" type of curve.
Constant type curve
Here you can see the difference between using "constant" and using "linear"
Animating Constant
Constant
Animating Linear
Linear
3D Character Animation
3D Character with 2D Face
Conclusion

There are many workflows to achieve the same result, and in this case we might get carried away about what should we use, either blend shapes (morph targets) or bones for a facial rig, but there are always more options available to you, and the games from Nintendo make a really good use of "now forgotten" techniques that were more common in the past.
​
Hope you learned something new today, and that it was useful. See you around! :)
Alejandro Bielsa 3D Artist
Alejandro Bielsa
GENERALISTA 3D
Junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.
twitter
2 Comments

How to easily re-paint avatars with Substance Painter

5/18/2021

0 Comments

 
The Mission
You've probably seen our over 200 avatars. Ever wonder how we actually colour them? Or maybe you want to paint them yourself. 
Resources
  • Substance Painter
  • Your preferred 3D Modeling software (Maya, blender...)
  • Your preferred image editor (Photoshop, Gimp...)
How to easily re-paint avatars with Substance Painter
Setting up UVs

How we did it

When we made our avatars we made the UVs in a particular. Each UV isle is one color, so that way in Substance Painter.

You've got your avatar ready, right? If you are in doubt, you should follow this few guidelines to make sure you won't have any problems:
​
  • Make sure the UVs only use one region. Basically, don't get the UV Isles out of the big square, Like in the picture.
UV map isle
  • Every UV isle should be unwraped. In some instances this is not 100% necessary, but more often than not they should all be.

  • Take as much space as you can.

  • Always leave some space between isles.
​
  • You can put 2 isles overlapping, but its use is for only for very specific use like repeating patterns or letters.
UV map unwraped
UV map
If you think your UV maps are done, then let's go to the next step: PAINT!
Painting or re-painting

Our avatars are quite simple in terms of painting, usually using a combination of flat colors, maybe some gradients, patterns to mix things up and letters in some cases. So, how can we make those?

We will use Substance Painter for almost all of that.
​
First, you need to import you character. Use whichever program you know (Blender, Maya, 3D Max...) to export an FBX file.

Then in Substance, create a new proyect. Use the template which fits with your proyect and use the select button to find your fbx file.
Project Substance Painter
Now you should see your character on the left side and the UV map on the right side of the screen.

On the top right corner of the UV map view you can select "Base color" so that way you can only see the colors without any material added.
​
Now we will go on painting.
On the Layer tab, on the right, we will create a Fill Layer. This layer will serve as a color.
​
On this new fill layer, we will create a black mask by right clicking it an Add Black Mask.
Layers menu Substance Painter
It will create 2 squares, one representing the color and the black one is the mask.

Click on the color and right under the Layers tab, scroll through the propeties until you find Base Color. You can select any color you want. Using the dropper tool you can even select colors that are on another place outside the program.

If you have the color you want to use, you will see nothing has changed. Now its time to use the mask we created before.
​
Click on the mask black square, and go to the left of your screen. You will see a couple of icons. Select the Polygon Fill one. Right above it, select UV Chunk Fill.
​
Now you can begin to paint.
Base colour Substance Painter
Select whichever UV isle you want and it will get the color you said.
Repainting on avatar

If you are repainting one of our avatars you can actually add the base texture if you want to preserve one zone like the original.

On the top left, new → import resources. Click on the Add Resources and find the texture you want to add.
​
Make sure to mark it as a texture.
Add Resources substance Painter
And import it to your current session.
Add Resources substance Painter
Now that it's imported it should appear on the texture section on the shelf (Located on the bottom).
​
You can drag and drop the texture into the base color on any base layer and with the help of a black mask, you can select which zones to use.
Add textures substance Painter
Exporting

Once you have your final results it's time to export.

Go to New → Export Textures
​
Click on the name of the material and deselect or select the maps you have used or want. For our avatar we only used Base Color, so we won't use the other ones.
Export menu Substance Painter
Export menu Substance Painter
On global settings you can change the directory output, the file type and the padding.
​
This last one is important. Padding is the amount of pixels over a UV isle in which the program will draw over the limit. If that doesn't make any sense here's a comparasion between a texture with no padding at all (right) and 10 pixels of padding (left).
Padding texture
Padding texture
By default it's set to infinite, which is alright, but I usually set it to "Dilation + Default background color" and I set the pixels to a minimum of 8. That's why it was important to space out UV Isles.
​
Once all the parameters are correct, hit the export button and done!
Picture
​Pedro Solans
3D ANIMATOR
​​Junior 3D Animator improving every day possible. Videogame and cat enthusiast.
twitter
0 Comments

Hands optimization for VRChat

5/11/2021

0 Comments

 
The Goal
Have you got problems with hands controls in the mixamo auto-rig? So follow this steps to achieve an avatar with hands ready to import for VRChat.
Tools
  • Maya LT 2018
  • Resource hands (linked bellow)
  • Blender 2.9 (not necessary)
Hands optimization for VRChat title
Before start

We need to set the avatar in T-pose for an easier workflow.
Avatar T-Pose
Before import hands

  • Delete all the Shape Keys and don't forget to clean the History of the object
  • Duplicate the mesh (Shift + D).

We will work in the duplicated mesh, delete the first one.
​
  • Be sure you delete the rig (if it has)
  • Count the nº of vertex in wrist (must be eight)
Hands fbx mesh
  • Now download and import the resource of hands into your proyect.
hands_v2.fbx
File Size: 53 kb
File Type: fbx
Download File

Delete one hand

The first thing I usually do is delete one hand to get later a mirror of it.
​
Make sure you have the Pivot of the hands is situated on (x-0, y-0, z-0). This is the kind of stuff we should make for sure or it could probably cause problems in the future with the tool Mirror.
Mirror pivot hands
Match and Combine both objects

It's time to adjust the hand and match the vertex with the mesh of the avatar.
Combine mesh
Of course, we don´t need to match perfectly the vertex, just have to be nearby.

Combine both objets in only one using the Tool Combine, up in Mesh → Combine.
​
Use the Tool Merge to Center, select first the vertex you want to Collapse together (work Merging pairs of Vertex)
UV's

We cannot forget the UV's. We had insert new mesh into our avatar, so now we have to match the hands in the texture.

But don't rush, because the hands (if we didn't add any new vertex/edge/face before) are mapped. We just need to take the UV's of the hands, rescale it and place they in the same position as the old hands.

Try to fit the hands with the texture backed, this will save time to focus further in some future backculling, weight problems,...
UVs mapped
Finally, if we are not convinced with the final result, we also can move the vertex/edges/faces of the object before export. Just make sure that the avatar hands are exactly where you want to, with the scale as you want,...
​
Once we followed this steps, now we have to export into a fbx and upload it to mixamo.
Export fbx
TIPS

Make again mirror of the avatar

To make this faster than usually, I use Blender 2.9.

Navigating he Viewport
​
Mouse

RC = Right Click

LC = Left Click

MC = Middle Click
​

MC

ALT + MC

CTRL + MC Up/Down

​SHIFT + MC 
​
Rotate Camera

Snap Rotate Camera

Zoom In, out

​Pan camera
​
First of all, import the fbx of the avatar, just before you want to upload.
Import model 3D
We want to select one side (right or left) and delete the other one.
But first, we need to activate the X-Ray function and set the camera in Front Orthographic
X-Ray function
X-Ray function
This let us select all faces from one side just clicking and draging with the Select Box.
Make sure that the middle vertex are in the position 0 in X
Avatar mirror
The fastest way to do this is using Keyboard Shortcuts:

S → Scale
S + X → Scale just in X
S + X + 0 → Scale in X and move all vertex to the same position in X.
​
Then you just have to move the selection to 0 in X.
Blender Mirror Modifier Menu
Search the Modifier Properties (Wrench) and add the Mirror Modifier (you have to apply it)
You also can check Clipping in the Mirror Modifier, this prevent vertices from going throught the mirror during transform.
Blender Mirror Modifier
Make again mirror of the avatar

When you have been uploaded your avatar to mixamo (using the Auto-rig), choose the animation of typing to get sure that each finger works fine. Also, we have some settings at the right, we will use one whose Tittle says "Character Arm-Space".
Auto-rig mixamo arm space
Auto-rig mixamo
Auto-rig mixamo
Conclusion

Of course, the scale of the hands, topology, etc can not match perfectly with all the avatars, but we can modify at least, the mesh of the hands or avatar before combine together and make again the UV's.
​
However, normaly change the mesh of an avatar rigged could be tiresome. But following different tips and rigging with mixamo gives you a lot of time that you can spend in other things.
Javier Vicén Lucia 3D Artist
Javier Vicén Lucia
3D Artist
Enthusiastic about videogames, 3D Impression and photography
0 Comments

    Categories

    All
    Blender
    CryptoAvatars
    Decentraland
    Decentraland En Español
    Maya
    Metaverse
    Mixamo
    Morphite
    Substance Painter
    The Sandbox
    Totally Reliable Delivery Service
    Unity 3D
    Updates
    Vrchat

    Archives

    March 2022
    July 2021
    June 2021
    May 2021
    April 2021
    March 2021
    February 2021
    January 2021
    December 2020
    October 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    February 2020
    December 2019
    October 2019
    September 2019
    August 2019
    June 2019
    May 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2016

    Picture
Home
Projects
Assets

Picture
Crypto
Friendly
Picture

Subscribe to get some 💚 in your inbox once in a while.

Follow us and your visit will never be forgotten!
Picture
Picture
Picture

 © 2015-2022 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets