Skip to main content

Explaining the CATransform3D Matrix: Translation, Scale and Rotation (Swift, iOS, Xcode)


To understand the basics of using CATransform3D functions, see this earlier post and this earlier post. The current post explains in greater detail what is meant by the matrixes presented in the Apple documentation under the details of CATransform3D functions and it is advisable to read first this post on CGAffineTransform matrixes in order to fully understand what a transformation matrix is.

Translation

CATransform3DMakeTranslation() tells us that it
Returns a transform that translates by '(tx, ty, tz)'. t' = [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1]
As with the CGAffineTransform matrix, this should be read as a grid top to bottom:

1  0  0  0
0  1  0  0
0  0  1  0
tx ty tz 1


Where the translated x position should be read:
x'  = 1 * x + 0 * y + 0 * z + tx

The translated y position should similarly be read:
y'  = 0 * x + 1 * y + 0 * z + ty
The translated z position:
z'  = 0 * x + 0 * y + 1 * z + tz
And the 1 (factor):
1 =  0 * x + 0 * y + 0 * z + 1 * 1

Scaling

CATransform3DMakeScale() tells us that it
Returns a transform that scales by `(sx, sy, sz)': * t' = [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1]
Once again the matrix can be viewed like so:

sx  0  0  0
0  sy  0  0
 0  0  sz  0 
0  0  0  1
Where the scaled x position should be read:
x'  = sx * x + 0 * y + 0 * z + 0
The scaled y position should be read:
y'  = 0 * x + sy * y + 0 * z + 0
The scaled z position:
z'  = 0 * x + 0 * y + sz * z + 0
And the 1 (factor):
1 =  0 * x + 0 * y + 0 * z + 1 * 1

Rotation

Rotation is the trickiest of the three transformations to understand because it relies not on a matrix but a vector. CATransform3DMakeRotation() tells us that it
Returns a transform that rotates by 'angle' radians about the vector '(x, y, z)'. If the vector has length zero the identity transform is returned.
The x, y and z values are not a distance but a multiplication factor, the value of which can either be 0.0 in which case nothing will change with the rotation around that specified axis (in other words, it will return the "identity transform") or it can be set to a number. It is the relationship between any set numbers that determines the result of the rotation. If z was set to 2.0 and y was set to 1.0, the rotation of any shape would be weighted to a greater extent towards the z-axis rotation rather than the y-axis, because the vector would be pulled more in that direction than the other.

The rotation is "about the vector" not stretched along the vector. The words here are carefully chosen in the Apple documentation. There is not elongation along the vectors. Scaling and rotation are kept separate, although this doesn't exclude a sense of lengthening and shortening as rotated drawing is presented as closer or further away.

Further into three-dimensional space

To explain, if we were to draw a line one pixel wide straight up from what we typically think of as an x,y-origin (rather than iOS's inverted origin) and then anchor the line at the origin, making an animated 360 degree rotation around the z-axis it would appear to go around a clock face. Now imagine a line one pixel high and 200 pixels wide that runs from the origin along the y-axis and imagine yourself sat at the top of the x-axis looking straight down rather than viewing the axes face on as before. Here you will see the line rotate as before, as if around a clock face. Finally imagine a line drawn from the origin, 1 pixel wide and 200 pixels upwards. And sit yourself at the end of the y-axis looking down its length. Once again you will see the line rotate as before, as if around a clock face.

Because visually we cannot view a single object from all three positions at once and we have only one position from which we view an object, we experience all but one of these rotations as something other than what it is. We experience the x and y rotations as foreshortening. The y width-wise and the x height-wise. So what we see and what is really happening, if we were to take a different vantage point are two different things.

But a computer can take into account all points of perspective at once, and so if we were to rotate an object by 90 degrees along the y and z axes, with equal factors, and identify the points between the two, the resulting line would appear to run close to 45 degrees, but it is not the same as a 45-degree rotation along the z-axis alone, or a line drawn at 45 degrees to the x and y axes (in two-dimensional thinking). Its position is instead calculated as a vector taking into account x, y and z values, and has the appearance of the corner of a necker cube (which presents itself as face on and yet we see one side and perspective).
And since every corner of a cube face has a 90 degree angle, it appears as if this line has at once has dropped 90 degrees from the y-axis and ticked 90 degrees around from the x-axis when taking into account a three-dimensional perspective.

The transformation code is actually written,
CATransform3DMakeRotation(degree2radian(90),0.0,1.0,1.0)
weighting the rotation towards the y and z axes. But what we do and what we see has a complex relationship in three-dimensional space.

Here a 120-degree rotation is applied in equal measure to the y and z axes:
A far sharper sense of perspective is achieved as the x-axis appears to swing round towards us and the clock hand rotating the y-axis has ticked on further away from us, but appearances are deceptive. If we add back the line that was drawn in the first image (but here is coloured green), then we see that the new line is foreshortened compared to the original due to the additional rotation about the y-aixs, but is actually lower.

The new line seems close representing something nearer to 60 degrees but as before this isn't precise, because a vector is calculated based on three-dimensional midpoints rather than a straight division of what we think of as x and y in two-dimensional space. For reference this is what a (blue) line rotated 60 degrees would look like:



For more detailed explanations see herehere and also here.

Note: in the first illustration the black line representing the x-axis is actually a line draw exactly the same as that of the one standing vertically but rotated 90 degrees along the z-axis. In the second illustration the same line is rotated 120 degrees. In fact every rotation is of a vertical line starting in the same position with the same height. And no scaling is performed.

Final Point

A CATransform3D has 16 property values. These are numbered m11-m14, m21-m24, m31-m34 and m41-44. The first number corresponds to the matrix row and the second number to the column, so m43 would be matrix, row 4, column 3, when arranged in the format shown above.

Note: A good way to explore matrix values is using a Playground file, because every CATransform3D that is created outputs its matrix values in the preview area. 

Final thoughts

CATransform3D functions manipulate two-dimensional objects in three-dimensional space, rather than manipulating three-dimensional objects in three-dimensional space. For the latter purpose there exists the SceneKit and OpenGL frameworks.

To make the CATransform3D work for the manipulation of three-dimensional objects we'd need to think of building 3D from 2D as illustrated by this post and taking account of the positioning and rotation needs of each element of a drawing.

Note: Apple include discussion of 2D vectors in the Swift documentation.

Endorse on Coderwall

Comments

  1. Nice it seems to be good post... It will get readers engagement on the article since readers engagement plays an vital role in every blog.. i am expecting more updated posts from your hands.
    Mobile App Development Company in Chennai
    Android app Development Company in Chennai
    ios app development Company in Chennai

    ReplyDelete
  2. It's interesting that many of the bloggers your tips helped to clarify a few things for me as well as giving.. very specific nice content. And tell people specific ways to live their lives.Sometimes you just have to yell at people and give them a good shake to get your point across.
    Mobile App Development Company
    Android app Development Company
    ios app development Company
    Mobile App Development Companies

    ReplyDelete
  3. Thankyou for this blog its really interesting and informative, but there is some errors
    Which need to be recorrect by owner. See i also have some good blogs related to
    Technical services, you can check on my website.

    Avast Login
    garmin.com/express
    avg.com/retail
    bullguard support number

    ReplyDelete
  4. Executing your innovative ideas into a proper functioning iOS App is not a big task only, if it is done in the right way. The Best Mobile App Development Companies implements a layout or Plan which can be a milestone in developing an iOS Application. Hence, before you stand up to prepare an iOS Application just make out a plan for it. How You Gonna Work? What will be the Niche? What Can Be the Design? And so on.

    ReplyDelete
  5. Whether you want us to build exceptional iPhone apps from scratch or want to hire iPhone app developers in India for offshore projects, with IndianAppDeveloper, you find the right solution and talent pool.

    ReplyDelete
  6. With each passing day, web development is evolving rapidly and increase your business visibility over the digital platform. It is necessary for all the Web Developers in India to keep up with the latest web development trends and know the front-end web development tools.

    ReplyDelete

Post a comment