Conceptual Design: Understanding and Communicating Form

With the emergence of powerful next-generation platforms such as PS2 and X-BOX, game artists have been given unprecedented power to create realistic manifestations of their creative vision. No longer do characters, vehicles and other game objects and environments have to be represented by blocky, low-resolution geometric parodies of the desired design. Ultra-high poly-counts and adaptive tessellation of spline-based models allow for highly sophisticated organic surfaces. Real-time reflection, specular and environment-mapping allow light and reflection to perfectly describe every subtlety of an object's shape. We are rapidly approaching the point where sophistication of form won't be lost in the translation to real-time models. Rather, the lack of subtlety in how form development is approached will begin to mark the difference between good design and bad, much as it does in the product and automotive industries. More than ever before it behooves the designer to truly understand the three-dimensional nature of the forms he or she is creating, and to properly communicate to whomever may be executing the design the important relationships, resolutions and proportions of form that they are instinctively instilling into their designs.

The goal of this paper is to give designers the ability to think of organic three-dimensional shapes in a structured way, rather than as abstract "blobby" form. As well, an understanding of how form affects light and reflection, and how to apply that knowledge to drawing, will be covered. Armed with this knowledge, artists should be better equipped to control the forms in their designs, illustrate them accurately from any number of angles, and communicate the underlying structure (and thereby a way of approaching them) to whomever (including themselves) may be tasked with making the design 'real'.

To sum up, this article could be called: "Making rounded shiny things that look good."

Describing Organic Form

As this is for a relatively "advanced" audience, I am not going to get into the basics of defining volumes or proportion. I am also not going to deal with simple geometric forms, such as planes, or cubes, or cylinders, except in terms of how they help us to understand more complex forms. This article will focus on organic surface: the type of surface that cannot be easily described mathematically, or drawn readily with rulers and circle guides. The type of surface that is shaped intuitively by the free flowing hand and controlled by the eye.

There are many methods of describing organic form in general terms: simplifying the shapes to intersecting stretched spheres; starting with primitives and then 'softening' them into more 'rounded' shapes; stringing together a series of evenly-spaced two-dimensional cross-sections. The first two are useful to describe the volume of the form, but lack enough sophistication to describe the surface. The last is of obvious use, but assumes an intimate knowledge of the surface in order to generate it in the first place. It is no coincidence, by the way, that all of these methods have been used in the past in 3-D modeling. Needless to say, there are many others.

The approach that I prefer to use is to concentrate on the surface. When broken down, any organic form can be described as a of combination of convex and/or concave surfaces, either intersecting to form edges, or blended together through tangential transition surfaces, themselves either convex or concave. Breaking down a given surface becomes a process of identifying where one surface ends and the next begins, and then describing the character of those individual surfaces. And when it comes to describing things, the first thing you need is a vocabulary.

As a means of conveying the understanding of form, I will be drawing on some of the vocabulary that designers, primarily in the automotive industry, have been using to control and communicate sophisticated organic form for the past few decades. Car bodies have arguably the most sophisticated surface development of any man-made object, and present an extreme case of highly controlled, yet difficult to describe forms. Geometric forms are simple: they can be described in very precise mechanical terms. Completely natural forms, such as animals or plants, are more difficult, but allow for natural imperfections, asymmetricality and irregularity. Manufactured organic form such as automotive styling, on the other hand, is at once free-form and rigorously precise.

In order to communicate design intent between stylists and clay modelers, automotive designers over the years have developed a language of form and corresponding terms, much of it borrowed in turn from older disciplines such as cabinetmaking, sculpture, shipbuilding and coach-building. This short-hand makes it easier for design teams to communicate succinctly and accurately what a form is doing, without resorting to vague description in the vein of : "it's sort-of flat, but not quite, with more of a roundness at the end". These terms also describe fundamental elements of three-dimensional form, such that the use of them enables the designer to break complex surfaces down into controllable elements and intersections.

Form Glossary

For the most part, the glossary below consists of nouns to describe some basic surfaces, as well as terms which describe what a surface is doing. Often an adjective will lead to a verb or noun, or vice-versa, as in a curve may have acceleration, or you can accelerate the curvature and create an accelerated curve. As well, there are odds and ends of terms that describe specific occurrences of form, such as blister.

This is certainly not an exhaustive list, simply a starting point. You should feel free to add your own terms to your personal vocabulary as you begin to identify certain developments of form that occur in your work. The important thing is to grow a vocabulary that can be shared with the people you need to communicate your design with, as well as an aid to your own visualization of form. As wizards and scientists believe, once a thing is named, it can be more easily identified, isolated, and controlled.

Keep in mind as well that these are not dictionary definitions, just my own understanding of how the terms are used to describe form.

Accelerate (curve, line, surface) v: to increase the rate of curvature over the length of a surface or line.

Acceleration of the curvature of a surface is an important way to control the composition of a form. Just as in drawing or painting, composition and proportions are critical in surface development. In two-dimensional art forms, composition is controlled through the proportions and positioning of various graphic elements. A radial curve is balanced along it's length. By accelerating the curvature of a surface, you are placing the accent of that surface to one end or the other. You are introducing tension and direction, much as you might in an image by placing the focus off-center.

Acceleration becomes obvious on a shiny or reflective surface, as highlights and reflections will appear to 'travel' quicker over the more curved sections of the surface.

Arc n: A section of a circle. A curved line with a constant radius.

Bevel n: A flat surface formed by cutting off the edge where two surfaces meet. v: To cut off the edge or corner of a surface.

Blister n: a distinct, convex surface emerging from a less rounded surface, delineated with a hard intersection. Opposite of dimple. v: to pull a crisply delineated area of deep convexity out of a less rounded surface.

Bone n: The rounded intersection between two surfaces where highlights gather. A tightening of curvature on a surface, forming the appearance of skin stretched over a bone.

Bulge n. a convex surface emerging from a less rounded surface, delineated with a very soft intersection. Also pooch. v: to pull a softly delineated area of deep convexity out of a less rounded surface.

Chamfer v: To cut off the top of a protruding surface, creating a flat plateau whose edge describes the cross-section of the surface.

Coke-bottle/ Wasp-waist n: A generally symmetrical, curved form which narrows near the mid-point.

Concave a: Having negative (inward) curvature.

Concavity n: Negative (inward) curvature. A depression in a surface.

Cone v: To taper a surface by increasing the curvature of its cross-section over its length.

Coning a: Describing the tapering of surface or highlights.

Convex a: Having positive (outward) curvature.

Convexity n: Positive (outward) curvature. A bulge in a surface.

Crease n: A sharp, shallow edge where two surfaces meet.

Crown n: A shallow convexity of surface. v: To add convexity to a surface.

Cut-line n: The break between two flush surfaces. A division between two panels.

Dimple n: a distinct, concave surface depressed into a convex or shallower concave surface, delineated with a hard intersection. Opposite of blister. v: to depress a crisply delineated area of concavity into a surface.

Edge n: The corner formed by two surfaces meeting at a positive angle without a transitional surface.

Extrusion n: A shape with a constant cross-section. (also known as a Drag Section)

Fillet n: A concave surface which acts as a tangential transition between two intersecting surfaces. v: To smoothly transition two or more surfaces which meet at a negative angle.

Flush a: Describing two or more unconnected surfaces that share the same plane.

Hollow a: To have shallow concavity; or, in the case of a convex surface, to appear, in the context of the surrounding shapes, to have concavity.

Lathe n: A shape with a radially constant cross-section. Also revolve.

Oh-gee n: An 'S'-shaped switchback curve in a line or reflection, often caused by a blistered surface.

Pooched [surface] n: An area of surface that has an increase of convex curvature from the surface around it. (kind of like a beer-belly) Also bulged.

Radius n: a: A line segment extending from the center of a circle to its circumference. b: A curve defined by a given radius. c: A transitional surface between two or more adjacent surfaces which is characterized by a constant circular cross-section. v: To round out an edge between two surfaces by using transitional surface with a radial cross-section.

Sheer a: Having very little crown, or convex curvature. Almost flat.

Taut a: Having the appearance of tension.

Seeing Organic Form

One of the principles that designers have observed over the years is that we don't really see form, what we see is the way in which form manipulates light before it is reflected back into our eyes. This may seem like an esoteric piece of semantics, but embracing it is fundamental to understanding how to manipulate the graphic nature of three-dimensional form. This means how to properly illustrate it, yes, but also how to truly design it with control over how it will appear from various angles and in different lighting.

Designing surface is really about designing highlights and reflections.

Shiny or metallic surfaces reflect differently as you observe them from different angles. It is the movement of reflections and highlights across those surfaces that describes to our eye the forms they are enveloping. What's more, subtleties of surface curvature can drastically affect how and where a reflection or highlight falls, as well as the speed at which it crosses a given area of surface when either our eye, or the object, or whatever is being reflected is moving. This significantly alters our perception of the underlying shape.

Differences in surface properties also affect our perception of form, as does color. Metallic surfaces will gather diffuse highlights anywhere where a surface is 'bending' or changing direction, lending graphic strength to the intersections of surfaces. As well, they tend to get 'toned' by the colors around them, allowing contrasts of warm and cool colors to indicate the direction of surfaces. Glossy materials will pick up distinct reflections which can delineate the cross-section of a form through the way they fall and the degree to which they are distorted by the surface. All of these are thankfully governed by observable physical principles which, when understood, can be applied to our rendering.

Understanding how surface manipulates light can begin by observing the simple cylinder. By simplifying to an object with curvature in a single direction, one can isolate the different effects of horizontal and vertical curvature, and then extrapolate the results on any compound surface with a greater degree of understanding.

Let's start out by looking at the physics of it. Light reflects off of a flat surface at an angle exactly opposite to the angle it came in at. Seen another way, it is "mirrored" across the axis of a line perpendicular to the surface, otherwise known as the surface normal. To figure out where a reflection will fall on this surface, you mentally trace the path between the source of the reflection and the "eye", ensuring that the path passes through the proper angle of reflection on the surface. That point is where the reflection will be seen on the surface. The same is true of highlights, tracing the path from the light source, through reflection, to the eye.

Tracing reflections on a curved surface is simply a matter of finding the perpendicular to that surface at any given point, in other words, the surface normal. Just think of a curved surface as an infinite number of flat mirrors linked along a curve (like a disco ball). For all intents and purposes, the surface at that infinitesimal point where a ray of light hits can be considered 'flat' and the process is the same.

The way in which I try to plot reflections is to find the most contrasting edge in whatever is being reflected, as this will end up being the strongest graphic element on the surface. Then I figure out where this will land across my surface. For the purposes of illustrating the form a 'horizon line' is ideal. It provides a clear delineation between elements reflecting above and below eye level, and generally provides warm ground tones and cool sky tones to further emphasize the changes in curvature. Basically, it makes very clear what part of the surface is facing 'down' and what part is facing 'up'.

A good tool for observation is a flexible sheet of glossy or reflective material, such as Mylar. You can also spray a sheet of glossy paper or thin plastic with silver spray paint. If you spray a sheet of transparent plastic, such as acetate with silver paint, you will have created a flexible mirror for observing reflections on one side, and a silver sheet for reflecting highlights on the other.

By bending your mirror in various directions, you can observe how it is distorting the world around you. Ideally, you should find an environment that has a distinct horizon, 'sky' and 'ground' to simplify your observation. Try going outside.

If you roll the sheet into a horizontal cylinder, you can see that the reflections are compressed vertically, and begin to appear long and thin. Roll the sheet into your hand to form a hollow half-cylinder. The reflections have compressed in the same manner, but now reversed, with the 'sky' reflected in the lower half, and the 'ground' in the upper.

Now turn your original cylinder vertically. You will notice that any roughly horizontal line below your eye level in the environment will appear to 'climb' or bend upward in its reflection as it goes away from you, and hence toward the vanishing point on the horizon. The opposite is true of lines above your eye level. As well, any subtle variations in the height of what is being reflected around you become drastically exaggerated as they are compressed by the curvature of your cylinder.

These simple observations are the foundation of understanding how complex rounded surfaces distort reflections, and, more importantly, how form can be described by the application of these phenomena to your drawing.

Now take out your 'diffuse' sheet, and bend it into a positive horizontal half-cylinder. Rather than making it perfectly cylindrical, however, pinch it more toward the center so that it forms more of a loose bend through the middle, like a 'v' section on it's side with a rounded point.

You will notice that the area where the sheet is bending brightens up, as the metal-flake in the paint gathers diffused light. You have created what is called a 'bone' in the surface. This phenomena is a very powerful graphic effect, and can serve as strongly as a line to control the balance of your form.

Keeping the "pinch" at one end, let your sheet unroll into more of a regular cylinder at the other end. Notice how the highlight 'flares' out and diffuses as the curvature of the bone lessens. You have just created a 'coning' bone in your surface. Coning is also a very powerful tool in surface development, and can be thought of as the three-dimensional equivalent of varying your line weights in a drawing.

Designing to Control Reflections and Highlights

Once you begin to understand the powerful graphic effect of reflections and highlights on surface, the object is to control that effect. It is not enough to have a reflection fall just perfectly from a particular angle, only to fall off or distort in an unattractive way as the view is changed.

A key to controlling light is in the intersections of surfaces, and the creation of 'bones' at those intersections. As described in the glossary, a 'bone' in a surface is a localized area of increased curvature. Go back to your flexible 'highlight' mirror, and form a bone in the surface as described above. Move the surface around, and change your vantage point. You will notice that from just about any angle, that 'bend' will still be picking up highlights and consequently is well-defined. This is because unlike a flat surface, which will only pick up glare from a light at the exact right angle, the amount of curvature gathered in the narrow area of the bone will always have some part of its surface facing the light source and, in fact, probably several light sources within the environment. This allows it to always be concentrating highlights along its length. This allows a great deal of control over the graphic effect of highlights on the surface.

For example, compare a radiused cross-section to a 'boned' section covering the same area and depth. If you watch the highlights and reflections on the rounded surface, they will move up and down the surface depending on your point of view. Because the 'boned' surface concentrates most of the change in curvature to a narrow section, the essential graphic quality of the highlight is unchanged, even as the highlights crawl across the surface. Essentially you have constrained the effect within the transition from one surface to another. The tighter the bone, the stronger the highlight and the more it is constrained.

As well, the reflections have been concentrated by the localized change in surface. Instead of having one continual rounded surface where the demarcation between reflecting 'ground' and 'sky' depends on your viewpoint, the boned surface divides the section into two more shear surfaces which are distinctly oriented toward different reflections, with the bone controlling where the transition edge (or horizon line) will fall. It creates the same effect as having two planes in terms of defining the surface, but the soft transition between them allows the reflection to 'complete' itself within the curvature rather than getting truncated by a hard edge. By softening the tightness of the bone and the crown of the upper and lower surfaces, you can get the appearance of a very rounded section, if that is what you are after, while still maintaining some degree of control over your reflections and highlights.

Designing with Transitions

Once you've recognized how transition areas can be used to control the graphic appearance of your form, the next step is to incorporate it into your design thinking.

Visualize your object as a flow of graphic elements in three-dimensional space, wrapping around the various views of your object. Design your primary transitions first as a series of edges between surfaces. The surfaces necessary to create those areas of focus will naturally fall into place. Secondary transition areas will naturally occur. As a surface follows an edge around a corner, for example, the change in direction creates another transition which is likely to pick up highlights and distort your reflections. You can control the tension between those areas and your primary transition areas by balancing the tightness of them. The tighter the transition, the stronger the highlights will read, creating a hierarchy of compositional elements in your three-dimensional form.

You can control the amount of 'movement' over surfaces and the contrast between adjacent surfaces by adjusting the amount of crown in each surface and therefore the steepness of the transition between them. Keep in mind that it doesn't take a great change in the angle of a surface before it picks up a significantly different character of light and reflection from the world around it. Then you can control the softness of the transition by increasing or decreasing the tightness of the bone, or choosing to use an edge, radius or a bevel.

In the end, the primary character of your design will be consistent regardless of the view or viewing conditions. You will be able to control the graphic flow of your forms, as well as how and where reflections and highlights fall across your surfaces to define their shapes.

______________________________________________________