Abstract

This paper discusses how axonometric projections may be used in computer graphics, multimedia applications and computer games. It compares the axonometric projection, or parallel perspective, to the linear perspective, lists the major properties and tackles some implementation details.

The focus of this paper is on the isometric and dimetric projections, the most widely used varieties of the axonometric projection. This paper also presents two dimetric projections that are suitable for (tiled) computer graphics.

Introduction --- first attempt

In the Western world, we are accustomed to the linear perspective, which tries to achieve visual realism in paintings of 3-dimensional environments. The linear perspective, which was perfected throughout the 17th century in Europe, is based on Euclidean optics: the eye as a point object that catches straight light rays and that senses only the colour, the intensity and the angle of the rays, not their length.

Another perspective had developed in Chinese art: the Chinese perspective was an intrinsic part of the classical roll painting. A typical Chinese roll painting had a size of approximately 40 centimetres high by several meters wide. One views the painting was viewed by unrolling it (from right to left) on a table in segments of about 60 centimetres wide. The Chinese roll paintings show a development in time, in contrast to the paintings that were made in Europe at the time, which show a "situation" rather than a development.

For these roll paintings, the Chinese painters needed a perspective that had no explicit vanishing points; every scene of the roll painting would be seen individually and a vanishing point that lies outside the viewport creates a disoriented view of the scene. (For the same reason, the Chinese roll paintings usually do not have an explicit light source or cast shadows.) The Chinese painters solved the problem by drawing the lines along the z-axis as parallel lines in the roll painting. This has the effect of placing the horizon at an imaginary line, infinitely high above the painting. The axonometric projection is a technical term for a class of perspectives to which the Chinese parallel perspective also belongs. These perspectives are not only lacking a vanishing point (or several of these points), they also have a few other, mostly useful, characteristics. These are discussed below.

Introduction --- second attempt

Technical drawings need to be precise, accurate and unambiguous. Technical drawings are for engineers and fitters. National institutes formally standardize technical drawings, so that a carpenter will build the particular chair that the furniture designer imagined. Technical drawings are a means of communication, for those who can understand it.

If the world were populated by engineers, nothing else would matter --- but it isn't and engineers (and fitters and carpenters alike) need to communicate with managers and customers. The problem is, of course, that technical drawings are difficult to decipher for the uninitiated. Although they show an object from up to six angles, all of those angles are unrealistic: directly from the front, directly from above, etc. What is needed to convey the general shape of the object is a perspective drawing that shows three sides of a cube at once.

At this point, the next issue is: how? Engineers being as they are, they want a simple technique that does not loose much of the accuracy of the original drawings and that does not require artistic skills. Also note that you have to make the drawing out of your head; usually you cannot take a look at the object to get a sense for its proportions or make a snapshot of it: in most cases the object that you must draw does not yet exist. So the compromise that became to be known as axonometry is a perspective drawing technique where the orthogonal x-, y- and z-axes of the 3-dimensional space are projected to (non-orthogonal) axes on (2-dimensional) paper. In the 3-dimensional world, the x-axis is the horizontal axis, the y-axis is the vertical axis and the z-axis points away from the viewer (see the figure at the right; this coordinate system is called a "left-handed" coordinate system). In the 2-dimensional projection, the y-axis usually remains the vertical axis but the x- and z-axes are often skewed. And although there are countless possible axonometric projections, only two are standardized. These are described in detail below.

Introduction --- third attempt

Computer games have traditionally been brimming with graphics and animation. In fact, games are categorized according to the kind of graphics they used. Two popular types of games are "platform games" where you look from the side, and "board games" where you look mostly from above. These games also have in common that they often use tiles to build the "world" from. Given these similarities, and given the dullness of the unrealistic viewpoints of both platform games and board games, the attempt to make a compromise between these extreme viewpoints is a logical next step.

So what one does is take a board of a board game, scale its height (the z-axis) and skew it so that the z-axis on the computer display is a diagonal line. For a better appearance, you can also skew the x-axis. The y-axis remains vertical. This is all that is needed, provided that you get the proportions (for scaling and skewing) right.

Due to the coarseness of digital coordinates and the requirement that the edges of (checkerboard) tiles should match precisely, without any pixel overlaps or gaps, the skewing angles and scaling factors that game designers use are an approximation of the visually optimal proportions. One of the simplifications that game designers have made is to use an axonometric projection where a unit along an axis is equally long for all of the three axes. That is, every axis has the same metric; hence, the projection is named "isometric". Axonometric projections and tile-based images are not necessarily related. But most computer games that use an isometric perspective also use tile-based images.

And now for something completely different...

The three questions that occupied me when planning this paper were:

• What are common (or well-proportioned) axonometric projections, and how persuasive does each look?
• At what angles does one look at board in an axonometric projection? It is tempting to use rendered 3-D objects on an axonometric map, as sprites. To specify the position and orientation of the "camera" in relation to the object, you will need to know the intrinsic angles of the axonometric map that you are using.
• What does one write in an introduction anyway?

The goal of this paper is to present two common axonometric projections, the isometric projection (briefly introduced above) and the dimetrical projection and to provide answer to the questions above (well... perhaps not to the third question).

To recapitulate, the main properties of axonometric projections are:

• No vanishing points. This allows you to scroll a large image below a viewport and to have the same perspective at any point. In the case of tile-based images, an image is constructed on the fly and need not to have physical bounds or edges.
• Lines that are parallel in the 3-dimensional space remain parallel in the 2-dimensional picture. This is in contrast with the linear perspective, where parallel lines along the z-axis in the 3-dimensional space collapse to a single vanishing point at the horizon in the 2-dimensional picture.
• Objects that are distant have the same size as objects that are close; objects do not get smaller as they move away from the viewer. If you know the scale of the axes, you can measure the size (width, height, length, depth) of an object directly from the picture, regardless of its position on the z-axis; hence the name axonometry.
• The axonometric projections are standardized for technical drawings. These standards are optimized for ease of use versus visual realism. Even if you choose to deviate from the standards, use them as an inspiration. The two projections standardized by the Dutch standardization institute are presented in this paper.

The isometric projection

In an isometric projection, the x-, y- and z-axes have the same metric: a unit (say, a centimetre) along the x-axis is equally long along the y- and z-axes. In other words, if you render a wire frame cube, all edges in the 2-dimensional picture are equally long. Another property of the isometric projection is that the projected wire frame cube is also symmetric. All sides of the projected cube are rhombuses.

NEN 2536 describes an isometric projection where all angles are 30 degrees. The projection shows three sides of a cube, and the surfaces of each side are equal. The 30-degree angle is convenient for technical drawings, because the sine of 30 degrees is 0.5.

The figure below shows a cube in the isometric projection as defined by NEN 2536. The first object from the left in the figure is the cube unadorned; the second object is the same cube with angles and measures annotated around it. The third and fourth graphics are the top and side views of the perspective scene and they give the camera position that fits the perspective view. The camera position is what you would feed into a 3D renderer (or ray tracer) to create the sprites or tiles for the isometric projection.

Computer games with isometric maps are often tile-based. To make tiles match, the game designer must take into account how diagonal lines are plotted in discrete steps (Bresenham and all that). As it turns out, a line at 30 degrees (sine is 0.5) produces steps that are too irregular. A line at an angle where the tangent is 0.5 does have a nice regular pattern: two steps to the right, one step up. Thus, the isometric projection used by most games tilt the x- and z-axes with approximately 27 degrees (the exact angle is "arctangent(0.5)"). By the way, because the tangent of the angle of the rhombus is 0.5, the rhombus is twice as wide as it is high. This is why many sources mention a 1:2 scale for isometric perspectives. (To make the edges of the rhombuses match, the width of the rhombus should be a multiple of four pixels and the height should be one pixel less than ½ width. In other words, the height:width ratio of a rhombus is usually not exactly 1:2, but rather near 1:2.1. This makes no difference for the principles of the isometric perspective. I mention it here, because some sources make a big deal of it.)

Again, the figure below shows what this isometric projection looks like.

The dimetric projection

In the dimetric projection, one of the three axes has a different scale than the other two. In practice, the scaled axis is the z-axis and, hence, a cube drawn in a dimetric projection is not a symmetrical graphic (like in the isometric projection).

Dimetric projections are more flexible than the isometric projections, as you vary the scale factor (and adjust other parameters in accordance). The asymmetry in the dimetric projection also provides you with an additional angle to play with. From an artistic viewpoint, I also like dimetric projections better than isometric projections, because of the asymmetry. Or rather, the symmetry of an isometric projection makes the scene look "artificial" or surrealistic. Another advantage is, in a computer game, that if you mirror the graphics of a dimetric projection, you are looking at a scene in a new, "fresh", perspective, while the basic computations for the coordinate system stay the same.

NEN 2536 also presents a dimetric projection for technical drawings. It is summarized in the figure below. Any distance along the z-axis (drawn at 42 degrees) is scaled at a factor 0.5.

The introduction mentioned Chinese roll paintings, and I took some time taking the metrics of (reproductions of) two roll paintings. Noticeable in the projection is that the x-axis stays horizontal, even though the z-axis has quite a low angle (approximately 30 degrees). As a result, the perspective view is, computationally, far from accurate. The reasons that we still see a 3-dimensional cube, rather than some kind of flat polygon, is that the angle in the "side view" of the perspective view is also low and because our visual system is quite forgiving for errors in perspective correction.

The scale of the z-axis could not be accurately determined from the roll paintings that I had access to. My estimate is that the z-axis is scaled by 50%.

Also note (again) that the perspective is distorted and that the angles of the top view and the side view should be taken as a "rule of thumb"; I calculated these angles in the same way as the angles in the dimetric projection presented in NEN 2536, but these calculations are, actually, no longer applicable.

Dimetric projections for computer graphics and games

As was the case with the isometric projection, in computer graphics some angles are preferable to others. The first dimetric projection that I propose for (tiled) computer graphics is very similar to the projection of Chinese roll paintings. The difference is the scale of the z-axis, and the angle that it makes with the x-axis. To start with the angle, the z-axis is slanted with approximately 27 degrees (the exact angle is "arctangent(0.5)"). This is the same angle as the isometric projection for computer graphics uses. The scale is such that the width of the side view of a cube, when measured along the x-axis, is half of the width of the front face. The key phrase in the previous sentence is "when measured along the x-axis". In the two former projections, the scale factor applied to distances measured along the z-axis.

The above projection gives a perspective that is viewed mostly from the side. I might be useful to add some depth to a side-scrolling (or "platform") game. For board-like games, a perspective that is viewed from a greater height is more appropriate. The second proposed dimetric projection for games serves this end.

Again, note that the perspective of the two projections suggested above is distorted. The angles in the top and side views are really approximate. For example, in the second projection the angle at which one looks from above at the scene is given as 24 degrees. However, using an angle of 30 degrees may actually look better. In addition, a 30-degree angle lets you use the same objects for both the dimetric and the isometric projections for games.

Moving across an axonometric projection

Converting from space coordinates (x,y,z) to a pixel coordinate (x',y') in the projection requires only trivial goniometry. The table below presents the formulae for completeness (also refer to the coordinate system in the figure near the top of this paper for my definition of the x-, y- and z-axes).

Isometric	NEN 2536	x' = (x - z)·cos(30°) y' = y + (x + z)·sin(30°)
	Computer games	x' = x - z y' = y + ½ (x + z)
Dimetric	NEN 2536	x' = x·cos(7°) + ½ z·cos(42°) y' = y + ½ z·sin(42°) - x·sin(7°)
	Chinese roll paintings	x' = x + ½ z·cos(30°) y' = y + ½ z·sin(30°)
	Computer games: side view	x' = x + ½ z y' = y + ¼ z
	Computer games: top view	x' = x + ¼ z y' = y + ½ z

Converting coordinates in the projection to space coordinates is a different matter. In its general form, it simply cannot be done: you cannot calculate three independent output parameters from two input parameters. If you can "fix" one of the output parameters, the other two can be calculated from the input parameters. An example: if the axonometric projection represents a map and you can assume that the area on the map has little or no relief, then you can fix the position on the y-axis to zero (ground level), and you only have to calculate x and z from x' and y'.

A refinement of the above is to support some amount of relief. The calculation of the output coordinates starts as before, only now the y-coordinate is an estimate, rather than a "known" value. After calculating the x- and z-coordinates, you can look up the corresponding "height" value at the position (x,z). Typically, they will not match with the y-coordinate that you guessed when calculating the x- and z-coordinates. Now you can adjust you estimate of the y-coordinate and calculate the matching x- and z-coordinates again. This iteration continues until the estimated y-coordinate (before calculating x and z) comes close enough to the looked-up value (after calculating x and z).

Further information

NEN 2536, "Engineering drawing. Axonometric projection"; Nederlands Normalisatie Instituut; August 1966.

The source of the axonometric projections for technical drawings. (If you have a copy of the standards for axonometric projections for your country, please e-mail me with their name/number. If you can photocopy and/or fax them to me, you have my eternal gratitude.)

The IsometriX homepage has a lot of links to pages with background information on isometric projections, games using isometric projections, some source code, etc.

© Thiadmer Riemersma, ITB CompuPhase, 1999, The Netherlands
http://www.compuphase.com