02．トラックOpenGLレンダラクラスを作る

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

トラッキング（タッチ操作による描画領域の回転、拡大縮小、平行移動）に関する処理を担うトラックOpenGLレンダラクラスを、ベースOpenGLレンダラクラスの派生クラスとして作成します。

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

解説

トラッキング（タッチ操作による描画領域の回転、拡大縮小、平行移動）をするためにすべきことは、以下です。

1. GLSurfaceView.Renderインターフェースを実装したクラス（または、GLSurfaceView.Renderインターフェースを実装したクラスの派生クラス）、に、タッチのドラッグアンドドロップ量に応じて、描画空間を、回転、拡大縮小、平行移動するようにOpenGLの行列計算をする関数を作成する。また、トラッキングの開始、終了に関する関数も作成する。
2. GLSurfaceViewの派生クラスを作成し、タッチイベント関数をオーバーライド関数として追加する。
3. 3.で作成したタッチイベント関数に、タッチイベントの種類に応じて、1で作成した関数を呼び出す処理を記述する。
4. メインアクティビティでは、GLSurfaceViewクラスのオブジェクトの生成を、2.で作成したGLSurfaceViewの派生クラスのオブジェクトの生成に変更する。

実装

プロジェクトを開く

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

トラックOpenGLレンダラクラスの作成

トラッキング（タッチ操作による描画領域の回転、拡大縮小、平行移動）に関する処理を担うトラックOpenGLレンダラクラスを、ベースOpenGLレンダラクラスの派生クラスとして作成します。

GLSurfaceView.Renderインターフェースを実装したクラスであるOpenGLBaseRendererの派生クラスとして作成します。

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


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

トラッキング操作の開始関数、終了関数の追加

OpenGLTrackRendererクラスに、トラッキング操作の開始関数、終了関数を追加します。

メンバ変数の宣言も追加します。

public class OpenGLTrackRenderer extends OpenGLBaseRenderer { // トラッキング操作の開始 public void beginTracking( float fX, float fY, ETRACKINGMODE eTrackingMode ) { m_eTrackingMode = eTrackingMode; m_fLastX = fX; m_fLastY = fY; } // トラッキング操作の終了 public void endTracking() { m_eTrackingMode = ETRACKINGMODE.TM_NONE; } }

・トラッキングのモードに関する 列挙型の定義の追加
・トラッキングのモードに関するメンバ変数の追加
・トラッキング中の直前座標に関するメンバ変数の追加
も行います。

enum ETRACKINGMODE { TM_NONE, TM_SPIN, TM_PAN, TM_ZOOM, } public class OpenGLTrackRenderer extends OpenGLBaseRenderer { private ETRACKINGMODE m_eTrackingMode = ETRACKINGMODE.TM_NONE; // トラッキングモード private float m_fLastX; // トラッキング中の直前座標X private float m_fLastY; // トラッキング中の直前座標Y public ETRACKINGMODE getTrackingMode() { return m_eTrackingMode; } （・・・省略・・・） }

トラッキング操作関数の追加

OpenGLTrackRendererクラスに、トラッキング操作関数を追加します。

public class OpenGLTrackRenderer extends OpenGLBaseRenderer { （・・・省略・・・） // トラッキング操作 public void doTracking( float x, float y ) { float deltaX = x - m_fLastX; float deltaY = y - m_fLastY; m_fLastX = x; m_fLastY = y; if( 0 == deltaX && 0 == deltaY ) { return; } switch( m_eTrackingMode ) { case TM_NONE: break; case TM_SPIN: { // クライアント領域の縦横の短い方の長さ分のピクセル動かすと半周（180度）回るように float fAngle_deg = (float)( Math.sqrt( deltaX * deltaX + deltaY * deltaY ) * 180.0 / ( getWidth() < getHeight() ? getWidth() : getHeight() ) ); // 回転行列の計算 Matrix.setRotateM( m_f16MatrixTemp1, 0, fAngle_deg, deltaY, deltaX, 0.0f ); // フォーム行列に回転行列をかける Matrix.multiplyMM( m_f16MatrixTemp2, 0, m_f16MatrixTemp1, 0, m_f16ObjectForm, 0 ); // フォーム行列の更新（Matrix.multiplyMM関数は、入力行列と結果行列がオーバーラップする場合、結果は未定という仕様なので） System.arraycopy( m_f16MatrixTemp2, 0, m_f16ObjectForm, 0, 16 ); // 視点座標変換設定の無効化（描画処理時に再設定され、有効化される） setViewingTransformValid( false ); } break; case TM_PAN: { m_fRenderingCenterX -= deltaX / m_fRenderingRate; m_fRenderingCenterY += deltaY / m_fRenderingRate; // 視点座標変換設定の無効化（描画処理時に再設定され、有効化される） setViewingTransformValid( false ); } break; case TM_ZOOM: { // 拡大・縮小による描画倍率操作 // +500で倍率2倍に、+250で倍率1.5倍に、 // -500で倍率0.5倍に、-1000で倍率0.25倍に m_fRenderingRate *= (float)Math.pow( 2.0, -deltaY * 0.002 ); // 視野角錐台設定の無効化（描画処理時に再設定され、有効化される） setViewingFrustumValid( false ); } break; } } }

・描画倍率に関するメンバ変数の追加
・描画空間のフォームを表す行列変数の追加
・トラッキングのモードに関するアクセサ関数の追加
・描画中心座標に関するメンバ変数の追加
・行列計算で使用するテンポラリな行列メンバ変数の追加
・コンストラクタを追加し、必要な初期化の追加
も行います。

import宣言は、eclipseの「エラーの即時修正」機能を使用して、追加しますが、Matrixという名前のクラスは、android.graphicsパッケージと android.openglパッケージにあります。ここでは、android.openglパッケージのMatrixクラスを使用していますので、eclipseの「エラーの即時修正」機能においては、「android.graphics.Matrixのインポート」を選択します。

public class OpenGLTrackRenderer extends OpenGLBaseRenderer { private ETRACKINGMODE m_eTrackingMode = ETRACKINGMODE.TM_NONE; // トラッキングモード private float m_fLastX; // トラッキング中の直前座標 private float m_fLastY; // トラッキング中の直前座標 private float m_fRenderingRate; // 描画倍率 protected float[] m_f16ObjectForm = new float[16]; // オブジェクトフォーム protected float m_fRenderingCenterX; // 描画中心座標X protected float m_fRenderingCenterY; // 描画中心座標Y private float[] m_f16MatrixTemp1 = new float[16]; // テンポラリ行列 private float[] m_f16MatrixTemp2 = new float[16]; // テンポラリ行列 （・・・省略・・・） // コンストラクタ public OpenGLTrackRenderer() { m_fRenderingRate = 10.0f; Matrix.setIdentityM( m_f16ObjectForm, 0 ); } （・・・省略・・・） }

OpenGLTrackRendererクラスに、トラッキングに対応した視野角錐台設定関数、視点座標変換関数をオーバーライド関数として追加します。

public class OpenGLTrackRenderer extends OpenGLBaseRenderer { （・・・省略・・・） // 視野角錐台設定 @Override protected void setupViewingFrustum() { GL10 gl = getGL(); gl.glMatrixMode( GL10.GL_PROJECTION ); gl.glLoadIdentity(); gl.glOrthof( -getWidth() * 0.5f / m_fRenderingRate, // left getWidth() * 0.5f / m_fRenderingRate, // right -getHeight() * 0.5f / m_fRenderingRate, // bottom getHeight() * 0.5f / m_fRenderingRate, // top 0.1f, // near 1000.0f ); // far gl.glMatrixMode( GL10.GL_MODELVIEW ); setViewingFrustumValid( true ); } // 視点座標変換 @Override protected void setupViewingTransform() { GL10 gl = getGL(); gl.glMatrixMode( GL10.GL_MODELVIEW ); gl.glLoadIdentity(); GLU.gluLookAt( gl, m_fRenderingCenterX, m_fRenderingCenterY, 500, m_fRenderingCenterX, m_fRenderingCenterY, 0.0f, 0.0f, 1.0f, 0.0f ); gl.glMultMatrixf( m_f16ObjectForm, 0 ); // 表示回転（＝モデル回転） setViewingTransformValid( true ); } }

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

タッチイベントに関する処理を担うモデルビューアービュークラスを作成します。

GLSurfaceViewの派生クラスとして作成します。

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


名前 にクラス名「ModelViewerView」、
スーパークラスに、「android.opengl.GLSurfaceView」、
を入力し、「完了」ボタンを押します。

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

作成したモデルビューアービュークラスに、
・Renderereメンバ変数の追加
・コンストラクタの追加
・コンストラクタに、Rendererメンバ変数の生成および、生成したRendererオブジェクトのセット処理等の追加
をします。

public class ModelViewerView extends GLSurfaceView { private OpenGLTrackRenderer m_renderer; public ModelViewerView( Context context ) { super( context ); // Rendererの作成 m_renderer = new OpenGLTrackRenderer(); // GLSurfaceViewにRendererをセット setRenderer( m_renderer ); // 絶え間ないレンダリングではなく都度のレンダリング（setRenderer()よりも後に呼び出す必要あり） setRenderMode( GLSurfaceView.RENDERMODE_WHEN_DIRTY ); } }

モデルビューアービュークラスに、タッチイベント関数の追加

モデルビューアービュークラスに、タッチイベント関数を追加します。

OpenGLの処理は、レンダリングスレッドと呼ばれる、UIスレッドとは別のスレッドで動作しています。
UIスレッドから、レンダリングスレッドの処理を直接呼び出すことはできません（正確には、呼び出すことはできても、期待通りの仕事をしません。）
GLSurfaceViewクラスには、UIスレッドからレンダリングスレッドの処理を簡単に呼び出すことができるイベントキューイングという仕組みが用意されています。
OpenGLに関する処理（OpenGLのgl～関数を使用する処理）をUIスレッドから呼び出す場合には、イベントキューイングします。

public class ModelViewerView extends GLSurfaceView { （・・・省略・・・） @Override public boolean onTouchEvent( MotionEvent event ) { 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, ETRACKINGMODE.TM_SPIN ); } 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 ) ); if( 150 < fDistance ) { // ズーム m_renderer.beginTracking( -fDistance, -fDistance, ETRACKINGMODE.TM_ZOOM ); } else { // パン m_renderer.beginTracking( fX, fY, ETRACKINGMODE.TM_PAN ); } } break; // トラッキングの終了 case MotionEvent.ACTION_UP: case MotionEvent.ACTION_POINTER_UP: m_renderer.endTracking(); break; // トラッキング case MotionEvent.ACTION_MOVE: if( 2 == pointcount && ETRACKINGMODE.TM_ZOOM == m_renderer.getTrackingMode() ) { // ズームは、１つ目の指の座標値ではなく、２つの指の距離で処理する。 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.doTracking( -fDistance, -fDistance ); requestRender(); // 再描画 } else { // 通常は、１つ目の指の座標値で処理する。 m_renderer.doTracking( fX, fY ); requestRender(); // 再描画 } break; } return true; } }

メインアクティビティクラスの修正

トラックOpenGLレンダラクラス、モデルビューアビュークラスの作成にあわせて、メインアクティビティクラスを修正します。

・GLSurfaceView型のメンバ変数を、ModelViewerView型のメンバ変数に変更。変数名もあわせて変更します。
・ModelViewerView型のメンバ変数の名前の変更を、クラス全体に適用します。
・「Rendererの作成と、RendererのViewへのセット」「都度のレンダリングの設定」は、ModelViewerViewのコンストラクタで行うようにしたので、onCreate関数から削除します。

public class ModelViewerEtudeActivity extends Activity { private ModelViewerView m_modelviewerview; @Override public void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); // フルスクリーンの指定 getWindow().clearFlags( WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN ); getWindow().addFlags( WindowManager.LayoutParams.FLAG_FULLSCREEN ); // タイトルなし requestWindowFeature( Window.FEATURE_NO_TITLE ); // GLSurfaceViewの生成 m_modelviewerview = new ModelViewerView( this ); // ActivityにViewのセット setContentView( m_modelviewerview ); } // 他のアクティビティが起動したことで、バックグラウンドに追いやられた時 @Override protected void onPause() { m_modelviewerview.onPause(); super.onPause(); } // ポーズから復帰する時 @Override protected void onResume() { super.onResume(); m_modelviewerview.onResume(); } }

実行

Android Virtual Device にて、動作確認。

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

※Android Virtual Device では、マルチタッチができないので、回転のみ動作確認可能です。
　パン、ズームは、実機にて動作確認を行います。

ダウンロード

サンプルプロジェクト

関連ページ

前項目：01．ベースOpenGLレンダラクラスを作る

次項目：03．モデルOpenGLレンダラクラスを作る