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

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

解説

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

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

実装

プロジェクトを開く

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

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

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

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

Nameに、「OpenGLTrackRenderer」、
Superclassに、「ドメイン.modelviewertutorial.OpenGLBaseRenderer」、
を入力し、「OK」ボタンを押します。

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

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

・トラッキングのモードに関する列挙型の定義を追加します。

・トラッキングのモードに関するメンバー変数を追加します。
・トラッキング中の直前座標に関するメンバー変数を追加します。
・描画倍率に関するメンバー変数を追加します。
・描画空間のフォームを表す行列メンバー変数を追加します。
・描画中心座標に関するメンバー変数を追加します。
・行列計算で使用するテンポラリな行列メンバー変数を追加します。

・コンストラクタを追加し、必要な初期化を追加します。
・トラッキング操作の開始関数、終了関数を追加します。
・トラッキングのモードに関するアクセサ関数を追加します。
・トラッキング操作関数を追加します。
・トラッキングに対応した視野角錐台設定関数をオーバーライド関数として追加します。
・トラッキングに対応した視点座標変換関数をオーバーライド関数として追加します。

public class OpenGLTrackRenderer extends OpenGLBaseRenderer { // トラッキングモード enum ETrackingMode { TM_NONE, TM_ROTATE, TM_PAN, TM_ZOOM, } // メンバー変数 private ETrackingMode m_eTrackingMode = ETrackingMode.TM_NONE; // トラッキングモード private float m_fLastX; // トラッキング中の直前座標X private float m_fLastY; // トラッキング中の直前座標Y 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 ); } // アクセサ public ETrackingMode getTrackingMode() { return m_eTrackingMode; } // トラッキング操作の開始 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; } // トラッキング操作 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_ROTATE: { // クライアント領域の縦横の短い方の長さ分のピクセル動かすと半周（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; } } // 視野角錐台設定 @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 ); } }

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

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

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

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

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

Nameに、「ModelViewerView」、
Superclassに、「android.opengl.GLSurfaceView」、
を入力し、「OK」ボタンを押します。

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

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

public class ModelViewerView extends GLSurfaceView { // メンバー変数 private OpenGLTrackRenderer m_renderer; // コンストラクタ public ModelViewerView( Context context, AttributeSet attrs ) { super( context, attrs ); // Rendererの作成 m_renderer = new OpenGLTrackRenderer(); // GLSurfaceViewにRendererをセット setRenderer( m_renderer ); // 絶え間ないレンダリングではなく都度のレンダリング（setRenderer()よりも後に呼び出す必要あり） setRenderMode( GLSurfaceView.RENDERMODE_WHEN_DIRTY ); } @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, OpenGLTrackRenderer.ETrackingMode.TM_ROTATE ); } 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 ) ); if( 300 < fDistance ) { // ズーム m_renderer.beginTracking( -fDistance, -fDistance, OpenGLTrackRenderer.ETrackingMode.TM_ZOOM ); } else { // パン m_renderer.beginTracking( fX, fY, OpenGLTrackRenderer.ETrackingMode.TM_PAN ); } } break; // トラッキングの終了 case MotionEvent.ACTION_UP: case MotionEvent.ACTION_POINTER_UP: m_renderer.endTracking(); break; // トラッキング case MotionEvent.ACTION_MOVE: if( 2 == pointcount && OpenGLTrackRenderer.ETrackingMode.TM_ZOOM == m_renderer.getTrackingMode() ) { // ズームは、１つ目の指の座標値ではなく、２つの指の距離で処理する。 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.doTracking( -fDistance, -fDistance ); requestRender(); // 再描画 } else { // 通常は、１つ目の指の座標値で処理する。 m_renderer.doTracking( fX, fY ); requestRender(); // 再描画 } break; } return true; } }

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

レイアウトの変更

メインアクティビティのレイアウトを変更します。

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

OpenGL用のViewとして設置した、GLSurfaceViewを、ModelViewerViewに変更します。

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

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.hiramine.modelviewertutorial.ModelViewerView android:id="@+id/glview" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>

メインアクティビティクラスの変更

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

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

public class MainActivity extends AppCompatActivity { // メンバー変数 private ModelViewerView m_modelviewerview; @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // GLSurfaceViewの取得 m_modelviewerview = (ModelViewerView)findViewById( R.id.glview ); } // 初回表示時、および、ポーズからの復帰時 @Override protected void onResume() { super.onResume(); m_modelviewerview.onResume(); } // 別のアクティビティ（か別のアプリ）に移行したことで、バックグラウンドに追いやられた時 @Override protected void onPause() { m_modelviewerview.onPause(); super.onPause(); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。
リビルドし、エラー、警告がないことを確認します。

実行

Android端末にて、動作確認。

・１つの指でドラッグすると、軸が、回転移動します。
・２つの指を揃えて（タッチ時の２つの指先の距離が300ピクセル以下で）タッチし、ドラッグすると、軸が、拡大縮小します。
・２つの指を離して（タッチ時の２つの指先の距離が300ピクセル以上で）タッチし、ピンチすると、軸が、平行移動します。

ダウンロード

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