Mtk's Blog: [Android] OpenGLで簡易画像ビュアーを作る

How to make pictures viewer on OpenGL
OpenGL APIを使って画像ファイルを画面に表示するアプリを作ってみました。

このブログを書いている時点の開発環境は次の通りです。
・Windows8 (64bit)
・Eclipse Juno (32bit) (XP互換モードで起動)
・Android SDK r21.0.1

なぜOpenGL APIを使うのか？
Androidアプリに画像を表示するだけならImageViewを使えばもっと短いコードでアプリを作ることができます。
ですが今後、複数の画像を並べたり拡大縮小の機能を自前で追加したいと思ってます。
OpenGL APIを使うとでアプリの作り方次第で画像の移動・拡大･縮小・回転をスムーズに表示することができます。
これらの理由からあえてOpenGLを使うことにしました。
(ただし今回作る機能は表示と移動のみです)

今回のアプリで表示する画像は1枚とします。
OpenGLで画像をテクスチャとして表示するためには、辺の長さが2の累乗(べき乗)の正方形の画像を用意します。
256×256ピクセル、512×512ピクセルなど。
この通りの画像で内場合端末によってはテクスチャを表示できないことがあります。

サンプルのため、256×256ピクセルのスカイツリーの画像を用意しました。

画像ファイル(image256x256.png)はプロジェクトの
res - drawable-mdpi
にコピーします。
resフォルダーの下に drawable-nodpi というフォルダーを作ってそこに画像ファイルをコピーしてさい。
drawable-nodpi 以外のフォルダーに保存した画像は端末の解像度に応じて自動でスケーリングされるようです。(2014年5月31日訂正)

※ ic_launcher.png はAndroid-SDKのデフォルトでインストールされるアイコン画像です。

以下、ソースです。

Activityクラス (MainActivity.java)

package jp.fujiu.GlLImageViewer;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import android.opengl.GLSurfaceView;
import android.opengl.GLU;
import android.opengl.GLUtils;
import android.opengl.GLSurfaceView.Renderer;
import android.os.Bundle;
import android.view.MotionEvent;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class MainActivity extends Activity {
 private MainSurface surface = null;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  surface = new MainSurface(this);
  surface.setRenderer(surface);
  surface.setFocusable(true);
  surface.setKeepScreenOn(true);
  setContentView(surface);
 }

 // タッチイベント処理
 private float touchedX = 0;
 private float touchedY = 0;

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
  case MotionEvent.ACTION_MOVE:
   float x = event.getX();
   float y = event.getY();
   surface.setCameraPotision((touchedX - x), (touchedY - y));

   touchedX = x;
   touchedY = y;
   break;
  case MotionEvent.ACTION_DOWN:
   touchedX = event.getX();
   touchedY = event.getY();
   break;
  }
  return true;
 }

 // OpenGLのViewクラス
 private class MainSurface extends GLSurfaceView implements Renderer {
  // カメラの位置
  private float cameraX = 0;
  private float cameraY = 0;

  //カメラの移動量
  private float cameraDist;

  // 頂点座標
  private float apexs[] = new float[] { -1f, -1f, 1f, -1f, -1f, 1f, 1f, 1f, };
  // 頂点座標バッファ
  private FloatBuffer apexBuff;

  // 頂点テクスチャ
  private float coords[] = new float[] {
    // 上下反転
    0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, };
  // 頂点テクスチャバッファ
  private FloatBuffer coordsBuff;

  private int[] textures = new int[1];
  private int textureId = 0;

  void setCameraPotision(float x, float y) {
   //移動量が極端に大きい場合は無視
   if (Math.abs(x)> 100 || Math.abs(y)> 100){
    return;
   }

   cameraX +=  x/cameraDist;
   cameraY += -y/cameraDist;
   
   //画像が画面の外に出ない様にブレーキ
   if (cameraX> 1)cameraX  = 1;
   if (cameraX<-1)cameraX = -1;
   if (cameraY> 1)cameraY  = 1;
   if (cameraY<-1)cameraY = -1;
  }

  public MainSurface(Context context) {
   super(context);
  }

  @Override
  public void onSurfaceCreated(GL10 gl, EGLConfig config) {
   // バッファの生成
   apexBuff = makeFloatBuffer(apexs);
   coordsBuff = makeFloatBuffer(coords);

   // テクスチャ管理番号割り当て
   gl.glDeleteTextures(1, textures, 0);
   gl.glGenTextures(1, textures, 0);
   textureId = textures[0];

   // テクスチャ管理番号バインド
   gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);

   // 画像ファイルをロードし、テクスチャにバインド
   Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image256x256);
   GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
   gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
   gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
   bitmap.recycle();
  }

  @Override
  public void onSurfaceChanged(GL10 gl, int width, int height) {
   cameraDist =(float)(width/2);

   gl.glViewport(0, 0, width, height);
   gl.glMatrixMode(GL10.GL_PROJECTION);
   gl.glLoadIdentity();
   GLU.gluPerspective(gl, 45.0f, (float) width / (float) height, 0.1f, 100f);

   // 背面塗り潰し色の指定
   gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);// 黒
  }

  @Override
  public void onDrawFrame(GL10 gl) {
   // 画面クリア
   gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

   gl.glPushMatrix();
   
   // カメラ
   GLU.gluLookAt(gl, cameraX, cameraY, 3, cameraX, cameraY, 0, 0, 1, 0);

   gl.glPushMatrix();
   
   // 頂点配列の指定
   gl.glVertexPointer(2, GL10.GL_FLOAT, 0, apexBuff);
   gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

   // テクスチャ配列の指定
   gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);
   gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, coordsBuff);

   // テクスチャーの有効化
   gl.glEnable(GL10.GL_TEXTURE_2D);
   gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

   // テクスチャ描画
   gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

   // テクスチャーの無効化
   gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
   gl.glDisable(GL10.GL_TEXTURE_2D);
   gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
   
   gl.glPopMatrix();
   
   gl.glPopMatrix();
  }
 }

 //頂点の配列をバッファーに変換するメソッド
 private static FloatBuffer makeFloatBuffer(float[] values) {
  ByteBuffer bb = ByteBuffer.allocateDirect(values.length * 4);
  bb.order(ByteOrder.nativeOrder());
  FloatBuffer fb = bb.asFloatBuffer();
  fb.put(values);
  fb.position(0);
  return fb;
 }
}

※特別な権限(Permission)は不要なのでマニフェストは省略します。
Android1.6以降で動作します。
Target SDK Version が4以上の設定でビルドできます。
auのIS01(シャープ)で動作することを確認しています。

下の様に画面に画像が表示されます。

タッチイベントを使って画面のフリックでスクロールします。
スクロールはテクスチャ画像を動かすのではなく、カメラ(視点)を移動させる仕様にしています。

今後はさらに改良を加えていきたいと思います。

Mtk's Blog

2013年5月25日土曜日

[Android] OpenGLで簡易画像ビュアーを作る

0 件のコメント:

コメントを投稿