Sign up ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

How can I draw outlines around 3D models? I'm referring to something like the effects in a recent Pokemon game, which appear to have a single-pixel outline around them:

enter image description here enter image description here

share|improve this question
Are you using OpenGL? If so, you should search on google how to draw outlines for a model with OpenGL. – oxysoft Jan 5 '14 at 18:58
If you're referring to those particular images you put in there, I can say with a 95% certainty that those are hand drawn 2D sprites, not 3D models – Panda Pajama Feb 24 '14 at 6:12
@PandaPajama: No, those are almost certainly 3D models. There's some sloppiness in what should be hard lines in some frames that I wouldn't expect from hand-drawn sprites, and anyway that's basically how the in-game 3D models look. I suppose I can't guarantee 100% for those specific images, but I can't imagine why anyone would go to the effort of faking them. – C. A. McCann Jul 30 '14 at 23:39
Which game is that, specifically? It looks gorgeous. – Vegard Aug 2 '14 at 12:35
@Vegard The creature with a turnip on its back is a Bulbasaur from the game Pokémon. – tepples Oct 29 '14 at 5:33

5 Answers 5

This effect is particularly common in games that make use of cel shading effects, but is actually something that can be applied independently of the cel shading style.

What you are describing is called "feature edge rendering," and is in general process of highlighting the various contours and outlines of a model. There are many techniques available and many papers on the subject.

A simple technique is to render only the silhouette edge, the outmost outline. This can be done as simply as rendering the original model with a stencil write, and then rendering it again in thick wireframe mode, only where there was no stencil value. See here for an example implementation.

That will not highlight the interior contour and crease edges, though (as shown in your pictures). Generally, to do that effectively, you need to extract information about the mesh's edges (based on discontinuities in the face normals on either side of the edge, and build up a data structure representing each edge.

You can then write shaders to extrude or otherwise render those edges as regular geometry overtop your base model (or in conjunction with it). The position of an edge, and normals of the adjacent faces relative to the view vector, are used to determine if a specific edge can be drawn.

You can find further discussion, details and papers with various examples on the internet. For example:

share|improve this answer
I can confirm that the stencil method (from works and looks really nice. You can give the thickness in screen coordinates so the thickness of the outline doesn't depend on the size of the model (nor on the shape of the model). – Vegard Aug 2 '14 at 14:17
One technique you didn't mention is the post-processing border-shading effect often used in conjunction with cel-shading which looks for pixels with high dz/dx and/or dz/dy – bcrist Oct 26 '14 at 14:39

I don't think any of the other answers here will achieve the effect in Pokémon X/Y. I can't know exactly how it's done, but I figured out a way which seems like pretty much what they do in the game.

In Pokémon X/Y, outlines are drawn both around the silhouette edges and on other non-silhouette edges (like where Raichu's ears meet his head in the following screenshot). Raichu

Looking at Raichu's mesh in Blender, you can see the ear (highlighted in orange above) is just a separate, disconnected object which intersects the head, creating an abrupt change in the surface normals.

Based on that, I tried generating the outline based on the normals, which requires rendering in two passes:

First pass: Render the model (textured and cel-shaded) without the outlines, and render the camera-space normals to a second render target.

Second pass: Do a full-screen edge detection filter over the normals from the first pass.

The first two images below show the outputs of the first pass. The third is the outline by itself, and the last is the final combined result. Dratini

Here's the OpenGL fragment shader I used for edge detection in the second pass. It's the best I was able to come up with, but there might be a better way. It's probably not very well optimized either.

// first render target from the first pass
uniform sampler2D uTexColor;
// second render target from the first pass
uniform sampler2D uTexNormals;

uniform vec2 uResolution;

in vec2 fsInUV;

out vec4 fsOut0;

void main(void)
  float dx = 1.0 / uResolution.x;
  float dy = 1.0 / uResolution.y;

  vec3 center = sampleNrm( uTexNormals, vec2(0.0, 0.0) );

  // sampling just these 3 neighboring fragments keeps the outline thin.
  vec3 top = sampleNrm( uTexNormals, vec2(0.0, dy) );
  vec3 topRight = sampleNrm( uTexNormals, vec2(dx, dy) );
  vec3 right = sampleNrm( uTexNormals, vec2(dx, 0.0) );

  // the rest is pretty arbitrary, but seemed to give me the
  // best-looking results for whatever reason.

  vec3 t = center - top;
  vec3 r = center - right;
  vec3 tr = center - topRight;

  t = abs( t );
  r = abs( r );
  tr = abs( tr );

  float n;
  n = max( n, t.x );
  n = max( n, t.y );
  n = max( n, t.z );
  n = max( n, r.x );
  n = max( n, r.y );
  n = max( n, r.z );
  n = max( n, tr.x );
  n = max( n, tr.y );
  n = max( n, tr.z );

  // threshold and scale.
  n = 1.0 - clamp( clamp((n * 2.0) - 0.8, 0.0, 1.0) * 1.5, 0.0, 1.0 );

  fsOut0.rgb = texture(uTexColor, fsInUV).rgb * (0.1 + 0.9*n);

And before rendering the first pass I clear the normals' render target to a vector facing away from the camera:

Vec3f clearVec( 0.0, 0.0, -1.0f );
// from normalized vector to rgb color; from [-1,1] to [0,1]
clearVec = (clearVec + Vec3f(1.0f, 1.0f, 1.0f)) * 0.5f;
glClearColor( clearVec.x, clearVec.y, clearVec.z, 0.0f );

I read somewhere (I'll put a link in the comments) that the Nintendo 3DS uses a fixed-function pipeline instead of shaders, so I guess this can't be the way it's done in the game exactly, but for now I'm convinced my method is close enough.

share|improve this answer
Information about Nintendo 3DS hardware: link – KTC Oct 25 '14 at 21:44
Very nice solution ! How would you take depth in account in your shader ? (In case of a plane in front of another for example, both have same normal so no outline will be drawn) – ingham Nov 8 at 10:09
@ingham That case comes up infrequently enough on an organic character that I didn't need to handle it, and it looks like the real game doesn't handle it either. In the real game you can sometimes see the outline disappear when the normals are the same, but I don't think people would usually notice it. – KTC Nov 8 at 19:24

The simplest way to do this, common on older hardware before pixel/fragment shaders, and still used on mobile, is to duplicate the model, reverse the vertex winding order so that the model displays inside out (or if you want to, you can do this in your 3D asset creation tool, say Blender, by flipping surface normals -- same thing), then expand the entire duplicate slightly around it's centre, and finally colour/texture this duplicate completely black. This results in outlines around your original model, if it's a simple model such as a cube. For more complex models with concave forms (such as that in the image below), it is necessary to manually tweak the duplicate model to be somewhat "fatter" than its original counterpart, like a Minkowski Sum in 3D. You could start by pushing each vertex out a bit along its normal to form the outline mesh, as Blender's Shrink/Fatten transform does.

Screen space / pixel shader approaches tend to be slower and harder to implement well, but OTOH don't double the number of vertices in your world. So if you're doing high poly work, best opt for that approach. Given modern console and desktop capacity for processing geometry, I'd not worry about a factor of 2 at all. Cartoon-style = low poly for sure, thus duplicating geometry is easiest.

You can test the effect for yourself in e.g. Blender without touching any code. Outlines should look like the image below, note how some are internal, e.g. under arm. More detail here.

enter image description here.

share|improve this answer
Could you please explain, how "expand the entire duplicate slightly around it's centre" complies with this picture, because simple scaling around center would not work for arms and other parts which are not concentric, it also won't work for any model that has holes in it. – Krom Stern Feb 23 '14 at 20:12
@KromStern In some instances, subsets of vertices need to be scaled by hand to accommodate. Amended answer. – Arcane Engineer Feb 24 '14 at 5:52
It's common to nudge the vertices out along their local surface normal, but this can cause the expanded outline mesh to split along hard edges – DMGregory Nov 12 at 18:13

For smooth models (very important), this effect is fairly simple. In your fragment/pixel shader you will need the normal of the fragment being shaded. If it is very close to perpendicular (dot(surface_normal,view_vector) <= .01 - you might need to play with that threshold) then color the fragment black instead of its usual color.

This approach "consumes" a little bit of the model to do the outline. This may or may not be what you want. It's very difficult to tell from the Pokemon picture if this is what is being done. It depends on if you expect the outline to be included in any silhouette of the character or if you'd rather have the outline enclose the silhouette (which requires a different technique).

The highlight will be on any part of the surface where it transitions from front-facing to back-facing, including "inner edges" (like the legs on the green Pokemon, or its head - some other techniques would not add any outline to those).

Objects that have hard, non-smooth edges (like a cube) will not receive a highlight in the desired locations with this approach. That means this approach is not an option at all in some cases; I have no idea if Pokemon models are all smooth or not.

share|improve this answer

The most common way I've seen this done is via a second render pass on your model. Essentially, duplicate it and flip the normals, and shove that into a vertex shader. In the shader, scale each vertex along its normal. In the pixel/fragment shader, draw black. That'll give you both external and internal outlines, like around lips, eyes, etc. This is actually a fairly cheap draw call, if nothing else it's generally cheaper than post processing the line, depending on the number of models and their complexity. Guilty Gear Xrd uses this method because it's easy to control the thickness of the line via vertex color.

The second way of doing inner lines I learned from the same game. In your UV map, align your texture along the u or v axis, particularly in areas where you want an inner line. Draw a black line along either axis, and move your UV coordinates into or out of that line to create the inner line.

See the video from GDC for a better explanation:

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.