Mtk's Blog: OutOfMemoryError

ラベル OutOfMemoryError の投稿を表示しています。すべての投稿を表示

2013年6月29日土曜日

[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なら安定して動作しますが体感速度は変わりません。

2012年2月18日土曜日

[Android] BitmapクラスのOutOfMemoryErrorを防ぐ #2

How to correct the OutOfMemoryError of Bitmap class #2
前回は画像表示のたびにBitmapFactory.decodeResourceを実行して、表示後にrecycle()メソッドで解放する方法でOutOfMemoryErrorを防ぎました。
この方法は安定して動作しますが、表示のたびにファイルにアクセスしてデコード処理を実行するので効率が悪いような気がします。

そこで他の方法を考えました。
Bitmapクラスは画像を整数の配列に変換する getPixelsメソッドと、整数の配列を画像に戻す setPixelsメソッドがあります。
画像を配列に変換したり、配列を画像に変換する処理はCPUとメモリー(RAM)の間のデータ転送が主な内容になるはずです。
ファイルアクセスやデコード処理が1回で済むのでもっと効率が上がりそうです。

今回は1024×1024ピクセルの4枚の画像を整数の配列に変換することをを試してみます。
成功すればBitmapFactory.decodeResourceは各画像につき1度しか実行されないので効率が上がるはずです。

Main3

package jp.fujiu.PluralBitmaps_sample;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class Main3 extends Activity {
 private MySurfaceView surface = null;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  surface = new MySurfaceView(this);
  setContentView(surface);
 }
 
 class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback {
  private SurfaceHolder holder = null;
  
  private BitmapFactory.Options options = null;
  private int bpmIndex = 1;
  
  private int[] bmpData1 = new int[1024 * 1024];
  private int[] bmpData2 = new int[1024 * 1024];
  private int[] bmpData3 = new int[1024 * 1024];
  private int[] bmpData4 = new int[1024 * 1024];
  
  private RectF dist = null;
  private Rect rect = null;
  private Paint paint = null;
  private Message msg = null;
  
  public MySurfaceView(Context context) {
   super(context);
   
   //コールバック
   getHolder().addCallback(this);
   
   //メモリーテストのためオプションにARGB_8888を指定する
   options = new BitmapFactory.Options();
   options.inPreferredConfig = Config.ARGB_8888;
   
   //bitmapをファイルからint[]にロード
   loadImage(R.drawable.image1, bmpData1);
   loadImage(R.drawable.image2, bmpData2);
   loadImage(R.drawable.image3, bmpData3);
   loadImage(R.drawable.image4, bmpData4);
   
   paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  }
  
  private void loadImage(int resId, int[] array){
   Bitmap bmp = BitmapFactory.decodeResource(getResources(), resId, options);
   int width = bmp.getWidth();
   int height = bmp.getHeight();
   bmp.getPixels(array, 0, width, 0, 0, width, height);
   bmp.recycle();
  }

  @Override
  public void surfaceCreated(SurfaceHolder holder) {
   this.holder = holder;
  }
  
  @Override
  public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
   dist = new RectF();
   dist.left = 0;
   dist.top = 0;
   
   if (width > height){
    //横長画面
    dist.right = height;
    dist.bottom = height;
   } else {
    //縦長画面
    dist.right = width;
    dist.bottom = width;
   }
   rect = new Rect(0, 0, 1024, 1024);
   msg = new Message();
   handler.sendMessage(msg);
  }

  private Handler handler = new Handler(){
   @Override
   public void handleMessage(Message msg) {
    //Log.d(getClass().getSimpleName(), "handleMessage");
    
    Canvas canvas = holder.lockCanvas();
    if (canvas == null) {
     sendEmptyMessageDelayed(msg.what, 10);
    }
    canvas.drawColor(Color.BLACK);
    
    Bitmap bmp = Bitmap.createBitmap(1024, 1024, Bitmap.Config.ARGB_8888);
    
    //int[]にロードしたbitmapを表示
    switch (bpmIndex){
     case 1:
      bmp.setPixels(bmpData1, 0, 1024, 0, 0, 1024, 1024);
      bpmIndex = 2;
      break;
     case 2:
      bmp.setPixels(bmpData2, 0, 1024, 0, 0, 1024, 1024);
      bpmIndex = 3;
      break;
     case 3:
      bmp.setPixels(bmpData3, 0, 1024, 0, 0, 1024, 1024);
      bpmIndex = 4;
      break;
     case 4:
      bmp.setPixels(bmpData4, 0, 1024, 0, 0, 1024, 1024);
      bpmIndex = 1;
      break;
    }
    canvas.drawBitmap(bmp, rect, dist, paint);
    bmp.recycle();
    
    holder.unlockCanvasAndPost(canvas);
    
    sendEmptyMessageDelayed(msg.what, 1000);
   }
  };

  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {
   handler.removeMessages(msg.what);
   
   //コールバック解除
   getHolder().removeCallback(this);
  }
 }
}

結果
整数の配列の確保(new int[1024 * 1024])でOutOfMemoryErrorが起きてしまいました。
Android1.6と2.1のエミュレーターで確認しました。

Androidのint型は4バイトなのでint[1024 * 1024]の配列は連続した4MBの空きメモリー（RAM）が必要になるわけですが、それを4つも確保するのは難しいようです。
int[1024][1024]の2次元配列を使う方法に直して試みましたがやっぱりOutOfMemoryErrorが起きました。

RAM容量の多い端末で正常動作するかもしれませんが、エミュレーターで動作しない方法なのでお勧めできません。

ちなみにgetPixelsメソッドはJNI(Android-NDK)のOpenGLでポリゴンのテクスチャを貼り付けるときに必須のメソッドです。
http://blog.fujiu.jp/2011/08/android-android-ndk.html

今回はわざと大きい画像や配列を扱ってエラーが出ることを確認しました。
将来のAndroid端末は今以上にRAMの大容量化、画面の高解像度化が予測されます。
Android-SDKやOSも進化して大きいBitmapを扱いやすくなってます。
古い端末でも簡単に扱えるようになったらいいですね。

以上、参考になれば幸いです。

2012年2月11日土曜日

[Android] BitmapクラスのOutOfMemoryErrorを防ぐ

How to correct the OutOfMemoryError of Bitmap class

Android端末は種類が多く、画面解像度も機種ごとに違うので画像の扱いは大きな悩みどころです。
たとえばSurfaceViewに画像を表示する場合、大きめの画像データ(1024×1024ピクセル)を用意して画面解像度に合わせて縮小表示する方法が一番簡単のように思います。
ところが、Androidは大きい画像を下手に扱うと BitmapFactoryクラスが OutOfMemoryError が発生することがよくあります。

E/AndroidRuntime(253): Uncaught handler: thread main exiting due to uncaught exception
E/AndroidRuntime(253): java.lang.OutOfMemoryError: bitmap size exceeds VM budget
E/AndroidRuntime(253):  at android.graphics.BitmapFactory.nativeDecodeAsset(Native Method)

すでに多くの開発者がOutOfMemoryErrorを回避する方法を公開しています。
今更ながらMtkもいくつか方法を考えてみました。

4枚の1024×1024ピクセルの画像を1秒ごとに表示するアプリケーションで説明します。
画像は画面解像度に収まるように拡大縮小表示します。

1024×1024ピクセルのこんな画像を4種類用意します。

それぞれのファイル名はimage1.png、image2.png、image3.png、image4.pngとしました。
Androidのプロジェクトのresフォルダーの下にdrawableフォルダーを作成し、この4つの画像を保存します。

OutOfMemoryErrorが出るサンプルです。Android1.6のエミュレーターで確認しています。
※Android2.1のエミュレーターでは正常に動作しましたが実機ではOutOfMemoryErrorが起こり不安定です。
Main.java(Activity)
※Android1.6以上、パーミッション不要のため、マニフェストは省略します

package jp.fujiu.PluralBitmaps_sample;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class Main extends Activity {
 private MySurfaceView surface = null;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  surface = new MySurfaceView(this);
  setContentView(surface);
 }
 
 class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback {
  private int bpmIndex = 1;
  
  private SurfaceHolder holder = null;
  private Bitmap bmp1 = null;
  private Bitmap bmp2 = null;
  private Bitmap bmp3 = null;
  private Bitmap bmp4 = null;
  
  private RectF dist = null;
  private Rect rect = null;
  private Paint paint = null;
  private Message msg = null;
  
  public MySurfaceView(Context context) {
   super(context);
   
   //コールバック
   getHolder().addCallback(this);
   
   //bitmapをロード
   //メモリーテストのためオプションにARGB_8888を指定する
   BitmapFactory.Options options = new BitmapFactory.Options();
   options.inPreferredConfig = Config.ARGB_8888;
   bmp1 = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image1, options);
   bmp2 = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image2, options);
   bmp3 = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image3, options);
   bmp4 = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image4, options);
   
   paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  }

  @Override
  public void surfaceCreated(SurfaceHolder holder) {
   this.holder = holder;
  }
  
  @Override
  public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
   dist = new RectF();
   dist.left = 0;
   dist.top = 0;
   
   if (width > height){
    //横長画面
    dist.right = height;
    dist.bottom = height;
   } else {
    //縦長画面
    dist.right = width;
    dist.bottom = width;
   }
   rect = new Rect(0, 0, 1024, 1024);
   msg = new Message();
   handler.sendMessage(msg);
  }

  private Handler handler = new Handler(){
   @Override
   public void handleMessage(Message msg) {
    
    Canvas canvas = holder.lockCanvas();
    if (canvas == null) {
     sendEmptyMessageDelayed(msg.what, 10);
    }
    canvas.drawColor(Color.BLACK);
    
    //bitmapの表示
    switch (bpmIndex){
     case 1:
      canvas.drawBitmap(bmp1, rect, dist, paint);
      bpmIndex = 2;
      break;
     case 2:
      canvas.drawBitmap(bmp2, rect, dist, paint);
      bpmIndex = 3;
      break;
     case 3:
      canvas.drawBitmap(bmp3, rect, dist, paint);
      bpmIndex = 4;
      break;
     case 4:
      canvas.drawBitmap(bmp4, rect, dist, paint);
      bpmIndex = 1;
      break;
    }
    
    holder.unlockCanvasAndPost(canvas);
    sendEmptyMessageDelayed(msg.what, 1000);
   }
  };

  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {
   handler.removeMessages(msg.what);
   
   //bitmapを解放
   bmp1.recycle();
   bmp2.recycle();
   bmp3.recycle();
   bmp4.recycle();
   
   //コールバック解除
   getHolder().removeCallback(this);
  }
 }
}

Android1.6エミュレーターでアプリを実行すると
bmp2 = BitmapFactory.decodeResource ･･･
でOutOfMemoryErrorが発生します。
1024×1024ピクセルの画像(Bitmapのインスタンス)をメモリー(RAM)に置くことができないようです。

次はOutOfMemoryErrorが起きないように修正したサンプルです。
Main2.java(Activity)

package jp.fujiu.PluralBitmaps_sample;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class Main2 extends Activity {
 private MySurfaceView surface = null;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  surface = new MySurfaceView(this);
  setContentView(surface);
 }
 
 class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback {
  private SurfaceHolder holder = null;
  
  private BitmapFactory.Options options = null;
  private Bitmap bmp1 = null;
  private Bitmap bmp2 = null;
  private Bitmap bmp3 = null;
  private Bitmap bmp4 = null;
  private int bpmIndex = 1;
  
  private RectF dist = null;
  private Rect rect = null;
  private Paint paint = null;
  private Message msg = null;
  
  public MySurfaceView(Context context) {
   super(context);
   
   //コールバック
   getHolder().addCallback(this);
   
   //メモリーテストのためオプションにARGB_8888を指定する
   options = new BitmapFactory.Options();
   options.inPreferredConfig = Config.ARGB_8888;
   
   paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  }

  @Override
  public void surfaceCreated(SurfaceHolder holder) {
   this.holder = holder;
  }
  
  @Override
  public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
   dist = new RectF();
   dist.left = 0;
   dist.top = 0;
   
   if (width  > height){
    //横長画面
    dist.right = height;
    dist.bottom = height;
   } else {
    //縦長画面
    dist.right = width;
    dist.bottom = width;
   }
   rect = new Rect(0, 0, 1024, 1024);
   msg = new Message();
   handler.sendMessage(msg);
  }

  private Handler handler = new Handler(){
   @Override
   public void handleMessage(Message msg) {
    Canvas canvas = holder.lockCanvas();
    if (canvas == null) {
     sendEmptyMessageDelayed(msg.what, 10);
    }
    canvas.drawColor(Color.BLACK);
    
    //bitmapの表示
    switch (bpmIndex){
     case 1:
      bmp1 = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image1, options);
      canvas.drawBitmap(bmp1, rect, dist, paint);
      bmp1.recycle();
      bpmIndex = 2;
      break;
     case 2:
      bmp2 = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image2, options);
      canvas.drawBitmap(bmp2, rect, dist, paint);
      bmp2.recycle();
      bpmIndex = 3;
      
      break;
     case 3:
      bmp3 = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image3, options);
      canvas.drawBitmap(bmp3, rect, dist, paint);
      bmp3.recycle();
      bpmIndex = 4;
      break;
     case 4:
      bmp4 = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image4, options);
      canvas.drawBitmap(bmp4, rect, dist, paint);
      bmp4.recycle();
      bpmIndex = 1;
      break;
    }
    
    holder.unlockCanvasAndPost(canvas);
    
    sendEmptyMessageDelayed(msg.what, 1000);
   }
  };

  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {
   handler.removeMessages(msg.what);
   
   //コールバック解除
   getHolder().removeCallback(this);
  }
 }
}

Bitmapの表示のたびにファイルからロードし、次のbitmapファイルを開く前にrecycle()メソッドを実行します。
表示するたびにファイルにアクセスするのは効率が悪いような気がしますが、Bitmapをメモリー(RAM)に置いておけないのだから仕方ありません。

今回はSurfaceViewを使いました。
GLSurfaceViewでポリゴンにテクスチャを貼り付けるときも GLUtils.texImage2D の直前でBitmapをロードし直後にrecycle()すると安定する思います。

次回は他の方法を試してみる予定です。
公開しました http://blog.fujiu.jp/2012/02/android-bitmapoutofmemoryerror-2.html

以上、参考になれば幸いです。

登録: 投稿 (Atom)

新アプリケーション