第 3 章 OpenGL の基礎 第 3 章 OpenGL の基礎 畔上 秀幸 名古屋大学 情報学研究科 複雑系科学専攻 April 3, 2019 1 / 28
第 3 章 OpenGL の基礎
第 3章 OpenGL の基礎
畔上 秀幸
名古屋大学 情報学研究科 複雑系科学専攻
April 3, 2019
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 本体で構成される.
GLUTOpenGL GLU GL
描画ハードウェア
OpenGL アプリケーションプログラム
ウィンドウシステム
4 / 28
第 3 章 OpenGL の基礎
はじめに
GLUT は GUI Toolkit の一つである.
• ウィンドウのオープン• マウス,キーボードの入力などのイベント処理• 右クリックでのメニュー表示
5 / 28
第 3 章 OpenGL の基礎
はじめに
§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
第 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.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
第 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: 2点を直線で結ぶ.• 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
第 3 章 OpenGL の基礎
はじめに
• 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
第 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.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
第 3 章 OpenGL の基礎
はじめに
randint 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.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 章 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 OpenGL とは,2次元,3次元形状の描画のために開発された API である.
2 OpenGL は GLUT と OpenGL 本体で構成される.GLUT はウィンドウを開く機能をもつ.
3 基本的なプログラムにより 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