05．モデルビューアレンダラクラスを作る

（開発環境として「Eclipse」を使用した、古い情報です。
　開発環境として「Android Studio」を使用した、新しい情報は、
　「ホーム > プログラミング > モデルビューアを作る ( Android + OpenGL ES 1.0/1.1 ) ( Android Studio 2.3.3 版 )」）

・描画要素（点、線、面）のON/OFF
・ピック要素（点、線、面）のON/OFF

上記機能を有するモデルビューアレンダラクラスを、ピックOpenGLレンダラクラスの派生クラスとして作成します。

・１本指ドラッグのトラッキングモード切り替え

上記機能を有するようにモデルビューアビュークラスを修正します。

使用開発環境は、Eclipse 3.7.2 ベースの Pleiades です。

解説

02.で作成したモデルビューアは、スピンは１本指ドラッグ、ズームは２本指ドラッグ、パンも２本指ドラッグで、２本指ドラッグの開始時の２本の指の距離に応じて、パンとズームを切り替えるとしていました。
この方式の場合、パンしたいのにズームになる、ズームしたいのにパンになることが結構な頻度で起こるので、２本指ドラッグは、ズームに固定し、１本指ドラッグは、スピン、ズーム、パンに切り替えられるように、モデルビューアビュークラスを修正します。

ワイヤーフレーム表示にしたり、サーフェース表示にしたりできるように、描画要素（点、線、面）のON/OFFの設定に応じて描画処理を行うレンダラクラスを作成します。

ピックする要素として、点のみピックできるようにしたり、面のみピックできるようにしたりできるように、ピック要素（点、線、面）のON/OFFの設定に応じてピック処理を行うレンダラクラスを作成します。

１本指ドラッグのトラッキングモード切り替え、描画要素（点、線、面）のON/OFF、ピック要素（点、線、面）のON/OFFに関するＧＵＩを、オプションメニューとして作成します。

実装

プロジェクトを開く

04．で作成したモデルビューアプロジェクトを開きます。

モデルビューアレンダラクラスの作成

１本指ドラッグのトラッキングモード切り替え、描画要素（点、線、面）のON／OFF、ピック要素（点、線、面）のON／OFF、の状態変数を持ち、状態変数に応じた処理を行う、モデルビューアレンダラクラスを、ピックOpenGLレンダラクラスの派生クラスとして作成します。

パッケージエクスプローラで、作成したプロジェクトの下の「src」の下の作成したパッケージを右クリックし、 右クリックメニューの「新規 > クラス」 を選択します。


名前 にクラス名「ModelViewerRenderer」、
スーパークラスに、「OpenGLPickRenderer」、
を入力し、「完了」ボタンを押します。

モデルビューアレンダラクラスにメンバ変数、コンストラクタの追加の追加

モデルビューアレンダラクラスに、描画要素（点、線、面）のON／OFF、ピック要素（点、線、面）のON／OFF、の状態変数メンバ変数として追加します。

また、コンストラクタを追加、状態変数の初期値を設定します。

public class ModelViewerRenderer extends OpenGLPickRenderer { public boolean m_bRenderPoint; public boolean m_bRenderLine; public boolean m_bRenderFace; public boolean m_bPickPoint; public boolean m_bPickLine; public boolean m_bPickFace; public ModelViewerRenderer() { m_bRenderPoint = true; m_bRenderLine = true; m_bRenderFace = true; m_bPickPoint = true; m_bPickLine = true; m_bPickFace = true; } }

モデル描画関数のオーバーライド

モデルビューアのレンダラクラスに描画要素のON/OFFに対応した要素描画処理 RenderScene関数 を追加します。

ModelViewerRendererクラスに、シーン描画関数をオーバーライド関数として追加します。

public class ModelViewerRenderer extends OpenGLPickRenderer { （・・・省略・・・） @Override protected void renderModel( ERENDERMODE eRenderMode ) { Model model = getModel(); if( null == model || null == model.getVertexBuffer() ) { return; } GL10 gl = getGL(); if( false == gl instanceof GL11 ) { return; } GL11 gl11 = (GL11)gl; // 頂点配列の有効化 gl.glEnableClientState( GL10.GL_VERTEX_ARRAY ); // 頂点配列の指定 gl.glVertexPointer( 3, GL10.GL_FLOAT, 0, model.getVertexBuffer() ); // 面の描画 if( m_bRenderFace && null != model.getTriangleVertexIndexBuffer() ) { if( ERENDERMODE.RM_PICK_ELEMENTID == eRenderMode ) { gl.glEnableClientState( GL10.GL_COLOR_ARRAY ); gl.glColorPointer( 4, // Must be 4. GL10.GL_UNSIGNED_BYTE, 0, getTriangleIdColorBuffer() ); } else if( ERENDERMODE.RM_PICK_ELEMENTTYPE == eRenderMode ) { gl.glColor4f( 1.0f, 0.0f, 0.0f, 1.0f ); } else { gl.glColor4f( 0.5f, 0.5f, 0.0f, 1.0f ); } gl.glDrawElements( GL10.GL_TRIANGLES, model.getTriangleVertexIndexBuffer().capacity(), GL10.GL_UNSIGNED_SHORT, model.getTriangleVertexIndexBuffer().position( 0 ) ); gl.glDisableClientState( GL10.GL_COLOR_ARRAY ); // ピック面の描画 if( ERENDERMODE.RM_RENDER == eRenderMode ) { if( ERENDERELEMENTTYPE.RET_FACE.getValue() == m_aiName[1] ) { int iIndexTriangle = m_aiName[2]; gl.glColor4f( 1.0f, 1.0f, 0.0f, 1.0f ); gl.glDrawElements( GL10.GL_TRIANGLES, 3, GL10.GL_UNSIGNED_SHORT, model.getTriangleVertexIndexBuffer().position( 3 * iIndexTriangle ) ); } } } // 線の描画 if( m_bRenderLine && null != model.getEdgeVertexIndexBuffer() ) { gl.glLineWidth( 2.0f ); if( ERENDERMODE.RM_PICK_ELEMENTID == eRenderMode ) { int iCountTriangle = model.getTriangleCount(); int iIndexTriangle; int i3; int iIndexEdge; byte[] abtRGB = { 0, 0, 0 }; for( iIndexTriangle = 0; iIndexTriangle < iCountTriangle; ++iIndexTriangle ) { for( i3 = 0; i3 < 3; ++i3 ) { iIndexEdge = iIndexTriangle * 3 + i3; index2rgb( iIndexEdge, abtRGB ); gl11.glColor4ub( abtRGB[0], abtRGB[1], abtRGB[2], (byte)255 ); gl.glDrawElements( GL10.GL_LINES, 2, GL10.GL_UNSIGNED_SHORT, model.getEdgeVertexIndexBuffer().position( 2 * iIndexEdge ) ); } } } else { if( ERENDERMODE.RM_PICK_ELEMENTTYPE == eRenderMode ) { gl.glColor4f( 0.0f, 1.0f, 0.0f, 1.0f ); } else { gl.glColor4f( 0.0f, 0.5f, 0.5f, 1.0f ); } gl.glDrawElements( GL10.GL_LINES, model.getEdgeVertexIndexBuffer().capacity(), GL10.GL_UNSIGNED_SHORT, model.getEdgeVertexIndexBuffer().position( 0 ) ); } // ピック線の描画 if( ERENDERMODE.RM_RENDER == eRenderMode ) { if( ERENDERELEMENTTYPE.RET_LINE.getValue() == m_aiName[1] ) { int iIndexEdge = m_aiName[2]; gl.glLineWidth( 5.0f ); gl.glColor4f( 0.0f, 1.0f, 1.0f, 1.0f ); gl.glDrawElements( GL10.GL_LINES, 2, GL10.GL_UNSIGNED_SHORT, model.getEdgeVertexIndexBuffer().position( 2 * iIndexEdge ) ); } } } // 点の描画 if( m_bRenderPoint ) // && null != model.getVertexBuffer() ) { gl.glPointSize( 5.0f ); if( ERENDERMODE.RM_PICK_ELEMENTID == eRenderMode ) { gl.glEnableClientState( GL10.GL_COLOR_ARRAY ); gl.glColorPointer( 4, // Must be 4. GL10.GL_UNSIGNED_BYTE, 0, getVertexIdColorBuffer() ); } else if( ERENDERMODE.RM_PICK_ELEMENTTYPE == eRenderMode ) { gl.glColor4f( 0.0f, 0.0f, 1.0f, 1.0f ); } else { gl.glColor4f( 0.5f, 0.0f, 0.5f, 1.0f ); } gl.glDrawArrays( GL10.GL_POINTS, 0, model.getVertexCount() ); gl.glDisableClientState( GL10.GL_COLOR_ARRAY ); // ピック点の描画 if( ERENDERMODE.RM_RENDER == eRenderMode ) { if( ERENDERELEMENTTYPE.RET_POINT.getValue() == m_aiName[1] ) { gl.glPointSize( 10.0f ); gl.glColor4f( 1.0f, 0.0f, 1.0f, 1.0f ); int iIndexPoint = m_aiName[2]; gl.glDrawArrays( GL10.GL_POINTS, iIndexPoint, 1 ); } } } // 頂点配列の無効化 gl.glDisableClientState( GL10.GL_VERTEX_ARRAY ); } }

ピックピクセルを一つに絞る関数のオーバーライド

モデルビューアのレンダラクラスにピックピクセルを一つに絞る関数のオーバーライドし、ピック要素の設定がOFFの要素は選ばれないような処理を追加します。

public class ModelViewerRenderer extends OpenGLPickRenderer { （・・・省略・・・） @Override protected void DecidePickNameArray( int[][] aaiName ) { int iId_selected = -1; int iElementType_selected = ERENDERELEMENTTYPE.RET_FACE.getValue() + 1; long lSquareDist_selected = ( 2 + PICKREGIONOFFSET ) * ( 2 + PICKREGIONOFFSET ) + ( 2 + PICKREGIONOFFSET ) * ( 2 + PICKREGIONOFFSET ); long lSquareDist_current; int x; int y; for( int i = 0; i < aaiName.length; ++i ) { if( 0 == aaiName[i][1] ) { // モデルの外側 continue; } if( !m_bPickPoint && ERENDERELEMENTTYPE.RET_POINT.getValue() == aaiName[i][1] ) { // 点ピックOFFの場合は、点はピックできない continue; } if( !m_bPickLine && ERENDERELEMENTTYPE.RET_LINE.getValue() == aaiName[i][1] ) { // 線ピックOFFの場合は、線はピックできない continue; } if( !m_bPickFace && ERENDERELEMENTTYPE.RET_FACE.getValue() == aaiName[i][1] ) { // 面ピックOFFの場合は、面はピックできない continue; } if( iElementType_selected < aaiName[i][1] ) { // 要素タイプ的に、優先順位が低い continue; } if( iElementType_selected > aaiName[i][1] ) { // 要素タイプ的に、優先順位が低い iId_selected = i; iElementType_selected = aaiName[i][1]; x = i % ( 1 + 2 * PICKREGIONOFFSET ) - PICKREGIONOFFSET; y = i / ( 1 + 2 * PICKREGIONOFFSET ) - PICKREGIONOFFSET; lSquareDist_selected = x * x + y * y; continue; } // 要素タイプ的に、優先順位が同じ場合は、ピック領域の中心に近いものが優先度が高い。 x = i % ( 1 + 2 * PICKREGIONOFFSET ) - PICKREGIONOFFSET; y = i / ( 1 + 2 * PICKREGIONOFFSET ) - PICKREGIONOFFSET; lSquareDist_current = x * x + y * y; if( lSquareDist_selected > lSquareDist_current ) { iId_selected = i; iElementType_selected = aaiName[i][1]; lSquareDist_selected = lSquareDist_current; continue; } } if( -1 != iId_selected ) { // 名前列メンバの更新 System.arraycopy( aaiName[iId_selected], 0, m_aiName, 0, NAMEARRAYSIZE ); } } （・・・省略・・・） }

モデルビューアビュークラスのレンダラオブジェクトの型の修正

モデルビューアレンダラクラスの作成にあわせて、モデルビューアビュークラスのレンダラオブジェクトの型を修正します。

・m_rendererメンバ変数を、ModelViewerRenderer型に変更します。
・m_rendererメンバ変数の生成を、ModelViewerRendererオブジェクト生成に変更します。

public class ModelViewerView extends GLSurfaceView implements GestureDetector.OnGestureListener { ModelViewerRenderer m_renderer; private GestureDetector m_gesturedetector; // 長押し用 public ModelViewerView( Context context ) { super( context ); // Rendererの作成 m_renderer = new ModelViewerRenderer(); // GLSurfaceViewにRendererをセット setRenderer( m_renderer ); // 絶え間ないレンダリングではなく都度のレンダリング（setRenderer()よりも後に呼び出す必要あり） setRenderMode( GLSurfaceView.RENDERMODE_WHEN_DIRTY ); // モデルの作成および登録 m_renderer.setModel( makeModel() ); // GestureDetectorの作成 m_gesturedetector = new GestureDetector( context, this ); } （・・・省略・・・） }

モデルビューアビュークラスに１本指ドラッグのトラッキングモードの切り替え処理の追加

１本指ドラッグのトラッキングモードの切り替え処理を行うために、以下を、モデルビューアビュークラスに追加します。

• １本指ドラッグで行うトラッキングモードを保持するメンバ変数の追加
• コンストラクタで、１本指ドラッグで行うトラッキングモードの初期値の設定
• タッチイベント処理関数である onTouchEvent関数内の、１本指ドラッグの開始処理で、１本指ドラッグのトラッキングモードを指定する。

また、２本指ドラッグは、ドラッグ開始時の２つの指の距離に応じてズームとパンを切り替えていたのを、２本指ドラッグは、ズームだけに変更します。

また、Rendererメンバ変数のゲッターを追加します。

public class ModelViewerView extends GLSurfaceView implements GestureDetector.OnGestureListener { ModelViewerRenderer m_renderer; private GestureDetector m_gesturedetector; // 長押し用 public ETRACKINGMODE m_eTrackingMode_1fingerdrag; // １本指ドラッグで行うトラッキングモード public ModelViewerRenderer getRenderer() { return m_renderer; } public ModelViewerView( Context context ) { super( context ); // １本指ドラッグで行うトラッキングモード m_eTrackingMode_1fingerdrag = ETRACKINGMODE.TM_SPIN; （・・・省略・・・） } @Override public boolean onTouchEvent( MotionEvent event ) { // ジェスチャ処理 if( m_gesturedetector.onTouchEvent( event ) ) { return true; } int action = event.getAction(); int pointcount = event.getPointerCount(); final float fX = event.getX(); final float fY = event.getY(); switch( action & MotionEvent.ACTION_MASK ) { // トラッキングの開始 case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_POINTER_DOWN: if( 1 == pointcount ) { // １つの指でドラッグ＝＞スピン // １本指ドラッグで行うトラッキングモードを指定する m_renderer.beginTracking( fX, fY, m_eTrackingMode_1fingerdrag ); } else if( 2 == pointcount ) { // ２つの指でドラッグ＝＞ズーム float fX1 = event.getX( 1 ); float fY1 = event.getY( 1 ); final float fDistance = FloatMath.sqrt( ( fX1 - fX ) * ( fX1 - fX ) + ( fY1 - fY ) * ( fY1 - fY ) ); m_renderer.beginTracking( -fDistance, -fDistance, ETRACKINGMODE.TM_ZOOM ); } break; （・・・省略・・・） } return true; } （・・・省略・・・） }

メインアクティビティクラスにオプションメニューの追加

１本指ドラッグのトラッキングモード切り替え、描画要素（点、線、面）のON/OFF、ピック要素（点、線、面）のON/OFFに関するＧＵＩを、オプションメニューとして作成します。オプションメニュー作成処理を追加します。オプションメニュー項目選択時の処理も追加します。

public class ModelViewerEtudeActivity extends Activity { // オプションメニューID private static final int MENUGROUP_1FINGERDRAG = 10; private static final int MENUID_1FINGERDRAG_NONE = 11; private static final int MENUID_1FINGERDRAG_SPIN = 12; private static final int MENUID_1FINGERDRAG_PAN = 13; private static final int MENUID_1FINGERDRAG_ZOOM = 14; private static final int MENUID_RENDER_POINT = 21; private static final int MENUID_RENDER_LINE = 22; private static final int MENUID_RENDER_FACE = 23; private static final int MENUID_PICK_POINT = 31; private static final int MENUID_PICK_LINE = 32; private static final int MENUID_PICK_FACE = 33; （・・・省略・・・） // オプションメニュー生成時 @Override public boolean onCreateOptionsMenu( Menu menu ) { super.onCreateOptionsMenu( menu ); MenuItem menuitem; SubMenu submenu; submenu = menu.addSubMenu( "1 Finger Drag..." ); menuitem = submenu.add( MENUGROUP_1FINGERDRAG, MENUID_1FINGERDRAG_NONE, 1, "None" ); menuitem.setChecked( ETRACKINGMODE.TM_NONE == m_modelviewerview.m_eTrackingMode_1fingerdrag ); menuitem = submenu.add( MENUGROUP_1FINGERDRAG, MENUID_1FINGERDRAG_SPIN, 2, "Spin" ); menuitem.setChecked( ETRACKINGMODE.TM_SPIN == m_modelviewerview.m_eTrackingMode_1fingerdrag ); menuitem = submenu.add( MENUGROUP_1FINGERDRAG, MENUID_1FINGERDRAG_PAN, 3, "Pan" ); menuitem.setChecked( ETRACKINGMODE.TM_PAN == m_modelviewerview.m_eTrackingMode_1fingerdrag ); menuitem = submenu.add( MENUGROUP_1FINGERDRAG, MENUID_1FINGERDRAG_ZOOM, 4, "Zoom" ); menuitem.setChecked( ETRACKINGMODE.TM_ZOOM == m_modelviewerview.m_eTrackingMode_1fingerdrag ); submenu.setGroupCheckable( MENUGROUP_1FINGERDRAG, true, true ); submenu = menu.addSubMenu( "Render..." ); menuitem = submenu.add( 0, MENUID_RENDER_POINT, 1, "Point" ); menuitem.setCheckable( true ); menuitem.setChecked( m_modelviewerview.getRenderer().m_bRenderPoint ); menuitem = submenu.add( 0, MENUID_RENDER_LINE, 2, "Line" ); menuitem.setCheckable( true ); menuitem.setChecked( m_modelviewerview.getRenderer().m_bRenderLine ); menuitem = submenu.add( 0, MENUID_RENDER_FACE, 3, "Face" ); menuitem.setCheckable( true ); menuitem.setChecked( m_modelviewerview.getRenderer().m_bRenderFace ); submenu = menu.addSubMenu( "Pick..." ); menuitem = submenu.add( 0, MENUID_PICK_POINT, 1, "Point" ); menuitem.setCheckable( true ); menuitem.setChecked( m_modelviewerview.getRenderer().m_bPickPoint ); menuitem = submenu.add( 0, MENUID_PICK_LINE, 2, "Line" ); menuitem.setCheckable( true ); menuitem.setChecked( m_modelviewerview.getRenderer().m_bPickLine ); menuitem = submenu.add( 0, MENUID_PICK_FACE, 3, "Face" ); menuitem.setCheckable( true ); menuitem.setChecked( m_modelviewerview.getRenderer().m_bPickFace ); return true; } // オプションメニュー選択時 @Override public boolean onOptionsItemSelected( MenuItem item ) { switch( item.getItemId() ) { case MENUID_1FINGERDRAG_NONE: item.setChecked( true ); m_modelviewerview.m_eTrackingMode_1fingerdrag = ETRACKINGMODE.TM_NONE; return true; case MENUID_1FINGERDRAG_SPIN: item.setChecked( true ); m_modelviewerview.m_eTrackingMode_1fingerdrag = ETRACKINGMODE.TM_SPIN; return true; case MENUID_1FINGERDRAG_PAN: item.setChecked( true ); m_modelviewerview.m_eTrackingMode_1fingerdrag = ETRACKINGMODE.TM_PAN; return true; case MENUID_1FINGERDRAG_ZOOM: item.setChecked( true ); m_modelviewerview.m_eTrackingMode_1fingerdrag = ETRACKINGMODE.TM_ZOOM; return true; case MENUID_RENDER_POINT: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bRenderPoint = item.isChecked(); m_modelviewerview.requestRender(); // 再描画 return true; case MENUID_RENDER_LINE: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bRenderLine = item.isChecked(); m_modelviewerview.requestRender(); // 再描画 return true; case MENUID_RENDER_FACE: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bRenderFace = item.isChecked(); m_modelviewerview.requestRender(); // 再描画 return true; case MENUID_PICK_POINT: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bPickPoint = item.isChecked(); return true; case MENUID_PICK_LINE: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bPickLine = item.isChecked(); return true; case MENUID_PICK_FACE: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bPickFace = item.isChecked(); return true; } return false; } }

画面の縦横切り替えに対応する

画面の縦横切り替えに対応します。

画面の縦横が切り替わると、アクティビティは、onPause()、onStop()、onDestroy()、と処理され、アクティビティは終了し、再度、アクティビティの生成、onCreate()、onStart()と処理されます。

なぜこのような動作をするのかというと、デフォルトの実装として、アクティビティのコンフィギュレーションが変更された場合には、コンフィギュレーションにあうようにアクティビティを再構築する実装がなされているためです。

「特定のコンフィギュレーション（今回は画面の向き）の変更には、自前で対応する」という宣言することで、アクティビティの再構築を回避することができます。

AndroidManifest.xml のメインアクティビティの設定に、
android:configChanges="keyboardHidden|orientation"
という記述を、直接追記、もしくは、GUI操作で追記します。

上記記述により、画面の縦横の切り替え時の、アクティビティの再構築は行われなくなります。（代わりに、onConfigurationChanged()が呼ばれます。）

（上記追記を実施したところ、「targetSdkVersionに関する記述をすべき」という旨の警告が出たので、
　<uses-sdk android:minSdkVersion="7"/>
　を
　<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="7" />
　と書き換えました。）

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hiramine.modelvieweretude" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="7"/> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".ModelViewerEtudeActivity" android:label="@string/app_name" android:configChanges="keyboardHidden|orientation"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

実行

Android Virtual Device にて、動作確認。

※ ターゲット：「Android 4.0.3 - API Level 15」、ハードウェア：「GPU emulation」をyes、として作成したAndroid Virtual Device にて動作確認。

オプションメニューから
１本指ドラッグのトラッキングモード切り替え
描画要素（点、線、面）のON/OFF
ピック要素（点、線、面）のON/OFF
を変更することが可能となっていること、
オプションメニューの変更が画面、操作に反映されていることを確認します。



CTRL+F12で画面の縦横切り替えたときに、アクティビティの再構築が起こらない（初期状態に戻らず、縦横切り替え前のデータが表示され、縦横切り替え前の描画倍率、描画中心、描画回転角で表示される）ことを確認します。

ダウンロード

サンプルプロジェクト

関連ページ

前項目：04．ピックOpenGLレンダラクラスを作る

次項目：06．モデルデータファイル読み込みを作る