Fix Distortion Introduced When Transforming Multiview Projections To Isometric
Objective
Construct an isometric vector image of an object from top, front, and side view projections (like this, but using Inkscape instead of AutoCAD).
This is an explanation of one of the issues encountered and how it was dealt with.
A Short Primer On Graphical Projection
Drawing a 3D object as it looks head-on from the top, the front, and the side views is called multiview orthographic projection. Figure 1, below, is an example from 1912 that illustrates the concept. Each drawing is a view of the house from a different axis in three-dimensional space. Note the various other names, by which these views are known, indicated on the labeling.
Another type of graphical projection, that you may have seen before, is called isometric. Many 2D video games use isometric projection to simulate a 3D environment. One of the characteristics of isometric projection is, the angles between all three axes are equal. This results in the outline of a perfect cube forming a hexagon. Another is, it has no vanishing point, so there is no concern for things like draw-distance as there is in 3D games.
A Naive Solution
We start with the multiview projections of the 3D object we want to turn into an isometric drawing:
The task seems pretty straight-forward. First, we skew the front and side views. We want our truck to face to the right, so we need the top edge of the front view to match the angle of the blue axis from figure 2. To reach this angle, the skew must be 30°. The angle of the top of the side view must, therefore, match the red axis from figure 2. To achieve this, it has to be skewed 30° in the other direction (-30°, technically).
Then, we transform the top view to fit our modified front and side views.
All the angles for our box truck’s skewed views look correct, but when we try to align them all together, we discover a problem. While the front and top views line up fine, when we try to align the top to the side view, we find that they do not fit together because they are different sizes.
The Problem
The pieces don’t fit together because when we skew a 2-dimensional rectangle we are actually stretching one of the axes. The top and bottom edges of the skewed side-face are longer than they were before the transformation.
The skewed front and top views of our box truck also become stretched on one axis but because they both stretch the same axis, the pieces still fit together.
The Quick Fix
We can fix the box truck’s elongated side view by resizing it before we skew it. We need to shrink it along the axis that is going to be stretched by the skew. But how do we know what value to scale by? Here’s how to find it:
Draw a line the same length as the truck side view.
Duplicate the line and rotate it by 30°.
Join one end of the two lines together.
Measure the horizontal distance between the other ends of the lines.
This is the amount the side must be shrunk by so that it will be the
correct size when stretched by skewing.
Shrink the side view by the distance we measured.
Now we can skew the side as we did before.
This time when we try to line up the 3 skewed views of our isometric drawing, they should fit together.
However, all the distortion in our render has not been eliminated. While this solution might look good, it is not true proportionally to the top and front views. They are still distorted from the skew along the axis perpendicular to the side view.
The Full Fix
So, if the top and front views are still distorted, we will have to size them down and then re-skew them.
Comparing the edges where the front view and the top view meet, we see that they are actually the same length. To find the distance the views need to be shrunk by, we will only need to make this calculation once.
Now we can shrink the front view and then skew it as we did before.
Likewise, we shrink the top view’s width (in this case, this is the height of the diagram), skew it, and rotate it to fit.
When we put all the pieces together, we can see that this version of our isometric model is less wide than before. This is because its width is no longer being stretched out of proportion.
Practical Applications
Is this useful? Multiview projections of vehicles, buildings, etc. are easy to find online. If you want to build proportionally-accurate isometric drawings then this information will help. For example, here is an isometric taxi cab made with this technique and some found diagrams.
Conclusion
Making isometric drawings from blueprints of real objects is more fun and enjoyable when they come out looking like the real thing. Using the technique outlined here should eliminate distortion introduced from skewing multiview projections and retain their true proportions. Hopefully, it will improve your work as it has done mine.
