2012.5.28の勉強会で使用するOpenGLハンズオン用資料

1. Android
OpenGL/ES ハンズオン
Smart.LABO
丹所 育男(tan1234jp)
1

2. 自己紹介
• 丹所 育男（たんしょ いくお）
• 春日井市出身・自宅は名古屋市・実家は可児市
• 講師→制御系→ネットワーク系→業務系→制御系→
システム保守→制御系→業務系→携帯アプリ
• 2011年6月に「SMART.LABO」として独立
• Androidアプリの開発がメイン(iPhone,Coronaも)
• Twitter : @tan1234jp
2

3. OpenGL/ESとは？
• OpenGL Embedded Subsetの略
• 3Dコンピュータグラフィックス用APIのサブ
セットで、3D空間に浮かんだ頂点を結んだ図
形を描画することに特化している。
• 主に携帯電話などの組み込みシステムや、
ゲーム専用機で使われている。
→iOS, Android, Symbian OS,
→PlayStation3、Nintendo 3DS
3

4. 描画APIのサポート
Canvas OpenGL/ES
• 点 • 点
• 直線 • 直線
• 三角形 • 三角形
• 四角形
• 五角形以上の多角形
• 円
• 文字
4

5. AndroidのView
• Androidには、3種類のViewがある。
→View,SurfaceView,GLSurfaceView
• OpenGLでは、GLSurfaceViewを継承したも
のを使う。
5

6. GLSurfaceView
• OpenGLの描画に特化したView
• 描画タイミングは端末依存(プログラマが決め
ることもできる)
• 別スレッドで動作するため、直接UIに対して
変更をかけることは不可
6

7. OpenGL/ESの初期化
• プロジェクトの作成
OpenGL_Sample
• バージョンの決定(Ver1.5以降であればOK)
7

8. OpenGL/ESの初期化
• パッケージ名の設定
com.example.opengl_sample
8

9. OpenGL/ESの初期化
package com.example.opengl_sample;
import android.app.Activity;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
public class OpenGL_SampleActivity extends Activity {
private GLSurfaceView glSurfaceView;
エラーとなるが無視
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
glSurfaceView = new GLSurfaceView(this);
glSurfaceView.setRenderer(new GLRenderSample());
setContentView(glSurfaceView);
}
9

10. OpenGL/ESの初期化
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
//ここに後でコードを追加します！
}
10

11. OpenGL/ESの初期化
GLRenderSampleの作成
onResume()の後に以下のコードを追加。
class GLRenderSample implements GLSurfaceView.Renderer {
public void onDrawFrame(GL10 gl) {
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
}
public void onSurfaceChanged(GL10 gl, int width, int height) {
gl.glViewport(0, 0, width, height);
}
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
}
11

12. OpenGL/ESの初期化
• 実行！
真っ白な画面になりました
か？
12

13. コード解説
• GLRenderSampleの各メソッド
メソッド名 呼ばれるタイミング
onSurfaceCreated(GL10 gl, EGLConfig eglconfig) GLSurfaceView用のメモリ確保が終了
onSurfaceChanged(GL10 gl, int width, int height) 画面サイズが変更された時
onDrawFrame(GL10 gl) 再描画が必要な時
13

14. コード解説
• 各メソッドの呼び出され方
onSurfaceCreated
onSurfaceChanged
onDrawFrame
呼び出されるタイミングは
端末依存
14

15. コード解説
• 描画範囲の設定
メソッド名 役割
OpenGL/ESの描画範囲を指定する。
glViewport(int x, int y, int width, int height); 「どの座標(x, y)から、幅width、高さheightま
で」を描画範囲とする。
15

16. コード解説
• 描画クリア
メソッド名 役割
画面全体を塗りつぶす色を決定する。RGBA(A
glClearColor(float r, float g, float b, float a); はアルファ値)を指定する。
指定できる範囲は0∼1の実数値。
塗りつぶしを実行する。引数に
glClear(int mask);
GL_COLOR_BUFFER_BITを指定する。
• glClearColorの引数の値を適当に変更して、
いろいろな色で塗りつぶされることを確認し
てみてください。
16

17. OpenGL/ESの座標系
• 座標系の違い
(480,0)
原点(0,0) (0,1)
(Xperiaの場合) (-1,0) (1,0)
原点(0,0)
View
SurfaceView OpenGL
(0,854) (0,-1)
17

18. 三角形を描画する
• 例えば、(0,0),(1,0),(1,1)の3点を結ぶ三角形
を描画する場合・・・
HT-03A Xperia
480px 854px
320px 480px
18

19. 三角形を描画する
• onDrawFrameを修正
public void onDrawFrame(GL10 gl) {
gl.glClearColor(0.0f, 1.0f, 1.0f, 1.0f); //第1引数に変更あり！
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
float positions[] = {
1.0f, 0.0f, 0.0f, /右(1,0)
/
0.0f, 0.0f, 0.0f, /原点(0,0)
/
1.0f, 1.0f, 0.0f, /右上(1,1)
/
};
ByteBuffer bb = ByteBuffer.allocateDirect(positions.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(positions);
19

20. 三角形を描画する
• onDrawFrameを修正(続き)
fb.position(0);
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, fb);
gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);
}
20

21. 三角形を描画する
• 実行！
→水色の背景に白い三角形
が表示されましたか？
→解像度の違う端末でも同
じ画面が表示されました
か？
21

22. コード解説
• 座標の設定
float positions[] = {
1.0f, 0.0f, 0.0f, /右(1,0)
/
0.0f, 0.0f, 0.0f, /原点(0,0)
/
1.0f, 1.0f, 0.0f, /右上(1,1)
/
};
• 浮動小数の1次元配列で表す
• 配列に格納する順番は「頂点1(x,y,z)」「頂点
2(x,y,z)」「頂点3(x,y,z)」・・・とする。
22

23. コード解説
• 座標配列をOpenGL/ESに転送
ByteBuffer bb = ByteBuffer.allocateDirect(positions.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(positions);
fb.position(0);
• 座標配列をOpenGL/ESで扱えるメモリ形式に
変換
• AndroidでOpenGL/ESを扱う際の「おまじな
い」。
23

24. コード解説
• OpenGL/ESは、Android Runtimeではなく
Libraries群(CPU依存)
• Javaの配列などのデータを、そのまま
OpenGL/ESへ転送することはできない
• java.nio.* パッケージを使用して、OpenGL/
ESから直接参照できるようなデータに変換す
る必要がある。
24

25. Androidアーキテクチャ
25

26. コード解説
• GLSurfaceViewに描画する
メソッド名 役割
glVertexPointer()で転送するメモリ情報の種類
を設定する。引数はいろいろあるが、座標情報
glEnableClientState(int array);
を転送する場合は「GL_VERTEX_ARRAY」を
指定する。
位置情報を設定する。
size : 位置情報の要素数。3次元の場合は3。
glVertexPointer(int size, int type, int stride,
type : 位置情報の変数の型。
Buffer pointer);
stride : 常時0。
pointer : OpenGL/ESに転送可能な位置情報
GLSurfaceViewに描画する。
mode : 描画方法を指定する(後ほど説明)
glDrawArrays(int mode, int first, int count);
first : 描画する位置情報の開始位置。
count : 位置情報を使用する数。
26

27. (発展)四角形を描画する
• onDrawFrameを修正
public void onDrawFrame(GL10 gl) {
:
:
float positions[] = {
1.0f, 0.0f, 0.0f, /右(1,0)
/
0.0f, 0.0f, 0.0f, /原点(0,0)
/
1.0f, 1.0f, 0.0f, /右上(1,1)
/
0.0f, 0.0f, 0.0f, /原点(0,0)
/
0.0f, 1.0f, 0.0f, /上(0,1)
/
1.0f, 1.0f, 0.0f, /右上(1,1)
/
};
27

28. (発展)四角形を描画する
• onDrawFrameを修正(続き)
:
:
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, fb);
gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3 * 2);
}
28

29. (発展)四角形を描画する
• 実行！
→水色の背景の右上に、白
い四角形が表示されました
か？
→解像度の違う端末でも同
じ画面が表示されました
か？
29

30. (発展)四角形を描画する
• 三角形を組み合わせれば、どんな多角形でも
作成可能
+ =
30

31. (発展)四角形を描画する
• 重複している座標がある！
public void onDrawFrame(GL10 gl) {
:
:
float positions[] = {
1.0f, 0.0f, 0.0f, /右(1,0)
/
0.0f, 0.0f, 0.0f, /原点(0,0)
/
1.0f, 1.0f, 0.0f, /右上(1,1)
/
0.0f, 0.0f, 0.0f, /原点(0,0)
/
0.0f, 1.0f, 0.0f, /上(0,1)
/
1.0f, 1.0f, 0.0f, /右上(1,1)
/
};
• 座標を使いまわししたい！
31

32. (発展)四角形を描画する
• onDrawFrameを修正
public void onDrawFrame(GL10 gl) {
:
:
float positions[] = {
1.0f, 0.0f, 0.0f, /右(1,0)
/
0.0f, 0.0f, 0.0f, /原点(0,0)
/
1.0f, 1.0f, 0.0f, /右上(1,1)
/
// 0.0f, 0.0f, 0.0f,//原点(0,0)
0.0f, 1.0f, 0.0f,//上(0,1)
// 1.0f, 1.0f, 0.0f,//右上(1,1)
};
32

33. (発展)四角形を描画する
• onDrawFrameを修正(続き)
:
:
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, fb);
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); //第1・3引数変更
}
33

34. (発展)四角形を描画する
• 実行！
→先ほどと同じ画面になり
ましたか？
34

35. glDrawArraysの引数
• glDrawArrays()の第1引数で指定する値(定数)
により、描画方法を変更することができる。
引数 説明
GL10.GL_POINTS 点
GL10.GL_LINES 直線
GL10.GL_LINE_STRIP 折れ線
GL10.GL_TRIANGLES 三角形
GL10.GL_TRIANGLE_STRIP 1辺を共有しながら帯状に三角形を描画する
GL10.GL_TRIANGLE_FAN 1点を共有しながら扇状に三角形を描画する
35

36. glDrawArraysの引数
• 描画方法の違い
public void onDrawFrame(GL10 gl) {
:
:
float positions[] = {
① 1.0f, 0.0f, 0.0f, /右(1,0)
/
② 0.0f, 0.0f, 0.0f, /原点(0,0)
/
③ 1.0f, 1.0f, 0.0f, /右上(1,1)
/
④ 0.0f, 1.0f, 0.0f,//上(0,1)
};
:
:
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); //第1・3引数変更
}
36

37. GL_POINTS
• 点(1px)を描画する
④ ③
② ①
37

38. GL_LINES
• 直線を描画する時に使う
• 座標の描画順は、①②→③④→⑤⑥→
④ ③
② ①
38

39. GL_LINE_STRIP
• 直線を描画する時に使う
• 座標の描画順は、①②→②③→③④→④⑤→
④ ③
② ①
39

40. GL_TRIANGLE_STRIP
• 隣接した三角形を描画する時に使う
• 座標の描画順は、①②③→②③④→③④⑤→
④ ③ ④ ③
② ① ② ①
40

41. GL_TRIANGLE_FAN
• 扇形を描画する時に使う
• 座標の描画順は、①②③→①③④→①④⑤→
④ ③ ④ ③
② ① ② ①
41

42. GL_TRIANGLE_FAN
• 引数を変更して実行する
と、右の図形が描画されま
す。
42

43. 色をつける
• onDrawFrameを修正
public void onDrawFrame(GL10 gl) {
:
:
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, fb);
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f); //追加
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);
}
43

44. 色をつける
• 実行！
→水色の背景の右上に、赤
い四角形が表示されました
か？
44

45. コード解説
• 描画色を指定する
メソッド名 役割
描画色を決定する。RGBA(Aはアルファ値)を指
glColor4f(float r, float g, float b, float a); 定する。
指定できる範囲は0∼1の実数値。
• glColor4fの引数の値を適当に変更して、いろ
いろな色で塗りつぶされることを確認してみ
てください。
45

46. • 本日のハンズオンはここまでです。お疲れ様
でした。
• 今回は、単純に三角形を描画するのみでした
が、任意の場所への描画や回転、拡大・縮
小、任意画像の描画などもできます。
• ・・・が、数学(行列)の知識が必要となります
ので、次回（？）のハンズオンにできればと
思っております。
46