This post continues where the “Setting Up Xcode OpenGL Template and Creating Game Loop Class” in the series left off

Before we begin to display our quad on the device we need to write a vertex shader and fragment shader. For this post we will begin by writing a simple vertex shader that accepts the vertex position in screen space and sends it out for display and a fragment shader that outputs a single color for all the pixels.

Lets start by creating a folder with the files for our shaders. First create a folder in the project called “Shaders” and inside this folder create two empty plain text files using TextEdit or any other text editor. Name one of the files “shader.frag” and the other “shader.vert“. We will write our shader code into these files later for now we will leave these empty. The .vert file is the vertex shader and the .frag shader is the fragment shader. Next we drag the “Shaders” folder into our xcode project. Click on Finish in the pop-up using the settings that are shown here:

now that we have the shader files in the project we can start writing the vertex shader. Open the “shader.vert” and add the following code to it:

//the incoming vertex' position
attribute vec4 position;
//the shader entry point is the main method
void main()
{
    gl_Position = position; //copy the position
}

This is the simplest vertex shader. We are basically taking the vertex position that is already in screen position and setting it out to the graphic card. The first line attribute vec4 position basically declares the vertex position that will be set from our program. The attribute keyword is used to define input to the vertex shader. The main() function is the entry point for the vertex shader. In our vertex shader we are just setting the input vertex shader to gl_Position which is OpenGL’s structure to hold the vertex positions that will be bound to the gpu for drawing.

Next we will start writing the fragment shader that will hold the code to how each pixel is drawn on the screen.

</pre>
//Simple pixel shader that simply outputs red color for every pixel.

void main()

{

gl_FragColor = vec4(1.0,0.0,0.0,1.0);

}
<pre>

Again main() is the entry point for our fragment shader. In this shader we are simply setting every pixel to red color by assigning it to the gl_FragColor which again is the OpenGL’s structure for holding the final pixel color output.

Building and running our code that this point will not produce a different output from the “Setting Up” post’s solution code. Next we will see how to compile our shader in xCode. You can get the project source code from git repository tag vOGL_2D.002