Mtk's Blog: [Android] Android-NDKでテクスチャを表示するには

How to draw textures in Android-NDK

Havaは大きいソースが扱えないので、[Android] 頂点の多いポリゴンを扱うにはでは頂点数の多いポリゴンをAndroid-NDKを使ってJNIからJavaに大きい配列を渡す方法でバナナを表示しました。この方法はFloatBufferの作成に時間がかかるという問題がありました。
今回は、頂点とテクスチャの機能もJNIで書いてみます。

JNIで画像を扱うには？
テクスチャを表示するためglTexImage2Dを使います。
glTexImage2Dで表示できるテクスチャ画像はunsigned char型配列のビットマップデータです。配列の内容は1ピクセルごとにRGBAの順に1バイトずつです。
このブログを作成している時点ではJNIからres/drawableフォルダーやassetsフォルダーのファイルを扱う方法が見当たりませんでした。
そこで、JNIで画像データを扱うために次のようにしました。

Javaでres/drawableフォルダーの画像をint型配列に変換してJNIに渡す
JNIでJavaから渡されたint型配列をunsigned char型配列に変換しテクスチャ表示する

以下ソースです。
ndk.cpp

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

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

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

//回転
float xrot = 0.0;
float yrot = 0.0;

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

extern "C" JNIEXPORT 
void JNICALL Java_jp_fujiu_NdkTexture_Main_setNdkRotate (JNIEnv *, jobject, jfloat x, jfloat y){
 xrot = x;
 yrot = y;
}

extern "C" JNIEXPORT 
void JNICALL Java_jp_fujiu_NdkTexture_Main_onNdkCreated (JNIEnv *, jobject){
 //背景の色
 glClearColor(1.0, 1.0, 1.0, 1.0);
 glClearDepthf(1.0);

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

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

 //モデルビュー変換
 glMatrixMode(GL_MODELVIEW);
 glLoadIdentity();
 
 //テクスチャ処理
 glGenTextures(1, textures);
 glBindTexture(GL_TEXTURE_2D, textures[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);
}

extern "C" JNIEXPORT 
void JNICALL Java_jp_fujiu_NdkTexture_Main_onNdkChanged (JNIEnv *, jobject, jint width, jint height){
 glViewport(0, 0, width, height);

 //射影変換
 glMatrixMode(GL_PROJECTION);
 glLoadIdentity();

 //視点
 gluPerspective(45, (float)width/(float)height, 0.1, 100);
 gluLookAt(0, 0, 3, 0, 0, 0, 0, 1, 0);
}

extern "C" JNIEXPORT 
void JNICALL Java_jp_fujiu_NdkTexture_Main_onNdkDraw (JNIEnv *, jobject){
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

 glEnableClientState(GL_VERTEX_ARRAY);
 glEnableClientState(GL_NORMAL_ARRAY);
 glEnableClientState(GL_TEXTURE_COORD_ARRAY);
 glEnable(GL_TEXTURE_2D);
 
 //バナナを表示
 glBindTexture(GL_TEXTURE_2D, textures[0]);
 glVertexPointer(3, GL_FLOAT, 0, bananaVerts);
 glNormalPointer(GL_FLOAT, 0, bananaNormals);
 glTexCoordPointer(2, GL_FLOAT, 0, bananaTexCoords);
 glPushMatrix();
 glRotatef(xrot, 0, 1, 0);
 glRotatef(yrot, 1, 0, 0);
 glDrawArrays(GL_TRIANGLES, 0, bananaNumVerts);
 glPopMatrix();
 
 glDisable(GL_TEXTURE_2D);
 glDisableClientState(GL_TEXTURE_COORD_ARRAY);
 glDisableClientState(GL_NORMAL_ARRAY);
 glDisableClientState(GL_VERTEX_ARRAY);
}

extern "C" JNIEXPORT 
void JNICALL Java_jp_fujiu_NdkTexture_Main_ndkFinalize (JNIEnv *, jobject){
 delete [] texData;
}

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;

 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) {
  z[0] /= mag;
  z[1] /= mag;
  z[2] /= mag;
 }

 y[0] = upx;
 y[1] = upy;
 y[2] = upz;

 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];

 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];

 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);
 }

 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));
}

Android.mk

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

これら ndk.cpp、glu.h、Android.mk と、HBehrens-obj2opengl-a0f123e.zipのbanana.h をプロジェクトのjniフォルダーにインポートし、カレントフォルダーをjniに移してndk-buildを実行します。
HBehrens-obj2opengl-a0f123e.zipののbanana.jpgをres/drawableフォルダーにインポートします。

Activityのソース(Main.java)

package jp.fujiu.NdkTexture;

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

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

public class Main extends Activity {
 static {
  System.loadLibrary("ndk");
 }
 
 native private void setNdkPixels(int[] pixels, int width, int height, int size);
 native private void setNdkRotate(float x, float y);
 native private void onNdkCreated();
 native private void onNdkChanged(int width, int height);
 native private void onNdkDraw();
 native private void ndkFinalize();
 
 private MainSurface surface = null;
 
 //タップの座標
 private float xtap = 0.0f;
 private float ytap = 0.0f;
 
 //回転角度
 private float xrot = 0.0f;
 private float yrot = 0.0f;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE); //タイトルバー非表示
 }
 
 @Override
 protected void onResume() {
  super.onResume();
  surface = new MainSurface(this);
  surface.setRenderer(surface);
  surface.setFocusable(true);
  surface.setKeepScreenOn(true);
  setContentView(surface);
 }
 
 @Override
 protected void onPause() {
  super.onPause();
  surface.setKeepScreenOn(false);
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch(event.getAction()){
  case MotionEvent.ACTION_DOWN:
   xtap = event.getX();
   ytap = event.getY();
   break;
  case MotionEvent.ACTION_MOVE:
   xrot += (event.getX() - xtap);
   xtap = event.getX();
   yrot += (event.getY() - ytap);
   ytap = event.getY();
   setNdkRotate(xrot, yrot);
   break;
  }
  return true;
 }
 
 private class MainSurface extends GLSurfaceView implements Renderer{
  public MainSurface(Context context) {
   super(context);
  }

  @Override
  public void onSurfaceCreated(GL10 gl, EGLConfig config) {
   //画像ファイルをint型配列に変換してJNIに渡す
   final BitmapFactory.Options opts = new BitmapFactory.Options();
   opts.inScaled = false;
   opts.inPreferredConfig = Bitmap.Config.ARGB_8888;
   Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.banana, opts);
   int width = bmp.getWidth();
   int height = bmp.getHeight();
   int size = width * height;
   int pixels[] = new int[size];
   bmp.getPixels(pixels, 0, width, 0, 0, width, height);
   bmp.recycle();
   setNdkPixels(pixels, width, height, size);
   
   onNdkCreated();
  }
  
  @Override
  public void onSurfaceChanged(GL10 gl, int width, int height) {
   onNdkChanged(width, height);
  }
  
  @Override
  public void onDrawFrame(GL10 gl) {
   onNdkDraw();
  }

  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {
   ndkFinalize();
   super.surfaceDestroyed(holder);
  }
 }
}

画面をフリックするとバナナが回転するようにしました。

これをエミュレーターで実行したら一瞬でバナナが表示されました。JavaでFloatBufferを作成する方法（エミュレーターで2分くらい）とは大違いの速さです。
テスト環境では、Heapを見比べたらJavaでFloatBufferを作成する方法に比べて1MBほどメモリーの節約になりました。
Android-NDKでビルドしたアプリケーションはARMの端末でしか動作しないのが玉に瑕です。

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

Mtk's Blog

2011年8月6日土曜日

[Android] Android-NDKでテクスチャを表示するには

0 件のコメント:

コメントを投稿