AndroidOpenGL/ES ハンズオン              Smart.LABO         丹所 育男(tan1234jp)                            1
自己紹介• 丹所 育男(たんしょ いくお)• 春日井市出身・自宅は名古屋市・実家は可児市• 講師→制御系→ネットワーク系→業務系→制御系→    システム保守→制御系→業務系→携帯アプリ•   2011年6月に「SMART.LABO」として独立...
OpenGL/ESとは?• OpenGL Embedded Subsetの略• 3Dコンピュータグラフィックス用APIのサブ    セットで、3D空間に浮かんだ頂点を結んだ図    形を描画することに特化している。•   主に携帯電話などの組み...
描画APIのサポート      Canvas      OpenGL/ES•   点           • 点•   直線          • 直線•   三角形         • 三角形•   四角形•   五角形以上の多角形•   円...
AndroidのView• Androidには、3種類のViewがある。 →View,SurfaceView,GLSurfaceView• OpenGLでは、GLSurfaceViewを継承したも のを使う。                  ...
GLSurfaceView• OpenGLの描画に特化したView• 描画タイミングは端末依存(プログラマが決め    ることもできる)•   別スレッドで動作するため、直接UIに対して    変更をかけることは不可              ...
OpenGL/ESの初期化• プロジェクトの作成                OpenGL_Sample• バージョンの決定(Ver1.5以降であればOK)                                7
OpenGL/ESの初期化• パッケージ名の設定      com.example.opengl_sample                                  8
OpenGL/ESの初期化package com.example.opengl_sample;import android.app.Activity;import android.opengl.GLSurfaceView;import andr...
OpenGL/ESの初期化	   @Override	   protected void onPause() {	   	   super.onPause();	   	   glSurfaceView.onPause();	   }	   @...
OpenGL/ESの初期化        GLRenderSampleの作成        onResume()の後に以下のコードを追加。	   class GLRenderSample implements GLSurfaceView.Ren...
OpenGL/ESの初期化• 実行! 真っ白な画面になりました か?                12
コード解説   • GLRenderSampleの各メソッド メソッド名                                    呼ばれるタイミングonSurfaceCreated(GL10 gl, EGLConfig eglcon...
コード解説• 各メソッドの呼び出され方     onSurfaceCreated     onSurfaceChanged       onDrawFrame              呼び出されるタイミングは                 ...
コード解説   • 描画範囲の設定 メソッド名                                    役割                                                 OpenGL/ESの描画...
コード解説    • 描画クリア  メソッド名                             役割                                              画面全体を塗りつぶす色を決定する。RGBA(...
OpenGL/ESの座標系• 座標系の違い                     (480,0)  原点(0,0)                               (0,1)    (Xperiaの場合)             ...
三角形を描画する• 例えば、(0,0),(1,0),(1,1)の3点を結ぶ三角形    を描画する場合・・・        HT-03A             Xperia480px              854px        320...
三角形を描画する• onDrawFrameを修正	   public void onDrawFrame(GL10 gl) {	   	   gl.glClearColor(0.0f, 1.0f, 1.0f, 1.0f); //第1引数に変更あり...
三角形を描画する• onDrawFrameを修正(続き)		   	   fb.position(0);	   	   		   	   gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);	   	   ...
三角形を描画する• 実行! →水色の背景に白い三角形 が表示されましたか? →解像度の違う端末でも同 じ画面が表示されました か?                21
コード解説• 座標の設定float positions[] = {	   	    	   	   1.0f, 0.0f, 0.0f,	/右(1,0)                                  /	   	   	   ...
コード解説• 座標配列をOpenGL/ESに転送  ByteBuffer bb = ByteBuffer.allocateDirect(positions.length * 4);  bb.order(ByteOrder.nativeOrder...
コード解説• OpenGL/ESは、Android Runtimeではなく  Libraries群(CPU依存)• Javaの配列などのデータを、そのまま  OpenGL/ESへ転送することはできない• java.nio.* パッケージを使用し...
Androidアーキテクチャ                 25
コード解説   • GLSurfaceViewに描画する メソッド名                                   役割                                                glV...
(発展)四角形を描画する• onDrawFrameを修正	   public void onDrawFrame(GL10 gl) {	   	   	    :	   	   	    :	   	   float positions[] = ...
(発展)四角形を描画する• onDrawFrameを修正(続き)	   	   	   :	   	   	   :	   	   gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);	   	   gl....
(発展)四角形を描画する• 実行! →水色の背景の右上に、白 い四角形が表示されました か? →解像度の違う端末でも同 じ画面が表示されました か?                29
(発展)四角形を描画する• 三角形を組み合わせれば、どんな多角形でも 作成可能        +      =                         30
(発展)四角形を描画する• 重複している座標がある!	   public void onDrawFrame(GL10 gl) {	   	   	    :	   	   	    :	   	   float positions[] = {	...
(発展)四角形を描画する• onDrawFrameを修正	   public void onDrawFrame(GL10 gl) {	   	   	    :	   	   	    :	   	       float positions[...
(発展)四角形を描画する• onDrawFrameを修正(続き)    	   	   	   :    	   	   	   :	 		       	   gl.glEnableClientState(GL10.GL_VERTEX_ARR...
(発展)四角形を描画する• 実行! →先ほどと同じ画面になり ましたか?                34
glDrawArraysの引数• glDrawArrays()の第1引数で指定する値(定数)  により、描画方法を変更することができる。 引数                       説明GL10.GL_POINTS           点...
glDrawArraysの引数• 描画方法の違い	   public void onDrawFrame(GL10 gl) {	   	   	    :	   	   	    :	   	   float positions[] = {	  ...
GL_POINTS• 点(1px)を描画する                ④   ③                ②   ①                        37
GL_LINES• 直線を描画する時に使う• 座標の描画順は、①②→③④→⑤⑥→           ④   ③           ②   ①                      38
GL_LINE_STRIP• 直線を描画する時に使う• 座標の描画順は、①②→②③→③④→④⑤→          ④     ③          ②     ①                         39
GL_TRIANGLE_STRIP• 隣接した三角形を描画する時に使う• 座標の描画順は、①②③→②③④→③④⑤→      ④   ③    ④    ③      ②   ①    ②    ①                       ...
GL_TRIANGLE_FAN• 扇形を描画する時に使う• 座標の描画順は、①②③→①③④→①④⑤→      ④   ③    ④   ③      ②   ①    ②   ①                         41
GL_TRIANGLE_FAN• 引数を変更して実行する と、右の図形が描画されま す。                  42
色をつける• onDrawFrameを修正	   public void onDrawFrame(GL10 gl) {	   	   	    :	   	   	    :	 		   	   gl.glEnableClientState(G...
色をつける• 実行! →水色の背景の右上に、赤 い四角形が表示されました か?                44
コード解説  • 描画色を指定する  メソッド名                                       役割                                             描画色を決定する。RGB...
• 本日のハンズオンはここまでです。お疲れ様 でした。• 今回は、単純に三角形を描画するのみでした が、任意の場所への描画や回転、拡大・縮 小、任意画像の描画などもできます。• ・・・が、数学(行列)の知識が必要となります ので、次回(?)のハ...
Upcoming SlideShare
Loading in …5
×

Android OpenGL HandsOn

2,651 views

Published on

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

Published in: Self Improvement
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,651
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
24
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Android OpenGL HandsOn

  1. 1. AndroidOpenGL/ES ハンズオン Smart.LABO 丹所 育男(tan1234jp) 1
  2. 2. 自己紹介• 丹所 育男(たんしょ いくお)• 春日井市出身・自宅は名古屋市・実家は可児市• 講師→制御系→ネットワーク系→業務系→制御系→ システム保守→制御系→業務系→携帯アプリ• 2011年6月に「SMART.LABO」として独立• Androidアプリの開発がメイン(iPhone,Coronaも)• Twitter : @tan1234jp 2
  3. 3. OpenGL/ESとは?• OpenGL Embedded Subsetの略• 3Dコンピュータグラフィックス用APIのサブ セットで、3D空間に浮かんだ頂点を結んだ図 形を描画することに特化している。• 主に携帯電話などの組み込みシステムや、 ゲーム専用機で使われている。 →iOS, Android, Symbian OS, →PlayStation3、Nintendo 3DS 3
  4. 4. 描画APIのサポート Canvas OpenGL/ES• 点 • 点• 直線 • 直線• 三角形 • 三角形• 四角形• 五角形以上の多角形• 円• 文字 4
  5. 5. AndroidのView• Androidには、3種類のViewがある。 →View,SurfaceView,GLSurfaceView• OpenGLでは、GLSurfaceViewを継承したも のを使う。 5
  6. 6. GLSurfaceView• OpenGLの描画に特化したView• 描画タイミングは端末依存(プログラマが決め ることもできる)• 別スレッドで動作するため、直接UIに対して 変更をかけることは不可 6
  7. 7. OpenGL/ESの初期化• プロジェクトの作成 OpenGL_Sample• バージョンの決定(Ver1.5以降であればOK) 7
  8. 8. OpenGL/ESの初期化• パッケージ名の設定 com.example.opengl_sample 8
  9. 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. 10. OpenGL/ESの初期化 @Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); } @Override protected void onResume() { super.onResume(); glSurfaceView.onResume(); } //ここに後でコードを追加します!} 10
  11. 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. 12. OpenGL/ESの初期化• 実行! 真っ白な画面になりました か? 12
  13. 13. コード解説 • GLRenderSampleの各メソッド メソッド名 呼ばれるタイミングonSurfaceCreated(GL10 gl, EGLConfig eglconfig) GLSurfaceView用のメモリ確保が終了onSurfaceChanged(GL10 gl, int width, int height) 画面サイズが変更された時onDrawFrame(GL10 gl) 再描画が必要な時 13
  14. 14. コード解説• 各メソッドの呼び出され方 onSurfaceCreated onSurfaceChanged onDrawFrame 呼び出されるタイミングは 端末依存 14
  15. 15. コード解説 • 描画範囲の設定 メソッド名 役割 OpenGL/ESの描画範囲を指定する。glViewport(int x, int y, int width, int height); 「どの座標(x, y)から、幅width、高さheightま で」を描画範囲とする。 15
  16. 16. コード解説 • 描画クリア メソッド名 役割 画面全体を塗りつぶす色を決定する。RGBA(AglClearColor(float r, float g, float b, float a); はアルファ値)を指定する。 指定できる範囲は0∼1の実数値。 塗りつぶしを実行する。引数にglClear(int mask); GL_COLOR_BUFFER_BITを指定する。 • glClearColorの引数の値を適当に変更して、 いろいろな色で塗りつぶされることを確認し てみてください。 16
  17. 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. 18. 三角形を描画する• 例えば、(0,0),(1,0),(1,1)の3点を結ぶ三角形 を描画する場合・・・ HT-03A Xperia480px 854px 320px 480px 18
  19. 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. 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. 三角形を描画する• 実行! →水色の背景に白い三角形 が表示されましたか? →解像度の違う端末でも同 じ画面が表示されました か? 21
  22. 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. 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. 24. コード解説• OpenGL/ESは、Android Runtimeではなく Libraries群(CPU依存)• Javaの配列などのデータを、そのまま OpenGL/ESへ転送することはできない• java.nio.* パッケージを使用して、OpenGL/ ESから直接参照できるようなデータに変換す る必要がある。 24
  25. 25. Androidアーキテクチャ 25
  26. 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. 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. 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. (発展)四角形を描画する• 実行! →水色の背景の右上に、白 い四角形が表示されました か? →解像度の違う端末でも同 じ画面が表示されました か? 29
  30. 30. (発展)四角形を描画する• 三角形を組み合わせれば、どんな多角形でも 作成可能 + = 30
  31. 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. 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. 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. (発展)四角形を描画する• 実行! →先ほどと同じ画面になり ましたか? 34
  35. 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. 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. 37. GL_POINTS• 点(1px)を描画する ④ ③ ② ① 37
  38. 38. GL_LINES• 直線を描画する時に使う• 座標の描画順は、①②→③④→⑤⑥→ ④ ③ ② ① 38
  39. 39. GL_LINE_STRIP• 直線を描画する時に使う• 座標の描画順は、①②→②③→③④→④⑤→ ④ ③ ② ① 39
  40. 40. GL_TRIANGLE_STRIP• 隣接した三角形を描画する時に使う• 座標の描画順は、①②③→②③④→③④⑤→ ④ ③ ④ ③ ② ① ② ① 40
  41. 41. GL_TRIANGLE_FAN• 扇形を描画する時に使う• 座標の描画順は、①②③→①③④→①④⑤→ ④ ③ ④ ③ ② ① ② ① 41
  42. 42. GL_TRIANGLE_FAN• 引数を変更して実行する と、右の図形が描画されま す。 42
  43. 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. 色をつける• 実行! →水色の背景の右上に、赤 い四角形が表示されました か? 44
  45. 45. コード解説 • 描画色を指定する メソッド名 役割 描画色を決定する。RGBA(Aはアルファ値)を指glColor4f(float r, float g, float b, float a); 定する。 指定できる範囲は0∼1の実数値。 • glColor4fの引数の値を適当に変更して、いろ いろな色で塗りつぶされることを確認してみ てください。 45
  46. 46. • 本日のハンズオンはここまでです。お疲れ様 でした。• 今回は、単純に三角形を描画するのみでした が、任意の場所への描画や回転、拡大・縮 小、任意画像の描画などもできます。• ・・・が、数学(行列)の知識が必要となります ので、次回(?)のハンズオンにできればと 思っております。 46

×