Consider making an ink drawing, with no shading and all lines having equal weight - such as you see in a strip comic like Dilbert. This represents an active 3 dimensional world, but objects do not have textures, yet you don't see tessellated triangles either.

For the sake of an example consider drawing the surface of the moon. The lines you might draw would be along the top edge of hills, down to where they meet the general level of the surface. Behind those you would do the same for larger hills, into the distance, and behind that what was visible of the horizon. For craters, you might draw a near circle for the outer edge, and partly masked, a circle for the lower edge. Boulders would have a line around the edge, and along major visible edges. The astronauts would have a line along their outer edge, and along major features of their space suit.

I'm an experienced programmer but new to 3D programming. I can't offhand think of a game that looks like this -- has it been done? And how would one do it? Two problems come to mind -- finding the significant edges, and drawing it. Would it need an "engine" coded from matrices up, based on lines, rather than a regular 3D engine?

  • \$\begingroup\$ I just want to warn you that humans are not good at perceiving 3D on a 2D screen as is, so taking away shading, which is a very important part to understanding the depth of a scene, may not work well in a game relying on 3D gameplay \$\endgroup\$ – Jeff Jul 17 '11 at 21:52
  • \$\begingroup\$ There is one game that fits the style you are describing - Okami, released for the PS2 a few years back en.wikipedia.org/wiki/%C5%8Ckami \$\endgroup\$ – Eran Galperin Jul 17 '11 at 23:18
  • 1
    \$\begingroup\$ Nice, I've been thinking about doing this myself. I think you'd want to use some sort of cel shading though, not just lines. \$\endgroup\$ – mpnk121 Jul 18 '11 at 2:20

Fundamentally, what you're talking about is edge-finding, and there are a number of games that do it, in a variety of different ways.

Probably the first one was Jet Set Radio (released in the west as "Jet Grind Radio"). Released only a month or two after that was the game for which I'd developed a similar rendering technique: Looney Tunes: Space Race. (On Space Race, we did our best to maintain a uniform line thickness, while Jet Set Radio made the uneven line widths a big part of its visual style).

Both of these games worked the same way; for each object to be outlined, draw the object twice. First, render it with backfacing reversed, with a vertex push applied (that is, move each vertex by some distance along its normal vector), and in whatever color you want the 'lines' to appear to be. Then draw again, without the vertex push and with normal backfacing. This pair of operations gives you a colored silhouette edging around an object, and it's all that these first two games used. In Space Race, I maintained the illusion of constant line width by pushing vertices a varying distance, based upon how far the object was from the camera. In Jet Set Radio, they didn't (which led to lines becoming larger or smaller, as objects moved closer or further from the camera)

NVidia and ATI have several demos of other ways to achieve this effect, mostly revolving around pixel shaders looking for normals which are perpendicular to the camera-to-pixel vector for each pixel, but these all require very high-resolution meshes, and produce inconsistent line widths in practice. I don't know whether any games actually use this type of approach; I don't think I've seen any which look like the samples from these companies.

I'll also point you at Dragon's Lair 3D, which is the only game I know of which seems to really be doing this properly; taking the dot product of camera-to-polygon and the polygon's normal for each polygon in a model to see whether each polygon faces toward or away from the camera, and then checking all pairs of connected polygons; if any pair of polygons share an edge, and one polygon faces the camera and one polygon doesn't, then it draws a thin, constant-width line along that edge in screen-space. (I couldn't make this work fast enough on the Dreamcast for Space Race, or I'd have used it. Today, on modern computers, this is totally the way I'd be trying to do this effect, even though it's a bit processor-intensive to be checking every pair of polygons on every model every frame)

Dragon's Lair 3D is also the only game I'm aware of which actually draws lines between areas of different color or at vertex-normal discontinuities, even if there isn't a silhouette edge for it to find there. I suspect that they had a custom tool which allowed their artists to nominate polygon edges to always receive a line.

Okami, which has been mentioned by some other folks, appears to be using a double-render vertex-push approach, similar to Jet Set Radio and Space Race, but also uses textures which have been built using a brushed art style. (Hills in the distance, for example, are drawn as brush strokes into a texture which is drawn as a standard quad). Okami is lovely, but I don't think that it really touches on the tech that you're asking about; certainly, it's using the older approach for its effect.

Now, in your case, you're asking about doing this without a color fill, just drawing the world with lines only. That's easy to do; just draw all polygons without lighting, and in a single constant color that matches the background color. Any of these approaches should work using that approach without changing your game engine at all. It's important to actually draw those "same color as the background" polygons, as they'll keep background edges from showing through foreground objects, which could get confusing very quickly.

  • \$\begingroup\$ +1 brilliant answer including both, theory and interesting examples \$\endgroup\$ – Maik Semder Jul 19 '11 at 8:49
  • \$\begingroup\$ Awesome answer, thank you for your time writing it. \$\endgroup\$ – cheerless bog Jul 21 '11 at 4:13

What you're talking about is non-photorealistic rendering (aka NPR). In a realtime 3D game that's done using fragment/pixel shaders.

Scroll through here to see a few examples: http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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