Cartoony Eye Setup in 3DSMAX

By Michael B. Comet - This article, all images, animations, and text are Copyright ©2001 Michael B. Comet All Rights Reserved.





Introduction

Eyes, perhaps one of the more critical and emotive parts of a character, can be difficult to setup. This tutorial shows how to rig a basic spherical cartoony eye rig in 3D Studio MAX, though the basic principles should carry over to other packages.

The basic process involved creating a perfectly spherical eye, and then deforming that eye with an FFD spacewarp to give the squash and stretch capabilities.

NOTE: This page has a TON of large images...so it may take a while to load, or you may have to Right click on each image area and choose "Show Picture" if they don't show up the first time.

Other Eye Resources

Note for the modeling and texturing portion of the tutorial, you may wish to refer to:
"It's all in the Eyes" - By Adam Baroody
Which is a realsitic iris and pupil modeling guide for 3DS Max eyes. They are very Pixar like and what I used on my recent alien guy.

"Iris Texture Map Tutorial" - By Kim Oravecz
This is a Photoshop tutorial, and even has a premade "action" so you can just hit a button, that creates a very very nice realstic iris texture map for the eyes. I used this to make my alien guys eye texture.



A. Modeling the Eyes and Lids

The first thing to do is to properly model the eyes and lids. The critical part here is that:
  1. The eyes and lids are both perfectly spherical.
  2. The pivot points for eyeball AND both lids, are all aligned, the same and are perfectly located at the center of the eye.

If you already have modeled eyes, you can skip to the next area assuming your eyes match that criteria. If they don't then either adjust your model, or create new eyes as follows.

1. Make the Eyeball Sphere

Start by choosing the "Create Tab" in MAX, then under the "Geometry" area choose "Standard Primitives" and "Sphere" as shown on the right.

Create the sphere in the Front viewport, so that the cross sections radiate outwards in front view. If they don't, then rotate the model so they point forward when you are done.

Leave the segments around 20-32 or so. Lower is ok since you may "smooth" the model later.





2. Convert to Editable Poly

Right click on the model, and choose "Convert To:" and then "Convert to Editable Poly". This will change the object into a poly object, so that we can edit the models vertices, edges, and polygons.





3. Setup Initial Material ID

We are going to make the eyeball out of one object in this tutorial. You could easily cut the eye into 2 or 3 separate objects, for the cornea, pupil and iris, and then parent everything to the cornea object. But having one object simplifies the tutorial a little and shows how to do multi-subobject mapping. If you are using Adam Baroody's more realistic eye modeling as a guide, then just make the eyeball as he says and when done parent everything to the cornea. Just make sure the cornea/main-eyeball still has the pivot point in the original center of the sphere.

Getting back to the seamless eye tutorial...
In order to map it with two separate colors, we'll use a Multi-SubObject material to texture it. This requires that we properly set up the material id's on the object.

Go to the "Modify Panel", and then expand out the Editable Poly base modifier. Then click on "Polygon" to enter Polygon-SubObject Mode.

Do a Select ALL, or drag a box around the entire model to select all polygons. Then under the "Surface Properties" rollout, find the "Material ID" entry box and type in: 1 and hit Enter. This will make all the polygons on the model ID 1, which we will later set to be white like a cornea.





4. Setup Pupil Material ID

Now select just some of the front polygons on the eye that you will want to represent the pupil. This is probably easiest to do by selecting in a Right or Left viewport.

After highlighting, enter a "Material ID" of 2. This will change those polygons to use ID 2, which we will later texture to be black like a pupil.





5. Create a Multi-SubObject Material

Open up the "Material Editor" by clicking on the Material Editor button on the toolbar. Click on a material slot (they should default to empty anyhow), and then click the "Get Material" button on the left, which will allow us to create and place a new material into the slot.

The Material Map Browser will appear. Double-click on "Multi/Sub-Object" to create a new multi-subobject material.

Close the Material/Map Browser window.





6. Setup Material SubObject Number

At this point you have a multi-sub material, but it's defaulted to too many sub-materials, and no colors or specifics have been established.

Click the "Set Number" button, and then enter 2 for the number of materials. Click OK. This will lower the number of sub materials to 2, which is the same as the number of Material ID's we assigned to the polygons in the earlier steps.





7. Setup Cornea Material

At this point we will setup our materials to have color. You can either click on the "Material #xx (Standard)" button for the #1 material, or open the "Material/Map Navigator" window to see the hierarchy of the entire Multi-SubObject material, and then click on the "(1) sub-material".

Enter a name for the material, like "eyeCornea". Then click the "Diffuse" swatch and set the color to be White. Click "Close" on the Color selector when done.

You may also wish to increase the "Specular Level" and "Glossiness" to make it shiny.





8. Setup Pupil Material

Now either click the "Go to Parent" button to go up to the master Multi-Sub Material, and then click the second material in the list, OR simply click on the second material in the "Material/Map Navigator" window.

Enter a name for the material, like "pupil". Then click the "Diffuse" swatch and set the color to be black. Click "Close" on the color selector when done.

Also make sure the "Specular Level" is lowered so that the pupil material is not shiny.

Note: that if you wanted to get fancy, you could actually assign a diffuse bitmap and specular map to this material that has a nice iris and pupil texture on it.





9. Assign Material to Eyeball

Now assign the material to the object. You can click and drag the material from the slot and drop it onto the object. Alternatively, you can select the object first, and then click the "Assign Material to Selection" button in the Material Editor.

If your viewport is shaded, you should now see your eyeball textured, where the polygons you assigned as ID 1 are the white cornea material, and those with ID 2 are the pupil.

It's a good idea to save your work at this point.





10. Create Eyelid Object

Now we will create an eyelid object. Go back to the "Create Panel", make sure the "Geometry" section is active, and then click "Sphere". Create a sphere in the viewport as shown. It doesn't matter where it is located since we will align it later.

Lower the sphere sections to something like 20 since we will smooth it later.





11. Convert To Poly and Select Verts

Now right click on the object, and "Convert To Editable Poly" as done in the previous steps.

Then go to the "Modify Panel", and select the "Editable Poly" base modifier to enter "Vertex" SubObject mode.

Now in a side or top viewport, select all the Front vertices, up to but NOT including the center line as shown.





12. Choose Non-unform Scale

Click on hold down on the "Scale" flyout button on the toolbar, and choose the 2nd, "Non-Uniform" scale mode. This allows you to scale on each axis independently.





13. Scale in Front View

Now in a Front viewport, scale down the points a bit in X and Y, so they are a bit smaller.

You should make the difference between the outer ring of selected points, and the center line border points, the width you will want the lid to be. I guess in reality you may want to scale up, but remember we will be adding a "meshsmooth", so things will shrink a little but more than they look here.





14. Move Points In

Now take the selection and in a side viewport, move them back so they are just in front of the center line as shown.

We are going to do this repeatedly to create the inside of the eyelid and make it curved in.





15. De-select Inner Points

Now drag a new selection on just the front points outside of the center area, effectively De-selecting the points that were the rightmost ones.





16. Create Concave Lid

Continue to move these points in even further. Then repeat the De-selecting and moving in, until you've effectively created a depression in the eyelid. You should end up with a basic concave modeled eyelid object as shown.

Get out of "SubObject" mode. Save your work.





17. Add Meshsmooth

For a test, we can see how the lid will look smoothed. Go to the "Modify" Panel and choose "Meshsmooth" from the "Modify List".





18. Set Iterations

Under the "Iterations" entry put 2. You should see the lid object smooth out.

If you need to make any tweaks/adjustments to the model, you can do so now, just make sure you do any model manipulations inside of the "Editable Poly" base modifier and NOT inside of the meshsmooth modifer itself.





19. Choose Align Tool

Now we will place the eyelid so that it's pivot/location is the same as the eye and so it's rotation matches as well. The easiest way to do this is with the align tool. This tool will effectively "snap" one object into the same position, rotation or scale of another.

First make sure the eyelid object is selected. Then click the align tool. If the align tool isn't shown, hold down the mouse on the flyout and choose the first icon, which is the align tool as shown.





20. Setup Align Options

After clicking the "Align Tool", with the lid still selected, click on the eyeball as the target. The options dialog should appear. Click on the X,Y,Z buttons for "Position" and also check the "Pivot Point" option for both. Also click the X,Y,Z alignment for the Orientation as well.





21. Select Uniform Scale

At this point your eyelid may be too small or large compared to the eye mesh. Go back to the "Scale" button on the toolbar, and hold it down to select the first scale option "Uniform Scale". This will allow you to scale all 3 axis evenly and at the same time.

Note how on the right here, the eyelid was too small and is actually inside of the eyeball.





22. Scale Eyelid

Use the Uniform Scale and scale the eyelid so it is the proper size. You may want to apply meshsmooth if you removed it, to see how it will actually look.





23. Go rotate mode

Now we can try the rotation of the lid, to make sure it properly follows the eye. We'll also copy it in the next step so we have 2 lids.

First, go into "Rotate" mode by clicking the "Select & Rotate" button. Then choose "Local" mode which make the eyelid rotate around it's own axis system in the viewport. Finally pull down the button next to this and make sure the first icon is chosen. This is the "Use Pivot Point Center" button which will make the rotations occur around the Pivot Point for the object, and not somewhere else, which is what we want.

Now go ahead and rotate the lid, it should look good since everything is spherical.





24. Rename, and Copy Lid

At this point you can rename the lid to something like "eyelidUpper". Then hold down the Shift key while rotating to create a copy that you can call "eyelidLower". In the end you should have something that looks similar to the image here.

You can remove meshsmooth on each object by clicking on the modifier name, and then hitting the garbage can icon in the modifier panel to remove it, or you can Right-Click on the modifier name in the panel and choose delete. We'll add meshsmooth back later.





That's it for the modeling. Remember if you already had your own model, then you need to make sure the eyelids and eyes when rotated will rotate properly and won't intersect, before you start the rigging section next. If they don't, use the align tool as illustrated to make the pivots at the same place, and/or remodel the lids if needed.

Note that if you wanted an "iris", you could either texture map the pupil area with an iris+pupil map together, or even go back, set some polygons to become a new ID-3, and make the Multi-SubObject Material have 3 sub materials instead of just 2.



B. Basic Rigging

Once you have a basic spherical eye, that works by simply rotating the lids or eyeball, it's time to actually rig it to do squash and stretch. When you're done, you'll be able to make any target you want, for the eyeball.




25. Create FFD Object

The first step in rigging is to create a "Free-Form Deformation" object or "FFD" (other programs call these "Lattices). This object will act as a control cage such that when the FFD is deformed, any object inside and bound to it will deform similarly. It's important to note we are adding an FFD-Spacewarp object, and NOT the modifier. The reason for this that we want to be able to control our eye rotation and lid rotations by simply rotating the object. If we add a modifier version, then the FFD would rotate WITH the eye, which is not what we want. We want the rotations of the eye and lids to occur first, and THEN have the object deformed...using a Spacewarp causes the operations to occur in this order.

Go to the "Create Panel" and then the "Space Warps" subsection which looks like a wavy line icon. Then from the drop down list choose "Geometric/Deformable". Finally click on "FFD(Box)".

Click and drag in a viewport to draw out an FFD. We'll place it and scale it properly in a moment, for now just create it. It should default to a 4x4x4 section FFD, which is what I use for this tutorial. If you want you can increase a little more...but you don't want it too high or it will be hard to work with.





26. Position and Size FFD

Now use the "Align" tool as demonstrated earlier to get the FFD centered on the eyeball.

Then type in the same size for Length, Width and Height so the FFD is square, and slightly larger than the eyeball.





27. Select and Bind Meshes

Now select the eyeball mesh(s) and both eyelid meshes. Then choose the "Bind to Spacewarp" tool from the toolbar. Make sure that the FFD itself is NOT selected.

Then click and drag from the mesh objects onto the FFD, the mouse cursor should change when it is over the FFD, then let go of the mouse button, and those meshes should now be "bound" to the spacewarp. This means when the FFD is affected the meshes will be also.





28. Check FFD Binding

You can see that the FFD is bound by selecting just one object at a time (shown here is the eyeball mesh), and then going to the Modify Panel. At the top of the modifier list should now be the "*FFD Binding" that shows that this object is connected to the FFD spacewarp.





29. Test FFD Deformation

To really check the FFD you can also go to the "Modify" panel, and then go into SubObject "Control Points" for the FFD. Then highlight some of the points and move them around.

You may want to Save your work BEFORE doing this, since you will need to Undo any changes you make to the FFD points.

As you deform the FFD, the eyes and lids should squash and stretch with it.





30. Check Deformed Rotation

Now turn off SubObject mode, and select an eyelid object. With the FFD still deformed, you should be able to rotate the eye or lid, and the rotations should not intersect. This is because technically everything is rotating first around a spherical eye, then all the objects are being deformed by the Spacewarp FFD.

Technically speaking you could live with this now, and animate FFD points by hand. In reality that's a bit of a pain, so the next few steps will show how to make morph targets for the FFD objects for easier animation control.





31. Copy the Eye

First, undo any changes you did to the lid rotations and FFD deformations, so you are back with your spherical eye and square FFD.

If you want, you can select ALL the meshes and FFD and "Shift" key move them over to make a copy. The rest of this tutorial will finish up one eye, but you can duplicate the steps that follow on the copy to setup both eyes.

In addition you can increase the number of lattice sections from 4x4x4 to 6x6x6 or whatever you want if you decide you didn't make them detailed enough.





32. Make FFD Morph Targets

What we'll do now is copy the FFD for the eye and create various versions of it as morph targets. Simply select the FFD, then hold down Shift and move it over to the side. Enter a new name like "eyeArched", or "Angry" etc... Do this a few times to make several copies, then deform each copied FFD into a new shape.

You can modify the targets later if they don't look exactly how you want. In the sample here I only made 2 extra targets, an "eyeUp" and an "angry" target. But in reality I'd probably have at least 8 or so.





33. Add Morpher Modifier

Now select just the original FFD that has the meshes bound to it. Then add the "Morpher" modifier onto the FFD from the Modifier List.





34. Load Morpher Targets

Now we'll load the morph targets into Morpher. You can either click on an empty channel, then hit the "Pick Object From Scene" button, and then choose the target FFD to load one channel at a time.

Or more easily, you can simply press the "Load Multiple Targets..." button as shown here, and then highlight all the target objects you want to add at once and press OK.

In the end the morpher channels should be loaded with all your target FFD's.





35. Test Out Morpher

Now you can play around and try morphing the channels to various percentages. As you do so, the FFD will change and the eyes will update.

If you want to adjust the targets, you can click the "Automatically reload targets" button. Make all the channels 0 except the one you want to work on make 100. Then select the target, go into Control Point subobject mode, and adjust. As you make changes to the target, you'll see the original FFD and eyes update as well for easier tweaking.





36. Parenting Eyes to the Head Bone

Typically you will want to parent or "link" your eyes onto a head control or bone. The following steps show how to do this. It's important to follow these steps exactly in the right order, otherwise you can mess up the eyes as shown later.

For now just create a head bone object, by going to the "Create" panel, choosing the "Systems" subsection and create a bone that can represent the head of a character.





37. Create pointHelper

We'll create a point helper that will be parented inbetween the bone and the eye objects. Go to the "Create" panel, choose the "Helpers" section, then under the "Standard" dropdown click on "Point".

Click in the viewport to create a Point Helper object. You can set whatever options you wish. I use Cross and Box usually. Increase the size if needed. We'll position it properly in the next step.





38. Align Point Helper to Eye

Now with the point helper selected, click the Align tool and then click on the eyeball mesh. Click on X,Y, and Z for position and rotation. Also make sure that "Pivot Point" is chosen, just as we did earlier. Then click OK.

This will snap the eye pointer to the same place and orientation as the eyeball mesh.





39. Getting Ready to Parent

This is how the point helper should look after being aligned. It's important to follow the next few steps in the proper order, otherwise you may mess up your eyes and not be able to undo.

Therefore, save you work now.





40. Parent Point Helper to Bone

This is the CRITICAL part to do first. Choose the "Select and Link" tool and select the pointHelper, then click and holddown the mouse button and drag onto the Bone. Then release. This will parent the Helper to the Bone.

You can also select the Point Helper and choose the "Select By Name" dialog with the link tool to parent. Note here how in the dialog box, the Point Helper is shown as a child of the bone.





41. What NOT to do

In case you are curious, in the next step we will parent the meshes to the Point Helper. What would have happened if we had parented the meshes first, and then the point helper to the bone, is things might have become all rotated and messed up as shown.

I'm not sure why this happens, but it seems if you parent the helper first, then everything to the helper after, it works okay.





42. Parent Eye Objects to Point Helper

Now select all the eye meshes, (eyeball and lids), as well as the eye FFD spacewarp, and then Select and Link them to the Point Helper.

This will make them children of the eye pointer which in turn is a child of the head bone as shown in the dialog to the right. Note you can see the Hierarchy in the dialog by clicking the "Display Subtree" option in the window.





43. Apply Meshsmooth to All Meshes

Now select ALL the eye mesh objects. Include BOTH eyes if you have them. (Make sure that Meshsmooth has been removed from everything first). Then go to the "Modify" panel and select "Meshsmooth" from the Modifier List.

This will apply one copy of the Meshsmooth modifier to ALL the selected objects at once. This is nice, because now you can change options by just clicking on one of the meshes, and adjusting the modifier. Even just adjusting the one object will affect all the others since they all share the same modifier.

Set the Iterations to 1 or 2. I tend to set this lower for faster redraws, and then select the "Render Values" so that "Render Iterations" is checked on and has an iteration of 2 which is what I render with. This way even if my viewport is set to 0, it will still render with a nice smooth value of 2.





44. Test the Setup

At this point the squash and stretch setup on the eyes is done. You can select the FFD and animate the shapes in the morpher modifier. (feel free to hide or delete the targets) You can also select and rotate the eyeball or lids, and they will work. Finally as the head moves or rotates, the eyes remain parented.

A more complete setup would probably include a "Look-At" controller on each eyeball looking at a helper or dummy for animating where the eyes are looking.

You might also want to create a custom control curve with Custom Attributes named the same as the morpher targets. Then you could "Wire" the attributes into the morpher channels, so you can simply control morpher with the control object or manipulators.

You could also setup a reactor controller on the Eye Lids, so that they rotate based on a Custom Attribute you add to a control curve or Manipulator as well. That way, you would select one object, and with the attributes, drive eyelid rotations, and eye shapes.

Check the MAX manuals for information on Wiring and the Reactor Controller.


Other Rig Ideas

That is the basics of a cartoony eye setup. As mentioned above, you can complete the rig with some simpler animator controls through wiring and controllers. You can also adjust some deformation issues through creative rigging as well.

For example, right now the pupil deforms into weird shapes. If you made a 3D sphere object that sat on top of the eyeball and made that object the pupil, then you could use an "Attachment" controller to "stick" it onto the eyeball mesh. However, you would NOT bind the pupil to the spacewarp FFD. Only bind the eyeball and lids. That way everything deforms, but the pupil remains spherical. The only catch with this is the eyelids will probably have to be thicker to make sure the pupil doesn't penetrate in squished shapes.

Another trick with Wiring, is to create a few "extra" targets that tie into facial mouth shapes. For example, create a target where the bottom of the eyes squishes up or down. Then you could wire from your mouth morpher targets into the corresponding eye target. Such as wiring a "Smile" facial target into the eye "squishUp" target. And the "Frown" into the eye "squishDown". This way as you animate the mouth/face, the eyes automatically move and adjust and look more lifelike.

Hopefully this tutorial has helped you out to create your own cartoony eye rigs!


Special Thanks

Rick May for runnning and maintaining the CG-Char Forums.
Discreet for making such a cool program!
All those guys on the Penguins Team at Big Idea that either taught me or made me learn what I know about rigging. :)

About the Author

Michael Comet is currently a Rigger/T.D. at Blue Sky Studios in New York. Previously he was Lead Rigger for the Video Team and a 3D/Animator/Artist at Big Idea in Lombard, IL where he worked on the first three Penguins episodes as well as several Veggie Tales videos. Prior to that he was Lead Animator at Volition-Inc and animated many of the cinematic sequences for Descent: Freespace, and headed up much of the realtime character animation and cinematics R&D for their RPG title, "Summoner". He can be reached via email at comet@comet-cartoons.com, and has a personal homepage at: http://www.comet-cartoons.com/ which has more information and samples of his work.

About the Sample Images

This article, all images and text are Copyright ©2001 Michael B. Comet All Rights Reserved.

This article may be reprinted for personal use only. It may not be packaged or sold in part or in whole, either alone or as part of another package, book, magazine or any other item. Unauthorized duplication is strictly prohibited. This article and related artwork, samples or text, are not to be copied onto other sites without prior written consent from the author. When in doubt, ask.