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

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

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

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

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

解説

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

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

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

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

実装

プロジェクトを開く

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

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

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

「Project」ペインの「app > java > ドメイン.modelviewertutorial」を右クリックします。
右クリックメニュー「New > Java Class」を選択します。


Nameに、「ModelViewerRenderer」、
Superclassに、「com.hiramine.modelviewertutorial.OpenGLPickRenderer」、
を入力し、「OK」ボタンを押します。

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

モデルビューアレンダラクラスに、描画要素（点、線、面）の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( !( 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 ); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

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

モデルビューアのレンダラクラスにピック要素のON/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 ); } } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

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

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

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

public class ModelViewerView extends GLSurfaceView implements GestureDetector.OnGestureListener { // メンバー変数 private ModelViewerRenderer m_renderer; private GestureDetector m_gesturedetector; // 長押し用 // コンストラクタ public ModelViewerView( Context context, AttributeSet attrs ) { super( context ); // Rendererの作成 m_renderer = new ModelViewerRenderer(); （・・・省略・・・） } （・・・省略・・・） }

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

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

・１本指ドラッグで行うトラッキングモードを保持するメンバー変数を追加します。
・コンストラクタで、１本指ドラッグで行うトラッキングモードの初期値を設定します。
・タッチイベント処理関数である onTouchEvent関数内の、１本指ドラッグの開始処理で、１本指ドラッグのトラッキングモードを指定します。
・Rendererメンバー変数のゲッターを追加します。
・２本指ドラッグは、ドラッグ開始時の２つの指の距離に応じてズームとパンを切り替えていたのを、２本指ドラッグは、ズームだけに変更します。

public class ModelViewerView extends GLSurfaceView implements GestureDetector.OnGestureListener { // メンバー変数 private ModelViewerRenderer m_renderer; private GestureDetector m_gesturedetector; // 長押し用 public OpenGLTrackRenderer.ETrackingMode m_eTrackingMode_1fingerdrag; // １本指ドラッグで行うトラッキングモード // コンストラクタ public ModelViewerView( Context context, AttributeSet attrs ) { （・・・省略・・・） // １本指ドラッグで行うトラッキングモード m_eTrackingMode_1fingerdrag = OpenGLTrackRenderer.ETrackingMode.TM_ROTATE; } // アクセサ public ModelViewerRenderer getRenderer() { return m_renderer; } @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 = (float)Math.sqrt( ( fX1 - fX ) * ( fX1 - fX ) + ( fY1 - fY ) * ( fY1 - fY ) ); m_renderer.beginTracking( -fDistance, -fDistance, OpenGLTrackRenderer.ETrackingMode.TM_ZOOM ); } break; // トラッキングの終了 （・・・省略・・・）

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

文字列リソースの追加

必要な文字列定義を追加します。

「Project」ペインの「app > res > values > strings.xml」を開きます。

メインアクティビティのメニュー用の文字列の定義を追加します。

strings.xml の内容を、以下のようにします。

<resources> <string name="app_name">ModelViewerTutorial</string> <!-- MainActivity メニュー用 --> <string name="drag_mode">1 Finger Drag...</string> <string name="render_element">Render...</string> <string name="pick_element">Pick...</string> <string name="none">None</string> <string name="rotate">Rotate</string> <string name="pan">Pan</string> <string name="zoom">Zoom</string> <string name="point">Point</string> <string name="line">Line</string> <string name="face">Face</string> </resources>

メインアクティビティのメニューリソースの追加

メインアクティビティのメニューリソースを作成します。

「Project」ペインの「app > res」を右クリックします。


右クリックメニュー「New > Android resource file」を選択します。


File nameに、「activity_main」を入力し、
Resource typeに、「menu」を選択し、
「OK」ボタンを押します。

activity_main.xmlが作成されます。

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

activity_main.xml の内容を以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:title="@string/drag_mode"> <menu> <group android:checkableBehavior="single"> <item android:id="@+id/menuitem_drag_none" android:title="@string/none"/> <item android:id="@+id/menuitem_drag_rotate" android:title="@string/rotate"/> <item android:id="@+id/menuitem_drag_pan" android:title="@string/pan"/> <item android:id="@+id/menuitem_drag_zoom" android:title="@string/zoom"/> </group> </menu> </item> <item android:title="@string/render_element"> <menu> <item android:id="@+id/menuitem_render_point" android:checkable="true" android:title="@string/point"/> <item android:id="@+id/menuitem_render_line" android:checkable="true" android:title="@string/line"/> <item android:id="@+id/menuitem_render_face" android:checkable="true" android:title="@string/face"/> </menu> </item> <item android:title="@string/pick_element"> <menu> <item android:id="@+id/menuitem_pick_point" android:checkable="true" android:title="@string/point"/> <item android:id="@+id/menuitem_pick_line" android:checkable="true" android:title="@string/line"/> <item android:id="@+id/menuitem_pick_face" android:checkable="true" android:title="@string/face"/> </menu> </item> </menu>

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

メインアクティビティクラスにオプションメニュー作成処理を追加します。オプションメニュー項目選択時の処理も追加します。

public class MainActivity extends AppCompatActivity { （・・・省略・・・） // オプションメニュー作成時の処理 @Override public boolean onCreateOptionsMenu( Menu menu ) { getMenuInflater().inflate( R.menu.activity_main, menu ); switch( m_modelviewerview.m_eTrackingMode_1fingerdrag ) { case TM_NONE: menu.findItem( R.id.menuitem_drag_none ).setChecked( true ); break; case TM_ROTATE: menu.findItem( R.id.menuitem_drag_rotate ).setChecked( true ); break; case TM_PAN: menu.findItem( R.id.menuitem_drag_pan ).setChecked( true ); break; case TM_ZOOM: menu.findItem( R.id.menuitem_drag_zoom ).setChecked( true ); break; } menu.findItem( R.id.menuitem_render_point ).setChecked( m_modelviewerview.getRenderer().m_bRenderPoint ); menu.findItem( R.id.menuitem_render_line ).setChecked( m_modelviewerview.getRenderer().m_bRenderLine ); menu.findItem( R.id.menuitem_render_face ).setChecked( m_modelviewerview.getRenderer().m_bRenderFace ); menu.findItem( R.id.menuitem_pick_point ).setChecked( m_modelviewerview.getRenderer().m_bPickPoint ); menu.findItem( R.id.menuitem_pick_line ).setChecked( m_modelviewerview.getRenderer().m_bPickLine ); menu.findItem( R.id.menuitem_pick_face ).setChecked( m_modelviewerview.getRenderer().m_bPickFace ); return true; } // オプションメニューのアイテム選択時の処理 @Override public boolean onOptionsItemSelected( MenuItem item ) { switch( item.getItemId() ) { case R.id.menuitem_drag_none: item.setChecked( true ); m_modelviewerview.m_eTrackingMode_1fingerdrag = OpenGLTrackRenderer.ETrackingMode.TM_NONE; return true; case R.id.menuitem_drag_rotate: item.setChecked( true ); m_modelviewerview.m_eTrackingMode_1fingerdrag = OpenGLTrackRenderer.ETrackingMode.TM_ROTATE; return true; case R.id.menuitem_drag_pan: item.setChecked( true ); m_modelviewerview.m_eTrackingMode_1fingerdrag = OpenGLTrackRenderer.ETrackingMode.TM_PAN; return true; case R.id.menuitem_drag_zoom: item.setChecked( true ); m_modelviewerview.m_eTrackingMode_1fingerdrag = OpenGLTrackRenderer.ETrackingMode.TM_ZOOM; return true; case R.id.menuitem_render_point: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bRenderPoint = item.isChecked(); m_modelviewerview.requestRender(); // 再描画 return true; case R.id.menuitem_render_line: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bRenderLine = item.isChecked(); m_modelviewerview.requestRender(); // 再描画 return true; case R.id.menuitem_render_face: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bRenderFace = item.isChecked(); m_modelviewerview.requestRender(); // 再描画 return true; case R.id.menuitem_pick_point: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bPickPoint = item.isChecked(); return true; case R.id.menuitem_pick_line: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bPickLine = item.isChecked(); return true; case R.id.menuitem_pick_face: item.setChecked( !item.isChecked() ); m_modelviewerview.getRenderer().m_bPickFace = item.isChecked(); return true; } return true; } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

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

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

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

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

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

AndroidManifest.xml のメインアクティビティの設定に、
android:configChanges="orientation|screenSize"
という記述を追記します。

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

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hiramine.modelviewertutorial"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:configChanges="orientation|screenSize"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> </manifest>

リビルドし、エラー、警告がないことを確認します。

実行

Android端末にて、動作確認。

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



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

ダウンロード

サンプルプロジェクト
（github.com上のダウンロードページ）

関連ページ

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

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