OpenGL ES Transformations with Gestures
Learn all about OpenGL ES Transformations by making a 3D, gesturebased model viewer. By Ricardo Rendon Cepeda.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
OpenGL ES Transformations with Gestures
35 mins
 Getting Started
 Gesture Recognizers
 An Overview
 Adding Gesture Recognizers
 Gesture Recognizer Data
 Handling Your Transformations
 The Scale Transformation
 The Translation Transformation
 A Quick Math Lesson: Quaternions
 The Rotation Transformation: Overview
 ZAxis Rotation With the Rotation Gesture
 X and YAxis Rotation With the TwoFinger Pan Gesture
 Locking Your Gestures/Transformations
 Where to Go From Here?
In this tutorial, you’ll learn how to use gestures to control OpenGL ES transformations by building a sophisticated model viewer app for 3D objects.
For this app, you’ll take maximum advantage of the iPhone’s touchscreen to implement an incredibly intuitive interface. You’ll also learn a bit of 3D math and use this knowledge to master basic model manipulation.
The hard work has already been done for you, specifically in our tutorial series How To Export Blender Models to OpenGL ES, allowing you to concentrate on nothing but transformations and gestures. The aforementioned series is an excellent buildup to this tutorial, since you’ll be using virtually the same code and resources. If you missed it, you’ll also be fine if you’ve read our OpenGL ES 2.0 for iPhone or Beginning OpenGL ES 2.0 with GLKit tutorials.
Note: Since this is literally a “handson” tutorial that depends on gestures, you’ll definitely need an iOS device to fully appreciate the implementation. The iPhone/iPad Simulator can’t simulate all the gestures covered here.
Getting Started
First, download the starter pack for this tutorial.
As mentioned before, this is essentially the same project featured in our Blender to OpenGL ES tutorial series. However, the project has been refactored to present a neat and tidy GLKit View Controller class—MainViewController
—that hides most of the OpenGL ES shader implementation and 3D model rendering.
Have a look at MainViewController.m to see how everything works, and then build and run. You should see the screen below:
The current model viewer is very simple, allowing you to view two different models in a fixed position. So far it’s not terribly interesting, which is why you’ll be adding the wow factor by implementing gesture recognizers!
Gesture Recognizers
Any new iPhone/iPad user will have marveled at the smooth gestures that allow you to navigate the OS and its apps, such as pinching to zoom or swiping to scroll. The 3D graphics world is definitely taking notice, since a lot of highend software, including games, requires a threebutton mouse or double thumbsticks to navigate their worlds. Touchscreen devices have changed all this and allow for new forms of input and expression. If you’re really forwardthinking, you may have already implemented gestures in your apps.
An Overview
Although we’re sure you’re familiar with them, here’s quick overview of the four gesture recognizers you’ll implement in this tutorial:
The first thing you need to do is add them to your interface.
Adding Gesture Recognizers
Open MainStoryboard.storyboard and drag a Pan Gesture Recognizer
from your Object library and drop it onto your GLKit View
, as shown below:
Next, show the Assistant editor in Xcode with MainStoryboard.storyboard in the left window and MainViewController.m in the right window. Click on your Pan Gesture Recognizer
and control+drag a connection from it to MainViewController.m to create an Action in the file. Enter pan
for the Name of your new action and UIPanGestureRecognizer
for the Type. Use the image below as a guide:
Repeat the process above for a Pinch Gesture Recognizer
and a Rotation Gesture Recognizer
. The Action for the former should have the Name pinch
with Type UIPinchGestureRecognizer
, while the latter should have the Name rotation
with Type UIRotationGestureRecognizer
. If you need help, use the image below:
[spoiler title=”Adding Pinch and Rotation Gesture Recognizers”]
[/spoiler]
Revert Xcode back to your Standard editor view and open MainStoryboard.storyboard. Select your Pan Gesture Recognizer
and turn your attention to the right sidebar. Click on the Attributes inspector tab and set the Maximum number of Touches to 2
, since you’ll only be handling onefinger and twofinger pans.
Next, open MainViewController.m and add the following lines to pan:
:
// Pan (1 Finger)
if(sender.numberOfTouches == 1)
{
NSLog(@"Pan (1 Finger)");
}
// Pan (2 Fingers)
else if(sender.numberOfTouches == 2)
{
NSLog(@"Pan (2 Fingers)");
}
Similarly, add the following line to pinch:
:
NSLog(@"Pinch");
And add the following to rotation:
:
NSLog(@"Rotation");
As you might have guessed, these are simple console output statements to test your four new gestures, so let’s do just that: build and run! Perform all four gestures on your device and check the console to verify your actions.
Gesture Recognizer Data
Now let’s see some actual gesture data. Replace both NSLog()
statements in pan:
with:
CGPoint translation = [sender translationInView:sender.view];
float x = translation.x/sender.view.frame.size.width;
float y = translation.y/sender.view.frame.size.height;
NSLog(@"Translation %.1f %.1f", x, y);
At the beginning of every new pan, you set the touch point of the gesture (translation
) as the origin (0.0, 0.0) for the event. While the event is active, you divide its reported coordinates over its total view size (width for x
, height for y
) to get a total range of 1.0 in each direction. For example, if the gesture event begins in the middle of the view, then its range will be: 0.5 ≤ x ≤ +0.5 from left to right and 0.5 ≤ y ≤ +0.5 from top to bottom.
Pop quiz! If the gesture event begins in the topleft corner of the view, what is its range?
[spoiler title=”Pan Gesture Range”]
0.0 ≤ x ≤ +1.0
0.0 ≤ y ≤ +1.0
[/spoiler]
The pinch and rotation gestures are much easier to handle. Replace the NSLog()
statement in pinch:
with this:
float scale = [sender scale];
NSLog(@"Scale %.1f", scale);
And replace the NSLog()
statement in rotation:
with the following:
float rotation = GLKMathRadiansToDegrees([sender rotation]);
NSLog(@"Rotation %.1f", rotation);
At the beginning of every new pinch, the distance between your two fingers has a scale
of 1.0. If you bring your fingers together, the scale of the gesture decreases for a zoomout effect. If you move your fingers apart, the scale of the gesture increases for a zoomin effect.
A new rotation gesture always begins at 0.0 radians, which you conveniently convert to degrees for this exercise with the function GLKMathRadiansToDegrees()
. A clockwise rotation increases the reported angle, while a counterclockwise rotation decreases the reported angle.
Build and run! Once again, perform all four gestures on your device and check the console to verify your actions. You should see that pinching inward logs a decrease in the scale, rotating clockwise logs a positive angle and panning to the bottomright logs a positive displacement.
Handling Your Transformations
With your gesture recognizers all set, you’ll now create a new class to handle your transformations. Click File\New\File… and choose the iOS\Cocoa Touch\ObjectiveC class template. Enter Transformations for the class and NSObject for the subclass. Make sure both checkboxes are unchecked, click Next and then click Create.
Open Transformations.h and replace the existing file contents with the following:
#import <GLKit/GLKit.h>
@interface Transformations : NSObject
 (id)initWithDepth:(float)z Scale:(float)s Translation:(GLKVector2)t Rotation:(GLKVector3)r;
 (void)start;
 (void)scale:(float)s;
 (void)translate:(GLKVector2)t withMultiplier:(float)m;
 (void)rotate:(GLKVector3)r withMultiplier:(float)m;
 (GLKMatrix4)getModelViewMatrix;
@end
These are the main methods you’ll implement to control your model’s transformations. You’ll examine each in detail within their own sections of the tutorial, but for now they will mostly remain dummy implementations.
Open Transformations.m and replace the existing file contents with the following:
#import "Transformations.h"
@interface Transformations ()
{
// 1
// Depth
float _depth;
}
@end
@implementation Transformations
 (id)initWithDepth:(float)z Scale:(float)s Translation:(GLKVector2)t Rotation:(GLKVector3)r
{
if(self = [super init])
{
// 2
// Depth
_depth = z;
}
return self;
}
 (void)start
{
}
 (void)scale:(float)s
{
}
 (void)translate:(GLKVector2)t withMultiplier:(float)m
{
}
 (void)rotate:(GLKVector3)r withMultiplier:(float)m
{
}
 (GLKMatrix4)getModelViewMatrix
{
// 3
GLKMatrix4 modelViewMatrix = GLKMatrix4Identity;
modelViewMatrix = GLKMatrix4Translate(modelViewMatrix, 0.0f, 0.0f, _depth);
return modelViewMatrix;
}
@end
There are a few interesting things happening with _depth
, so let’s take a closer look:

_depth
is a variable specific toTransformations
which will determine the depth of your object in the scene.  You assign the variable
z
to_depth
in your initializer, and nowhere else.  You position your modelview matrix at the (x,y) center of your view with the values (0.0, 0.0) and with a zvalue of
_depth
. You do this because, in OpenGL ES, the negative zaxis runs into the screen.
That’s all you need to render your model with an appropriate modelview matrix. :]
Open MainViewController.m
and import your new class by adding the following statement to the top of your file:
#import "Transformations.h"
Now add a property to access your new class, right below the @interface
line:
@property (strong, nonatomic) Transformations* transformations;
Next, initialize transformations
by adding the following lines to viewDidLoad
:
// Initialize transformations
self.transformations = [[Transformations alloc] initWithDepth:5.0f Scale:1.0f Translation:GLKVector2Make(0.0f, 0.0f) Rotation:GLKVector3Make(0.0f, 0.0f, 0.0f)];
The only value doing anything here is the depth of 5.0f
. You’re using this value because the projection matrix of your scene has near and far clipping planes of 0.1f
and 10.0f
, respectively (see the function calculateMatrices
), thus placing your model right in the middle of the scene.
Locate the function calculateMatrices
and replace the following lines:
GLKMatrix4 modelViewMatrix = GLKMatrix4Identity;
modelViewMatrix = GLKMatrix4Translate(modelViewMatrix, 0.0f, 0.0f, 2.5f);
With these:
GLKMatrix4 modelViewMatrix = [self.transformations getModelViewMatrix];
Build and run! Your starship is still there, but it appears to have shrunk!
You’re handling your new modelview matrix by transformations
, which set a depth of 5.0 units. Your previous modelview matrix had a depth of 2.5 units, meaning that your starship is now twice as far away. You could easily revert the depth, or you could play around with your starship’s scale…
The Scale Transformation
The first transformation you’ll implement is also the easiest: scale. Open Transformations.m and add the following variables inside the @interface
extension at the top of your file:
// Scale
float _scaleStart;
float _scaleEnd;
All of your transformations will have start and end values. The end value will be the one actually transforming your modelview matrix, while the start value will track the gesture’s event data.
Next, add the following line to initWithDepth:Scale:Translation:Rotation:
, inside the if
statement:
// Scale
_scaleEnd = s;
And add the following line to getModelViewMatrix
, after you translate the modelview matrix—transformation order does matter, as you’ll learn later on:
modelViewMatrix = GLKMatrix4Scale(modelViewMatrix, _scaleEnd, _scaleEnd, _scaleEnd);
With that line, you scale your modelview matrix uniformly in (x,y,z) space.
To test your new code, open MainViewController.m and locate the function viewDidLoad
. Change the Scale:
initialization of self.transformations
from 1.0f
to 2.0f
, like so:
self.transformations = [[Transformations alloc] initWithDepth:5.0f Scale:2.0f Translation:GLKVector2Make(0.0f, 0.0f) Rotation:GLKVector3Make(0.0f, 0.0f, 0.0f)];
Build and run! Your starship will be twice as big as your last run and look a lot more proportional to the size of your scene.
Back in Transformations.m, add the following line to scale:
:
_scaleEnd = s * _scaleStart;
As mentioned before, the starting scale value of a pinch gesture is 1.0, increasing with a zoomin event and decreasing with a zoomout event. You haven’t assigned a value to _scaleStart
yet, so here’s a quick question: should it be 1.0? Or maybe s
?
The answer is neither. If you assign either of those values to _scaleStart
, then every time the user performs a new scale gesture, the modelview matrix will scale back to either 1.0 or s
before scaling up or down. This will cause the model to suddenly contract or expand, creating a jittery experience. You want your model to conserve its latest scale so that the transformation is continuously smooth.
To make it so, add the following line to start
:
_scaleStart = _scaleEnd;
You haven’t called start
from anywhere yet, so let’s see where it belongs. Open MainViewController.m and add the following function at the bottom of your file, before the @end
statement:
 (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// Begin transformations
[self.transformations start];
}
touchesBegan:withEvent:
is the first method to respond whenever your iOS device detects a touch on the screen, before the gesture recognizers kick in. Therefore, it’s the perfect place to call start
and conserve your scale values.
Next, locate the function pinch:
and replace the NSLog()
statement with:
[self.transformations scale:scale];
Build and run! Pinch the touchscreen to scale your model up and down. :D
That’s pretty exciting!
The Translation Transformation
Just like a scale transformation, a translation needs two variables to track start and end values. Open Transformations.m and add the following variables inside your @interface
extension:
// Translation
GLKVector2 _translationStart;
GLKVector2 _translationEnd;
Similarly, you only need to initialize _translationEnd
in initWithDepth:Scale:Translation:Rotation:
. Do that now:
// Translation
_translationEnd = t;
Scroll down to the function getModelViewMatrix
and change the following line:
modelViewMatrix = GLKMatrix4Translate(modelViewMatrix, 0.0f, 0.0f, _depth);
To this:
modelViewMatrix = GLKMatrix4Translate(modelViewMatrix, _translationEnd.x, _translationEnd.y, _depth);
Next, add the following lines to translate:withMultiplier:
:
// 1
t = GLKVector2MultiplyScalar(t, m);
// 2
float dx = _translationEnd.x + (t.x_translationStart.x);
float dy = _translationEnd.y  (t.y_translationStart.y);
// 3
_translationEnd = GLKVector2Make(dx, dy);
_translationStart = GLKVector2Make(t.x, t.y);
Let’s see what’s happening here:

m
is a multiplier that helps convert screen coordinates into OpenGL ES coordinates. It is defined when you call the function from MainViewController.m. 
dx
anddy
represent the rate of change of the current translation in x and y, relative to the latest position of_translationEnd
. In screen coordinates, the yaxis is positive in the downwards direction and negative in the upwards direction. In OpenGL ES, the opposite is true. Therefore, you subtract the rate of change in y from_translationEnd.y
.  Finally, you update
_translationEnd
and_translationStart
to reflect the new end and start positions, respectively.
As mentioned before, the starting translation value of a new pan gesture is (0.0, 0.0). That means all new translations will be relative to this origin point, regardless of where the model actually is in the scene. It also means the value assigned to _translationStart
for every new pan gesture will always be the origin.
Add the following line to start
:
_translationStart = GLKVector2Make(0.0f, 0.0f);
Everything is in place, so open MainViewController.m and locate your pan:
function. Replace the NSLog()
statement inside your first if
conditional for a single touch with the following:
[self.transformations translate:GLKVector2Make(x, y) withMultiplier:5.0f];
Build and run! Good job—you can now move your starship around with the touch of a finger! (But not two.)
A Quick Math Lesson: Quaternions
Before you move onto the last transformation—rotation—you need to know a bit about quaternions. This lesson will thankfully be pretty quick, though, since GLKit provides an excellent math library to deal with quaternions.
Quaternions are a complex mathematical system with many applications, but for this tutorial you’ll only be concerned with their spatial rotation properties. The main advantage of quaternions in this respect is that they don’t suffer from gimbal lock, unlike Euler angles.
Euler angles are a common representation for rotations, usually in (x,y,z) form. When rotating an object in this space, there are many opportunities for two axes to align with each other. In these cases, one degree of freedom is lost since any change to either of the aligned axes applies the same rotation to the object being transformed—that is, the two axes become one. That is a gimbal lock, and it will cause unexpected results and jittery animations.
One reason to prefer Euler angles to quaternions is that they are intrinsically easier to represent and to read. However, GLKQuaternion simplifies the complexity of quaternions and reduces a rotation to four simple steps:
 Create a quaternion that represents a rotation around an axis.
 For each (x,y,z) axis, multiply the resulting quaternion against a master quaternion.
 Derive the 4×4 matrix that performs an (x,y,z) rotation based on a quaternion.
 Calculate the product of the resulting matrix with the main modelview matrix.
You’ll be implementing these four simple steps shortly. :]
Quaternions and Euler angles are very deep subjects, so check out these summaries from CH Robotics if you wish to learn more: Understanding Euler Angles and Understanding Quaternions.
The Rotation Transformation: Overview
In this tutorial, you’ll use two different types of gesture recognizers to control your rotations: twofinger pan and rotation. The reason for this is that your iOS device doesn’t have a single gesture recognizer that reports three different types of values, one for each (x,y,z) axis. Think about the ones you’ve covered so far:
 Pinch produces a single float, perfect for a uniform scale across all three (x,y,z) axes.
 Onefinger pan produces two values corresponding to movement along the xaxis and the yaxis, just like your translation implementation.
No gesture can accurately represent rotation in 3D space. Therefore, you must define your own rule for this transformation.
Rotation about the zaxis is very straightforward and intuitive with the rotation gesture, but rotation about the xaxis and/or yaxis is slightly more complicated. Thankfully, the twofinger pan gesture reports movement along both of these axes. With a little more effort, you can use it to represent a rotation.
Let’s start with the easier one first. :]
ZAxis Rotation With the Rotation Gesture
Open Transformations.m and add the following variables inside your @interface
extension:
// Rotation
GLKVector3 _rotationStart;
GLKQuaternion _rotationEnd;
This is slightly different than your previous implementations for scale and translation, but it makes sense given your new knowledge of quaternions. Before moving on, add the following variable just below:
// Vectors
GLKVector3 _front;
As mentioned before, your quaternions will represent a rotation around an axis. This axis is actually a vector, since it specifies a direction—it’s not along z, it’s either frontfacing or backfacing.
Complete the vector’s implementation by initializing it inside initWithDepth:Scale:Translation:Rotation:
with the following line:
// Vectors
_front = GLKVector3Make(0.0f, 0.0f, 1.0f);
As you can see, the vector is frontfacing because its direction is towards the screen.
Note: Previously, I mentioned that in OpenGL ES, negative zvalues go into the screen. This is because OpenGL ES uses a righthanded coordinate system. GLKit, on the other hand (pun intended), uses the more conventional lefthanded coordinate system.
Next, add the following lines to initWithDepth:Scale:Translation:Rotation:
, right after the code you just added above:
r.z = GLKMathDegreesToRadians(r.z);
_rotationEnd = GLKQuaternionIdentity;
_rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(r.z, _front), _rotationEnd);
These lines perform the first two steps of the quaternion rotation described earlier:
 You create a quaternion that represents a rotation around an axis by using
GLKQuaternionMakeWithAngleAndVector3Axis()
.  You multiply the resulting quaternion against a master quaternion using
GLKQuaternionMultiply()
.
All calculations are performed with radians, hence the call to GLKMathDegreesToRadians()
. With quaternions, a positive angle performs a counterclockwise rotation, so you send in the negative value of your angle: r.z
.
To complete the initial setup, add the following line to getModelViewMatrix
, right after you create modelViewMatrix
:
GLKMatrix4 quaternionMatrix = GLKMatrix4MakeWithQuaternion(_rotationEnd);
Then, add the following line to your matrix calculations, after the translation and before the scale:
modelViewMatrix = GLKMatrix4Multiply(modelViewMatrix, quaternionMatrix);
These two lines perform the last two steps of the quaternion rotation described earlier:
 You derive the 4×4 matrix that performs an (x,y,z) rotation based on a quaternion, using
GLKMatrix4MakeWithQuaternion()
.  You calculate the product of the resulting matrix with the main modelview matrix using
GLKMatrix4Multiply()
.
Note: The order of your transformations is not arbitrary. Imagine the following instructions given to two different people:
 Starting from point
P
: taken
steps forward; turn to your left; then pretend to be a giant twice your size.  Starting from point
P
: pretend to be a giant twice your size; turn to your left; then taken
steps forward.
See the difference below:
Even though the instructions have the same steps, the two people end up at different points, P’1
and P’2
. This is because Person 1 first walks (translation), then turns (rotation), then grows (scale), thus ending n
paces in front of point P
. With the other order, Person 2 first grows, then turns, then walks, thus taking giantsized steps towards the left and ending 2n
paces to the left of point P
.
Open MainViewController.m and test your new code by changing the zaxis initialization angle of self.transformations
to 180.0
inside viewDidLoad
:
self.transformations = [[Transformations alloc] initWithDepth:5.0f Scale:2.0f Translation:GLKVector2Make(0.0f, 0.0f) Rotation:GLKVector3Make(0.0f, 0.0f, 180.0f)];
Build and run! You’ve caught your starship in the middle of a barrel roll.
After you’ve verified that this worked, revert the change, since you would rather have your app launch with the starship properly oriented.
The next step is to implement the rotation with your rotation gesture. Open Transformations.m and add the following lines to rotate:withMultiplier:
:
float dz = r.z  _rotationStart.z;
_rotationStart = GLKVector3Make(r.x, r.y, r.z);
_rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(dz, _front), _rotationEnd);
This is a combination of your initialization code and your translation implementation. dz
represents the rate of change of the current rotation about the zaxis. Then you simply update _rotationStart
and _rotationEnd
to reflect the new start and end positions, respectively.
There is no need to convert r.z
to radians this time, since the rotation gesture’s values are already in radians. r.x
and r.y
will be passed along as 0.0, so you don’t need to worry about them too much—for now.
As you know, a new rotation gesture always begins with a starting value of 0.0. Therefore, all new rotations will be relative to this zero angle, regardless of your model’s actual orientation. Consequently, the value assigned to _rotationStart
for every new rotation gesture will always be an angle of zero for each axis.
Add the following line to start
:
_rotationStart = GLKVector3Make(0.0f, 0.0f, 0.0f);
To finalize this transformation implementation, open MainViewController.m and locate your rotation:
function. Replace the NSLog()
statement with the following:
[self.transformations rotate:GLKVector3Make(0.0f, 0.0f, rotation) withMultiplier:1.0f];
Since a full rotation gesture perfectly spans 360 degrees, there is no need to implement a multiplier here, but you’ll find it very useful in the next section.
Lastly, since your calculations are expecting radians, change the preceding line:
float rotation = GLKMathRadiansToDegrees([sender rotation]);
To this:
float rotation = [sender rotation];
Build and run! You can now do a full barrel roll. :D
X and YAxis Rotation With the TwoFinger Pan Gesture
This implementation for rotation about the xaxis and/or yaxis is very similar to the one you just coded for rotation about the zaxis, so let’s start with a little challenge!
Add two new variables to Transformations.m, _right
and _up
, and initialize them inside your class initializer. These variables represent two 3D vectors, one pointing right and the other pointing up. Take a peek at the instructions below if you’re not sure how to implement them or if you want to verify your solution:
[spoiler title=”Right and Up Vectors”]
Add the following lines inside your @interface
extension:
GLKVector3 _right;
GLKVector3 _up;
Then, initialize them inside initWithDepth:Scale:Translation:Rotation:
by adding the following lines:
_right = GLKVector3Make(1.0f, 0.0f, 0.0f);
_up = GLKVector3Make(0.0f, 1.0f, 0.0f);
[/spoiler]
For an added challenge, see if you can initialize your (x,y) rotation properly, just as you did for your zaxis rotation with the angle r.z
and the vector _front
. The correct code is available below if you need some help:
[spoiler title=”Rotation Initialization”]
Add the following lines to initWithDepth:Scale:Translation:Rotation:
:
r.x = GLKMathDegreesToRadians(r.x);
r.y = GLKMathDegreesToRadians(r.y);
Also add these lines, which should go before the existing assignment that rotates around the zaxis:
_rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(r.x, _right), _rotationEnd);
_rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(r.y, _up), _rotationEnd);
[/spoiler]
Good job! There’s not a whole lot of new code here, so let’s keep going. Still in Transformations.m, add the following lines to rotate:withMultiplier:
, just above dz
:
float dx = r.x  _rotationStart.x;
float dy = r.y  _rotationStart.y;
Once again, this should be familiar—you’re just repeating your zaxis logic for the xaxis and the yaxis. The next part is a little trickier, though…
Add the following lines to rotate:withMultiplier:
, just after _rotationStart
:
_rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(dx*m, _up), _rotationEnd);
_rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(dy*m, _right), _rotationEnd);
For the zaxis rotation, your implementation rotated the ship about the zaxis and all was well, because that was the natural orientation of the gesture. Here, you face a different situation. If you look closely at the code above, you’ll notice that dx
rotates about the _up
vector (yaxis) and dy
rotates about the _right
vector (xaxis). The diagram below should help make this clear:
And you finally get to use m
! A pan gesture doesn’t report its values in radians or even degrees, but rather as 2D points, so m
serves as a converter from points to radians.
Finish the implementation by opening MainViewController.m and replacing the contents of your current twotouch else if
conditional inside pan:
with the following:
const float m = GLKMathDegreesToRadians(0.5f);
CGPoint rotation = [sender translationInView:sender.view];
[self.transformations rotate:GLKVector3Make(rotation.x, rotation.y, 0.0f) withMultiplier:m];
The value of m
dictates that for every touchpoint moved in the x and/or ydirection, your model rotates 0.5
degrees.
Build and run! Your model is fully rotational. Woohoo!
Nice one—that’s a pretty fancy model viewer you’ve built!
Locking Your Gestures/Transformations
You’ve fully implemented your transformations, but you may have noticed that sometimes the interface accidentally alternates between two transformations—for example, if you remove a finger too soon or perform an unclear gesture. To keep this from happening, you’ll now write some code to make sure your model viewer only performs one transformation for every continuous touch.
Open Transformations.h and add the following enumerator and property to your file, just below your @interface
statement:
typedef enum TransformationState
{
S_NEW,
S_SCALE,
S_TRANSLATION,
S_ROTATION
}
TransformationState;
@property (readwrite) TransformationState state;
state
defines the current transformation state of your model viewer app, whether it be a scale (S_SCALE
), translation (S_TRANSLATION
) or rotation (S_ROTATION
). S_NEW
is a value that will be active whenever the user performs a new gesture.
Open Transformations.m and add the following line to start
:
self.state = S_NEW;
See if you can implement the rest of the transformation states in their corresponding methods.
[spoiler title=”Transformation States”]
Add the following lines to…
scale:
self.state = S_SCALE;
translate:withMultiplier:
self.state = S_TRANSLATION;
rotate:withMultiplier:
self.state = S_ROTATION;
[/spoiler]
Piece of cake! Now open MainViewController.m and add a state
conditional to each gesture. I’ll give you the pan:
implementations for free and leave the other two as a challenge. :]
Modify pan:
to look like this:
 (IBAction)pan:(UIPanGestureRecognizer *)sender
{
// Pan (1 Finger)
if((sender.numberOfTouches == 1) &&
((self.transformations.state == S_NEW)  (self.transformations.state == S_TRANSLATION)))
{
CGPoint translation = [sender translationInView:sender.view];
float x = translation.x/sender.view.frame.size.width;
float y = translation.y/sender.view.frame.size.height;
[self.transformations translate:GLKVector2Make(x, y) withMultiplier:5.0f];
}
// Pan (2 Fingers)
else if((sender.numberOfTouches == 2) &&
((self.transformations.state == S_NEW)  (self.transformations.state == S_ROTATION)))
{
const float m = GLKMathDegreesToRadians(0.5f);
CGPoint rotation = [sender translationInView:sender.view];
[self.transformations rotate:GLKVector3Make(rotation.x, rotation.y, 0.0f) withMultiplier:m];
}
}
Click below to see the solution for the other two—but give it your best shot first!
[spoiler title=”Pinch and Rotation States”]
 (IBAction)pinch:(UIPinchGestureRecognizer *)sender
{
// Pinch
if((self.transformations.state == S_NEW)  (self.transformations.state == S_SCALE))
{
float scale = [sender scale];
[self.transformations scale:scale];
}
}
 (IBAction)rotation:(UIRotationGestureRecognizer *)sender
{
// Rotation
if((self.transformations.state == S_NEW)  (self.transformations.state == S_ROTATION))
{
float rotation = [sender rotation];
[self.transformations rotate:GLKVector3Make(0.0f, 0.0f, rotation) withMultiplier:1.0f];
}
}
[/spoiler]
Build and run! See what cool poses you can set for your model and have fun playing with your new app.
Congratulations on completing this OpenGL ES Transformations With Gestures tutorial!
Where to Go From Here?
Here is the completed project with all of the code and resources from this tutorial. You can also find its repository on GitHub.
If you completed this tutorial, you’ve developed a sophisticated model viewer using the latest technologies from Apple for 3D graphics (GLKit and OpenGL ES) and touchbased user interaction (gesture recognizers). Most of these technologies are unique to mobile devices, so you’ve definitely learned enough to boost your mobile development credentials!
You should now understand a bit more about basic transformations—scale, translation and rotation—and how you can easily implement them with GLKit. You’ve learned how to add gesture recognizers to a View Controller and read their main event data. Furthermore, you’ve created a very slick app that you can expand into a useful portfolio tool for 3D artists. Challenge accepted? ;]
If you have any questions, comments or suggestions, feel free to join the discussion below!