OpenGLで図形を描画する
今回は、ようやくOpenGLを使って画面上に図形を描画してみたいと思います。図形と言っても今回は複雑な３Dモデルというわけではなく、点や線、三角形や四角形を描画していきます。この中でも特に、三角形は複雑な３Dモデル（ポリゴン）を構成する基本単位です。逆に言えば三角形さえ描けてしまえば、どんなに複雑なように見えるキャラクタも作れるわけです（実際には、もちろんMayaとかメタセコイアとかを使って作りますけどね・・・）
上に書いたウサギは、スタンフォードバニー(Stanford Bunny)といって、画像処理のレナさんと同じぐらい有名な人（？）です。まぁ、それはさておき、以下がOpenGLを使って画面上に点と線と三角形、四角形を描画するプログラムになります。
#include <GL/glfw.h> #include <cstdlib> const int g_windowWidth = 640; const int g_windowHeight = 480; void render() { // 点 static const GLfloat vtx1[] = { 90.0f, 250.0f }; glVertexPointer(2, GL_FLOAT, 0, vtx1); glPointSize(4.0f); glColor4f(1.0f, 1.0f, 1.0f, 1.0f); glMatrixMode(GL_MODELVIEW); glEnableClientState(GL_VERTEX_ARRAY); glDrawArrays(GL_POINTS, 0, 1); glDisableClientState(GL_VERTEX_ARRAY); // 線 static const GLfloat vtx2[] = { 180.0f, 200.0f, 180.0f, 300.0f, }; glVertexPointer(2, GL_FLOAT, 0, vtx2); glLineWidth(4.0f); glColor4f(1.0f, 1.0f, 1.0f, 1.0f); glEnableClientState(GL_VERTEX_ARRAY); glDrawArrays(GL_LINES, 0, 2); glDisableClientState(GL_VERTEX_ARRAY); // 三角 static const GLfloat vtx3[] = { 320.0f, 300.0f, 260.0f, 200.0f, 390.0f, 200.0f, }; glVertexPointer(2, GL_FLOAT, 0, vtx3); glColor4f(1.0f, 1.0f, 1.0f, 1.0f); glEnableClientState(GL_VERTEX_ARRAY); glDrawArrays(GL_TRIANGLES, 0, 3); glDisableClientState(GL_VERTEX_ARRAY); // 四角形 static const GLfloat vtx4[] = { 450.0f, 300.0f, 450.0f, 200.0f, 550.0f, 200.0f, 550.0f, 300.0f, }; glVertexPointer(2, GL_FLOAT, 0, vtx4); glColor4f(1.0f, 1.0f, 1.0f, 1.0f); glEnableClientState(GL_VERTEX_ARRAY); glDrawArrays(GL_QUADS, 0, 4); glDisableClientState(GL_VERTEX_ARRAY); } int main() { if( !glfwInit() ){ return -1; } if( !glfwOpenWindow(g_windowWidth, g_windowHeight, 0, 0, 0, 0, 0, 0, GLFW_WINDOW)) { return -1; } // モニタとの同期 glfwSwapInterval(1); // 描画範囲の指定 glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0.0f, g_windowWidth, 0.0f, g_windowHeight, -1.0f, 1.0f); // ゲームループ while (glfwGetWindowParam(GLFW_OPENED)) { // 画面の初期化 glClearColor(0.2f, 0.2f, 0.2f, 0.0f); glClear(GL_COLOR_BUFFER_BIT); render(); // バッファの入れ替え glfwSwapBuffers(); } glfwTerminate(); return 0; }
今回はrender関数の中身だけを追記しています。描画している図形は点、線、三角形、四角形と様々ですが、各図形の描画プログラムは非常に似ていることが分かると思います。各図形とも描画の流れとしては
- 頂点座標を配列として定義する
- glVertexPointerでOpenGLに頂点座標を伝える
- glDrawArrayでバックバッファに対して描画する
となります。
glVertexPointer
glVertexPointerの１つ目の引数には頂点の頂点データのサイズを指定します。頂点データサイズとは、頂点データが持つ座標情報の数です。2次元であれば ２ を、３次元なら３ を指定します。２つ目の引数には頂点配列の型を指定します。ここではfloat型で頂点配列を作成しているのでGL_FLOATを与えています。３つ目の引数には、頂点配列の間隔を指定します。今回は０を指定しています。４つ目の引数には頂点配列へのポインタを指定します。
glDrawArray
glDrawArrayの１つ目の引数には図形の種類を指定しています。２つ目の引数には描画を始める頂点配列のインデックスを指定します。３つ目の引数は描画する頂点の数を指定します。点なら１、線なら２、三角形なら３，四角形なら４ですね。
描画する座標の指定方法を考えなおす
ここまで、画面上に図形を描画してきましたが、図形を描画する座標は頂点配列として直打ちして指定しました。このままでは、図形を移動、回転、拡大させたい場合に柔軟性が低く、全ての頂点を手で計算する必要があります。そこで、「図形は原点に描画しておき、行列を使って座標変換することで描画座標を移動させる」という方式に変更してみましょう。
// // 原点に100x100の正方形を描画する関数 // void drawSquare() { static const GLfloat vtx4[] = { -50.0f, 50.0f, -50.0f, -50.0f, 50.0f, -50.0f, 50.0f, 50.0f, }; glVertexPointer(2, GL_FLOAT, 0, vtx4); glColor4f(1.0f, 1.0f, 1.0f, 1.0f); glEnableClientState(GL_VERTEX_ARRAY); glDrawArrays(GL_QUADS, 0, 4); glDisableClientState(GL_VERTEX_ARRAY); } void render() { glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); glTranslatef( 320.0f, 240.0f, 0.0f ); drawSquare(); glPopMatrix(); }
今回は、原点に100x100の大きさの正方形を描画するdrawSquare関数を用意しました。中身は先ほどのrender関数の四角形描画部分と殆ど同じで、変更点としては原点を中心に±50の座標をしている部分だけです。また、render関数内には、四角形を移動させるプログラムを書いています。まずは図形を移動させたいので、GL_MODELVIEWのスタックを指定して、glLoadIdentityでスタックをクリアしています。このへんの座標変換のお話は前回の「【OpenGLでゲームを作る】ダブルバッファリングとは - おもちゃラボ」をご参照ください。
glPushMatrix(）とglPopMatrix()に挟まれた部分に、図形の移動と描画のコードを書いています。原点にある正方形を画面の中心座標(320, 240)に移動させるため、glTranslatef関数を使っています。引数は頭からx方向の移動量、y方向の移動量、z方向の移動量です。
glPushMatrixとglPopMatrixのお話
本日最後のお話は先ほど説明を飛ばしたglPushMatrixとglPopMatrixです。これらの関数はそれぞれ、MODELVIEWのスタックの状態（スタックの一番上の行列）をコピーしスタックの一番上にプッシュする関数と、プッシュした行列をポップする関数になります。ここまでの例だと、なぜこれらの関数が必要になるかわかりにくいと思います。
そこで、複数の図形を描画する場合を考えてみましょう。例えば、(200, 240)と(400, 240)に四角形を描画するために、以下のプログラムを書いたとしましょう。この場合どのような描画結果になるでしょうか？この場合の描画結果は下図のように、(100, 240)と(600, 480)に四角形が描かれてしまいます。
void render() { glMatrixMode(GL_MODELVIEW); glLoadIdentity(); // (200, 240)に四角形を描く glTranslatef( 200.0f, 240.0f, 0.0f ); drawSquare(); // (400, 240)に四角形を描く（つもり） glTranslatef( 400.0f, 240.0f, 0.0f ); drawSquare(); }
どうしてこのような結果になってしまったのか、MODEL_VIEWの行列スタックの様子を見ながら考えてみましょう。まず、最初にglTranslatef( 200.0f, 240.0f, 0.0f )の移動行列がスタックに積まれます。この状態で１つ目の四角形が描画されるので、一つ目の四角形は正しく(200, 240)に描画されます。その後 glTranslatef( 400.0f, 240.0f, 0.0f )の移動行列がスタックに投げ込まれ、現在の行列に掛け合わされます。その結果、MODEL_VIEWの行列スタックの一番上には(600, 480)への移動行列が積まれることになります。この状態で２つ目の四角形の描画が行われるため、２つ目の四角形は(600, 480)に描画されてしまうことになります。
これを防ぐためには、２つ目のglTranslatefの引数を(200.0f, 0.0f, 0.0f)にすればよいのですが、これはMODEL_VIEWの行列スタックの状態をアプリケーションが管理しなくてはいけなくなるので、全然イケていません。そこで、考えだされたのがglPushMatrixとglPopMatrixです。これらを使用してプログラムを書くと以下のようになり、正しく描画されていることがわかります。
void render() { glMatrixMode(GL_MODELVIEW); glLoadIdentity(); // (200, 240)に四角形を描く glPushMatrix(); glTranslatef( 200.0f, 240.0f, 0.0f ); drawSquare(); glPopMatrix(); // (400, 240)に四角形を描く glPushMatrix(); glTranslatef( 400.0f, 240.0f, 0.0f ); drawSquare(); glPopMatrix(); }
最後に、このときのMODEL_VIEWの行列スタックの状態がどのように変化するのかを見てみましょう。まず最初にglPushMatrixが呼ばれた時点で、現在の行列スタックのトップの変換行列（単位行列）がコピーされスタックにプッシュされます。このプッシュされた行列に対してglTranslatef( 200.0f, 240.0f, 0.0f )の移動行列が掛け合わされます。この状態で、１つ目の四角形が描画されるので、四角形は(200, 240)に描画されることになります。その後、glPopMatrixが呼ばれ、行列スタックの一番上の変換行列がポップされ、行列スタックの状態はプッシュする前と同じものになります。
同様に２回目のglPushMatrixが呼ばれ、行列スタックのトップがプッシュされます。このプッシュされた行列に対してglTranslatef( 400.0f, 240.0f, 0.0f )の移動行列が掛け合わされます。この状態で、２つ目の四角形が描画されるので、四角形は(400, 240)に描画されることになります。その後、変換行列がポップされることで、行列スタックの状態はの元に戻ります。
まとめ
今回は、ようやくウインドウに対して描画を行えました。また、glPushMatrixとglPopMatrixを使って直感的に座標指定が出来る方法を説明しました。少々ややこしかったかもしれませんが、ここらへんの話は階層化したオブジェクトを動かす場合にも役に立つ知識なので覚えておきたいですねー
参考図書
「ゲームプログラマになる前に覚えておきたい技術」
この本は「ゲームをどのように作るのか」といった薄っぺらい内容ではなく、ゲームを動かすための技術を１から理解できるように解説してくれています。そして、この本にはゲーム開発にとどまらず、プログラマに必要な知識がたくさーん詰まっています。C++の基礎からキャッシュの話とか浮動小数点演算の話などのちょっと難しい話、最適化手法の話までもが書かれているので、プログラマならぜったい読むべき一冊ですね。そしてページ数も872ページとボリューミィ！分厚い参考書はいい本です！内部的に使われているのはDirectXですが、基本的にそれを意識する必要は内容に解説されているので、絶対に一度は読んでおきたい一冊です。
秀和システム
売り上げランキング: 10284
「OpenGLで作るiPhone SDKゲームプログラミング」
この本はiPhoneでOpenGLを使う方法を解説した本です。2Dゲームの「はえたたき」から3Dゲームの「カーレース」まで、サンプルがとても充実しているので、ゲームを作りはじめようという時に非常に良い取っ掛かりになります！また、パーティクルや衝突判定などゲームには欠かせない話もしっかりと説明されている数少ない日本語の書籍なので、ぜひぜひ読んでおきたいですねー(^^)v
インプレスジャパン
売り上げランキング: 28,461
「OpenGLプログラミングガイド 原著第5版」
OpenGLといったらまずはコレ。通称赤本と呼ばれるバイブルです。とりあえず、ちょこちょこと参照することが多いので、手元に置いておきたい（というか重すぎてモバイルは無理）一冊です。OpenGLをやるぞ、という意気込み（もしくは自分へのプレッシャ）で買ってしまう一冊です。コレを買ったら後戻りは出来ません。。。
ピアソンエデュケーション
売り上げランキング: 475,144
