第3章 OpenGL の基礎

第 3 章 OpenGL の基礎
第 3 章 OpenGL の基礎
畔上秀幸
名古屋大学情報科学研究科複雑系科学専攻
December 14, 2016
1 / 28
第 3 章 OpenGL の基礎
はじめに
§3.1 はじめに
(目標)
OpenGL とは何か，OpenGL の構成，基本的な機能を理解する．
2 / 28
第 3 章 OpenGL の基礎
はじめに
§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 章 OpenGL の基礎
はじめに
§3.3 OpenGL の構成
GLUT (OpenGL Utility Toolkit) と OpenGL 本体で構成される．
OpenGL アプリケーションプログラム
OpenGL
GLU
GL
GLUT
ウィンドウシステム
描画ハードウェア
4 / 28
第 3 章 OpenGL の基礎
はじめに
GLUT は GUI Toolkit の一つである．
• ウィンドウのオープン
• マウス，キーボードの入力などのイベント処理
• 右クリックでのメニュー表示
5 / 28
第 3 章 OpenGL の基礎
はじめに
§3.4 空のウィンドウ
空のウィンドウを開く．
program3 1.c
#include <GL/glut.h>
static void display(void);
static void display(void)
{
}
int main(int argc,
char *argv[])
{
glutInit(&argc, argv);
glutCreateWindow(argv[0]);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
6 / 28
第 3 章 OpenGL の基礎
はじめに
glutInit()
#include <GL/glut.h>
void glutInit(int *argc, char **argv);
• GLUT を初期化する．
• 引数には main の引数を渡す.
glutCreateWindow()
#include <GL/glut.h>
int glutCreateWindow(char *name);
• ウィンドウを開く.
• 引数 name はそのウィンドウのタイトルバーに表示される．
• 戻り値は開いたウィンドウの識別子
7 / 28
第 3 章 OpenGL の基礎
はじめに
glutDisplayFunc()
#include <GL/glut.h>
void glutDisplayFunc(void (*func)(void));
• ウィンドウの再描画が必要なときに，関数のポインタ func で指定した関数
が実行される.
glutMainLoop()
#include <GL/glut.h>
void glutMainLoop(void);
• ループ処理に入り，イベントの待ち受け状態になる.
8 / 28
第 3 章 OpenGL の基礎
はじめに
§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);
...
}
9 / 28
第 3 章 OpenGL の基礎
はじめに
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
第 3 章 OpenGL の基礎
はじめに
glutInitDisplayMode()
void glutInitDisplayMode(unsigned int mode);
• ディスプレイの表示モードを設定する．
• mode に GLUT RGBA を指定することで RGBA (赤, 緑, 青, 透明度) の色指
定，GLUT INDEX を指定することでインデックスカラーモードとなる．
glutInitWindowSize()
void glutInitWindowSize(int w, int h);
• 新たに開くウィンドウの幅と高さを指定する．開いた後のウィンドウ領域が
(−1, 1)2 の領域に対応する．
11 / 28
第 3 章 OpenGL の基礎
はじめに
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
第 3 章 OpenGL の基礎
はじめに
glClear()
void glClear(GLbitfield mask);
• mask には消去するバッファ(メモリ) を指定する．
• GL COLOR BUFFER BIT で描画エリアの消去
• GL DEPTH BUFFER BIT で隠面消去処理用奥行情報の消去
• このほかに，ステンシルバッファ, オーバーレイバッファなどの消去がある．
glFlush()
void glFlush(void);
• 実行されていない OpenGL の命令を全部実行する．
13 / 28
第 3 章 OpenGL の基礎
はじめに
glBegin() ... glEnd
void glBegin(GLnum mode);
...
void glEnd(void);
• 図形の関数を置く環境を用意する．
• mode には描画する図形のタイプを指定する．
14 / 28
第 3 章 OpenGL の基礎
はじめに
• mode に指定できる図形のタイプ
• GL POINTS: 点を打つ．
• GL LINES: ２点を直線で結ぶ．
• GL LINE STRIP: 折れ線を描く．
• GL LINE LOOP: 折れ線を描き，始点と終点の間も結ぶ．
v0
v0
v0
v2
v3
v1
GL LINES
v2
v3
v1
GL LINE STRIP
v2
v3
v1
GL LINE LOOP
15 / 28
第 3 章 OpenGL の基礎
はじめに
• GL TRIANGLES / GL QUADS: 3 あるいは 4 点を組にして，三角形あるいは
四角形を描く．
• GL TRIANGLE STRIP / GL QUAD STRIP: 一辺を共有しながら帯状に三角形
あるいは四角形を描く．
• GL TRIANGLE FAN: 一辺を共有しながら扇状に三角形を描く．
• GL POLYGON: 凸多角形を描く．
v5
v0
v3
v2
v3
v0
v1
GL TRIANGLES
v4
v4
v2
v4
v1
GL TRIANGLE STRIP
v4
v3
v3
v2
v0
v2
v0
v1
GL TRIANGLE FAN
v1
GL POLYGON
16 / 28
第 3 章 OpenGL の基礎
はじめに
• 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 章 OpenGL の基礎
はじめに
§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);
}
glFlush();
}
18 / 28
第 3 章 OpenGL の基礎
はじめに
rand
int rand(void);
• 0∼RAND MAX の間の擬似乱数を返す．
• 通常，乱数の種を設定する関数 srand() に時間などの値を入れて初期化する．
• rand() の返り値と RAND MAX は int 型であるため，1.0 をかけて浮動小数
型に変換しなければ，常に 0 になる．
19 / 28
第 3 章 OpenGL の基礎
はじめに
ギザギザを目立たなくするために，境界線の周囲のピクセルに中間色の点を配
置する手法をアンチエイリアシング (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
第 3 章 OpenGL の基礎
はじめに
• アンチエイリアシングの対象設定
• 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 章 OpenGL の基礎
はじめに
§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 章 OpenGL の基礎
はじめに
§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
第 3 章 OpenGL の基礎
はじめに
マウスのクリックした位置から離した位置まで線を引く．
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();
void resize(int w, int h) の座標変換については第 5 章で説明する．
24 / 28
第 3 章 OpenGL の基礎
演習
ランダムな一筆書き
演習 3.9.1 (ランダムな一筆書き)
プログラム program3 2.c と program3 3.c を参考にして，図 3.1 のようなイラス
トを作成せよ．
25 / 28
第 3 章 OpenGL の基礎
演習
図 3.1: ランダムな一筆書き
26 / 28
第 3 章 OpenGL の基礎
まとめ
§3.10 まとめ
OpenGL とは何か，OpenGL の構成，基本的な機能をみてきた．
1
2
3
OpenGL とは，2 次元，3 次元形状の描画のために開発された API である．
OpenGL は GLUT と OpenGL 本体で構成される．GLUT はウィンドウを開
く機能をもつ．
基本的なプログラムにより 2 次元図形を描けることを確認した．アンチエイ
リアス機能を例に挙げて，設定方法をみた．
27 / 28
第 3 章 OpenGL の基礎
参考文献
参考文献
[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

Download Report