#glkit

[vipyne]

I learned a thing

Forgive the lack of clever double entendres in this straight forward post about iOS development with GLKit / Swift.  I know next to nothing about Xcode and even less about Swift.  My background is in Javascript, C, and AfterEffects, so given that, some things are very intuitive, others, not so much.  As I embarked on my google learning journey, I discovered what Ken observed: there is a lot of GLKit documentation out there... but its all in Objective C.  Shout Outs for this post also go to Ray and Swiftly as this “tutorial” is basically just a mash up of those resources.  

Without further ado, here is a hello world, if your world is iOS / GLKit / Swift.

Assumptions: - You know enough to be dangerous with an object oriented programming language.   - You have Xcode and all that command line tools crud installed. - You have some vague knowledge of {Open,Web}GL.

1. open Xcode 2. choose Single View Application 3. make sure language is set to `Swift` 4. in “ViewController.swift” change "UI"s to "GLK"s:

import GLKit class ViewController: GLKViewController { 

5. inside the "viewDidLoad()" function add:

var view: GLKView? = (self.view as? GLKView) view?.context = EAGLContext(api: .openGLES2)

6. after the "viewDidLoad()" function, add this new function:

override func glkView(_ view: GLKView, drawIn rect: CGRect) {    glClearColor(1.0, 1.0, 0.0. 1.0)    glClear(GLbitfield(GL_COLOR_BUFFER_BIT))  }

7. click on “Main.storyboard” and delete the default view

8. drag a "GLKit View Controller" from bottom right Object Library to the storyboard.  Should be looking like this about now:

9. click on buttons `1` and `2` in that order to make this new view the entry point. the arrow circled by `3` should appear

10. click on the top left yellow icon (GLKit View Controller) and change the custom class to "ViewController"

11. hit Command R (or Product > Run if you’re not into the whole brevity thing) to build and test run your code.

12. if the screen on your iPhone / simulator is orange, celebrate!  if not, go through your normal troubleshooting shame spiral.

Here is some copy pasta code that adds in a button to toggle background colors. (Watch this 3 min youtube video to see how to link the button to the GUI.)

import GLKit

class ViewController: GLKViewController {    var cc = [Float](arrayLiteral: 0.0, 1.0, 1.0, 1.0)

   override func viewDidLoad() {

       super.viewDidLoad()

       // open a GL context        var view: GLKView? = (self.view as? GLKView)        view?.context = EAGLContext(api: .openGLES2)    }

   @IBAction func buttonClick(_ sender: AnyObject) {        toggleClearColor()    }

   func toggleClearColor() {        if 0.0 == cc[0] {            cc[0] = 1.0            cc[2] = 0.0        } else {            cc[0] = 0.0            cc[2] = 1.0        }    }

   override func glkView(_ view: GLKView, drawIn rect: CGRect) {        glClearColor(cc[0], cc[1], cc[2], cc[3])        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))     } }

[twoflygames]

Creating a chase camera with GLKit

For the game I am working on I needed to create a camera that will follow an object from a specific distance and angle. This kind of camera - also known as a chase camera - is very popular in racing games and other third person games.

Before moving to iOS and Apple devices I did most of my games programming in XNA Game Studio. I was therefore lucky enough to own a copy of the excellent book "3D Graphics with XNA Game Studio 4.0" by Sean James and this book describes how to create a chase camera. Obviously, the book uses C# and XNA for it's code so it is not usable on the iOS platform directly - but the concept is the same.

The concept of the chase camera is visualized in the next figure: (source: 3D Graphics with XNA Game Studio 4.0 by Sean James (PACKT Publishing))

An offset from the camera position is used to determine the view direction and chase distance. The target position is calculated by using an offset from the object's position. Based on these values the view matrix can then be calculated.

The chase camera created by Sean James has the added bonus of having a relative rotation value that allows the camera to rotate independently of the object as well as a "springiness" value that allows the camera to "bend" from side-to-side instead of rigidly following the object. This makes the camera behave more like real-life and gives a much better feeling of movement.

As the code created by Jean James is targeted for XNA I have re-created to code in Objective-C using GLKit math helpers. As some of the math methods used in XNA does not exist in GLKit I have had to re-create these methods in Objective-C using code created for the MonoXNA project.

ChaseCamera.h

// // ChaseCamera.h // #import "AbstractCamera.h" @interface ChaseCamera : AbstractCamera @property (nonatomic, readwrite) GLKVector3 position; @property (nonatomic, readwrite) GLKVector3 target; @property (nonatomic, readwrite) GLKVector3 followTargetPosition; @property (nonatomic, readwrite) GLKVector3 followTargetRotation; @property (nonatomic, readwrite) GLKVector3 positionOffset; @property (nonatomic, readwrite) GLKVector3 targetOffset; @property (nonatomic, readwrite) GLKVector3 relativeCameraRotation; @property (nonatomic, readwrite) float springiness; - (id) initChaseCameraWithPositionOffset:(GLKVector3)positionOffset targetOffset:(GLKVector3)targetOffset relativeCameraRotation:(GLKVector3)relativeCameraRotation; - (void) moveToTargetFollowPosition:(GLKVector3)targetFollowPosition targetFollowRotation:(GLKVector3)targetFollowRotation; - (void) rotate:(GLKVector3)rotationChange; @end

ChaseCamera.m

// // ChaseCamera.m // #import "ChaseCamera.h" #import "MathHelper.h" @implementation ChaseCamera - (id) initChaseCameraWithPositionOffset:(GLKVector3)positionOffset targetOffset:(GLKVector3)targetOffset relativeCameraRotation:(GLKVector3)relativeCameraRotation { if (( self = [super init] )) { _positionOffset = positionOffset; _targetOffset = targetOffset; _relativeCameraRotation = relativeCameraRotation; } return self; } - (void) setSpringiness:(float)springiness { // Clamp the value between 0 and 1 _springiness = clamp(springiness, 0, 1); } - (void) moveToTargetFollowPosition:(GLKVector3)targetFollowPosition targetFollowRotation:(GLKVector3)targetFollowRotation { _followTargetPosition = targetFollowPosition; _followTargetRotation = targetFollowRotation; } - (void) rotate:(GLKVector3)rotationChange { _relativeCameraRotation = GLKVector3Add(_relativeCameraRotation, rotationChange); } - (void) update { // Sum the rotations of the model and the camera to ensure it is // rotated to the corret position relative to the model's rotation GLKVector3 combinedRotation = GLKVector3Add(_followTargetRotation, _relativeCameraRotation); // Calculate the rotation matrix for the camera GLKMatrix4 rotation = Matrix4MakeFromYawPitchRoll(combinedRotation.y, combinedRotation.x, combinedRotation.z); // Calculate the position the camera would be without the spring // value, using the rotation matrix and the target position GLKVector3 desiredPosition = GLKVector3Add(_followTargetPosition, Vector3Transform(_positionOffset, rotation)); // Interpolate between the current position and the desired position _position = GLKVector3Lerp(_position, desiredPosition, _springiness); // Calculate the new target using the rotation matrix _target = GLKVector3Add(_followTargetPosition, Vector3Transform(_targetOffset, rotation)); // Obtain the up vector from the matrix GLKVector3 up = Vector3Transform(GLKVector3Make(0.0f, 1.0f, 0.0f), rotation); // Recalculate the view matrix self.view = GLKMatrix4MakeLookAt(_position.x, _position.y, _position.z, _target.x, _target.y, _target.z, up.x, up.y, up.z); } @end

As you might have noticed the ChaseCamera is inheriting from the AbstractCamera class. The AbstractCamera class is very basic and I created it because I will have a few different camera's in my game. Using the abstract camera class allows be to switch cameras seamlessly as for any camera all you ever care about is the projection and view matrices . What else the camera is doing to calculate these are mostly irrelevant to the rest of the game. I have posted the code for the AbstractCamera class below.

AbstractCamera.h

// // AbstractCamera.h // @interface AbstractCamera : NSObject // The view matrix for the camera @property (nonatomic, readwrite) GLKMatrix4 view; // The projection matrix for the camera @property (nonatomic, readwrite) GLKMatrix4 projection; // Update the camera - (void) update; @end

AbstractCamera.m

// // AbstractCamera.m // #import "AbstractCamera.h" @implementation AbstractCamera - (id) init { if (( self = [super init] )) { [self generatePerspectiveProjectionMatrixWithFieldOfView:45.0f]; } return self; } - (void) generatePerspectiveProjectionMatrixWithFieldOfView:(float)fieldOfView { // Get the size of the screen CGRect winRect = [[UIScreen mainScreen] bounds]; // Calculate aspect ratio float aspectRatio = winRect.size.width / winRect.size.height; // Create perspective projection matrix self.projection = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(fieldOfView), aspectRatio, 0.1f, 2000.0f); } - (void) update {} @end

As already mentioned above some of the math methods available in XNA do not exist in GLKit. Therefore, I created a MathHelper class that has methods for these missing XNA methods. I have cut-out those methods and made a focused MathHelper class just for the ChaseCamera class

MathHelper.h

// // MathHelpers.h // #pragma mark - #pragma mark Prototypes #pragma mark - static __inline__ GLKVector3 Vector3DDirectionToAngle(GLKVector3 direction); // Transforms a GLKVector3 by the given matrix static __inline__ GLKVector3 Vector3Transform(GLKVector3 vector, GLKMatrix4 transform); // Creates a new rotation matrix from a specified yaw, pitch and roll angles static __inline__ GLKMatrix4 Matrix4MakeFromYawPitchRoll(float yaw, float pitch, float roll); // Creates a new quaternion from specified yaw, pitch and roll angles static __inline__ GLKQuaternion QuaternionMakeFromYawPitchRoll(float yaw, float pitch, float roll); #pragma mark - #pragma mark Implementations #pragma mark - static __inline__ GLKVector3 Vector3DDirectionToAngle(GLKVector3 direction) { // Convert direction vector to angle float rotation = (float) acos(direction.y > 0 ? -direction.x : direction.x); if (direction.y > 0) rotation = M_PI; rotation = M_PI_2; return GLKVector3Make(0, rotation, 0); } static __inline__ GLKVector3 Vector3Transform(GLKVector3 vector, GLKMatrix4 transform) { return GLKVector3Make(((vector.x * transform.m00) (vector.y * transform.m10) (vector.z * transform.m20) transform.m30), ((vector.x * transform.m01) (vector.y * transform.m11) (vector.z * transform.m21) transform.m31), ((vector.x * transform.m02) (vector.y * transform.m12) (vector.z * transform.m22) transform.m32)); } static __inline__ GLKMatrix4 Matrix4MakeFromYawPitchRoll(float yaw, float pitch, float roll) { GLKMatrix4 matrix; GLKQuaternion quaternion; quaternion = QuaternionMakeFromYawPitchRoll(yaw, pitch, roll); return GLKMatrix4MakeWithQuaternion(quaternion); } static __inline__ GLKQuaternion QuaternionMakeFromYawPitchRoll(float yaw, float pitch, float roll) { GLKQuaternion quaternion; quaternion.x = (((float)cos((double)(yaw * 0.5f)) * (float)sin((double)(pitch * 0.5f))) * (float)cos((double)(roll * 0.5f))) (((float)sin((double)(yaw * 0.5f)) * (float)cos((double)(pitch * 0.5f))) * (float)sin((double)(roll * 0.5f))); quaternion.y = (((float)sin((double)(yaw * 0.5f)) * (float)cos((double)(pitch * 0.5f))) * (float)cos((double)(roll * 0.5f))) - (((float)cos((double)(yaw * 0.5f)) * (float)sin((double)(pitch * 0.5f))) * (float)sin((double)(roll * 0.5f))); quaternion.z = (((float)cos((double)(yaw * 0.5f)) * (float)cos((double)(pitch * 0.5f))) * (float)sin((double)(roll * 0.5f))) - (((float)sin((double)(yaw * 0.5f)) * (float)sin((double)(pitch * 0.5f))) * (float)cos((double)(roll * 0.5f))); quaternion.w = (((float)cos((double)(yaw * 0.5f)) * (float)cos((double)(pitch * 0.5f))) * (float)cos((double)(roll * 0.5f))) (((float)sin((double)(yaw * 0.5f)) * (float)sin((double)(pitch * 0.5f))) * (float)sin((double)(roll * 0.5f))); return quaternion; }

That is it .. I will try an package this code in an example later on. For now I just wanted to post it so that I could close a question I made on the Ray Wenderlich forum some time ago.

Hope you find the code useful. If you have questions feel free to contact me via Twitter.

[somerandomtechblog]

A simple way to set up GLKView without the Xcode template

The motivation =========== Xcode's OpenGL Game template is not quite the cleanest way to start your OpenGL project. It adds a lot of code you don't initially need and by the time you will need it, you'll probably structure it in a different manner, which means you'll have to clean it form the template. The good news is that, to set up the most basic GLKView to handle your drawing routines you only need 3 lines of code. The example project for this article can be found [here](https://github.com/valentinradu/Simple-OpenGL-Init) The solution ========= So, here are the three lines of code that get you started. //these are the only three lines you //need to write in order to init your GLKView //while there are several options you could set here too, //you can actually skip them and go straight ahead to //SGLView (which is a subclass of GLKView by the way) drawRect: method //and start drawing in it //we create the context using the latest API EAGLContext * context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2]; [EAGLContext setCurrentContext:context]; //we init our GLKView subclass with our newly created context SGLView * view = [[SGLView alloc] initWithFrame:self.window.frame context:context]; After this, you should be able to override your view's `drawRect:` method and draw. Let's try something that doesn't need preliminary setup. - (void)drawRect:(CGRect)rect { //clear the screen glClearColor(0.0f, 1.0f, 1.0f, 1.0f); } **That's it**, your GLKView is set up, from here the additional settings depend on how you plan to use OpenGL (2D, 3D, on screen, off screen, etc.). A little extra ========= To make the matter complete, let's try to draw a simple 2D square. So, in our GLKView subclass we will use `GLKBaseEffect` to handle the projection and the drawing colour. For more details, refer to the comments below. - (id)initWithFrame:(CGRect)frame context:(EAGLContext *)context { self = [super initWithFrame:frame context:context]; if (self) { //the effect makes our life easier //we need not worry about the colour array nor the projection effect = [[GLKBaseEffect alloc] init]; effect.useConstantColor = GL_TRUE; //nor for the projection //which will be orthogonal for the sake of simplicity //the parameters are for 4-inch retina, 3.5 retina would have been //-1.0f, 1.0f, -1.5f, 1.5f, 1.0f, -1.0f GLKMatrix4 projectionMatrix = GLKMatrix4MakeOrtho(-1.0f, 1.0f, -1.7f, 1.7f, 1.0f, -1.0f); effect.transform.projectionMatrix = projectionMatrix; //set a color for our drawing effect.constantColor = GLKVector4Make(190.0f/255.0f, 182.0f/255.0f, 171.0f/255.0f, 1.0f); //generate and bind each of the vertex and index buffer //upload data to them glGenVertexArraysOES(1, &vertexArray); glBindVertexArrayOES(vertexArray); glGenBuffers(1, &vertexBuffer); glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer); glBufferData(GL_ARRAY_BUFFER, kVertexNum*sizeof(GLKVector3), &vertexData, GL_STATIC_DRAW); glGenBuffers(1, &indexBuffer); glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer); glBufferData(GL_ELEMENT_ARRAY_BUFFER, kIndexNum*sizeof(GLbyte), &indexData, GL_STATIC_DRAW); glBindBuffer(GL_ARRAY_BUFFER,0); glBindVertexArrayOES(0); } return self; } And then the drawing code. - (void)drawRect:(CGRect)rect { //clear the screen glClearColor(1.0f, 1.0f, 1.0f, 1.0f); glClear(GL_COLOR_BUFFER_BIT); glBindVertexArrayOES(vertexArray); //draw glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer); glEnableVertexAttribArray(GLKVertexAttribPosition); glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLKVector3), (void*)0); [effect prepareToDraw]; glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer); glDrawElements(GL_TRIANGLE_STRIP, kIndexNum, GL_UNSIGNED_BYTE, (void*)0); glBindBuffer(GL_ARRAY_BUFFER,0); glBindVertexArrayOES(0); } And finally, we have two `static const` buffers that provide the necessarily drawing data. static const GLbyte kVertexNum = 4; static const GLbyte kIndexNum = 6; //the vertex data is added from the left bottom corner //towards right, up and finally left //as the ascii art suggests static const GLKVector3 vertexData[kVertexNum] = { {-0.5f, -0.5f, 0.0f},//0 3-----2 {0.5f, -0.5f, 0.0f},//1 | | {0.5f, 0.5f, 0.0f},//2 | | {-0.5f, 0.5f, 0.0f},//3 0-----1 }; //we basically draw 2 triangles //as described in the ascii art static const GLbyte indexData[kIndexNum] = { 0, 3, 1, 3, 2, 1 /* 3--2 |\ | | \| 0--1 */ };

[negative-motivation]