Zissou2d Part 3: The Sprite (Textures and Programs)

As I mentioned in my previous post, the Sprite is where all the action takes place, and by that, I mean the drawing. In CC2d, they've made it so that each object that has to draw itself can chose from a set of shading programs pre-loaded in the ShaderCache. The choice is made depending on what the Sprite has to draw.

Usually, a Sprite will be loaded with a texture image, which means that you will need a shader that can sample those textures. If you have no idea what I'm talking about, you can refer to my previous blog post about texturing and compression. On the other hand, you could have a Sprite that only contains a primitive shape, like a triangle, and no texture. For this, you obviously wouldn't need a program that can sample textures, thus that program would be simpler.

In this post, I will show you how to build a basic ShaderCache, as well as a TextureCache (insures an image, or texture, is loaded only once and can be re-used for different Sprites). Our ShaderCache will only contain one program for now; one that can draw textured objects (because I've already covered that in the previous post I mentioned, and that I've already written the shading program to do just that).

Also, from now on I'll have a Git of the project on GitHub.

Zissou2d Part 2: The Director (Steve)

The first thing I wanted to do when I started this project is build some kind of skeleton of what Cocos2d is. That means getting to know the big picture and then making something functional, extremely simplified, but that works the same way.

After the break, I'll present a diagram showing a general view of Zissou2d based on how CC2d works and I'll give more details as I put it into code.

Zissou2d Part 1: An overview

In this post I'm going to talk about how Cocos2d works in general,  and I'm also going to try to translate that into our project. I'm going to look at these concepts and see how we can integrate them by using GLKit.

One thing that helped me while going through the documentation of Cocos2d is that I had already used an animation software when I was younger (I was one of those kids making stick figure deaths). If you've ever used Abobe (Previously Macromedia) Flash to animate or try to make a game, these concepts will be very familiar to you.

Something different

Cocos2d logo

Zissou2d logo

It's been a couple of months since I've posted anything on this blog, but I've finally started doing something new! It was extremely important for me to understand the basics of OpenGL, but now I want to take it further and integrate this knowledge in an object-oriented environment.

This also means that I'm sadly going to stop doing my Basic Cube series for now, but it certainly doesn't mean I'm done with OpenGL! I'm going to keep a log right here, as I progress with this new thing, which is my own 2d game API called Zissou2d!...

Part 10 : Bump Mapping with CrazyBump

In this post, I'm going to use normal mapping to "fake" details on the cube. I will also add specularity which will make those details pop out. There's a few software products out there that generate normal maps automatically by analyzing a texture.

As it turns out, CrazyBump is pretty neat one, and as of this writing, the mac version is in public beta. When it's no longer in beta, well, you can either find another software, or, ahem... do what you have to do.

As usual, here's a link to what I've done so far: Project

I've taken the time to add a few more comments and fix some things here and there.

Part 9: Texturing and Compression

For this post, I'm going to show you how to use texturetool, which comes bundled with the iOS SDK. This tool is used to compress textures so that they take less space in memory using the PVR texture compression format. You can compress your texture to use 2 bits per pixel without completely destroying the image, which is pretty amazing. Of course, there's different levels of compression, but I'll be using this one.

Also, this tool allows you to generate mipmaps offline, and GLKTextureLoader will automatically detect them. After having created the compressed textures, I will load them inside our application. I will then add a texture coordinate for each vertex in our vertex array and use them to sample the texture in our fragment shader.

Part 8: Touch Events and Movement

Now, it would be fun if our object could somehow move. That way, we would truly see the effect of adding lighting to the scene. What would also be fun is to add a touch event to start and stop the object from moving. The best part is that it's very easy to do with the UIKit's gesture recognizers. And yes, you can use them in the GLKView!

What we're going to do is that every time you double tap, it will either start or stop the cube from rotating. Here's a link to the project after adding Touch events and movement:

https://docs.google.com/open?id=0BxwWIcKWxMPXOS1TZkFMR0JSRWFJUUgxQ0pyRl9TUQ

Part 7: Lighting

For this post, we're going to add basic lighting to the model. This will make the edges pop out and the shape will definitely have a better 3D feel. For this, we will need to add normal data for each vertex. This will allow us to calculate light intensity at each vertex, and the rasterize stage will be able to interpolate those values across the shape. More vertex data means a new attribute, and we'll also need to modify the shaders. Everything else should be unchanged.

I've also compiled what we've done so far, and I put some of the methods in a helper class called GLHelper. Additionally, I dropped the vertex data in a header file. These changes make the Controller's implementation a bit cleaner.

https://docs.google.com/open?id=0BxwWIcKWxMPXUE1BU2FDandRZzZwaGYxdFA4OTRqQQ

Part 6 : Drawing!

This post is about one little thing left do to after all this code. Draw the damn cube! Everything we've done with VAOs and VBOs will make our task considerably easier.

Part 5: VBOs and VAOs and more

In this post, we'll be creating the 2 VBOs that will allow us to pass our vertex data as well as the indices describing the shape directly to the GPU's memory. VBOs will make drawing much faster since you won't need to pass that data every time you want to draw. What you still need to do is bind those buffers and "describe" the data so that OpenGL can understand how to use it as an attribute in your shader program.

We'll also be creating a VAO, which will store the set of bindings. So, instead of binding the first VBO and describing it, as well as binding the second one and describing it, we'll just bind the VAO, and everything else will be done for us inside OpenGL.

Part 4: The Program

In this post, I will write the code to compile and link the shaders inside the program to be able to use it for drawing.

Part 3: Vertex Data and Shader Source

In this post, I will give you the arrays I will be using for drawing my cube (not a rabbit), both vertices and indices array. I will add a little piece of code that enables some features in OpenGL and the view, and I will set up the ViewPort. Finally, I will add the 2 shader files to my project and write the code for each of them.

Part 2: Timeout or a post about posts

In this post, I will compile a list of links or books that I found extremely useful to help me understand how everything works together in OpenGL ES 2.0 and GLKit. I will try to update my post when I find something new, or if I remember other links that I forgot to put in earlier. You can probably imagine that I was inspired by many other blogs or websites all over the internet, but I'm not trying to steal anything, so just e-mail me if I forgot to mention your obscure internet blog.

Part 1: The template

This post is mostly to get you up and running (almost) from scratch. Remember that I'm using iOS 5. This means automatic reference counting and storyboards, which are both amazing features that make your life easier. After this post, you'll have a basic template to use when you want to make OpenGL applications.

Introduction

The purpose of this blog is to put together a journal of what I've learned trying to draw some 3D on my iOS device. I want to do it mostly for myself as an exercise to remember all this stuff, but I'm also hoping it might help someone in the future.

In the past few months, I've read books about openGL ES, iOS 5 programming, and I also watched the videos of Paul Hegarty's iPhone application development class on iTunes. The problem is the following: There's just not many tutorials out there that blend together openGL ES 2.0, iOS, and GLKit.

I know that this is very platform specific, but not all developers want to have a multi-platform solution written in C or C++. Plus, if you've chosen iOS, then you've probably chosen the easiest platform to get you started working with OpenGL ES 2.0. GLKit is extremely easy to use and does a lot of nasty stuff behind the scenes for you, and provides a math library, a texture loader, and many other goodies.