第3章 OpenGL の基礎

(1)

第

3 章

OpenGL

の基礎

畔上秀幸

名古屋大学情報科学研究科複雑系科学専攻

(2)

§3.1 はじめに

(目標)

(3)

§3.2 OpenGL

とは

OpenGL とは

OpenGL (Open Graphics Library) は Silicon Graphics, Inc. が中心となって 2 次元，3 次元図形の描画のために開発した API (Application Program Interface) である [4]．

特徴

• UNIX 系 OS と Windows と Macintosh のいずれでも動く．

• リアルタイムでインタラクティブに表示を変えることができる．主な用途

(4)

§3.3 OpenGL

の構成

GLUT(OpenGL Utility Toolkit) とOpenGL本体で構成される．

GLUT

OpenGL GLU GL

描画ハードウェア OpenGL アプリケーションプログラム

(5)

GLUTは GUI Toolkit の一つである．

• ウィンドウのオープン

• マウス，キーボードの入力などのイベント処理

(6)

§3.4 空のウィンドウ

空のウィンドウを開く．

program3 1.c

#include <GL/glut.h> static void display(void); int main(int argc,

char *argv[]) { glutInit(&argc, argv); glutCreateWindow(argv[0]); glutDisplayFunc(display); glutMainLoop(); return 0;

static void display(void) {

(7)

glutInit()

#include <GL/glut.h>

void glutInit(int *argc, char **argv);

• GLUT を初期化する．

• 引数には main の引数を渡す.

glutCreateWindow()

int glutCreateWindow(char *name);

• ウィンドウを開く.

• 引数nameはそのウィンドウのタイトルバーに表示される．

(8)

glutDisplayFunc()

void glutDisplayFunc(void (*func)(void));

• ウィンドウの再描画が必要なときに，関数のポインタfuncで指定した関数が実行される.

glutMainLoop()

#include <GL/glut.h> void glutMainLoop(void); • ループ処理に入り，イベントの待ち受け状態になる.

(9)

§3.5 矩形を描く

program3 2.c

int main(int argc, char *argv[]) { ... /* Windowの設定*/ glutInitDisplayMode(GLUT_RGBA); glutInitWindowSize(250, 250); glutInitWindowPosition(100, 200); glutCreateWindow(argv[0]); /* 背景色*/ glClearColor(0.0, 0.0, 0.0, 0.0); /* 画面にモノを描画*/ glutDisplayFunc(display); ... }

(10)

static void display(void) { glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 1.0, 1.0); glBegin(GL_POLYGON); glVertex2f(0.5, 0.5); glVertex2f(-0.5, 0.5); glVertex2f(-0.5, -0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); }

(11)

glutInitDisplayMode()

void glutInitDisplayMode(unsigned int mode);

• ディスプレイの表示モードを設定する．

• modeにGLUT RGBA を指定することで RGBA (赤, 緑, 青, 透明度) の色指定，GLUT INDEXを指定することでインデックスカラーモードとなる．

glutInitWindowSize()

void glutInitWindowSize(int w, int h);

• 新たに開くウィンドウの幅と高さを指定する．開いた後のウィンドウ領域が

(12)

glutInitWindowPosition()

void glutInitWindowPosition(int x, int y);

• 新たに開くウィンドウの位置を指定する．

glClearColor()

void glClearColor(GLclampf R, GLclampf G, GLclampf B, GLclampf A);

• 背景色を設定する．

• R，G，B， Aは赤, 緑, 青, 不透明度（α 値）の強さを示す GLclampf型 (float型と等価) 0∼ 1 の値とする．(0, 0, 0) は黒色， (1, 1, 1) は白色を

(13)

glClear()

void glClear(GLbitfield mask);

• maskには消去するバッファ(メモリ) を指定する．

• GL COLOR BUFFER BITで描画エリアの消去

• GL DEPTH BUFFER BITで隠面消去処理用奥行情報の消去

• このほかに，ステンシルバッファ, オーバーレイバッファなどの消去がある．

glFlush()

void glFlush(void);

(14)

glBegin() ... glEnd

void glBegin(GLnum mode); ...

void glEnd(void);

• 図形の関数を置く環境を用意する．

(15)

• modeに指定できる図形のタイプ • GL POINTS:点を打つ． • GL LINES:２点を直線で結ぶ． • GL LINE STRIP:折れ線を描く． • GL LINE LOOP:折れ線を描き，始点と終点の間も結ぶ． v0 v1 v2 v3 v0 v1 v2 v3 v0 v1 v2 v3

(16)

• GL TRIANGLES / GL QUADS: 3あるいは4点を組にして，三角形あるいは四角形を描く．

• GL TRIANGLE STRIP / GL QUAD STRIP:一辺を共有しながら帯状に三角形あるいは四角形を描く． • GL TRIANGLE FAN:一辺を共有しながら扇状に三角形を描く． • GL POLYGON:凸多角形を描く． v0 v1 v2 v3 v5 v4 v0 _v1 v2 v3 v4

GL TRIANGLES GL TRIANGLE STRIP

v0 v1 v2 v3 v4 v0 v1 v2 v3 v4

(17)

• voidglVertex2f(GLfloat x, GLfloat y)

• 頂点の座標値を設定

• 引数の型はGLfloat (floatと等価)

• 3, 4次元(x,y,z), (x,y,z,w)のときはglVertex3f (), glVertex4f () • 引数がdouble型のときはglVertex?d(), int型のときはglVertex?i() • 引数がポインタのときはvoid glVertex??v()

• voidglColor3f(GLfloat r, GLfloat g, GLfloat b)

• 描画色を指定

• r,g,bには赤,緑,青の強さを0∼1の範囲で指定 • r,g,b,aのときはvoid glColor4f( )

(18)

§3.6 星を描く

program3 3.c

void display(void) { ...

for(i=0; i<STAR_NUM; i++){

/* 位置，輝度，大きさを乱数で決める */ x = 2.0*random_num()-1.0; y = 2.0*random_num()-1.0; brightness = random_num(); size = STAR_SIZE*random_num(); /* 0.0∼STAR_SIZEの大きさにする */ /* 星をひとつ描画 */

draw_point(x, y, brightness, size); }

(19)

rand

int rand(void);

• 0∼RAND MAX の間の擬似乱数を返す．

• 通常，乱数の種を設定する関数srand()に時間などの値を入れて初期化する．

• rand()の返り値と RAND MAX は int 型であるため，1.0 をかけて浮動小数型に変換しなければ，常に 0 になる．

(20)

ギザギザを目立たなくするために，境界線の周囲のピクセルに中間色の点を配置する手法をアンチエイリアシング(anti-aliasing) と呼ぶ．

アンチエイリアス処理

/* 混合処理の設定 */ glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glEnable(GL_BLEND); /* 混合処理を ON */ /* アンチエイリアス処理 */ glEnable(GL_POINT_SMOOTH); glHint(GL_POINT_SMOOTH_HINT, GL_NICEST);

(21)

• アンチエイリアシングの対象設定 • glEnable(GL POINT SMOOTH)：点 • glEnable(GL LINE SMOOTH)：線 • glEnable(GL POLYGON SMOOTH)：面

• 描画は速いがギザギザ（デフォルト設定）

• glHint(GL POINT SMOOTH HINT, GL FASTEST); • glHint(GL LINE SMOOTH HINT, GL FASTEST); • glHint(GL POLYGON SMOOTH HINT, GL FASTEST);

• 綺麗だが遅い

• glHint(GL POINT SMOOTH HINT, GL NICEST); • glHint(GL LINE SMOOTH HINT, GL NICEST); • glHint(GL POLYGON SMOOTH HINT, GL NICEST);

(22)

§3.7 シルピンスキーのギャスケット

シルピンスキーのギャスケットを描く．

program3 4.c

length /= 2.0; /* 再帰関数 */ if(length > 0.01){

draw_gasket(x0, y0, length);

draw_gasket(mid_point(x0, x1), mid_point(y0, y1), length);

draw_gasket(mid_point(x2, x0), mid_point(y2, y0), length);

(23)

§3.8 マウスで線を引く

マウスをクリックした座標を読み取る．

program3 5.c

glutMouseFunc(mouse);

void mouse(int button, int state, int x, int y) { switch (button) { case GLUT_LEFT_BUTTON: printf("The left"); break; case GLUT_MIDDLE_BUTTON: printf("The middle"); break; ...

(24)

マウスのクリックした位置から離した位置まで線を引く．

program3 6.c

case GLUT_LEFT_BUTTON: point[pointnum][0] = x; point[pointnum][1] = y; if (state == GLUT_UP) { /* クリックした位置から離した位置まで線を引く */ glColor3d(0.0, 0.0, 0.0); glBegin(GL_LINES); glVertex2iv(point[pointnum - 1]); /* 押した位置 */ glVertex2iv(point[pointnum]); /* 離した位置 */ glEnd(); glFlush();

(25)

ランダムな一筆書き

演習 3.9.1 (ランダムな一筆書き)

プログラム program3 2.c と program3 3.c を参考にして，図 3.1 のようなイラストを作成せよ．

(26)

(27)

§3.10 まとめ

OpenGL とは何か，OpenGL の構成，基本的な機能をみてきた．

1 OpenGL とは，2 次元，3 次元形状の描画のために開発された API である． 2 OpenGL は GLUT と OpenGL 本体で構成される．GLUT はウィンドウを開

く機能をもつ．

3 基本的なプログラムにより 2 次元図形を描けることを確認した．アンチエイリアス機能を例に挙げて，設定方法をみた．

(28)

参考文献

[1] Mark J. Kilgard.

The OpenGL Utility Toolkit (GLUT) programming interface API version 3(日本語翻訳版). http://opengl.jp/glut/index.html. [2] 林武文,加藤清敬. OpenGLによる3次元CGプログラミング. コロナ社, 2003. [3] 床井浩平. GLUTによる「手抜き」OpenGL入門. http://www.wakayama-u.ac.jp/˜tokoi/opengl/libglut.html. [4] OpenGL公式サイト. http://www.opengl.org/.