第3章 OpenGL の基礎 - az.cs.is.nagoya-u.ac.jp · 第3 章OpenGL の基礎はじめに x3.2 OpenGL とは OpenGL とは OpenGL (Open Graphics Library) はSilicon Graphics, Inc

第 3 章 OpenGL の基礎

第 3章 OpenGL の基礎

畔上秀幸

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

April 12, 2018

1 / 28


はじめに

§3.1 はじめに

(目標)

OpenGL とは何か，OpenGL の構成，基本的な機能を理解する．

2 / 28


はじめに

§3.2 OpenGL とは

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

特徴• UNIX 系 OS と Windows と Macintosh のいずれでも動く．• リアルタイムでインタラクティブに表示を変えることができる．主な用途• CAD，CGモデラーで使われている．

3 / 28


はじめに

§3.3 OpenGL の構成

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

GLUTOpenGL GLU GL

描画ハードウェア

OpenGL アプリケーションプログラム

ウィンドウシステム

4 / 28


はじめに

GLUT は GUI Toolkit の一つである．

• ウィンドウのオープン• マウス，キーボードの入力などのイベント処理• 右クリックでのメニュー表示

5 / 28


はじめに

§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)

{

}

6 / 28


はじめに

glutInit()


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

• GLUT を初期化する．• 引数には main の引数を渡す.

glutCreateWindow()


int glutCreateWindow(char *name);

• ウィンドウを開く.

• 引数 name はそのウィンドウのタイトルバーに表示される．• 戻り値は開いたウィンドウの識別子

7 / 28


はじめに

glutDisplayFunc()


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

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

glutMainLoop()


void glutMainLoop(void);

• ループ処理に入り，イベントの待ち受け状態になる.

8 / 28


はじめに

§3.5 矩形を描く

program3 2.cint 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);

...

}

9 / 28


はじめに

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();

}

10 / 28


はじめに

glutInitDisplayMode()

void glutInitDisplayMode(unsigned int mode);

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

glutInitWindowSize()

void glutInitWindowSize(int w, int h);

• 新たに開くウィンドウの幅と高さを指定する．開いた後のウィンドウ領域が(−1, 1)2 の領域に対応する．

11 / 28


はじめに

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) は白色を表す．

12 / 28


はじめに

glClear()

void glClear(GLbitfield mask);

• mask には消去するバッファ(メモリ)を指定する．• GL COLOR BUFFER BIT で描画エリアの消去• GL DEPTH BUFFER BIT で隠面消去処理用奥行情報の消去• このほかに，ステンシルバッファ, オーバーレイバッファなどの消去がある．

glFlush()

void glFlush(void);

• 実行されていない OpenGL の命令を全部実行する．

13 / 28


はじめに

glBegin() ... glEnd

void glBegin(GLnum mode);

...

void glEnd(void);

• 図形の関数を置く環境を用意する．• mode には描画する図形のタイプを指定する．

14 / 28


はじめに

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

v0

v1

v2

v3

v0

v1

v2

v3

v0

v1

v2

v3

GL LINES GL LINE STRIP GL LINE LOOP

15 / 28


はじめに

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

• GL TRIANGLE STRIP / GL QUAD STRIP: 一辺を共有しながら帯状に三角形あるいは四角形を描く．

• GL TRIANGLE FAN: 一辺を共有しながら扇状に三角形を描く．• GL POLYGON: 凸多角形を描く．

v0

v1

v2

v3v5

v4

v0v1

v2

v3

v4

GL TRIANGLES GL TRIANGLE STRIP

v0

v1

v2

v3v4

v0

v1

v2

v3v4

GL TRIANGLE FAN GL POLYGON

16 / 28


はじめに

• void glVertex2f(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()

• void glColor3f(GLfloat r, GLfloat g, GLfloat b)• 描画色を指定• r, g, b には赤, 緑, 青の強さを 0～1 の範囲で指定• r, g, b, a のときは void glColor4f( )• 引数が double 型のときは glColor?d( ), int 型のときは glColor?i( )

17 / 28


はじめに

§3.6 星を描く

program3 3.cvoid 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);

}

glFlush();

}

18 / 28


はじめに

randint rand(void);

• 0～RAND MAX の間の擬似乱数を返す．• 通常，乱数の種を設定する関数 srand() に時間などの値を入れて初期化する．• rand() の返り値と RAND MAX は int型であるため，1.0をかけて浮動小数型に変換しなければ，常に 0になる．

19 / 28


はじめに

ギザギザを目立たなくするために，境界線の周囲のピクセルに中間色の点を配置する手法をアンチエイリアシング (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);

20 / 28


はじめに

• アンチエイリアシングの対象設定• 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);

21 / 28


はじめに

§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);

}

22 / 28


はじめに

§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;

...

23 / 28


はじめに

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

program3 6.ccase 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();

void resize(int w, int h) の座標変換については第 5章で説明する．

24 / 28


演習

ランダムな一筆書き

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

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

25 / 28


演習

図 3.1: ランダムな一筆書き

26 / 28


まとめ

§3.10 まとめ

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

1 OpenGL とは，2次元，3次元形状の描画のために開発された API である．

2 OpenGL は GLUT と OpenGL 本体で構成される．GLUT はウィンドウを開く機能をもつ．

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

27 / 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/.

28 / 28

Documents

第3章 OpenGL の基礎 - az.cs.is.nagoya-u.ac.jp · 第3 章OpenGL の基礎 はじめに x3.2 OpenGL とは OpenGL とは OpenGL (Open Graphics Library) はSilicon Graphics, Inc

第3章 OpenGL の基礎 - az.cs.is.nagoya-u.ac.jp · 第3 章OpenGL の基礎はじめに x3.2 OpenGL とは OpenGL とは OpenGL (Open Graphics Library) はSilicon Graphics, Inc