SlideShare une entreprise Scribd logo
1  sur  29
Télécharger pour lire hors ligne
OpenGL で 3DCG
大江ゼミ3年 中川武憲
Agenda
・OpenGL の基礎知識
・x,y,z 軸の描画
・三角錐の描画
・W,A,S,D で移動
・マウスでカメラの向きを変更
・三角錐の自動回転
・デモ
OpenGL 基礎知識
・ビューイングパイプライン
・モデリング変換
・視野変換
・投射変換
・ビューポート変換
OpenGL 基礎知識
ビューイング・パイプライン
モデリング座標系 …モデルを基準にした座標系
(ローカル座標系)
↓                            ↓ モデリング変換
ワールド座標系 …仮想 3D 空間の基準となる座標系
↓                            ↓ 視野変換
ビュー座標系 …視点を基準とした (カメラから見た) 座標系
↓                            ↓ 投射変換
正規化デバイス座標系 … x, y, z がそれぞれ -1~1 の範囲となる座標系
(クリッピング座標系)
↓                            ↓ ビューポート変換
ウィンドウ座標系 …左上が原点、右下方向が x, y の正の方向となる2次元の座標系
(スクリーン座標系)
OpenGL 実践
x,y,z 軸の描画
GL_LINES で (0, 0, 0) から x,y,z それぞれ長さ 100 の線を引く。
各メソッドの解説
glLineWidth(GLfloat width): 線幅を指定
glColor4d: RGBA で色を指定 (GL_LIGHTING が disable の時のみ有効)
glBegin(GLenum mode): モードを指定して頂点の追加を開始
glVertex3d: XYZ で座標を指定
glEnd(void): glBegin と対になる頂点グループの終わりを示す
x,y,z 軸の描画
glLineWidth(1);
glDisable(GL_LIGHTING);
for (int i = 0; i < 3; i++) {
int length = 100;
glColor4d((i == 0), (i == 1), (i == 2), 1.0);
glBegin(GL_LINES);
glVertex3d(0, 0, 0);
glVertex3d((i == 0) * length, (i == 1) * length, (i == 2) * length);
glEnd();
}
glEnable(GL_LIGHTING);
三角錐の描画
三角錐は全ての面が三角形で構成される四面体である。
頂点は4つ、辺の数は6つである。
単純に考えると、 GL_TRIANGLES で4つの三角形を描けば良いが、同じ頂点を3度指定
する必要があり、合計で12個の頂点を打つことになり無駄である。
そこで、 GL_TRIANGLE_STRIP を使って合計6つの頂点で三角錐を描画した。
各メソッドの解説
glNormal3d: XYZ で法線ベクトルを指定する
三角錐の描画
glBegin(GL_TRIANGLE_STRIP);
glVertex3d(0, 0, 0); glNormal3d(0, 0, -1);
glVertex3d(4, 0, 0); glNormal3d(0, 0, -1);
glVertex3d(0, 0, 3); glNormal3d(0, 0, -1);
glVertex3d(0, 2, 0); glNormal3d(0, 0, -1);
glVertex3d(0, 0, 0); glNormal3d(0, 0, -1);
glVertex3d(4, 0, 0); glNormal3d(0, 0, -1);
glEnd();
コードでは伝わりにくい
図解
xz
y
(0, 2, 0)
(4, 0, 0)(0, 0, 3)
(0, 0, 0)
図解
xz
y
(0, 2, 0)
(4, 0, 0)(0, 0, 3)
(0, 0, 0)
図解
xz
y
(0, 2, 0)
(4, 0, 0)(0, 0, 3)
(0, 0, 0)
図解
xz
y
(0, 2, 0)
(4, 0, 0)(0, 0, 3)
(0, 0, 0)
図解
xz
y
(0, 2, 0)
(4, 0, 0)(0, 0, 3)
(0, 0, 0)
何故それで描画されるのか
三角錐の展開図
三角錐の展開図 (内側→外側)
c
bd
c
d
a
三角錐の展開図 (外側)
c
bd
c
d
a
GL_TRIANGLE_STRIP
W,A,S,D で移動
キーイベントに応じてワールド変換行列を操作する。
W,A,S,D で移動
void keyboard(unsigned char key, int x, int y)
{
printf( "Key Code : %d, Position : %d %dn", key, x, y );
// switch文を用いたキー処理の例(switch-caseを使う場合、breakの書き忘れに注意)
double size = 1.0;
switch(key) {
case 'a':
// x 軸正方向へ移動
wm[12] += size;
break;
case 'd':
// x 軸負方向へ移動
wm[12] -= size;
break;
case 'w':
// z 軸正方向へ移動
wm[14] += size;
break;
case 's':
// z 軸負方向へ移動
wm[14] -= size;
break;
default:
printf( "tKey: Other -> %cn", key );
}
glutPostRedisplay();
}
マウスでカメラの向きを変更
マウスイベントを拾い、ドラッグした大きさに応じてビュー変換行列を操作する。
マウスでカメラの向きを変更
void mousePressed(int button, int state, int x, int y)
{
printf( "Mouse Button: %d, State: %d, Position %d %dn", button, state, x, y );
// mouse down 時
if (! state) {
// 座標を記録しておく
mouse_pos.x = x;
mouse_pos.y = y;
}
}
マウスでカメラの向きを変更
void mouseDragged(int x, int y)
{
printf( "Mouse Drag Position %d %dn", x, y );
pos2d diff = {mouse_pos.x - x, mouse_pos.y - y};
mouse_pos.x = x;
mouse_pos.y = y;
y_rad += diff.x / window.w * M_PI / 5;
x_rad += diff.y / window.h * M_PI / 5;
// y 軸回転
vm_y[0] = cos(y_rad);
vm_y[2] = -sin(y_rad);
vm_y[8] = sin(y_rad);
vm_y[10] = cos(y_rad);
// x 軸回転
vm_x[5] = cos(x_rad);
vm_x[6] = sin(x_rad);
vm_x[9] = -sin(x_rad);
vm_x[10] = cos(x_rad);
// 視点の再計算
resize(window.w, window.h);
glutPostRedisplay(); // ウィンドウに再描画命令を送る(ポストする)
}
三角錐の自動回転
idle 関数内で定期的にワールド変換行列を操作する。
三角錐の自動回転
void idle()
{
// y 軸に対して毎度 1 度ずつ右ねじ回転
rad += M_PI / 180;
if (rad > M_PI * 2) {
rad = 0;
}
wm[0] = cos(rad);
wm[2] = -sin(rad);
wm[8] = sin(rad);
wm[10] = cos(rad);
glutPostRedisplay(); // ウィンドウに再描画命令を送る(ポストする)
}
デモ
http://git.io/NnYb
描画結果
法線ベクトルの指定
がおかしいので光の
反射が変。
参考資料
・OpenGL Documentation
https://www.opengl.org/sdk/docs/man2/xhtml/
・(Mac・iPhone)プリミティブについて - 強火で進め
http://d.hatena.ne.jp/nakamura001/20081231/1230719279
・OpenGL が世界を描画する仕組み - けんごのお屋敷
http://tkengo.github.io/blog/2014/12/27/opengl-es-2-2d-
knowledge-1/
・ビジュアル情報演習
http://www.wakayama-u.ac.jp/~wuhy/08_3DCGwithGLUT.html

Contenu connexe

Tendances

борщ український з пампушками
борщ український з пампушкамиборщ український з пампушками
борщ український з пампушками
SergeRyk
 
напівфабрикати
напівфабрикатинапівфабрикати
напівфабрикати
darkvadim
 
Технологія виготовлення виробів інтер’єрного призначення 8 клас
Технологія виготовлення виробів інтер’єрного призначення 8 класТехнологія виготовлення виробів інтер’єрного призначення 8 клас
Технологія виготовлення виробів інтер’єрного призначення 8 клас
PRESLAVA1972
 
Проектна робота "Пошив спідниці" Підготувала Ханецька Д., 7 кл. Учитель Пивов...
Проектна робота "Пошив спідниці" Підготувала Ханецька Д., 7 кл. Учитель Пивов...Проектна робота "Пошив спідниці" Підготувала Ханецька Д., 7 кл. Учитель Пивов...
Проектна робота "Пошив спідниці" Підготувала Ханецька Д., 7 кл. Учитель Пивов...
Лидия Рудакова
 

Tendances (15)

Перевірка статистичних гіпотез
Перевірка статистичних гіпотезПеревірка статистичних гіпотез
Перевірка статистичних гіпотез
 
Професія кухар-офіціант
Професія кухар-офіціантПрофесія кухар-офіціант
Професія кухар-офіціант
 
პროექტ–გაკვეთილი Intel
პროექტ–გაკვეთილი  Intelპროექტ–გაკვეთილი  Intel
პროექტ–გაკვეთილი Intel
 
Стилі інтер’єру та одягу
Стилі  інтер’єру та одягуСтилі  інтер’єру та одягу
Стилі інтер’єру та одягу
 
борщ український з пампушками
борщ український з пампушкамиборщ український з пампушками
борщ український з пампушками
 
напівфабрикати
напівфабрикатинапівфабрикати
напівфабрикати
 
Аналіз ШМО вчителів зарубіжної літератури
Аналіз ШМО вчителів зарубіжної літературиАналіз ШМО вчителів зарубіжної літератури
Аналіз ШМО вчителів зарубіжної літератури
 
«Щедрість таланту»: до 120-річчя від дня народження Василя Касіяна (1896-1976)
«Щедрість таланту»: до 120-річчя від дня народження Василя Касіяна (1896-1976)«Щедрість таланту»: до 120-річчя від дня народження Василя Касіяна (1896-1976)
«Щедрість таланту»: до 120-річчя від дня народження Василя Касіяна (1896-1976)
 
БУДОВА ТОКАРНОГО СТАНКА ПО ДЕРЕВУ СТД-120
БУДОВА ТОКАРНОГО СТАНКА ПО ДЕРЕВУ СТД-120БУДОВА ТОКАРНОГО СТАНКА ПО ДЕРЕВУ СТД-120
БУДОВА ТОКАРНОГО СТАНКА ПО ДЕРЕВУ СТД-120
 
Модуль числа. 6 клас
Модуль числа. 6 класМодуль числа. 6 клас
Модуль числа. 6 клас
 
проект воротник
проект воротникпроект воротник
проект воротник
 
Технологія виготовлення виробів інтер’єрного призначення 8 клас
Технологія виготовлення виробів інтер’єрного призначення 8 класТехнологія виготовлення виробів інтер’єрного призначення 8 клас
Технологія виготовлення виробів інтер’єрного призначення 8 клас
 
Розвязання трикутників
Розвязання трикутниківРозвязання трикутників
Розвязання трикутників
 
Проектна робота "Пошив спідниці" Підготувала Ханецька Д., 7 кл. Учитель Пивов...
Проектна робота "Пошив спідниці" Підготувала Ханецька Д., 7 кл. Учитель Пивов...Проектна робота "Пошив спідниці" Підготувала Ханецька Д., 7 кл. Учитель Пивов...
Проектна робота "Пошив спідниці" Підготувала Ханецька Д., 7 кл. Учитель Пивов...
 
Прямокутні координати
Прямокутні координатиПрямокутні координати
Прямокутні координати
 

En vedette

Rでの対称行列の固有値・固有ベクトルの最適な求め方
Rでの対称行列の固有値・固有ベクトルの最適な求め方Rでの対称行列の固有値・固有ベクトルの最適な求め方
Rでの対称行列の固有値・固有ベクトルの最適な求め方
wada, kazumi
 
数式を綺麗にプログラミングするコツ #spro2013
数式を綺麗にプログラミングするコツ #spro2013数式を綺麗にプログラミングするコツ #spro2013
数式を綺麗にプログラミングするコツ #spro2013
Shuyo Nakatani
 
Direct xとopenglの隠蔽実装例
Direct xとopenglの隠蔽実装例Direct xとopenglの隠蔽実装例
Direct xとopenglの隠蔽実装例
tecopark
 

En vedette (20)

ネイティブ原理主義
ネイティブ原理主義ネイティブ原理主義
ネイティブ原理主義
 
OpenGLと行列
OpenGLと行列OpenGLと行列
OpenGLと行列
 
Math1 Vector
Math1 VectorMath1 Vector
Math1 Vector
 
今Cinderが熱い! #cinder
今Cinderが熱い! #cinder今Cinderが熱い! #cinder
今Cinderが熱い! #cinder
 
The Introduction to Vector Graphics
The Introduction to Vector GraphicsThe Introduction to Vector Graphics
The Introduction to Vector Graphics
 
Rでの対称行列の固有値・固有ベクトルの最適な求め方
Rでの対称行列の固有値・固有ベクトルの最適な求め方Rでの対称行列の固有値・固有ベクトルの最適な求め方
Rでの対称行列の固有値・固有ベクトルの最適な求め方
 
SurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみるSurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみる
 
どこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティスどこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティス
 
簡単!OpenGL ES 2.0フラグメントシェーダー
簡単!OpenGL ES 2.0フラグメントシェーダー簡単!OpenGL ES 2.0フラグメントシェーダー
簡単!OpenGL ES 2.0フラグメントシェーダー
 
FiltersでGLSLを楽しく学んじゃおう!
FiltersでGLSLを楽しく学んじゃおう!FiltersでGLSLを楽しく学んじゃおう!
FiltersでGLSLを楽しく学んじゃおう!
 
STLの型の使い分け(ダイジェスト版) @ Sapporo.cpp 第7回勉強会 (2014.10.18)
STLの型の使い分け(ダイジェスト版) @ Sapporo.cpp 第7回勉強会 (2014.10.18)STLの型の使い分け(ダイジェスト版) @ Sapporo.cpp 第7回勉強会 (2014.10.18)
STLの型の使い分け(ダイジェスト版) @ Sapporo.cpp 第7回勉強会 (2014.10.18)
 
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
 
Live2Dの描画の裏側の話
Live2Dの描画の裏側の話Live2Dの描画の裏側の話
Live2Dの描画の裏側の話
 
ピーFIの研究開発現場
ピーFIの研究開発現場ピーFIの研究開発現場
ピーFIの研究開発現場
 
視野変換1(基礎編)
視野変換1(基礎編)視野変換1(基礎編)
視野変換1(基礎編)
 
GLSLによるシェーダーアートことはじめ
GLSLによるシェーダーアートことはじめGLSLによるシェーダーアートことはじめ
GLSLによるシェーダーアートことはじめ
 
Dbts2015 tokyo vector_in_hadoop_vortex
Dbts2015 tokyo vector_in_hadoop_vortexDbts2015 tokyo vector_in_hadoop_vortex
Dbts2015 tokyo vector_in_hadoop_vortex
 
数式を綺麗にプログラミングするコツ #spro2013
数式を綺麗にプログラミングするコツ #spro2013数式を綺麗にプログラミングするコツ #spro2013
数式を綺麗にプログラミングするコツ #spro2013
 
Tabc vol3 テクニカルアーティストを始めるにあたって
Tabc vol3 テクニカルアーティストを始めるにあたってTabc vol3 テクニカルアーティストを始めるにあたって
Tabc vol3 テクニカルアーティストを始めるにあたって
 
Direct xとopenglの隠蔽実装例
Direct xとopenglの隠蔽実装例Direct xとopenglの隠蔽実装例
Direct xとopenglの隠蔽実装例
 

Similaire à OpenGL 3DCG (8)

CG2013 09
CG2013 09CG2013 09
CG2013 09
 
CG2013 08
CG2013 08CG2013 08
CG2013 08
 
さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法
さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法
さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法
 
Android OpenGL HandsOn
Android OpenGL HandsOnAndroid OpenGL HandsOn
Android OpenGL HandsOn
 
CG2013 06
CG2013 06CG2013 06
CG2013 06
 
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
 
Guide for Swift and Viewer app
Guide for Swift and Viewer appGuide for Swift and Viewer app
Guide for Swift and Viewer app
 
CG2013 07
CG2013 07CG2013 07
CG2013 07
 

Plus de Takenori Nakagawa

Plus de Takenori Nakagawa (20)

TensorFlow 入門
TensorFlow 入門TensorFlow 入門
TensorFlow 入門
 
機械学習を用いたパターンロック認証の強化手法
機械学習を用いたパターンロック認証の強化手法機械学習を用いたパターンロック認証の強化手法
機械学習を用いたパターンロック認証の強化手法
 
Docker で Deep Learning
Docker で Deep LearningDocker で Deep Learning
Docker で Deep Learning
 
GitHub Travis-CI Go!
GitHub Travis-CI  Go!GitHub Travis-CI  Go!
GitHub Travis-CI Go!
 
01.app
01.app01.app
01.app
 
Service Workers Push API Hands-on
Service Workers Push API Hands-onService Workers Push API Hands-on
Service Workers Push API Hands-on
 
Service Workers
Service WorkersService Workers
Service Workers
 
WebGL
WebGLWebGL
WebGL
 
01:artificial life
01:artificial life01:artificial life
01:artificial life
 
後期05
後期05後期05
後期05
 
後期03
後期03後期03
後期03
 
後期02
後期02後期02
後期02
 
densan2014-late01
densan2014-late01densan2014-late01
densan2014-late01
 
phpck
phpckphpck
phpck
 
Git 初心者のための GitHub Pages
Git 初心者のための GitHub PagesGit 初心者のための GitHub Pages
Git 初心者のための GitHub Pages
 
OpenIL vol.1
OpenIL vol.1OpenIL vol.1
OpenIL vol.1
 
後期講座08
後期講座08後期講座08
後期講座08
 
後期講座07
後期講座07後期講座07
後期講座07
 
後期講座05
後期講座05後期講座05
後期講座05
 
後期講座03
後期講座03後期講座03
後期講座03
 

Dernier

Dernier (11)

業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 

OpenGL 3DCG