Mouse Character Model – Part 2

On May 15, 2012, in All Posts, Artwork, Games, by stu
0

Last week I posted a intermediate-level tutorial on how to model a mouse from sketches in Blender. This week I continue with how to add eyes and a tail. For a refresher, here’s where I left off last time, after completing the ears:

Making The Eyes

Edit the body mesh (TAB) and cut a starting hole for the eyes by selecting a polygon near the eye and deleting it (X-Key):

In my concept sketches, the eye is an oval shape, but to animate the eyes properly, they need to be spherical. We can achieve the oval shape by positioning a large eye ball mostly inside the body and shape the eye socket to create the oval (look at your own eyes in the mirror).

To create an eye ball, switch back to Object Mode (TAB) and in the Add menu, select Mesh -> UV Sphere. Scale and position the eye so that it is roughly where you want it. It might help to add a pupil texture to help with positioning it. I won’t cover texturing in this tutorial, but there are a lot of resources on the web.

   

Then I said “Oops!” and replaced the eye with a lower-polygon-count UV sphere. :-)  Eye meshes are easy to create, so you can always change the triangle count later. Create a linked duplicate for the left eye so that the left eye shares the mesh with the right eye. Position it mirrored (copy the X coordinate and make it negative). Now we can begin creating the socket shape around the eye ball.

Begin by shaping the edge around the polygon that you cut out. Subdivide the edges using the Knife Tool (K-key) and drag the edge vertices out from the eye until you have a socket that is quite a bit larger than the eye ball. Here I’ve selected all the edges that I either subdivided or added:

Next, select the inner edge loop around the socket and extrude with scale (E, S). Extrude twice to create nice quad loops around the eye ball:

Then one more extrude with scale. This time you also want to pull the loop down into the eye ball to create the edge of an eye lid. I’m also going to add a white material to the eye ball so that it stands out better:

These loops around the eye will be important if an animator needs to manipulate the eye lids to give the mouse more emotional character. At this point there are several problems. My mouse is looking a bit sleepy here, so I need to flatten out the loops around the eye. The resolution looks a bit low as well, so I added some more cuts. I did about two hours worth of knife cutting and shaping to get it all looking perfect (give me a break, this is my first time modeling eyes). Et voila!

    

From the side, the eye is looking oval-shaped as I wanted in my sketch. Great!  I also did some work to scale in the body, as my mouse was looking a bit wide. All ready to add the tail…

A Tale of A Tail

The tail was actually quite easy to model compared to the eyes, the hard part was figuring out how many segments it should have to look smooth when the bones are bending. Too few segments and it will look jagged. I made a separate tail model and experimented with a few different bone counts. I ended up with a 16-segment tail, but your count may vary depending on length and target screen. The iPad is pretty detailed, so I don’t want to cheat on polygons.

Start by shaping the “tail hole” so that it’s round and the right number of edges around. I chose 10 (decagon). If you change your mind on this later, you’ll probably have to redo the tail. No pressure.

    

From here, you’ll be doing one short Extrude and Scale (E&S) to start the tail, then a very long E&S to establish the length. You may notice that when you scale, it pulls the vertices away from the center (X=0). This is because we’re using the Mirror Modifier, so the vertices we actually have selected are just the ones on the right half of the tail (see origin in the above images). Scaling around that center pulls the vertices away from the Y-Z plane. There are two ways to fix this:

  • Method 1: After scaling, select only the vertex that is closest to X=0. Copy its X coordinate. Then select the vertices in the loop you just scaled and translate them using this X coordinate: hit G (grab) and then Enter (confirm). Then in the tools panel you can paste the X translation amount and negate it to move all the vertices back towards the center of the tail.
  • Method 2: Before scaling your extruded edge loop, perform a “Snap -> Cursor to Selected.” This will place the 3D cursor in the center of the extruded half-loop. Next, move the 3D cursor on to the Y-Z plane by setting the 3D cursor X coordinate in the properties panel (N-Key) to zero. Select 3D cursor as the Pivot Point, then scale.

Finish the tail with a couple more E&S operations, ending in a vertex merge (Alt+M) to create a point:

It’s important at this point, before you subdivide the tail into segments, that you get the tail tapering and size just right. Normally to subdivide something like this I would just use the “Loop Cut and Slide” command, but Blender doesn’t like the fact that the tail isn’t a true loop (again, due to the Mirror Modifier). To subdivide, the best method I’ve found is to select all the long edges running parallel with the tail (do not select any loop edges). Then simply subdivide those edges.

In the Tool Properties -> Subdivide, choose the number of cuts to create. In my case I wanted 12, but the interface only goes up to 10. I got around this by doing two subdivides first by 2 cuts and the second by 3 cuts. Here’s the result, all ready for rigging:

Share
Tagged with: • • • •
 

Work-In-Progress Character Model

On May 11, 2012, in All Posts, Artwork, Games, by stu
0

I’ve been in “artist mode” the last couple of days. This post will be the first (very rough) sneak peek at the character for the “indie” 3D mobile game I’m developing.

Concept Phase

First I made some quick sketches on my iPad using Autodesk Sketchbook Pro:

It’s challenging to sketch with my fat fingers, but if I zoom in a lot it works. I really enjoy sketching on it. I might buy a stylus at some point soon to improve the accuracy.

The layers in Sketchbook Pro make it very easy to rough sketch on a bottom-layer and then go in with ink and color later if you want. It’s good to try different shapes on multiple layers so you can compare them and select the best one. For example, from the side-view, I tried both the more “upright” and “forward” arching mouse shape (above), as well as a “semi-circle arc” shape – one that looked more like an actual mouse:

The more realistic I made the head shape, eyes, and nose, the less friendly and more “critter-like” the character became. Since I’m targeting casual gamers for this title and the story works best when the player has empathy for the mouse, I choose a friendlier art direction.

From 2D Sketch To 3D Mesh

Once I decided on a general direction with the sketch, I imported the sketches into Blender using the Background Images section in the 3D view options (N-key). This feature does exactly what I needed. It only shows the sketches when you’re aligned to a particular view direction (in orthographic) and you can easily blend the foreground polygons with the sketch so you can see it as you are modeling. Once you add a sketch image, the panel has options for scaling and moving the sketch around, so it was relatively easy to align it exactly to the size and offset that I needed.

There’s a decent tutorial on modeling from images that you can read here. I ended up using the first technique of extruding boxes, but with a mirror modifier along the X axis.

Another good Blender character modeling tutorial can be found here. This one showed me how to sculpt by extruding loop edges instead of faces (more on this below).

I began to extrude out a cube to approximately the right shape from the top and side views. Then I began loop cutting and shaping the body until it was round instead of rectangular.

I have coded some pretty compelling character physics tech (more in a later post). So I’m building this character to work with that tech. At this early phase of modeling, all I want is a rough shape so I can be sure the tech is going to work as expected. My first test of the tech was on a simple tail model, and it looked great, but the body is going to be a bit more challenging.

Here’s a “work-in-progress” capture of the mouse body (no tail, eyes, or whiskers yet). The feet and nose are just roughed-in for now. I think the front legs might be too far forward, what do you think?

Building the Ears

I used the “loop edge extrude” technique to build the ears. Start by extruding a row of faces from the top of the body to create an “wall” shape. The Knife Tool works well for sizing the faces before you extrude the ears. Then shape the top of the wall into a rough ear outline. You’ll need to subdivide those faces enough to create a somewhat smooth arc. Here’s what mine looked like at this point:

You’ll have a bunch of long quads formed when you extruded the ears out from the body, but you can just delete these (X-key). This leaves a hole, surrounded by a loop of quads that was once the “top” of your “ear wall.”

Now, in edge-select-mode, select the top edge of the loop (Alt-Right-Click) and then extrude the edges (E-key) and then hit S to scale them in. Repeat this a couple times.

        

To complete the ear center, extrude one last time and then hit Alt-M to merge the vertices to one center vertex. From this point you need to do the same for the back of the ear. Once you have the topology built, it’s time to sculpt. I used the Proportional editing tool with vertex grab (move). But the sculpting brushes will also work for this.

Please leave a comment and let me know what you think!

Share
Tagged with: • • • • • •
 

OpenGL Frame Capture Tips

On April 10, 2012, in All Posts, Games, Graphics, by stu
0

In Xcode version 4.2 and above, there’s a very nice  feature to capture OpenGL rendering commands from your game as it runs on an iOS device. I use the OpenGL ES 2.0 API, but it works the same in ES 1.1. Here are some helpful tips that I’ve discovered. I bumbled through these issues myself, so these will hopefully save you some time.

  1. Only render the objects that you are debugging. In Xcode 4.2, capturing a frame consumes a TON of memory if you have a lot of objects. For example, my game renders about 50 objects, each with approximately 2000 vertices and this will consume gigabytes of memory. So unless you enjoy trying to end tasks while your Mac is completely unresponsive, hide all but the objects that you are investigating. On the Apple Developer Forums, I was told that this issue has been improved in Xcode 4.3.
  2. Group your commands. There’s a handy debug extension you can call to mark the start and end of a group of rendering commands. Rendering a single primitive like a triangle strip, even if it is one object, involves setting a lot of attributes and uniforms and possibly changing blend modes. You can group all these commands together in the debugger by first calling glPushGroupMarkerEXT(0,”Name”) before issuing the commands and then glPopGroupMarkerEXT() after. You can also group objects together in the same way to create a hierarchy in the tool’s interface.
  3. Label your resources. When you create a texture or vertex buffer, you can attach a friendly name to it so that it doesn’t appear as “Texture #28.”  This is done using the glLabelObjectEXT()function. Here’s how to do it for a texture:

    glLabelObjectEXT(GL_TEXTURE, texture.glid, 0, texture.name)

    where texture.glid is the GL texture identifier returned from glGenTextures() and texture.name is a null-terminated char string. One important tip here is that you can’t call this until you’ve actually created your texture using glTexImage2D(). Otherwise you’ll get an error returned.

Command Grouping

Resource Labels

Share
Tagged with: • • • •
 

Twisted-Hue Lighting

On March 15, 2012, in All Posts, Games, Graphics, by stu
1

3D graphics gurus and hardcore gamers continually lust-after the latest in 3D rendering hardware so that they may get closer to the holy grail of ray-tracing, real-time volumetric lighting, and other rendering effects. But these science-based effects, while accurate, are geared mainly toward the reproduction of reality. For the game I’m making now, I’m much more interested in creating an experience in a world that is visually driven by aesthetics, not reality. A world that is rich with character – more like a painting than a photograph or a blockbuster movie.

While reality is often the goal in 3D computer graphics, an artistic interpretation is usually more compelling.

To present this contrast, let me reintroduce the most basic lighting model, the Phong reflection model. The formula for the Phong model computes the amount of light hitting a point based on the surface normal at that point, the direction of a light source, and the direction of the viewer. The equation can be broken down into 3 components: an ambient lighting term (bouncing light from all directions), a diffuse term (direct light from a source), and a specular term (reflected light).

Let us now imagine a simple 3D object. We’ll choose a nice green for the diffuse color of its surface material. (“Nice greens” usually have red in them, by the way). The gradient below represents, from left-to-right, the diffuse term in the Phong model; from the brightest point (surface color facing the light) to the opposite side of the object (the parts in shadow):

Diffuse lighting gradient is aesthetically boring.

While the green color I’ve chosen is quite splendid, the gradient itself is rather boring. This is a well-known condition – a topic for Art 101. Artists are trained to avoid boring lighting gradients and embellish these with interesting color. Often these colors use a completely different hue. In the example of a skin tone on the right, an artist will highlight the basic yellow with warm, red hues. No outdoor watercolor would be complete without shadows of blue and purple, instead of just darker versions of a subject’s actual color.

Computer scientists thought they could solve this problem by adding the ambient lighting term. In theory, you could add in a dark blue color to give the effect of a vivid shadow. The problem is, this also affects the color of the lit part of the object:

The same gradient, with ambient blue light added.

What this means is that a lighting artist typically has to mess with the lighting to get it to look the way they want it to. This means adding in fill lights to a game world until the scene looks the way they want it to. These extra lights often must be “baked” into the game world and are static (can’t move or change) because there are too many to efficiently calculate in a pixel shader.

Graphics programmers usually think of color in terms of its RGB (red, green, and blue) components. But artists are trained to think in terms of HSB, or hue, saturation, and brightness. To get a visual sense of the HSB color space, look at any color wheel. The code to convert between these systems does consume a few CPU cycles, but it can be very useful for a programmer to start using the HSB (also known as HSV) color space for certain applications. In this space, you can take any color and simply tweak a single value up or down to alter the saturation, hue, or brightness of that color. When you apply some artistic principals to this idea, you can take any color and “twist” it to get another color. One that compliments it in a really attractive way, creating a color harmony. This is called color scheming and I won’t go into these ideas here, but you can read more about them elsewhere.

I began to experiment with these ideas in the context of lighting. Colors that are next to each other on the color wheel look good together (analogous colors). I used this principle to generate a shadow color for any particular surface color. I ended up with the following technique:

  1. convert the surface color to HSB (looks best when color has saturation less than 50%)
  2. darken it to a value between 20-35%.
  3. bump the saturation up to 100%.
  4. “twist” the hue by 30-50 degrees in either direction.

Using this twisted hue technique, our green lighting gradient can now looks like this:

 (cool)

 (warm)

…which preserves the green color and produces a much more compelling lighting model than the Phong model gradients that I showed earlier. Here are some other twisted hue examples using other surface colors (the last two use the same surface color):

      

Finally, here are some simple examples to show the difference. These terrain renderings are captured from my game engine running on the iPhone. The top renderings are using a standard N*L lighting model to modulate the texture color (a desaturated yellow color, similar to the above gradients). The bottom renderings use N*L to interpolate along the twisted hue lighting gradient.

        

For more information on HSV and HSL color spaces, see Wikipedia.

Share
Tagged with: • • • • • • •