OpenGL2: Very basic Swift3 example

As you guys probably notices, it was a while since last post here. I was quite busy with lot of projects, so did not had time for blogging.

If you ever wanted to do something with OpenGL, you can find lot of tutorials. But most of them are for ObjectiveC, there are some for Swift2 and almost nothing for Swift3. Well, there are some, but they seems to be very complex for beginners. What I want to show here, is very basic example of drawing red rectangle. Something everyone can start with. Later we will add textures and transformations, but lets start with this.

This tutorial and attached code was designed to work with XCode 8.3 and Swift 3.1 at the moment of writing this article.

1. Create new XCode project – Single Window, and call it whatever you want.

2. Create your new class “OpenGLView” as subclass of UIView

3. Now add some properties:

What they means? For holding OpenGL context (virtual space for operations) we set _context. Next, we need two buffers – color and depth, even if our app will display only flat rectangle, there is still Z-axis which we should take care of. For those we have _depthRenderBuffer and _colorRenderBuffer. Then we need pointer to draw our rectangle – that will be rectangleAttr. Finally vertexArray and vertexBuffer are just another pointers to drawing our shape. Be carefull – by pointer I mean just simple value (1, 0, and so on) which will inform OpenGL what we are doing, they are not pointers to memory.

4. Next important thing is:

This will inform system that our layer is OpenGL.

5. Now we need to do lot of setup, lets start with layer itself:

Here we are assigning CAEAGLLayer to property and set its opaque param.

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

6. Next, we need to setup context:

We are creating our context as instance of EAGLContext, and we’re setting OpenGL version to 2.0. Also we are informing rendering engine that our created context is current one.

7. Then we need our depth and frame buffers:

Basically we need to generate buffer (using glGenRenderbuffers/glGenFramebuffers), then bind and set some parameters.

8. Also we need render buffer itself:

9. Now something more interesting, we need to tell OpenGL where vertex data comes from, so first we need to declare our vertices:

Then we need to bind them to renderer:

What is happening here? Rectangle has only 4 vertices, but we have 6? This is required, because OpenGL renders everything as triangle, so if you want rectangle, you need to display 2 triangles. I will not describe screen coordinates here, it will be in another post. You need to trust me – they are good.
In our setupVBOs function we are generating vertex array pointer, vertex buffer, and assigning vertices data (which are floats) to array buffer.

10. To display anything on screen, we need display link created like this:

11. Now we are getting closer, next and very important step, is shaders compilation, and we have compileShader and compileShaders functions to achieve this. I won’t paste them here, because they are too long, just look at github. Function called compileShaders takes 2 small files, SimpleVertex.glsl and SimpleFragment.glsl which contains very basic shader definition, and compiles them into OpenGL engine. What are shaders? Basically they are small programs written in shader language, which looks like C. They are responsabile for generating each pixel color and location. And they are very fast. I will describe them in next article. All you need to know for now, is that vertex shader is going to render our vertices on screen, and fragment shader is going to make our rectangle red.

12. And finally we can draw:

So first we need to clear our screen and set fill color (dark blue here) with glClearColor. Then we are clearing buffers in glClear and enable depth testing in glEnable (remember we have Z axis even in 2d?). Now very important thing – viewport, which is just size of our screen. Then we need to enable our vertex array, set pointer and finally draw 2 triengles in glDrawArrays. Next we can disable array and finally display our image via presentRenderbuffer.

Ready to run project is located at https://github.com/blastar/BasicOpenGLRectangle. After running it, you should get something like this:

Leave a Reply