四角形を三角形に!〜iPhoneAppテンプレート OpenGL ES Application〜

レキサス技術ブログlexTechをご覧の皆様こんにちは!
入社一年目!コンテンツクリエイションチームの諸見里です。

記念すべき一回目のエントリーは、iPhoneアプリプロジェクトテンプレートの一つ、OpenGL ES Applicationについてです。
このテンプレートを知る事こそ、iPhoneでOpenGLなアプリをつくる第一歩ですね!

早速プロジェクトを作成し実行!!

虹色の四角い箱が上下してます。
ソースの方を見てみると。。。
どうやら図形を描画する際にはES2Renderer.mのrenderメソッドが呼ばれているっぽいですねぇ
(ベースSDK4.0でシミュレータで実行した場合)

static const GLfloat squareVertices[]で形
static const GLubyte squareColors[]で色を設定しているようです。

static const GLfloat squareVertices[] = {
-0.5f,  -0.33f,//頂点1の座標
0.5f,  -0.33f,//頂点2の座標
-0.5f,   0.33f,//頂点3の座標
0.5f,   0.33f,//頂点4の座標
};

座標をちょこっといじってみると

static const GLfloat squareVertices[] = {
-0.5f, -0.33f,
0.5f, -0.33f,
0.0f,  0.33f,
0.0f,  0.33f,
};

四角が三角に変わりました!

通常のアプリの場合座標を設定する際は
iPhoneの左上が(0.0)右下が(320.480)となるのですが、
OpenGLをつかうと左上が(-1.0,1.0)右下が(1.0,-1.0)になるんですね!!(変更する事も可能)

続いて、色の方も変えてみましょう。

    static const GLubyte squareColors[] = {
        255, 255,   0, 255,
        0,   255, 255, 255,
        0,     0,   0,   0,
        255,   0, 255, 255,
    };

左からRed,Green,Blue、Alphaに値をいれているようです。
例:255,0,0,255で赤

ということは、下記のように設定するとっ

    static const GLubyte squareColors[] = {
        255, 0, 255, 255,
        255, 0, 255, 255,
        255, 0, 255, 255,
        255, 0, 255, 255,
    };

紫色の三角形が出来上がりました!

これでとりあえず、テンプレートの図形をちょこっといじることができましたね!
けれどもこれは初歩中の初歩
次回、機会があったならはもっと中身までご紹介できたらなとおもいます。