Mtk's Blog: [Android] OpenGLの簡易画像ビュアーをAndroid-NDKでビルドする (失敗談)

OpenGL and JNI
AndroidアプリをAndroid-NDKで開発するとネイティブコード(Javaインタープリターを通らないマシン語)で書かれたJNI(Java Native Interface)の動作比率を増やすことができ、Javaだけで開発したアプリに比べて高速な動作やバッテリーの長持ちが期待できます。
Android-NDKで開発するデメリットとして「マルチプラットフォーム(CPUが異なる端末)で動作しなくなる」という点があげられます。
Android-NDK-r8d では
・armeabi
・armeabi-v7a
・MIPS
・x86
の4種類のCPUがサポートされています。
PowerPC系のAndroid端末が普及しない限りマルチプラットフォームの心配はないようです。
そこで、前回公開したOpenGLによる簡易画像ビュアーをAndroid-NDKに移植してみました。

Android-NDKの弱点
アプリケーションのresフォルダーに保存された画像や音声ファイルを直接読み込む方法がありません。
SDカードに保存された画像ファイルなら読み込むことはできますが、画像をテクスチャに表示するためには画像ファイルをBitmap(1次元配列)にデコードする必要があります。
ところがAndroid-NDKには画像ファイルをデコードするライブラリーが見当たりません。
Android-NDKで画像を扱うには次の選択肢があります。

1. AndroidのJavaのAPIで画像ファイルをデコードしたint配列をJNIに渡す。
2. 画像ファイルをデコードする処理をC/C++で自作する。
3. C言語で書かれたオープンソースの画像ローダーを利用する。

デバッグのしやすさから1番目の方法で画像ファイルをNDKで扱うことにします。

留意点
Android端末の機種によりますが、ビットマップ画像の扱い中にOutOfMemoryErrorが起きやすいです。
SH-03C(Android2.2)は 1440x1440ピクセルの画像を int配列(約8MB)にバッファーしようとすると必ず次のエラーが発生します。
Out of memory on a 8294416-byte allocation.
試行錯誤した結果、今回は次のような仕様にしました。

1. Javaで画像ファイルを読み込み、512×512に伸縮する。
2. 伸縮した画像をint配列に変換しJNIに渡す。
3. JNIのOpenGL APIで画像をテクスチャとして表示する。

このブログを書いている時点の開発環境は次の通りです。
・Windows8 (64bit)
・Eclipse Juno (32bit) (XP互換モードで起動)
・Android SDK r21.0.1
・Cygwin
・Android-NDK-r8d
※Android-NDKのビルド方法は環境に強く依存するため省略します。

2点以上のタッチ操作が必要なので、Android2.2以降でマルチタッチ対応の端末が必要です。
新品で発売されているAndroid端末なら、中華Padも含めてほぼど対応していると思います。

以下ソースです。

MainActivity.java

package jp.fujiu.GL_SDImageViewerNDK;

import java.io.File;
import java.util.ArrayList;

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

import android.opengl.GLSurfaceView;
import android.opengl.GLSurfaceView.Renderer;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Environment;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.SurfaceHolder;
import android.view.ScaleGestureDetector.OnScaleGestureListener;
import android.widget.Toast;

public class MainActivity extends Activity implements OnScaleGestureListener {
 static {
  System.loadLibrary("jni");
 }
 
 //画像ファイルの拡張子
 private static final String[] EXTENTIONS = new String[]{".png", ".jpg", ".jpeg", ".gif"};
 
 //画像ファイル
 private ArrayList<String> fileLlist = null;
 private int llistIndex;

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

 //スライド操作
 float slideWidth;
 float touchDownX;
 
 //ファイルリスト処理中フラグ
 private boolean isListReady = false;

 //画像ファイルを検索するためのAsyncTask
 private class ReadFileTask extends AsyncTask<Object, Object, Object>{
  @Override
  protected Object doInBackground(Object... params) {
   //排他フラグロック
   isListReady = false;
   
   // SDへのパス取得
   String sdPath = getSdPath();

   
   //画像ファイルのパスをリストアップ
   fileLlist = new ArrayList<String>();
   readFileList(sdPath);
   llistIndex = 0;
   
   return null;
  }

  private void readFileList(String path) {
   File[] files = new File(path).listFiles();
   int len = files.length;
   for (int i = 0; i < len; i++) {
    File f = files[i];
    if (f.isHidden() == false) {
     if (f.isFile()) {
      // 拡張子によるフィルター
      int exPosi = f.getAbsolutePath().lastIndexOf(".");
      if (exPosi > -1) {
       //ファイルの拡張子の種類が画像ならファイルのフルパスをリストに追加
       String extension = f.getAbsolutePath().substring(exPosi);
       for (int j = 0; j < EXTENTIONS.length; j++) {
        if (extension.equalsIgnoreCase(EXTENTIONS[j])) {
         fileLlist.add(f.getAbsolutePath());
         break;
        }
       }
      }
     } else {
      readFileList(f.getAbsolutePath());
     }
    }
   }
  }

  @Override
  protected void onPostExecute(Object result) {
   //排他フラグ解除
   isListReady = true;
   //最初の画像表示
   showPrevImage(0);
  }
 }
 
 //ジェスチャー
 private ScaleGestureDetector scaleGgesture= null;
 private MainSurface surface = null;
 private float scaleFactor = 1;

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

  surface = new MainSurface(this);
  surface.setRenderer(surface);
  surface.setFocusable(true);
  surface.setKeepScreenOn(true);
  setContentView(surface);
 }
 
 @Override
 protected void onResume() {
  super.onResume();
  
  //スライド量は画面の幅の半分
  slideWidth = (float) getWindowManager().getDefaultDisplay().getWidth() / 2;
  
  if (scaleGgesture==null){
   scaleGgesture = new ScaleGestureDetector(getApplicationContext(), this);
  }
  
  if (fileLlist == null) {
   //非同期で画像ファイルのパスをリストアップ
   ReadFileTask readFileTask = new ReadFileTask();
   readFileTask.execute(null, null, null);
  }
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  scaleGgesture.onTouchEvent(event);
  
  //フリック操作ならカメラ移動、スライド操作なら画像変更
  if (event.getPointerCount()==1){
   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();
    
    touchDownX = event.getX();
    break;
   case MotionEvent.ACTION_UP:
    if (event.getX() - touchDownX >  slideWidth ){
     //左から右で次の画像を表示
     showPrevImage(1);
    } else if (touchDownX - event.getX() >  slideWidth ){
     //右から左で前の画像を表示
     showPrevImage(-1);
    }
   }
  }
  return true;
 }

 @Override
 public boolean onScale(ScaleGestureDetector detector) {
  scaleFactor *= detector.getScaleFactor();
  surface.setScale(scaleFactor);
  return true;
 }

 @Override
 public boolean onScaleBegin(ScaleGestureDetector detector) {
  return true;
 }

 @Override
 public void onScaleEnd(ScaleGestureDetector detector) {
  scaleFactor *= detector.getScaleFactor();
 }
 
 
 private String getSdPath() {
  String sdPath;

  // Sumsung, Vi30
  sdPath = System.getenv("EXTERNAL_STORAGE2");
  if (sdPath != null) {
   return sdPath;
  }

  // 旧 Sumsung, SH-03C, IS01
  sdPath = System.getenv("EXTERNAL_STORAGE");
  if (sdPath != null) {
   return sdPath;
  }

  // MOTOROLA
  sdPath = System.getenv("EXTERNAL_ALT_STORAGE");
  if (sdPath != null) {
   return sdPath;
  }

  sdPath = Environment.getExternalStorageDirectory().getPath();

  // HTC
  File file = new File(sdPath + "/ext_sd");
  if (file.exists()) {
   sdPath = file.getPath();
  }

  return sdPath;
 }
 
 //次の画像を表示
 private void showPrevImage(int diff){
  if (isListReady){
   if (fileLlist.size()>0){
    llistIndex += diff;
    if (llistIndex < 0){
     llistIndex -= diff;
     Toast.makeText(getApplicationContext(), "First", Toast.LENGTH_SHORT).show();
     return;
    } else if (llistIndex >= fileLlist.size()){
     llistIndex -= diff;
     Toast.makeText(getApplicationContext(), "Last", Toast.LENGTH_SHORT).show();
     return;
    }
    
    //次に表示する画像のファイル名を渡す
    surface.changeTexture(fileLlist.get(llistIndex));
   } else {
    //SDカードに画像が保存されていない場合のメッセージ
    Toast.makeText(getApplicationContext(), "No image files", Toast.LENGTH_SHORT).show();
   }
  } else {
   //SDカードに画像ファイル検索中のメッセージ
   Toast.makeText(getApplicationContext(), "Pease wait", Toast.LENGTH_SHORT).show();
  }
 }

 // OpenGLのViewクラス
 private class MainSurface extends GLSurfaceView implements Renderer{
  native private void setJniPixels(int[] pixels, int width, int height);
  native private void setJniSetCamera(float x, float y);
  native private void setJniScale(float scale);
  native private void onJniSurfaceCreated();
  native private void onJniSurfaceChanged(int width, int height);
  native private void onJniDrawFrame();
  native private void jniSurfaceDestroyed();
  
  //表示する画像の数
  private static final int MAX_IMAGE_NUM = 1;
  
  //画像1辺のサイズ
  private static final int IMAGE_PIXCEL = 512;
  private int[] pixels = new int[IMAGE_PIXCEL * IMAGE_PIXCEL];
  
  private boolean isTextureOrderedChange = false;
  
  private int textureID = 0;
  
  void setCameraPotision(float x, float y) {
   setJniSetCamera(x, y);
  }
  
  void setScale (float scale){
   setJniScale(scale);
  }

  public MainSurface(Context context) {
   super(context);
  }
  
  public void changeTexture(String imagePath){
   Bitmap srcImage = BitmapFactory.decodeFile(imagePath);
   
   float width = (float) srcImage.getWidth();
   float height= (float) srcImage.getHeight();
   
   float scale;
   float left;
   float top;
   if (width > height){
    scale = IMAGE_PIXCEL / width;
    left = 0;
    top = ((width - height) / 2) * scale;
   }else{
    scale = IMAGE_PIXCEL / height;
    top = 0;
    left = ((height - width) / 2) * scale;
   }

   //画像を伸縮する
   Matrix matrix = new Matrix();
   matrix.postScale(scale, scale);
   Bitmap stretchedImage = Bitmap.createBitmap(srcImage, 0, 0, (int)width, (int)height, matrix, true);
   srcImage.recycle();
   
   //画像を正方形に納める
   Bitmap dstImage = Bitmap.createBitmap(IMAGE_PIXCEL, IMAGE_PIXCEL, Bitmap.Config.ARGB_8888);
   Canvas canvas = new Canvas(dstImage);
   canvas.drawBitmap(stretchedImage, left, top, null);
   stretchedImage.recycle();
   
   int widthDst  = dstImage.getWidth();
   int heightDst = dstImage.getHeight();
   
   int[] pixels = new int[widthDst *  heightDst];
   dstImage.getPixels(pixels, 0, widthDst, 0, 0, widthDst, heightDst);
   setJniPixels(pixels, widthDst, heightDst);
   pixels = null;
   dstImage.recycle();
  }
  
  @Override
  public void onSurfaceCreated(GL10 gl, EGLConfig config) {
   onJniSurfaceCreated();
  }
  
  @Override
  public void onSurfaceChanged(GL10 gl, int width, int height) {
   onJniSurfaceChanged(width, height);
  }

  @Override
  public void onDrawFrame(GL10 gl) {
   onJniDrawFrame();
  }
  
  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {
   jniSurfaceDestroyed();
   super.surfaceDestroyed(holder);
  }
 }
}

jni.cpp

#include <jni.h>
#include <GLES/gl.h>
#include <GLES/glext.h>
#include "glu.h"

// 頂点座標
float apexs[] = { -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f };

// 頂点テクスチャ
float coords[] = {
 // 上下反転
 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f
};

//テクスチャの各定義
GLuint textureIDs[1];
unsigned char *texData;

//テクスチャのサイズ
int texWidth;
int texHeight;

//カメラの位置
float cameraX = 0;
float cameraY = 0;

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

//視野
float fovy = 45;
float aspect = 1;

bool isTextureOrderedChange = false;

extern "C" {
JNIEXPORT void JNICALL Java_jp_fujiu_GL_1SDImageViewerNDK_MainActivity_00024MainSurface_setJniPixels
(JNIEnv *env, jobject, jintArray pixels, jint width, jint height){
 delete[] texData;
 
 texWidth = width;
 texHeight = height;
 
 // jintArrayをjint配列に変換
 jint* arr = env->GetIntArrayElements(pixels, NULL);
 
 // int型(4バイト)ARGBのピクセル情報を1バイトごとにRGBAに並べ替えてunsigned char型配列に格納
 int size = width * height;
 texData = new unsigned char[size * 4];
 
 for (int i=0; i<size; i++){
  int j = i * 4;
  int pixel = arr[i];
  texData[j + 2] = pixel; //Blue
  pixel >>= 8;
  texData[j + 1] = pixel; //Green
  pixel >>= 8;
  texData[j + 0] = pixel; //Red
  pixel >>= 8;
  texData[j + 3] = pixel; //Alpha
 }
 
 //カメラの位置を中心に
 cameraX = 0;
 
 isTextureOrderedChange = true;
}

JNIEXPORT void JNICALL Java_jp_fujiu_GL_1SDImageViewerNDK_MainActivity_00024MainSurface_setJniSetCamera
(JNIEnv *, jobject, jfloat x, jfloat y){
 //移動量が極端に大きい場合は無視
 if (fabs(x)> 100 || fabs(y)> 100){
  return;
 }
 
 cameraX +=  x/cameraDist;
 cameraY += -y/cameraDist;
 
 //画像が画面の外に出ない様にブレーキ
 if (cameraX> 2)cameraX  = 2;
 if (cameraX<-2)cameraX = -2;
 if (cameraY> 2)cameraY  = 2;
 if (cameraY<-2)cameraY = -2;
}

JNIEXPORT void JNICALL Java_jp_fujiu_GL_1SDImageViewerNDK_MainActivity_00024MainSurface_setJniScale
(JNIEnv *, jobject, jfloat scale){
 fovy = 45 / scale;
 //画像の極端な拡大縮小を防ぐ
 if(fovy > 150) fovy = 150;
 if(fovy <  10) fovy =  10;
}

JNIEXPORT void JNICALL Java_jp_fujiu_GL_1SDImageViewerNDK_MainActivity_00024MainSurface_onJniSurfaceCreated
(JNIEnv *, jobject){
 //背景の色
 glClearColor(0, 0, 0, 1.0); //黒
 glClearDepthf(1.0);

 //片面スムーズシェーディング
 glShadeModel(GL_SMOOTH);

 //深度テスト
 glEnable(GL_DEPTH_TEST);

 //モデルビュー変換
 glMatrixMode(GL_MODELVIEW);
 glLoadIdentity();
}

JNIEXPORT void JNICALL Java_jp_fujiu_GL_1SDImageViewerNDK_MainActivity_00024MainSurface_onJniSurfaceChanged
(JNIEnv *, jobject, jint width, jint height){
 cameraDist =(float)(width/2);
 
 glViewport(0, 0, width, height);
 
 //射影変換
 glMatrixMode(GL_PROJECTION);
 glLoadIdentity();
 
 aspect = (float) width / (float) height;
}

JNIEXPORT void JNICALL Java_jp_fujiu_GL_1SDImageViewerNDK_MainActivity_00024MainSurface_onJniDrawFrame
(JNIEnv *, jobject){
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

 glPushMatrix();
 
 //視野
 gluPerspective(fovy, aspect, 0.1, 100);
 
 // カメラ
 gluLookAt(cameraX, cameraY, 3, cameraX, cameraY, 0, 0, 1, 0);
 
 glPushMatrix();
 
 if (isTextureOrderedChange){
  isTextureOrderedChange = false;
  
  //テクスチャ処理
  glBindTexture(GL_TEXTURE_2D, textureIDs[0]);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, texWidth, texHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, texData);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
 }
 
 // テクスチャーの有効化
 glEnable(GL_TEXTURE_2D);
 glEnableClientState(GL_TEXTURE_COORD_ARRAY);
 
 // 頂点配列の指定
 glVertexPointer(2, GL_FLOAT, 0, apexs);
 glEnableClientState(GL_VERTEX_ARRAY);
 
 // テクスチャ配列の指定
 glBindTexture(GL_TEXTURE_2D, textureIDs[0]);
 
 glTexCoordPointer(2, GL_FLOAT, 0, coords);
 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);

 //位置
 glTranslatef(0, 0, 0);
 
 //描画
 glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

 //各機能の無効化
 glDisable(GL_TEXTURE_2D);
 glDisableClientState(GL_TEXTURE_COORD_ARRAY);
 glDisableClientState(GL_VERTEX_ARRAY);
 
 glPopMatrix();
 
 glPopMatrix();
}

JNIEXPORT void JNICALL Java_jp_fujiu_GL_1SDImageViewerNDK_MainActivity_00024MainSurface_jniSurfaceDestroyed
  (JNIEnv *, jobject){
 delete[] texData;
}

}

glu.h （Android-NDKのsampleの com.example.SanAngeles から抜粋しました）

#ifndef _Included_jp_fujiu_GLImageViewerNDK_glu_h
#define _Included_jp_fujiu_GLImageViewerNDK_glu_h

/**
 * Android-NDKのsampleの com.example.SanAngeles から抜粋しました
 */
#include <math.h>
#define PI 3.1415926535897932f

/* Following gluLookAt implementation is adapted from the
 * Mesa 3D Graphics library. http://www.mesa3d.org
 */
static void gluLookAt(GLfloat eyex, GLfloat eyey, GLfloat eyez,
 GLfloat centerx, GLfloat centery, GLfloat centerz,
 GLfloat upx, GLfloat upy, GLfloat upz) {
 GLfloat m[16];
 GLfloat x[3], y[3], z[3];
 GLfloat mag;

 /* Make rotation matrix */

 /* Z vector */
 z[0] = eyex - centerx;
 z[1] = eyey - centery;
 z[2] = eyez - centerz;
 mag = (float)sqrt(z[0] * z[0] + z[1] * z[1] + z[2] * z[2]);
 if (mag) {
  /* mpichler, 19950515 */
  z[0] /= mag;
  z[1] /= mag;
  z[2] /= mag;
 }

 /* Y vector */
 y[0] = upx;
 y[1] = upy;
 y[2] = upz;

 /* X vector = Y cross Z */
 x[0] =  y[1] * z[2] - y[2] * z[1];
 x[1] = -y[0] * z[2] + y[2] * z[0];
 x[2] =  y[0] * z[1] - y[1] * z[0];

 /* Recompute Y = Z cross X */
 y[0] =  z[1] * x[2] - z[2] * x[1];
 y[1] = -z[0] * x[2] + z[2] * x[0];
 y[2] =  z[0] * x[1] - z[1] * x[0];

 /* mpichler, 19950515 */
 /* cross product gives area of parallelogram, which is < 1.0 for
  * non-perpendicular unit-length vectors; so normalize x, y here
  */

 mag = (float)sqrt(x[0] * x[0] + x[1] * x[1] + x[2] * x[2]);
 if (mag) {
  x[0] /= mag;
  x[1] /= mag;
  x[2] /= mag;
 }

 mag = (float)sqrt(y[0] * y[0] + y[1] * y[1] + y[2] * y[2]);
 if (mag) {
  y[0] /= mag;
  y[1] /= mag;
  y[2] /= mag;
 }

#define M(row,col)  m[col*4+row]
 M(0, 0) = x[0];
 M(0, 1) = x[1];
 M(0, 2) = x[2];
 M(0, 3) = 0.0;
 M(1, 0) = y[0];
 M(1, 1) = y[1];
 M(1, 2) = y[2];
 M(1, 3) = 0.0;
 M(2, 0) = z[0];
 M(2, 1) = z[1];
 M(2, 2) = z[2];
 M(2, 3) = 0.0;
 M(3, 0) = 0.0;
 M(3, 1) = 0.0;
 M(3, 2) = 0.0;
 M(3, 3) = 1.0;
#undef M
 {
  int a;
  GLfixed fixedM[16];
  for (a = 0; a < 16; ++a)
   fixedM[a] = (GLfixed)(m[a] * 65536);
  glMultMatrixx(fixedM);
 }

 /* Translate Eye to Origin */
 glTranslatex((GLfixed)(-eyex * 65536),
     (GLfixed)(-eyey * 65536),
     (GLfixed)(-eyez * 65536));
}

static void gluPerspective(GLfloat fovy, GLfloat aspect,
                           GLfloat zNear, GLfloat zFar) {
 GLfloat xmin, xmax, ymin, ymax;

 ymax = zNear * (GLfloat)tan(fovy * PI / 360);
 ymin = -ymax;
 xmin = ymin * aspect;
 xmax = ymax * aspect;

 glFrustumx((GLfixed)(xmin * 65536), (GLfixed)(xmax * 65536),
      (GLfixed)(ymin * 65536), (GLfixed)(ymax * 65536),
      (GLfixed)(zNear * 65536), (GLfixed)(zFar * 65536));
}
#endif

Android.mk

LOCAL_PATH := $(call my-dir)
include $(CLEAR_VARS)
LOCAL_MODULE    := jni
LOCAL_SRC_FILES := jni.cpp
LOCAL_LDLIBS := -lGLESv1_CM
include $(BUILD_SHARED_LIBRARY)

jni.cpp、glu.h、Android.mk はプロジェクトにjniというフォルダーを追加して、そこにコピーします。

※特別な権限(Permission)は不要なのでマニフェストは省略します。
Android2.2以降で動作します。
Target SDK Version が8以上の設定でビルドできます。
Android-NDKのビルド方法は環境に強く依存するので省略させて頂きます。

留意点でも書きましたが、古いスマートフォン(Android2.2以前)で実際に使ってみると前回のJavaだけで作ったアプリに比べて
java.lang.OutOfMemoryError: bitmap size exceeds VM budget
が起きやすいです。
画像をint配列に変換するためのメモリーを確保したり、その逆の変換をするためのメモリーを確保したりするためメモリーの空き領域が不足がちになるようです。
さらにJavaだけで書いたアプリと体感速度を比べるても差がありませんでした。
当初の予想とは裏腹にデメリットの方が多かったのでタイトルに「失敗談」と付けました。

Android4.0なら安定して動作しますが体感速度は変わりません。

Mtk's Blog

新アプリケーション

2013年6月29日土曜日

[Android] OpenGLの簡易画像ビュアーをAndroid-NDKでビルドする (失敗談)

0 件のコメント:

コメントを投稿