# How to expand 2D graphic and functions to 3D?

So I have a program that enables the user to draw 2D-objects. To rotate them, to move them, and so on, all in 2D.

I want to expand the 2D objects and functions to 3D which I don't expect to be too difficult, but still difficult enough that I don't want to reinvent the wheel.

What is the process of migrating 2D to 3D algorythms called in computer engineering? And of course the follow-up question, if there is nothing on the web for that search term: What's it called in everyday computer engineering? Are there general concepts how best to expand a set of 2D-algorithms and -objects to 3D at all?

• I do not see that this question is off-topic. I removed the reference to Javascript which was immaterial. It is not a Javascript issue. – babou May 27 '15 at 23:33
• Asking "I have this problem I want to solve, what is its name?" is not the right way to ask on this site. It's better to ask "I have this problem I want to solve, here's what I've tried, how do I solve it?". In other words, questions about algorithms are more suitable for this site than questions about terminology/naming (especially when there might not exist any short name for the concept/approach/solution you are looking for). – D.W. May 28 '15 at 5:20
• @D.W. Actually the OP is asking for terminology so that he can better search the web and literature for answer. For my part I would consider this positive rather than wrong behavior. The question is probably misguided because adding a dimension changes a lot of things and is no trivial transformation (read [Abbott's Flatland(en.wikipedia.org/wiki/Flatland), but it is a fair question from someone who does not know any better. And the topic is clearly CS to me. – babou Jun 12 '15 at 13:16

In most 3D graphics pipelines (e.g., OpenGL) points and direction vectors are represented with 4D homogeneous points (x, y, z, w) and their respective transformations are stored as 4x4 matrices. We can use the same representations for 2D and treat the z-value as the "stacking order" of our 2D shapes.

For example, for a 2D CW rotation about the origin we can use a 3D rotation about the z-axis:

       _                               _
| cos(angle)  -sin(angle)  0   0  |
M = | sin(angle)   cos(angle)  0   0  |
|    0             0       1   0  |
|    0             0       0   1  |
-                               -


So to rotate a 2D point (x,y) about the origin we simply compute

  M * [x, y, 0, 1]^T


With 2D geometry we simply perform a orthographic projection into the rectangular region we wish to view. The pipeline is already designed to sort objects by their z-value for hidden-surface removal so defining a stacking order of 2D objects is trivial with the machinery in place.

Making the jump to 3D is a matter of generalizing the geometry and transformations with the added dimension. All of the usual affine transformations (rotation, scale, translation, shear, ...) generalize in a very simple way.

The biggest new concepts in 3D is setting up a virtual camera (defined by a simple affine view matrix) and you now have to project your 3D geometry down to 2D to create an image -- this can be done using parallel or perspective projections. Perspective projections require perspective foreshortening based on distance from the camera -- we can make very clever use of the homogeneous representation and a division by z to pull this off. This is standard material for most introductory graphics textbooks / courses.

Anyway, there's a start....

The 3D computer graphics manipulates with 3D objects, represented by data structures, which you won't meet in the 2D world. Also 3D algorithms (projections, ray tracing etc.) simply aren't needed in the 2D world.

So, there are no way to expand 2D graphics into 3D space, actually there is an opposite way - only at the last step, after you have calculated projections of all your 3D scene on a viewing plane, you'll need some 2D algorithms to generate a picture.