MacユーザーのためのOpenGL始めかた

#MacユーザーのためのOpenGLはじめかた
一見とっつきにくそうなイメージがあるOpenGL
始まりでつまずきたくないMacユーザーのために、OpenGLの簡単なはじめかたをまとめました
ぜひご参考に！

-目次
　-1.XcodeをつかってOpenGL
　-2.GCCをつかってOpenGL

#１.XcodeをつかってOpenGL
①まず、Xcodeを起動し、「Create Xcode Project」を選択する

②次に下画面のように
OSX > Application > Command Line Tool
を選択

<img width="1280" alt="スクリーンショット 2016-06-23 1.11.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/83460/66377e3d-1c97-abd9-87bf-f698cb5ae118.png">

③ProductNameを名付けて、Nextを選択する

④Sample > Build Phases > Link Binary With Libraries(0 times) > +マークを選択する

<img width="1280" alt="スクリーンショット 2016-06-23 1.24.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/83460/3b617232-f176-56d4-2a30-425c230f1728.png">


⑤「GL」と検索し、GLUT.frameworkとOpenGL.frameworkを選択し、Addを押す

<img width="1280" alt="スクリーンショット 2016-06-23 1.25.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/83460/7f68a8c1-aa62-bf81-61d5-0be2ce78c925.png">


以上でXcodeの設定はおしまいです


⑦あとはこちらのサンプルコードをmain.cppに記述してみてください

 ```main.cpp
//
//  main.cpp
//  0414Test02
//
//  Created by r.fujiki on 2016/04/14.
//  Copyright © 2016年 藤木良祐. All rights reserved.
//

#include <iostream>
#include <OpenGL/OpenGL.h>
#include <GLUT/GLUT.h>

const GLfloat lightPosition1[4] = {0.0f,3.0f, 5.0f, 1.0f};
const GLfloat green[] = { 0.0, 1.0, 0.0, 1.0 };
const GLfloat lightPosition2[4] = {5.0f,3.0f, 0.0f, 1.0f};
const GLfloat red[] = { 1.0, 0.0, 0.0, 1.0 };

const GLfloat teapotAmbient[4] = {0.3f,0.5f, 0.0f, 1.0f};
const GLfloat teapotDiffuse[4] = {1.0f,1.0f, 0.3f, 1.0f};
const GLfloat teapotSpecular[4] = {1.0f,1.0f, 1.0f, 1.0f};
const GLfloat teapotShininess[4] = {20.0f};

void setup(void) {
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    glEnable(GL_DEPTH_TEST);
    glEnable(GL_LIGHTING);
    glEnable(GL_LIGHT0);
    glEnable(GL_LIGHT1);
    
    glLightfv(GL_LIGHT0, GL_POSITION, lightPosition1);
    glLightfv(GL_LIGHT0, GL_DIFFUSE, red);
    glLightfv(GL_LIGHT0, GL_SPECULAR, red);
    glLightfv(GL_LIGHT1, GL_POSITION, lightPosition2);
    glLightfv(GL_LIGHT1, GL_DIFFUSE, green);
    glLightfv(GL_LIGHT1, GL_SPECULAR, green);
    glMaterialfv(GL_FRONT, GL_AMBIENT, teapotAmbient);
    glMaterialfv(GL_FRONT, GL_DIFFUSE, teapotDiffuse);
    glMaterialfv(GL_FRONT, GL_SPECULAR, teapotSpecular);
    glMaterialfv(GL_FRONT, GL_SHININESS, teapotShininess);
}

void draw(void) {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glutSolidTeapot(0.5);
    glFlush();
}


void resize(int width, int height) {
    glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    gluPerspective(45.0,
                   (double)width/height,
                   0.1,
                   100.0);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    gluLookAt(-0.5, 2.1, 2.0,
              0.0, 0.0, 0.0,
              0.0, 4.0, 0.0);
}
void display(void){
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    glutWireTeapot(0.5);
    glFlush();
}


int main(int argc, char * argv[]) {
    // insert code here...
    glutInit(&argc, argv);
    glutInitWindowSize(600,600);
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA | GLUT_DEPTH);
    glutCreateWindow("Wire_teapot");
    glutReshapeFunc(resize);
    glutDisplayFunc(draw);
    setup();
    glutMainLoop();
    return 0;
}
 ```


⑧Xcodeをrunしてみて次のように表示されたら完成です！
あとは、OpenGLについてまとめられているサイトを参考にいろいろなコードに挑戦してみてください！


<img width="603" alt="スクリーンショット 2016-06-23 1.30.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/83460/a1dbb2db-b1a6-0a96-f341-e46eeb215584.png">



#2.GCCをつかってOpenGL

①こちらを参考にまずは、自身のMacにGCCをインストールしてください
[Macにgccをインストールする](http://qiita.com/ShinichiOkayama/items/962e55ac7f8920a5f007)


②デスクトップ、もしくは書類にでも任意の場所にmain.cppファイルを作成し、先のサンプルコードをペーストする


③ターミナルを起動し、main.cppファイルの存在する階層に移動する

 ```ターミナル
cd Desktop
 ```

<img width="692" alt="スクリーンショット 2016-06-23 1.40.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/83460/00a1592f-e560-edaf-e8a3-b708cf636c04.png">

④main.cppをコンパイルする


 ```ターミナル
gcc -framework GLUT -framework OpenGL main.cpp
 ```

<img width="690" alt="スクリーンショット 2016-06-23 1.42.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/83460/455da67e-717c-a6a9-1de5-d28f0a08aa39.png">

⑤すると同じ階層にa.outという実行ファイルができるので、実行する


 ```ターミナル
./a.out
 ```

<img width="688" alt="スクリーンショット 2016-06-23 1.44.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/83460/460fc9d6-06e4-cefb-d4ee-59b7e5640b1a.png">


⑥すると、同じ実行結果になる

<img width="603" alt="スクリーンショット 2016-06-23 1.30.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/83460/6a6ff810-d342-1f44-f233-167468db6444.png">