Isometric projection

From Wikipedia, the free encyclopedia

(Redirected from Isometric graphics)
Jump to: navigation, search
Views

Graphical projections

Other views

 This box: view  talk  edit 

Isometric projection is a form of graphical projection — more specifically, an axonometric projection. It is a method of visually representing three-dimensional objects in two dimensions, in which the three coordinate axes appear equally foreshortened and the angles between any two of them are 120°. Isometric projection is one of the projections used in drafting engineering drawings.

The term isometric comes from the Greek for "equal measure", reflecting that the scale along each axis of the projection is the same (this is not true of some other forms of graphical projection).

One of the advantages of isometric perspective in engineering drawings is that 60° angles are easy to construct using only a compass and straightedge.

Contents

An isometric drawing of a cube. Note that the perimeter of the 2D drawing is a perfect regular hexagon: all the black lines are of equal length and all the cube's faces are the same area.
An isometric drawing of a cube. Note that the perimeter of the 2D drawing is a perfect regular hexagon: all the black lines are of equal length and all the cube's faces are the same area.

Isometric projection dictates the direction of viewing in that the angles between the projection of the x, y, and z axes are all the same, or 120°. For objects with surfaces that are substantially perpendicular to and/or parallel with one another, it corresponds to rotation of the object or camera by +/- 45° about the vertical axis, followed by a rotation of approximately +/- 35.264° [= arcsin(tan(30°))] about the horizontal axis, starting from an orthographic projection relative to an object's face (a perpendicular view to a face of an object).

Isometric projection can be visualized by considering the view of a cubical room from an upper corner, looking towards the opposite lower corner. The x-axis is diagonally down and right, the y-axis is diagonally down and left, and the z-axis is straight up. Depth is also shown by height on the image. Lines drawn along the axes are at 120° to one another.


There are 8 different orientations to obtain an isometric view, depending into which octant the viewer looks. The isometric transform from a point ax,y,z in 3D space to a point bx,y in 2D space looking into the first octant can be written mathematically with rotation matrices as:


\begin{bmatrix}
   \mathbf{c}_x \\
   \mathbf{c}_y \\
   \mathbf{c}_z \\
\end{bmatrix}=\begin{bmatrix}
   1 & 0 & 0  \\
   0 & {\cos\alpha} & {\sin\alpha}  \\
   0 & { - \sin\alpha} & {\cos\alpha}  \\
\end{bmatrix}\begin{bmatrix}
   {\cos\beta } & 0 & { - \sin\beta }  \\
   0 & 1 & 0  \\
   {\sin\beta } & 0 & {\cos\beta }  \\
\end{bmatrix}\begin{bmatrix}
   \mathbf{a}_x \\
   \mathbf{a}_y \\
   \mathbf{a}_z \\
\end{bmatrix}=\frac{1}{\sqrt{6}}\begin{bmatrix}
   \sqrt{3} & 0 & -\sqrt{3}  \\
   1 & 2 & 1  \\
   \sqrt{2} & -\sqrt{2} & \sqrt{2}  \\
\end{bmatrix}\begin{bmatrix}
   \mathbf{a}_x \\
   \mathbf{a}_y \\
   \mathbf{a}_z \\
\end{bmatrix}

where \alpha = \arcsin(\tan(30^\circ))\approx35.264^\circ and \beta = 45^\circ. As explained above, this is a rotation around the vertical (here y) axis by β, followed by a rotation around the horizontal (here x) axis by α. This is then followed by an orthographic projection to the x-y plane:


\begin{bmatrix}
   \mathbf{b}_x \\
   \mathbf{b}_y \\
   0 \\
\end{bmatrix}=
\begin{bmatrix}
   1 & 0 & 0  \\
   0 & 1 & 0  \\
   0 & 0 & 0  \\
\end{bmatrix}\begin{bmatrix}
   \mathbf{c}_x \\
   \mathbf{c}_y \\
   \mathbf{c}_z \\
\end{bmatrix}.

The other seven possibilities are obtained by either rotating to the opposite sides or not, and then inverting the view direction or not.[1]

In this isometric drawing, the blue sphere is two levels higher than the red one, but this cannot be seen if one looks only at the left half of the picture. If the pier that the blue sphere is on were extended by one square, it would align perfectly with the square the red sphere is on, creating an optical illusion, making it look like both spheres are on the same level. Also note that, in the absence of proper shading, it would become difficult to determine the faces of the two cubes, or to even tell the cubes apart.
In this isometric drawing, the blue sphere is two levels higher than the red one, but this cannot be seen if one looks only at the left half of the picture. If the pier that the blue sphere is on were extended by one square, it would align perfectly with the square the red sphere is on, creating an optical illusion, making it look like both spheres are on the same level. Also note that, in the absence of proper shading, it would become difficult to determine the faces of the two cubes, or to even tell the cubes apart.

As with all types of parallel projection, objects drawn with axonometric projection do not appear larger or smaller as they extend closer to or away from the viewer. While advantageous for architectural drawings and sprite-based video games, this results in a perceived distortion, as unlike perspective projection, it is not how our eyes or photography usually work. It also can easily result in situations where depth and altitude are impossible to gauge, as is shown in the illustration to the right. An additional problem in the case of isometric projection are the times when it becomes difficult to determine which face of the object is being observed. In the absence of proper shading, and for objects that are relatively perpendicular and similarly proportioned, it can become difficult to determine which is the top, bottom or side of the object, as in isometric projection, each face is given similar dimensions. Most contemporary video games have avoided these situations by dropping axonometric projection in favor of perspective 3D rendering utilizing vanishing points. Some of the famous "impossible architecture" works of M. C. Escher, however, exploit them. Waterfall (1961) is a good example, in which the building is trimetric but the faded background utilizes perspective projection.

A television set drawn in near- isometric pixel art. Note the 2:1 pixel pattern ratio in this zoomed-in image.
A television set drawn in near- isometric pixel art. Note the 2:1 pixel pattern ratio in this zoomed-in image.

In the fields of computer and video games and pixel art, axonometric projection has been popular because of the ease with which 2D sprites and tile-based graphics can be made to represent a 3D gaming environment. Because objects don't change size as they move about the game field, there is no need for the computer to scale sprites or do the calculations necessary to simulate visual perspective. This allowed older 8-bit and 16-bit game systems (and, more recently, handheld systems) to portray large 3D areas easily. While the depth confusion problems illustrated above can sometimes be a problem, good game design can alleviate this. With the advent of more powerful graphics systems, axonometric projection is becoming less common.


Corresponding camera rotations for true isometric projection (at left) and the form of dimetric perspective commonly found in video games and pixel art (at right). The blue vector points towards the camera position which would result in a view of the cube when looking towards the origin.
Corresponding camera rotations for true isometric projection (at left) and the form of dimetric perspective commonly found in video games and pixel art (at right). The blue vector points towards the camera position which would result in a view of the cube when looking towards the origin.

The projection used in videogames usually deviates slightly from "true" isometric due to the limitations of raster graphics. Lines in the x and y axes would not follow a neat pixel pattern if drawn in the required 30° to the horizontal. While modern computers can eliminate this problem using anti-aliasing, earlier computer graphics did not support enough colors or possess enough CPU power to accomplish this. So instead, a 2:1 pixel pattern ratio would be used to draw the x and y axes lines, resulting in these axes following a 26.565° (arctan 0.5) angle to the horizontal. (Game systems that do not use square pixels could, however, yield different angles, including true isometric.) It should therefore be noted that this form of projection is more accurately described as a variation of dimetric projection, since only two of the three angles between the axes are equal (116.565°, 116.565°, 126.87°). Many in video game and pixel art communities, however, continue to mistakenly refer to this projection—as well as other forms of axonometric projection—as "isometric perspective"; the terms "3/4 perspective" and "2.5D" are also commonly used.

Increasingly[citation needed], the term is being applied to games that do not use any form of axonometric projection at all. Games that use oblique projection[2][3], as well as games that use perspective projection[4][5], are sometimes referred to as being isometric, or "pseudo-isometric", due to visual similarities. In the case of games that use perspective projection, "bird's-eye view" might be a more appropriate term.

A game which uses "isometric" graphics (Lincity).
A game which uses "isometric" graphics (Lincity).


Main category: Category:Isometric video games

  1. ^ Ingrid Carlbom, Joseph Paciorek (Dec. 1978), Planar Geometric Projections and Viewing Transformations, vol. v.10 n.4, ACM Computing Surveys (CSUR), pp. p.465-502, DOI 10.1145/356744.356750
  2. ^ GDC 2004: The History of Zelda (HTML). IGN (March 25, 2004). Retrieved on 2007-12-17.
  3. ^ Greely, Dave; Ben Sawyer (August 19, 1997). Has Origin Created the First True Online Game World? (HTML). Gamasutra. Retrieved on 2007-12-17.
  4. ^ Age of Decadence (HTML). Iron Tower Studios. Retrieved on 2007-07-10.
  5. ^ O'Hagan, Steve (August 7, 2003). PC Review: Silent Storm (HTML). ComputerAndVideoGames.com. Retrieved on 2007-12-13.

Advanced Search
Included Web Search Engines


Safe Search

close

Top Matching Results

Occasionally Search.com will highlight specialized results that are based on the context of your query. Examples of specialized results include specific links to news, images, or video.

Top Matching Results may highlight information from other Search.com pages, content from the CNET Network of sites, or third party content. The listings are based purely on relevance. Search.com does not receive payment for listings in this section but our partners that provide this data may get paid for listing these products.

Sponsored Links

This section contains paid listings which have been purchased by companies that want to have their sites appear for specific search terms and related content. These listings are administered, sorted and maintained by a third party and are not endorsed by Search.com.

Search Results

Search.com sends your search query to several search engines at one time and integrates the results into one list which has been sorted by relevance using Search.com's proprietary algorithm. You can customize the list of search engines included in your metasearch from the preferences.

The search engines that are used in your metasearch may allow companies to pay to have their Web sites included within the results. To view the Paid Inclusion policy for a specific search engine, please visit their Web site. Search.com does not accept payment or share revenue with any search engine partner for listings in this section.