tag:blogger.com,1999:blog-15759971947055967242024-03-08T06:01:43.390-05:00Steve Zissou's Programming BlogOpenGL ES 2.0 and iOS 5 and GLKitGabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-1575997194705596724.post-52547612697020808272012-07-30T21:34:00.001-04:002012-08-01T00:07:09.371-04:00Zissou2d Part 3: The Sprite (Textures and Programs)<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/RLKiY.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="120" src="http://i.imgur.com/RLKiY.png" width="200" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
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.<br />
<br />
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 <a href="http://stevezissouprogramming.blogspot.ca/2012/04/basic-cube-part-9-texturing-and.html">texturing and compression</a>. 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.<br />
<br />
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).<br />
<br />
Also, from now on I'll have a <a href="https://github.com/ggohierroy/Zissou2d">Git of the project on GitHub</a>.<br />
<br />
<a name='more'></a><br />
First, let me show you a little diagram that summarizes what I just said:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/Wmxfx.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="273" src="http://i.imgur.com/Wmxfx.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Note: When I drew the diagram, I thought that I would have to implement a Texture2d object that wraps a texture image, just like in CC2d. It turns out that if you use GLKTextureLoader to load an image, a GLKTextureInfo instance is created and you can pass it around to objects that want to use that texture. That thing contains all the information you need to make calls to OpenGL.<br />
<br />
<h2>
<span style="font-size: large;">ShaderCache and GLProgram</span></h2>
<div class="separator" style="clear: both; text-align: left;">
The first thing I'm going to do is implement the ShaderCache and the Program because it's going to require a bit more code (even though I'll be copy-pasting some stuff I already wrote). I'm also going to leave the Texture and TextureCache for last because I will be using the GLKTextureLoader which will make our job quite easy.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's the code for the program (this is almost exactly like what I posted <a href="http://stevezissouprogramming.blogspot.ca/2012/03/basic-cube-part-4-program.html">here</a>. The only difference being that it's now a normal class with instance methods instead of a helper class with only class methods):</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<script src="https://gist.github.com/3213381.js?file=GLProgram.m">
</script></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
As you can see, it's quite simple. The class has an initializer which takes the .glsl file name for both the vertex and the fragment shader. That initializer then takes care of compiling each file, and linking them inside a newly created OpenGL program. It also logs any errors in the process. The <i>use</i> method is going to be used later, when we want to tell GL which program it should use.<br />
<br />
And now here's the code for the ProgramManager:<br />
<br />
<script src="https://gist.github.com/3213431.js?file=programManager.m">
</script><br />
<br />
Key points:<br />
<ul>
<li>You can access it from anywhere</li>
<li>The first time it is accessed through the sharedProgramManager, it will be instantiated and the default program will be created</li>
<li>There's only a single program in it right now but you could have an array of programs instead</li>
</ul>
<div>
<br />
How do we use this thing, and where?<br />
<br />
Well, when you initialize your sprite, you will use the following call to give that sprite the default program (The Sprite object needs to have a program property):</div>
<div>
<br /></div>
<div>
<div class="p1">
<span class="s1">self</span><span class="s2">.</span><span class="s3">program</span><span class="s2"> = [[</span><span class="s3">ProgramManager</span><span class="s2"> </span>sharedProgramManager<span class="s2">] </span>getDefaultProgram<span class="s2">];</span></div>
<div class="p1">
<br />
<h2>
<span style="font-size: large;">TextureCache</span></h2>
</div>
<div class="p1">
The TextureCache is fairly simple:<br />
<br />
<ul>
<li>You add images to it by passing a file name</li>
<li>The object checks if it already exists</li>
<li>If it doesn't exist, it will load the texture using GLKTextureLoader and add it to it's cache</li>
<li>The object return a GLKTextureInfo object containing all the information to use that texture</li>
</ul>
<div>
<br /></div>
<div>
The code:</div>
<br />
<br />
<script src="https://gist.github.com/3222236.js?file=TextureCache.m">
</script><br />
<br />
Key points:<br />
<br />
<ul>
<li>This one is also accessible from anywhere</li>
<li>GLKTextureLoader returns a GLKTextureInfo instance when a texture is created. This is what we will pass to the Sprite (In CC2d, there is a Texture2d object being passed around, just like in the diagram I made)</li>
<li>The keys in the dictionary are the file names, so you can't load two textures with the same name</li>
</ul>
<div>
<br />
<h2>
<span style="font-size: large;">Back to the Sprite</span></h2>
<br /></div>
<div>
With all of the work we've done, we have to change the interface of the Sprite object to this:</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/3222264.js?file=spriteinterface.h">
</script></div>
<div>
<br /></div>
<div>
The interface contains the three following elements:</div>
<div>
<ol>
<li>Texture property</li>
<li>Program property</li>
<li>Class method that returns a Sprite initialized with the given image</li>
</ol>
<div>
And now the implementation:</div>
</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/3222337.js?file=sprite.m">
</script></div>
<div>
<br /></div>
<div>
<br />
<h2>
<span style="font-size: large;">Summary</span></h2>
<br />
Here's a summary of what we've done:</div>
<div>
<ul>
<li>ProgramManager</li>
<ul>
<li>Responsible for creating and holding the default programs</li>
<li>Other objects that need to draw something can ask for one of those programs</li>
</ul>
<li>GLProgram</li>
<ul>
<li>Loads the .GLSL files, compiles and links the vertex and fragment shader</li>
</ul>
<li>TextureCache</li>
<ul>
<li>Contains information (GLKTextureInfo) about all the textures that have been loaded</li>
<li>Insures an image can only be loaded once</li>
</ul>
<li>Sprite</li>
<ul>
<li>Added a class method that initializes a Sprite with a given image</li>
<li>This image is added to the TextureCache which returns a GLKTextureInfo</li>
<li>Now has both a texture and a program to work with</li>
</ul>
</ul>
<div>
<h2>
<span style="font-size: large;"><br /></span></h2>
<h2>
<span style="font-size: large;">What now?</span></h2>
</div>
</div>
<div>
<br />
Well, we have to use that texture and the program to draw the texture on screen, but that will be the subject of another post!<br />
<br />
<a href="https://docs.google.com/open?id=0BxwWIcKWxMPXTURQdDlySTBiMjg">Link to the project so far</a></div>
</div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com1tag:blogger.com,1999:blog-1575997194705596724.post-59915694831892485932012-07-26T22:21:00.001-04:002012-07-31T21:36:40.359-04:00Zissou2d Part 2: The Director (Steve)<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/iXUJ9.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><img border="0" height="194" src="http://i.imgur.com/iXUJ9.jpg" width="200" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
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.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
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.</div>
</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
So here's that diagram:</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/n0SyV.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://i.imgur.com/n0SyV.png" width="390" /></a></div>
<div style="text-align: left;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white;">(I put layer in parentheses because I'm not going to implement it at first. Even though layers can be really useful, a scene can still contain sprites directly, as if there was only one layer. Also, from this diagram, scenes contain layers and layers contain sprites, but there's really nothing stopping you from making a sprite that contains a scene, at least not in CC2d.)</span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: white;">If you read the Basic Cube series I wrote a couple of months back, I have a template I use for building OpenGL ES 2.0 applications almost from scratch. The project is close to being empty because it uses the GLKView/GLKViewController combo. All I have to do is create a drawing context and give it to the view and then it's pretty much ready to go to start drawing OpenGL stuff.</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
That template was the starting point for Zissou2d. That GLKViewController can act as the director since it has access to the view and also because it is that controller that decides what is being drawn (being the view's delegate). Now there's a couple of additional things I wanted to be able to do with my director Steve:</div>
</div>
<div style="text-align: justify;">
</div>
<ul>
<li style="text-align: left;">Access it from anywhere</li>
<li style="text-align: left;">Push scenes to be displayed with it</li>
<li style="text-align: left;">Start/Pause the animation</li>
</ul>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: left;">
Now, since this is a GLKViewController, you can already use the paused property and set it to true or false to pause or resume the animation, so we really have nothing to do here. To be able to access it from anywhere and push my scenes, I had to define my public interface like this:</div>
</div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<script src="https://gist.github.com/3185407.js?file=SteveInterface.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: white;">The sharedDirector method is implemented like</span></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/3185776.js?file=sharedDirectorImplementation.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
(This is just the top of the file, and there is more code below this that I didn't include from the template I mentioned before, but later in this article, there is the full implementation)</div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<i>awakeFromNib </i>is called only once after the class has been allocated and initialized from the storyboard, so it's a good place to initialize our sharedDirector. <span style="background-color: white;">As you can see though, we already need a scene to continue with the implementation of the Director, so we're going to go ahead and implement the Node, Scene and Sprite objects before coming back to this class.</span></div>
<div style="text-align: left;">
<span style="background-color: white;"><br /></span></div>
</div>
<h2 style="text-align: left;">
<span style="background-color: white; font-size: large;">The Node class (I called it Entity)</span></h2>
</div>
<div>
<div style="text-align: left;">
For this class, we're going to provide four things in the public interface:</div>
</div>
<div>
<ul>
<li style="text-align: left;">a <i>build</i> class method that returns an allocated and initialized node object. This is the same pattern as if you called [NSArray array]</li>
<li style="text-align: left;">a constructor</li>
<li style="text-align: left;">an <i>addChild</i> method to be able to add sprites to a scene for example</li>
<li style="text-align: left;">a <i>visit </i>method which I'll talk about in a bit</li>
</ul>
<div>
<div style="text-align: left;">
<br /></div>
</div>
</div>
<div>
<script src="https://gist.github.com/3185836.js?file=Entity.h">
</script></div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: left;">
Since the class is fairly simple (for now), I'm just going to provide the implementation and then talk about it:</div>
</div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<script src="https://gist.github.com/3185839.js?file=Entity.m">
</script></div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: left;">
Key points:</div>
<div style="text-align: left;">
<br /></div>
<ul>
<li style="text-align: left;">we have a mutable array containing the children</li>
<li style="text-align: left;"><i>draw</i> has nothing in it since a node is an "abtract" class</li>
<li style="text-align: left;">I added lazy initialization of the children array</li>
<li style="text-align: left;"><i>visit</i> first checks if a child has been added (if there's none it's nil) and then loops over each child, calling visit on them (recursive). At the bottom of the hierarchy (possibly a sprite), there are no more children, and that object draws itself. This basically means that we need to override the draw method for objects that actually have something to draw. For example, a sprite might contain a shape, or an image that needs to be drawn.</li>
</ul>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
</div>
<h2 style="text-align: left;">
<span style="font-size: large;">
The Scene class</span></h2>
<div style="text-align: justify;">
<div style="text-align: left;">
This class, just as in CC2d, is completely empty. Really. It's just a concept to make it easier for people to use it, but it's exactly the same as the Node class. So, for this one, you just need to create a class with nothing in it.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<h2 style="text-align: left;">
<span style="font-size: large;">
The Sprite class</span></h2>
<div style="text-align: justify;">
<div style="text-align: left;">
The Sprite class is going to be very simple for now, but it's going to get more complex as we start drawing actual shapes and images. All we need for our proof of concept though, is to "override" the <i>draw</i> method.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<script src="https://gist.github.com/3185897.js?file=spriteSimple.m">
</script></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<h2 style="text-align: left;">
<span style="font-size: large;">
Back to the Director</span></h2>
<div style="text-align: justify;">
<div style="text-align: left;">
Now that we have everything in place, we can implement the <i>pushScene</i> method and use the scene that's being pushed in the <i>drawInRect</i> method:</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<script src="https://gist.github.com/3185905.js?file=director.m">
</script></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
Key points:</div>
</div>
<div style="text-align: justify;">
<ul>
<li style="text-align: left;">In the main loop (<i>drawInRect</i>), if the nextScene is not nil, we set it as the current scene, and then reset nextScene to nil.</li>
<li style="text-align: left;">In CC2d, there is actually a stack of scenes and you can push multiple scenes on that stack.</li>
<li style="text-align: left;">Right after that, <i>visit </i>is called on the current scene.</li>
</ul>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<h2 style="text-align: left;">
<span style="font-size: large;">
Everything is in place. What now?</span></h2>
<div>
<div style="text-align: left;">
Well, now that we have every basic element, we need to create a scene and push it for the director to display it. How do we do that? By subclassing the Scene object. Here's an intro scene:</div>
</div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<script src="https://gist.github.com/3185920.js?file=IntroScene.m">
</script></div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: left;">
Alright, now where do we push that scene? Well, this can be done in multiple places, but I'm going to do it in the AppDelegate's <span style="background-color: white;"><i>didFinishLaunchingWithOptions </i>with the following call:</span></div>
</div>
<div>
<div style="text-align: left;">
<span style="background-color: white;"><br /></span></div>
</div>
<div>
<div class="p1">
<div style="text-align: left;">
<span class="s1">[[</span><span class="s2">Steve</span><span class="s1"> </span>sharedDirector<span class="s1">] </span>pushScene<span class="s1">:[</span><span class="s2">IntroScene</span><span class="s1"> </span>build<span class="s1">]];</span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1"><br /></span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1">And that's it! That's a pretty great game if you ask me...</span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1"><br /></span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1"><a href="https://docs.google.com/open?id=0BxwWIcKWxMPXVkxCTnVEMExxeU0">Full project</a></span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1"><br /></span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1">Next up, drawing real stuff</span></div>
<div style="text-align: left;">
<span class="s1"><br /></span></div>
<div style="text-align: left;">
<span class="s1">PS. I just want to reiterate that I'm not inventing anything here, all this stuff comes mostly from the devs that worked on Cocos2d.</span></div>
</div>
</div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com0tag:blogger.com,1999:blog-1575997194705596724.post-54302146331415019862012-07-24T19:39:00.001-04:002012-07-31T21:36:21.247-04:00Zissou2d Part 1: An overview<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/XrMr1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><img border="0" height="150" src="http://i.imgur.com/XrMr1.jpg" width="200" /></a></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
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.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
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.</div>
</div>
<a name='more'></a><div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
To animate something in any animation software, you first need a single image, or a collection of images. In Cocos2d, the object that loads these images (or textures) are called sprites. These sprites can load a <a href="http://en.wikipedia.org/wiki/Texture_atlas" style="background-color: white;">texture atlas</a> containing a collection of graphic objects to be animated<span style="background-color: white; text-align: justify;">. These sprites are responsible for drawing themselves because they have all the information to actually put something on the screen.
</span></div>
<div style="text-align: left;">
<span style="background-color: white; text-align: justify;"><br /></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
Just like in Flash, these sprites, or objects, can then be placed on a scene. Cocos2d also has scene objects. The scene is also responsible for drawing itself, but will actually ask for each sprite it contains to draw itself when needed.
</div>
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
Another important concept are layers. Flash, Cocos2d and Photoshop all have them. Layers are there so that you can group sprites together. One of the reasons you might want to do that is for ordering. You might want to have a layer which only contains background objects. This layer will be drawn first when the scene has to draw itself so that it doesn't hide anything important in the foreground.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
Last but not least is the object that controls the scenes. This object is responsible for showing the right scene at the right moment. In Cocos2d, this object is called the Director, which kind of makes sense. There is usually only one director when you're animating something, and that also makes a lot of sense.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Here's a nice little screenshot of the Adobe Flash UI to illustrate the analogy:</div>
<div style="text-align: left;">
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/WUMPk.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="306" src="http://i.imgur.com/WUMPk.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Adobe Flash</td></tr>
</tbody></table>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Now how does all this translate into code?</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Well, in CC, the CCDirector class has access to a view where everything (OpenGL stuff) is drawn. This class is a singleton and can be accessed from anywhere to push scenes to display.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
In our case, we want to use the GLKView and the GLKViewController. The GLKView is where everything is drawn. The GLKViewController which is attached to the view sets itself as the view's delegate, and you then have to define a <i>drawInRect</i> method where you write the code defining what should be drawn. What we can do is subclass the GLKViewController and make it our director. <span style="background-color: white;">Let's call that controller Steve for our API. If I make a little recap of what Steve can do:</span></div>
<ul>
<li style="text-align: left;">It can be accessed from anywhere in the code</li>
<li style="text-align: left;">We want it to be accessible to push scenes to be displayed</li>
<li style="text-align: left;">It holds the context and the view where we do the drawing</li>
<li style="text-align: left;">Once it has a scene to display, it asks that scene to draw itself (The scene will then go through each layer and ask the sprites to draw themselves)</li>
</ul>
<div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Now, there are other things the Director should do, but those other things already come with the GLKViewController:</div>
</div>
<div>
<ul>
<li style="text-align: left;">Setting the desired frame rate for the animation</li>
<li style="text-align: left;">Define an Update method where we can update our models, or sprites, on every frame (position, health, etc)</li>
<li style="text-align: left;">Pause/Start the animation</li>
<li style="text-align: left;">Provide a time since last update so that the animation doesn't depend on the processing speed</li>
</ul>
<div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
In the next post, I'll start coding our director (Steve) and I'll start talking about scenes, layers and sprites in more details.</div>
</div>
</div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com0tag:blogger.com,1999:blog-1575997194705596724.post-17210162341976323832012-07-23T19:09:00.001-04:002012-07-31T21:36:07.178-04:00Something different<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/9JqYn.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://i.imgur.com/9JqYn.jpg" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cocos2d logo</td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/iKcBm.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://i.imgur.com/iKcBm.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Zissou2d logo</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
It's been a couple of months since I've posted anything on this blog, but I've finally started doing something new! <span style="background-color: white;">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.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;">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! </span><span style="background-color: white;">I'm going to keep a log </span><span style="background-color: white;">right here, </span><span style="background-color: white;">as I progress with this new thing, which is my own 2d game API called Zissou2d!...</span></div>
<div style="text-align: left;">
<br /></div>
<a name='more'></a><div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="text-align: justify;">...Well, that's mostly a lie... The truth is that I wanted to learn about the inner workings of </span><a href="http://www.cocos2d-iphone.org/" style="text-align: justify;">Cocos2d</a><span style="text-align: justify;"> (An awesome open-source framework to build 2d games)</span><span style="text-align: justify;">, and in the process, I started rewriting (cloning?) it with the following changes:</span></div>
<ul>
<li style="text-align: left;">Use of iOS 5+'s ARC to get rid of the micro memory management</li>
<ul>
<li style="text-align: left;">Note that Cocos2d can be converted automatically (if that's what I wanted)</li>
</ul>
<li style="text-align: left;">Use of GLKit</li>
<ul>
<li style="text-align: left;">Math library</li>
<li style="text-align: left;">GLKView/GLKViewController</li>
<li style="text-align: left;">Possibly use GLKTextureLoader</li>
</ul>
<li style="text-align: left;">Use whatever new interesting goodies iOS 6 brings us</li>
</ul>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: left;">
Obviously, Cocos2d is complex and very complete. I'm not trying to build anything like it, but I want to cover the basics, and try to have something simple and functional while learning how CC2d works in details. <span style="background-color: white;">I think it's going to be a very fun experience and hopefully, you will learn from this as much as I do.</span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
On a side note: <a href="http://i.imgur.com/Ht4Qg.jpg">Lego Star Wars</a></div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com0tag:blogger.com,1999:blog-1575997194705596724.post-48632134354946108832012-04-13T16:46:00.000-04:002012-07-31T21:35:54.751-04:00Part 10 : Bump Mapping with CrazyBump<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/FFZ7D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://i.imgur.com/FFZ7D.png" width="200" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
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.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
As it turns out, <a href="http://www.crazybump.com/">CrazyBump</a> 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.</div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
As usual, here's a link to what I've done so far: <a href="https://docs.google.com/open?id=0BxwWIcKWxMPXdy1Db1JxdVIxYWs">Project</a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
I've taken the time to add a few more comments and fix some things here and there.</div>
</div>
<div style="text-align: left;">
<br /></div>
<a name='more'></a><div style="text-align: justify;">
<div style="text-align: left;">
First things first, you're going to want to install CrazyBump. When that's done, run the program, click open and select "Open photograph from file". Then, browse to wherever the texture we've been using since the beginning is, and open it. CrazyBump can't open PVR files, so you need to find the original PNG texture. After a few seconds, you're going to be presented with a choice between two shapes. </div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/3af7v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://i.imgur.com/3af7v.png" width="400" /></a></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
The dark regions represent bumps that are the deepest, so choose the right image, where the cracks are dark.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
After you make your choice, you'll be presented with a 3D preview of what the normal map can do. In the preview panel, you can change the shape to a cube, so you'll have a pretty good idea of what it will look like on our cube.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
In the main panel, there are a ton of sliders you can use to customize the normal map, and I encourage you to play around with them and watch the result in the preview window, because... well... it's super fun.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
When you're done fooling around, click save normals in the main window, and save the texture as SquareTexture_NRM.png, which will be the default name. When you open the normal map, it should look something like this:</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/XZL56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/XZL56.png" /></a></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
This, right there, is the information of the normal vectors, coded as RGB colors. What we're going to do is load this file with GLKTextureLoader, then we'll sample it in the fragment shader to do per fragment lighting calculations, instead of per vertex calculations like we did before.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
But first... I want you to compress this file exactly like we compressed the texture, because I won't load a 512x512 PNG file in my program. When that's done, add SquareTexture_NRM.pvr to the project.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
Now you need to load that file in the program. To do that, you'll need a new GLKTextureInfo property which you will add to your private interface:</div>
<div style="text-align: left;">
<br /></div>
<div class="p1">
<div style="text-align: left;">
@property<span class="s1"> (</span>nonatomic<span class="s1">, </span>strong<span class="s1">) </span><span class="s2">GLKTextureInfo</span><span class="s1"> *normalMap;</span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1"><br /></span></div>
</div>
<div class="p1">
<div style="text-align: left;">
Don't forget to synthesize your property...</div>
</div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<div style="text-align: left;">
You load the normal map exactly like a texture, this way:</div>
</div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<script src="https://gist.github.com/2395271.js?file=normalMapLoad.m">
</script></div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<div style="text-align: left;">
Now, when you do lighting calculations in your fragment shader, you're going to do them in the <b>tangent space</b>. That's because it's simply easier that way. In the tangent space, you have three vectors describing the origin: the normal (red), which we already have, the tangent (green) and the binormal (blue), which we don't have.</div>
</div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/OmAZ7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/OmAZ7.jpg" /></a></div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<div style="text-align: left;">
If you have two of them, you can calculate the third one since it's orthogonal to the other two. It's also possible to calculate the tangent using the surrounding vertices, and this is usually what I've seen being done. But, since I'm drawing a cube, and that the tangent values can be deducted easily, I'm just going to add them to the vertex data array. This means that I will have the tangent value for each vertex.</div>
</div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<script src="https://gist.github.com/2395345.js?file=vertexDataWithTangents.m">
</script></div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
</div>
<div class="p1">
<div style="text-align: left;">
If you want to read more about the tangent space, I suggest you follow this link:</div>
</div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<div style="text-align: left;">
<a href="http://www.gamasutra.com/view/feature/1515/messing_with_tangent_space.php">http://www.gamasutra.com/view/feature/1515/messing_with_tangent_space.php</a></div>
</div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<div style="text-align: left;">
Since I've added more data, I'm going to change the stride again and add a new attribute pointer, as well as update the other attribute pointers to reflect the change of stride. This will all be done in the <b>ViewDidLoad</b> method.</div>
</div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<script src="https://gist.github.com/2395382.js?file=viewDidLoadWithTangents.m">
</script></div>
<div class="p1">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1">
<div style="text-align: left;">
I've also modified the draw loop just a bit, since we have two textures, we're going to have to use two channels to sample them. In the <b>DrawInRect</b> method:</div>
</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2395438.js?file=drawingWithTangents.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Now, onto the shader code, starting with the vertex shader:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2395450.js?file=vertexShaderWithTangents.c">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
What's new:</div>
<ul>
<li style="text-align: left;">(attribute l. 9) The tangent: VertexTangent0</li>
<li style="text-align: left;">(varying l. 11) Position in tangent space: PositionTS (which we will also use as a temp var)</li>
<li style="text-align: left;">(varying l. 12) Light direction in tangent space: LightDirectionTS</li>
<li style="text-align: left;">No more LightColor: lighting will be calculated in the fragment shader using the normal map</li>
</ul>
<div>
<div style="text-align: left;">
And now the fragment shader:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2395591.js?file=fragmentShaderWithTangents.c">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
What's new:</div>
<div style="text-align: left;">
<br /></div>
<ul>
<li style="text-align: left;">BumpSampler to sample the normal map</li>
<li style="text-align: left;">The three varying variables passed from the vertex shader</li>
</ul>
<div>
<div style="text-align: left;">
And here's the result:</div>
</div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/VfPQC.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/VfPQC.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's the final project with bump mapping: <a href="https://docs.google.com/open?id=0BxwWIcKWxMPXZVd5WFgwYTFBbEk">Project</a></div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
</div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com2tag:blogger.com,1999:blog-1575997194705596724.post-9380010204817728632012-04-04T20:30:00.003-04:002012-07-31T21:35:16.332-04:00Part 9: Texturing and Compression<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/X4pXh.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/X4pXh.png" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
For this post, I'm going to show you how to use <a href="http://developer.apple.com/library/ios/#documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/TextureTool/TextureTool.html#//apple_ref/doc/uid/TP40008793-CH108-SW1">texturetool</a>, which comes bundled with the iOS SDK. This tool is used to compress textures so that they take less space in memory using the <span style="background-color: white; font-family: 'Lucida Grande', Geneva, Helvetica, Arial, sans-serif; font-size: 13px;">PVR texture compression format</span>. 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.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
Also, this tool allows you to generate <a href="http://en.wikipedia.org/wiki/Mipmap">mipmaps</a> offline, and <a href="http://developer.apple.com/library/ios/#documentation/GLkit/Reference/GLKTextureLoader_ClassRef/Reference/Reference.html">GLKTextureLoader</a> 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.</div>
<div style="text-align: left;">
<br /></div>
</div>
<a name='more'></a><div style="text-align: justify;">
<div style="text-align: left;">
The texture I'll be using is this one:</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://i.imgur.com/IFbqE.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://i.imgur.com/IFbqE.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Square Texture. Original size 512 x 512.</td></tr>
</tbody></table>
<div style="text-align: justify;">
<div style="text-align: center;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
I found it somewhere on the web some time ago, and I don't know who the author is. I will mention you if someone can find the source.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
If you don't want to give yourself any trouble, it would be very important for the image to have a size that is a power of 2 (PoT). This image is a PNG file with a size of 512 = 2^9. It's a pretty big image (434 KB), but with the compression, it'll shrink down a lot.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
To use texturetool, open your terminal. By default, you should be located in your Home Folder when you open it. From this location, the texturetool executable should be at the same path for everyone. You will need the path to the texture image, and you will also need to provide the path of the output compressed image, which can be the same as the input path. This is the bash command I use to generate the compressed PVR texture:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2306971.js?file=bashCommand.c">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
You can read the short and sweet <a href="http://developer.apple.com/library/ios/#documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/TextureTool/TextureTool.html#//apple_ref/doc/uid/TP40008793-CH108-SW1">texturetool</a> reference for more information, but basically -m generates the mipmaps, -e compresses the texture in the given format. It's extremely simple and easy to use, and you can even create bash scripts to compress multiple textures in one call.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The resulting file has a size of 88 KB, so you reduced it by a factor of almost 5, and you also have all the mipmaps in there! Now all you need to do is import the resulting PVR file to your project.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
First, you'll need to first add a property called <b>texture</b> of type <b>GLKTextureInfo</b>. And here's the code to load the texture in memory, which you can append to the ViewDidLoad method:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2307089.js?file=textureLoader.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
As a side note, the texture will be flipped upside down. There are many ways to draw the texture in its original orientation, for example you could flip the texture coordinates on the y axis, but since this is a square, I'm just going to forget about it and draw the texture upside down.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Here's the vertex array with the added texture coordinates (we use normalized values for texture coordinates):</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2307124.js?file=vertexDataWithUVs.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Next, you need to change your attributes and the stride, and add an attribute to send the texture coordinates to your fragment shader. In the ViewDidLoad method, locate where you manipulate the attributes and change the code to the following:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2307169.js?file=attributesWithTexCoords.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
In the DrawInRect method, you also need to add this before the call do glDrawElements to bind the texture before drawing:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2307190.js?file=drawingWithTexture.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Your shaders now need to use those attributes. Here's the code for the shaders:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2307236.js?file=shadersWithTextures.c">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The vertex shader now takes the coordinates and and dumps them in a varying variable. Those coordinates will then be interpolated and we can use them in the fragment shader. In the fragment shader, we use a new type of variable which is a sampler. With the texture2D call, we sample the texture at the coordinates give by the varying FragmentTexCoord0.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
And boom!</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/0A8Yj.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/0A8Yj.png" /></a></div>
<div style="text-align: left;">
<br /></div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com5tag:blogger.com,1999:blog-1575997194705596724.post-13022065008287463722012-03-30T17:34:00.007-04:002012-07-31T21:34:49.189-04:00Part 8: Touch Events and Movement<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/ZnDTn.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/ZnDTn.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: 100%;">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!</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;"><br /></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">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:</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a href="https://docs.google.com/open?id=0BxwWIcKWxMPXOS1TZkFMR0JSRWFJUUgxQ0pyRl9TUQ">https://docs.google.com/open?id=0BxwWIcKWxMPXOS1TZkFMR0JSRWFJUUgxQ0pyRl9TUQ</a></div>
<div style="text-align: left;">
<br /></div>
<a name='more'></a><div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">In the ViewDidLoad method, you need to add the gesture recognizer and set its parameters. Then, you need to set up the callback, or selector, so that you can decide what to do when the event actually happens.</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2255489.js?file=eventsAndMovements.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
If you want your cube to be rotating when the application starts, just set _autorotate = YES and _cursor = 0.1 in the ViewDidLoad method, and there you go!</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com0tag:blogger.com,1999:blog-1575997194705596724.post-33775490302597323062012-03-29T22:35:00.009-04:002012-07-31T21:34:36.601-04:00Part 7: Lighting<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/COqb6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/COqb6.png" /></a></div>
<div style="text-align: left;">
<span style="font-size: 100%;"><br /></span></div>
<div style="text-align: left;">
<span style="font-size: 100%;">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.</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;"><br /></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">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.</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a href="https://docs.google.com/open?id=0BxwWIcKWxMPXUE1BU2FDandRZzZwaGYxdFA4OTRqQQ">https://docs.google.com/open?id=0BxwWIcKWxMPXUE1BU2FDandRZzZwaGYxdFA4OTRqQQ</a></div>
<div style="text-align: left;">
<br /></div>
<a name='more'></a><div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">First things first, let's change our CubeVertexData array to incorporate the vertex normals. It would be possible to calculate the normals using the vertex position and a cross product, but we'll keep it simple and just add the data in our array.</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2254750.js?file=CubeVertexDataWithNormals.m">
</script><br />
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">We must change the stride since both positions and normals are packed in a single array now. You also need to tell GL where the normals are so that it can pass them to the shader as an attribute.</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2254836.js?file=VertexNormal.m">
</script><br />
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">Since the light must be calculated in eye coordinates, we'll have to split the ModelView and Projection transform matrices. In the shader, we'll transform the positions and the normals to be in eye coordinates, we'll then calculate light, and finally apply the projection matrix.</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;"><br /></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">To transform the normals to eye coordinates, we'll need the Normal Transformation matrix as a uniform, which is calculated using the ModelView transformation matrix. We'll also pass the Light Position as a uniform, that way we can move the light every time we draw if we want to. This is what the uniform loop now looks like:</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2254917.js?file=drawLoopWithNormals.m">
</script><br />
<div style="text-align: left;">
Finally, here are the modified shaders for basic lighting of our object:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2255284.js?file=basicLightShaders.c">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: center;">
<div style="text-align: center;">
<a href="http://imgur.com/kjOJA" style="font-size: 100%;"><img alt="" src="http://i.imgur.com/kjOJA.png" title="Hosted by imgur.com" /></a></div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com3tag:blogger.com,1999:blog-1575997194705596724.post-77913785837976489032012-03-28T22:23:00.006-04:002012-07-31T21:34:24.079-04:00Part 6 : Drawing!<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/KDVQR.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="166" src="http://i.imgur.com/KDVQR.png" width="200" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: 100%;">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.</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<a name='more'></a><div style="text-align: left;">
And the code:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2232675.js?file=drawInRect.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">You might think that looping through our uniformArray is not very efficient, but when you have 10 uniforms to manage, this will make everything a lot easier.</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
One last thing! Cleanup:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2232723.js?file=cleanup.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: center;">
<div style="text-align: center;">
<a href="http://imgur.com/2AMiI" style="font-size: 100%;"><img alt="" src="http://i.imgur.com/2AMiI.png" title="Hosted by imgur.com" /></a></div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com0tag:blogger.com,1999:blog-1575997194705596724.post-11321506950966368592012-03-28T21:47:00.010-04:002012-07-31T21:33:57.558-04:00Part 5: VBOs and VAOs and more<div style="text-align: left;">
<a href="http://i.imgur.com/VhgVQ.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/VhgVQ.png" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
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.
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
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.
</div>
<a name='more'></a><div style="text-align: left;">
First, add these 3 variables in your private interface:</div>
<div>
<div class="p1">
<div style="text-align: left;">
<span class="s1">GLuint</span> _verticesVBO;</div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1" style="font-size: 100%;">GLuint</span><span style="font-size: 100%;"> _indicesVBO;</span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1" style="font-size: 100%;">GLuint</span><span style="font-size: 100%;"> _VAO;</span></div>
</div>
</div>
<div style="text-align: left;">
Here's the code to create the VBOs and VAOs:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2232422.js?file=vbao.m">
</script><br />
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">Now, there's one last thing you can do in the ViewDidLoad method, which is set up the Projection transformation matrix, and the ModelView transformation matrix's initial state (if you want anything to move, you'll have to modify for sure). This will be your first time using GLKit (Yay!). To do that, first add these two variables in your private interface:</span></div>
</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2232548.js?file=modelViewProjection.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b><u>Errata:</u></b></div>
<div style="text-align: justify;">
<div style="text-align: left;">
As noted by <i>Youpitou</i>, GLKMatrix4MakePerspective takes the fovy in radians, and I used 45 degrees instead. If you want to get pi/4, then you should use GLKMathDegreesToRadians(45.0f) instead.</div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
With the ModelView matrix, I position the object relative to the viewer. We call it the eye coordinate space. The Projection matrix will distort the objects to make them appear smaller as they are further away from the viewer (to imitate reality).</div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com4tag:blogger.com,1999:blog-1575997194705596724.post-87959050799836831882012-03-27T22:26:00.010-04:002013-03-26T11:55:17.145-04:00Part 4: The Program<div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/lnvmT.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="http://i.imgur.com/lnvmT.png" width="200" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
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.</div>
<div style="text-align: left;">
<br /></div>
<a name='more'></a><div style="text-align: justify;">
</div>
<div style="text-align: -webkit-auto;">
<div style="text-align: justify;">
</div>
<div style="text-align: -webkit-auto;">
<div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 12px;">You will need 2 new variables and a struct for this part. One of the variables will be used to hold the program handle, which you will use to make subsequent calls to OpenGL that need it. The other variable, an array, will hold the information about your uniforms, their name and location.</span></div>
</div>
</div>
<div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 12px;">Every time you draw, you will probably want to give your shaders a different ModelView transformation matrix, to make your object move for example. For that, you need its name and location, and this should only be queried once. Here is the struct and the two variables you need to add (Add them to your private interface):</span></div>
</div>
</div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/ggohierroy/2232211.js"></script>
<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Here's the code for compiling the shaders:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2222993.js?file=compileShader.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
And here's the code for creating the program and linking the compiled shaders:</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2223035.js?file=createProgram.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
And finally, here's a piece of code to query the uniforms information</div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2232260.js?file=getUniforms.m">
</script><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Now you can add these two lines of code where you left off in the ViewDidLoad method</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
[self createProgram];</div>
<div style="text-align: left;">
[self getUniforms];</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
This is all for the program part, build and run the application. Nothing should have changed, but you shouldn't be getting any errors. You also have a fully operational program, as well as all the information you need to set the uniforms inside the shader every time you want to draw.</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com2tag:blogger.com,1999:blog-1575997194705596724.post-58908033614662514822012-03-27T20:09:00.021-04:002013-02-07T14:01:13.327-05:00Part 3: Vertex Data and Shader Source<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/vInT3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="http://i.imgur.com/vInT3.jpg" width="320" /></a></div>
<div class="p1" style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div class="p1" style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
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.</div>
</div>
<div style="text-align: left;">
<br /></div>
<a name='more'></a><div style="text-align: left;">
<span style="font-family: Georgia, serif; font-size: 100%; text-align: justify;">Alright, if we want to draw a cube, let's start by adding our cube data at the top of our file, as a global variable.</span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/ggohierroy/2221887.js"></script>
<br />
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Georgia, serif; font-size: 100%;">OpenGL ES can only draw triangles, so each face is made of 4 vertices that make 2 triangles. I am reusing vertices on each face, but not between face. This is simply because I'm thinking ahead, and taking into account that I'm drawing a cube. When I do lighting calculations, I will need each face to be </span><span style="font-family: Georgia, serif;">independent</span><span style="font-family: Georgia, serif;"> to get sharp edges. More details in this thread:</span></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<a href="http://stackoverflow.com/questions/5046579/vertex-normals-for-a-cube">http://stackoverflow.com/questions/5046579/vertex-normals-for-a-cube</a></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
Since I'm reusing vertices for the 2 triangles that make 1 face, I will need to use an array of indices that describe these triangles, also as a global variable.</div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/2222647.js?file=indices.m">
</script><br />
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">The order of the indices is important for face culling, as described here:</span></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: left;">
<a href="http://www.arcsynthesis.org/gltut/Positioning/Tutorial%2004.html">http://www.arcsynthesis.org/gltut/Positioning/Tutorial%2004.html</a></div>
</div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
The next step is to navigate to the <b>ViewDidLoad</b> method and add the following code after the initialization of the view. Ultimately, this piece of code could be added to the template, since you will often use these settings, and it also helps you remember to set them/change them when you need to.</div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/ggohierroy/2222812.js"></script><br />
<div style="text-align: left;">
When that's done, you can move on to the shader part. First, you need the to create 2 files and add them to your project. I call them "fragment.glsl" and "vertex.glsl". At the top of the Controller's .m file, add</div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div class="p1">
<div style="text-align: left;">
#define VERTEX_SHADER @<span class="s1">"vertex"</span></div>
</div>
<div class="p1">
<div style="text-align: left;">
#define FRAGMENT_SHADER @<span class="s1">"fragment"</span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1"><br /></span></div>
</div>
<div class="p1">
<div style="text-align: left;">
<span class="s1">I will keep the code of the shaders very simple at the beginning, so here it is:</span></div>
</div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<script src="https://gist.github.com/ggohierroy/2222884.js"></script><br />
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">The vertex shader takes the product of the ModelView and Projection matrices (uniform variable since it doesn't change during the complete drawing of our cube). gl_Position, which is a built-in variable, is the result of that matrix multiplied by the position of each vertex (attribute variable since it represents vertex data).</span></div>
</div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
Internally, the resulting positions will be used to create a primitive assembly, and the rasterisation stage will create the fragments (pixels).</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
In the fragment shader, we just tell it to draw each of those fragments (pixels) red. This can't be more simple.</div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com3tag:blogger.com,1999:blog-1575997194705596724.post-55341145028221137792012-03-27T19:03:00.008-04:002012-07-31T21:32:41.785-04:00Part 2: Timeout or a post about posts<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/poeeP.jpg?1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="http://i.imgur.com/poeeP.jpg?1" width="200" /></a></div>
<div style="text-align: left;">
<span style="font-size: 100%;"><br /></span></div>
<div style="text-align: left;">
<span style="font-size: 100%;">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.</span></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<a name='more'></a><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Georgia, serif; font-size: 16px;">When you start drawing with OpenGL, you will come across 3 different types of transformations that are important to understand.</span></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<ol>
<li style="text-align: left;">ModelView</li>
<li style="text-align: left;">Projection</li>
<li style="text-align: left;">ViewPort</li>
</ol>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
Since I really wouldn't be able to explain it better myself, I suggest that you follow this link if you wish to learn more about these transformations:</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: left;">
<span style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;"><a href="http://www.songho.ca/opengl/gl_transform.html">http://www.songho.ca/opengl/gl_transform.html</a></span></div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
This blog is also very nice and has a bunch of different tutorials for iOS. The code to compile and link the shaders was heavily inspired by what you can find if you follow this link:</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<a href="http://www.raywenderlich.com/3664/opengl-es-2-0-for-iphone-tutorial">http://www.raywenderlich.com/3664/opengl-es-2-0-for-iphone-tutorial</a></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: justify;">
<div style="text-align: left;">
This blog has 3 parts and covers many things in great details that I didn't see elsewhere, like face culling for example. The only downside is that it's not fun to read since the author's english is worse than mine.</div>
</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: left;">
<a href="http://db-in.com/blog/2011/02/all-about-opengl-es-2-x-part-23/">http://db-in.com/blog/2011/02/all-about-opengl-es-2-x-part-23/</a></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
This blog was also somewhat useful for me, as it explains how to build a GL ES application from the ground up:</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<a href="http://iphonedevelopment.blogspot.ca/2009/05/opengl-es-from-ground-up-table-of.html">http://iphonedevelopment.blogspot.ca/2009/05/opengl-es-from-ground-up-table-of.html</a></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
I remember stumbling on this blog, but I think it was mostly to check some shader documentation, like the list of built-in variables. It might be useful to you.</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<a href="http://nehe.gamedev.net/">http://nehe.gamedev.net/</a></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: justify;">
<div style="text-align: left;">
Books:</div>
</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<ul>
<li style="text-align: left;">OpenGL ES 2.0 Programming Guide : The bible. There isn't much about game programming though.</li>
<li style="text-align: left;">Game and Graphics Programming for iOS and Android with OpenGL ES 2.0 : Great for tips and tricks about state of the art game programming. I really hated the fact that he skips over really important stuff to get you started quickly. You end up not understanding much if you don't dig a lot yourself.</li>
</ul>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<div style="text-align: justify;">
<div style="text-align: left;">
iTunes U:</div>
</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<ul>
<li style="text-align: left;">iPad and iPhone App Development - Paul Hegarty : Amazing class to learn about Objective-C and also the new features of iOS 5 like iCloud and Game Center.</li>
</ul>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com0tag:blogger.com,1999:blog-1575997194705596724.post-19274569560878794212012-03-26T21:21:00.016-04:002012-07-31T21:32:25.055-04:00Part 1: The template<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: left;">
<a href="http://i.imgur.com/4TO7Y.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/4TO7Y.png" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
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.</div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<a name='more'></a><div style="text-align: left;">
<span style="font-size: 100%;">Start by creating a Single View Application. This is mostly because the OpenGL Game template comes with a bunch of crap that we don't need (like code to make two cubes float around...), but that the Single View Application template comes with a storyboard and some basic View lifecycle methods that are somewhat useful.</span></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: center;">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imgur.com/7NMNM" style="font-size: 100%; margin-left: 1em; margin-right: 1em;"><img alt="" height="293" src="http://i.imgur.com/7NMNM.png" title="Hosted by imgur.com" width="400" /></a></div>
</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
We're gonna do everything in portrait mode, so change the Supported Device Orientations.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: center;">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imgur.com/cDsHs" style="font-size: 100%; margin-left: 1em; margin-right: 1em;"><img alt="" src="http://i.imgur.com/cDsHs.png" title="Hosted by imgur.com" /></a></div>
</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
You can also make the application full screen by adding the following key in the Info panel, which is usually what I do.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: center;">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imgur.com/z4TNf" style="font-size: 100%; margin-left: 1em; margin-right: 1em;"><img alt="" src="http://i.imgur.com/z4TNf.png" title="Hosted by imgur.com" /></a></div>
</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
Don't forget to add the two most important frameworks for these tutorials: OpenglES and GLKIT.</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imgur.com/uhIfR" style="margin-left: 1em; margin-right: 1em;"><img alt="" height="259" src="http://i.imgur.com/uhIfR.png" title="Hosted by imgur.com" width="640" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
When it's done, go in the Storyboard, delete the current Controller/View and drop a GLKit View Controller instead. Open the identity inspector and change the class of the controller to be the one in your application.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: center;">
<div style="text-align: justify;">
<div style="text-align: center;">
<div style="text-align: center;">
<a href="http://imgur.com/9X8eF" style="font-size: 100%;"><img alt="" src="http://i.imgur.com/9X8eF.png" title="Hosted by imgur.com" /></a></div>
</div>
</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
When this is done, go in your Controller's .h file, import GLKit, and change its parent so that it inherits GLKViewController instead.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<script src="https://gist.github.com/2211817.js?file=something.h">
</script><br />
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
This is what I like my Controller's .m file to look like when I start from scratch. It's clean and you can easily navigate through the code.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<script src="https://gist.github.com/2211946.js?file=template.m">
</script><br />
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-variant: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<span style="font-style: normal; font-weight: normal;">You have the </span><b><i>viewDidLoad</i></b><span style="font-style: normal; font-weight: normal;"> method which creates creates an EAGLContext for OpenGL ES 2.0, and also sets it as the current context. Then you give that context to the view to initialize it. When that's done, the view will will start calling its delegate's (the controller) </span><i><b>drawInRect</b></i> so that you can update the display with whatever you want to draw.</div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-variant: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<i><b>update</b></i><span style="font-style: normal; font-weight: normal;"> will also be called so that you can update your (game's) model/objects. This is where you will change an object's position for instance, and the next time drawInRect is called, you will use that position to do the actual drawing of the object. So there you go! When you build and run the application, this is what you should get:</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: center;">
<div style="text-align: justify;">
<div style="text-align: center;">
<div style="text-align: center;">
<a href="http://imgur.com/DRF0K" style="font-size: 100%;"><img alt="" src="http://i.imgur.com/DRF0K.png" title="Hosted by imgur.com" /></a></div>
</div>
</div>
</div>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com0tag:blogger.com,1999:blog-1575997194705596724.post-45417094206993293062012-03-26T21:02:00.009-04:002012-07-31T21:30:38.472-04:00Introduction<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/xK4s6.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><img border="0" height="108" src="http://i.imgur.com/xK4s6.jpg" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
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.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: 100%;">In the past few months, I've read books about openGL ES, iOS 5 programming, and I also watched the videos of <a href="http://www.stanford.edu/class/cs193p/cgi-bin/drupal/">Paul Hegarty's iPhone application development class on iTunes</a>. The problem is the following: There's just not many tutorials out there that blend together openGL ES 2.0, iOS, and GLKit.</span></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;"><br /></span></div>
</div>
<div style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-align: justify;">
<div style="text-align: left;">
<span style="font-size: 100%;">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.</span></div>
<div style="text-align: left;">
<span style="font-size: 100%;"><br /></span></div>
</div>
<a name='more'></a><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Georgia, serif;">Even if I do love GLKit and use it as much as I can, there's one thing I try to avoid using, and that would be the use of GLKBaseEffect</span><span style="font-family: Georgia, serif; font-size: 100%;">. GLKBaseEffect is there to mimic what you could do with OpenGL ES 1.x's fixed pipeline, and when you use it exclusively, you don't even have to use shaders </span><span style="font-family: Georgia, serif; font-size: 100%;">explicitly in your code. Shaders are so powerful that you should learn how to use them first when you pick up OpenGL ES 2.0, and that's why I will not even talk about it. If you want to do anything more or less advanced in the future, then you will certainly not want to use GLKBaseEffect.</span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<br /></div>
</div>
<span style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;"></span><br />
<div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;"><span style="font-size: 100%;">So here's what I plan to do:</span></span></div>
</div>
<ol style="font-family: Georgia, serif; font-size: 100%; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
<li style="text-align: left;">Use GLKit for texture loading, math, and the view/controller objects</li>
<li style="text-align: left;">Use Objective-C as much as I can, even though you will learn to love C with OpenGL</li>
<li style="text-align: left;">Choose a simple shape to draw (like a cube!)</li>
<li style="text-align: left;">Show some interesting topics like Bump mapping and Scene composition</li>
</ol>Gabriel Gohier-Royhttp://www.blogger.com/profile/11075951891750631222noreply@blogger.com3