Scale/rotate/skew a 2D shape to look like 3D

3dgeometry

What would be the math to scale/rotate/skew a simple 2D shape to give the appearance of being a 2D shape in a 3D world?

For example, say I have a circle, I can scale (+/-100%) the X-axis to look like it is rotating or scale the Y-axis to have it flip. But how would I do both at the same time?

I'm sure it is some mix of scaling and rotating but I don't know the math behind it.

Best Answer

I assume what you want to do is simulate the effect of taking your 2D shape, putting it into 3D space, rotating it somehow, then projecting it orthogonally back into its original 2D plane.

The general idea is to pick your favourite 3D rotation, represented as a $3\times3$ linear transformation matrix, then cut out the top $2\times2$ submatrix and use that as a 2D linear transformation.

Example: Rotation around the Z axis by angle $\alpha$.

The $3\times3$ matrix corresponding to this rotation looks like this:

$$\begin{pmatrix}\cos\alpha&-\sin\alpha&0\\\sin\alpha&\cos\alpha&0\\0&0&1\end{pmatrix}$$

The top left $2\times2$ submatrix is $\begin{pmatrix}\cos\alpha&-\sin\alpha\\\sin\alpha&\cos\alpha\end{pmatrix}$, which corresponds to a 2D rotation by angle $\alpha$.

Example: Rotation around the Y axis by angle $\alpha$.

The $3\times3$ matrix corresponding to this rotation looks like this:

$$\begin{pmatrix}\cos\alpha&0&-\sin\alpha\\0&1&0\\\sin\alpha&0&\cos\alpha\end{pmatrix}$$

The top left $2\times 2$ submatrix is $\begin{pmatrix}\cos\alpha&0\\0&1\end{pmatrix}$, which corresponds to an X-axis scaling by $\cos\alpha$.

Case you might be interested in: Rotation around the X axis by $\alpha$, then around the Y axis by $\beta$.

The $3\times3$ matrix corresponding to this rotation looks like this:

$$\begin{pmatrix}\cos\beta&0&-\sin\beta\\0&1&0\\\sin\beta&0&\cos\beta\end{pmatrix} \times \begin{pmatrix}1&0&0\\0&\cos\alpha&-\sin\alpha\\0&\sin\alpha&\cos\alpha\end{pmatrix} = \begin{pmatrix}\cos\beta&-\sin\alpha \sin\beta&-\cos\alpha \sin\beta\\ 0&\cos\alpha&-\sin\alpha\\ \sin\beta&\cos\beta \sin\alpha&\cos\alpha \cos\beta\end{pmatrix}.$$

The top left $2\times 2$ submatrix is $\begin{pmatrix}\cos\beta&-\sin\alpha\sin\beta\\0&\cos\alpha\end{pmatrix}$. This can be decomposed into a series of axis-aligned scalings and skewings like this:

$$\begin{pmatrix}\cos\beta&-\sin\alpha\sin\beta\\0&\cos\alpha\end{pmatrix} = \begin{pmatrix}1&0\\0&\cos\alpha\end{pmatrix} \times \begin{pmatrix}1&-\sin\alpha\sin\beta\\0&1\end{pmatrix} \times \begin{pmatrix}\cos\beta&0\\0&1\end{pmatrix}$$

So you can simulate the effect by scaling the shape in X direction by a factor of $\cos\beta$, then skewing it parallel to the X axis by a factor of $-\sin\alpha\sin\beta$, then scaling the shape in Y direction by a factor of $\cos\alpha$.

Of course, if you have the relative corner coordinates available, then it's probably simpler to just use the entries of the 2x2 matrix directly to transform them:

\begin{align}x_{new} &= \cos\beta\cdot x_{old} -\sin\alpha\cdot\sin\beta\cdot y_{old}\\y_{new} &= \cos\alpha\cdot y_{old}\end{align}

Related Question