Activate OpenGL and GLSL on Xcode

In this page, I will demonstrate how to activate OpenGL and GLSL in Xcode.
I use Intel Iris pro graphics and OpenGL 4.1 check your OpenGL version in Xcode (version 7.2).

Type this commend in Mac terminal to know your version of Xcode.

/usr/bin/xcodebuild -version

Step 1: Download framworks and library for OpenGL

Cmake: It is a cross-platform for managing a build process of software. Here we need it to build GLFW and glm.
GLEW: It is OpenGL Extension Wrangler Library
GLFW: It is a library that creates a window with OpenGL context. basically, another library GLUT also can create a window with OpenGL context. It depends on which one you perfer to do…
glm: It is a mathematics library for OpenGL and GLSL. I really like it a lot. It helps me handel with vertex buffer object and vertex array object. If you don’t know what vertex buffer object or vertex array object is. Don’t worry. This is a website, a very useful website that shows you how to use GLSL.
Download Cmake: Choose Mac OSX 10.6 or later cmake-3.8.0-rc4-Darwin-x86_64.dmg OR cmake-3.8.0-rc4-Darwin-x86_64.tar.gz
Download GLEW: Download it via github or zip.
Download GLFW: Choose Download GLFW 3.2.1.
Download Glm: Choose glm-0.9.8.4.zip.

Build `GLFW` with Cmake.

After we download GLFW,we use Cmake to generate project files or makefiles and compile it by makefiles to get the GLFW library.

First, let’s start to create a new folder on your desktop, and unzip the GLFW file. Cmake will generate files into thie new folder. For example, I create a new folder called glfw_build.
Second, go to the directory of GLFW and get the working directory of GLFW by pwd.
For example, after upzip theGLFW file, I get glfw-3.2.1 on my desktop.
```
  cd glfw-3.2.1
  pwd
```
/Users/Chiaoysbaby/desktop/glfw-3.2.1 is the working directory of GLFW.
Third, go(cd) to your new folder and type this in your terminal.
```
  cmake /~the working directory of glfw~/ -DBUILD_SHARED_LIBS=ON
```
It shows this in my terminal.
Fourth, check files:
Because Cmake generate projects file or makefiles in my glfw_build. After Cmake the file, we have a new file called Makefile:
Fifth, build GLFW framworks by makefile and go to the directory where you camke GLFW and type sudo make install in your terminal.
```
 sudo make install
```

Build `GLEW` libraries.

Unlike GLFW, we just need to make install it. Go to the directoy of glew-2.0.0 and type sudo make install in your mac terminal. Because I extracted glew-2.0.0.zip on my desktop, I go to the glew-2.0.0 by cd ~/desktop/glew-2.0.0 .

   cd ~/desktop/glew-2.0.0 
   sudo make install

After installing GLEW, it shows this information in terminal. We have the header files of GLEW which are in the /usr/local/include/GLand the libraries of GLFW which are in the /usr/local/lib/

screen shot 2017-04-05 at 4 11 01 am

Build `Glm` libraries.

Because Glm doesn’t have makefile, we need to generate its makefile by Cmake `

Create a new folder on your desktop amd unzip the Glm zip file. For example, I create a new folder called glm_build.
Go to the directory of GLEW and get the working directory of Glm by pwdLinux command.
Go(cd) to your new folder and type this in your mac terminal.
```
 cmake /~the working directory of glfw~/ -DBUILD_SHARED_LIBS=ON
```
After camke the folder, it shows this information in your terminal:
The Next step is to build libraries of Glm by a makefile. Go to the directory where you camke Glm and type sudo make install in your terminal.
```
sudo make install
```
After installing the Glm, we have many header files of Glm in /usr/local/include/glm.

Step 2: Check head files and libraries whether are in your environment or not.

Let’s check head files:
After installing GLFW,GLFW and glm, they build heads file into /usr/local/include. There are many methods to go to the directory. Here I use Shift+ command+ G keys to show Go to the folder. Open any folder, and press Shift+ command+ G keys together, it will show:

Tpye /usr/local/include in Go to the folder, we will go to the directory where has heead files.

If anything is correct, it has three folders in this directory, includes GL, GLFW and glm.
Check libraries:
After we successfully install GLFW and GLEW they have several libraries in /usr/local/lib .

Here I also use the same method to go to the folder, and check these several files in /usr/local/lib .
For GLFW, it builds libglfw.3.2.dylib, libglfw.3.gylib and libglfw.dylib.

For GLEW, it buildes libGLEW.2.0.dylib and libGLEW.dylib.

Step 3: Open a new Porject on Xcode.

In this step, we start to open a new OpenGL project and GLSL on Xcode. Xcode is an integrated development environment(IDE) for macOS. We will use Cocoa application on OSX to activate GLSL.

open a new project on Xcode, and choose Cocoa Application.
Type your product name. In the example, test1 is my prproductoject name. Although we don’t use Objective-C as programming language, we still kepp it and click Next button.
Choose a directory that you want to create thie project. In the example, I store my project on desktop.
After setting the directory, we will see:
Here we need to delete several files, includes AppDelegate.h(uder test1) , AppDelegate.m(uder test1) and main.m(under Supporting Files). In addition, we need to add new file called main.cpp as our main file in test1.

After I made change,it looks like this:
Chick test1, it shows this:
Chick build pheses and insert libraries in Link Binary With Libraries.
Click the + button to add ‘OpenGL.framework’ and ‘GLUT.framework’.
Click Add another.. button, and use Go to the folder this method to the directory /usr/local/lib.
Find libglfw.3.2.dylib and libGLEW.2.0.0.dylib in this directory, and add them.

Note: Id you don’t find libGLEW.2.0.0.dylib, try to find libGLEW.2.0.dylib and add this instead of libGLEW.2.0.0.dylib . libGLEW.2.0.dylib is the symbolic link to libGLEW.2.0.0.dylib .

Finally, we added two frameworks and two libraries in Link Binary With Libraries.
Next, we also need to add path of head files. Look for Search paths which is under Build Settings.
Add two paths /usr/local/include and /opt/local/include in Header Search Paths.
After adding path for header files, we also need to add path for libries. Let out system know where the head files and libries are.
Add two paths /usr/local/lib and /opt/local/lib in Library Search Paths.

Step 4: Edit your main.cpp on Xcode.

In main.cpp, add libraries here.
Note: the shader.h is from this website.
We put our shader.h, vertex shader, and fragment shader in Supporting files.
Just right click button mouse to add new Empty file, and nameed the file as shader.h or vertex shader, or fragment shader.
Note: name you vertex shader as XXX.vert and name your fragment shader as XXX.frag.
```
#include <GL/glew.h>
#include "sphere.h"

#include <glut/glut.h>
#include <iostream>

#include "Shader.h"
#include <vector>

#include <GLFW/glfw3.h>

#include "glm/glm.hpp"
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>
```
Finally, I have these several files in my project. The objects.h file is written for draw triangle.
In main.cpp file., Shader shader("basic.vert", "basic.frag") to generate vertex shader and fragment shader.
```
 Shader shader("basic.vert", "basic.frag");
 shader.Use();
  
```
shader.Use() is a function call in shader.h It means Installing a program object as part of current rendering state.
```
// Uses the current shader
  void Use()
  {
      glUseProgram(this->Program);
  }
```
In vertex and fragment shader, we have to declare our version of OepnGL by adding #version 410 core in the beginning of file. Here I use OpenGL 4.1, I type #version 410 core. Check your version in this Link.

This is my fragment shader. In new version of OpenGL, gl_fragcolor is deprecated. We output the color instead of gl_fragcolor.
```
#version 410 core

out vec4 color;
in vec4 vertexColor; // from vertex shader 

void main()
{
   color = vertexColor;

}
   
```

In vertex shader, gl_modelviewprojectionmatrix and gl_vertex are also deprecated. Here I use projection_matrix * view_matrix * model_matrix * vec4(vertexPosition_modelspace,1.0f) instead of gl_modelviewprojectionmatrix * gl_vertex.

#version 410 core
layout(location = 0) in vec3 vertexPosition_modelspace;
layout(location = 1) in vec3 colorful;
out vec4 vertexColor;
uniform mat4 MVP;

uniform mat4 projection_matrix;
uniform mat4 view_matrix;
uniform mat4 model_matrix;
void main()
{
   gl_Position = projection_matrix * view_matrix * model_matrix * vec4(vertexPosition_modelspace,1.0f);
   //    gl_Position =vec4(vertexPosition_modelspace,1.0f);
   vertexColor = vec4(1, 0, 0, 1.0);
   //  vertexColor = vec4(colorful,1.0f);
}

Step 5: Performance.

triangle

If you have nay questions, please let me know. I am glad to help you! :blush:

OpenG-GLSL-Xcode