Mtk's Blog: [Android] アナログ時計のアプリをC/C++で改良

Analog clock on OpenGL by Android-NDK
前回のアナログ時計アプリのOpenGLの部分をC/C++言語で書けるだけ書いてみました。

C/C++を利用した場合、Javaだけで書いたアプリと比べると次のような特徴があります。
・マシン語で動作するコードの比率が増える
・C/C++出使用するオブジェクトはガーベジコレクター(GC)の対象にならない
このおかげでアプリの高速化やバッテリー消費を抑えるなどの効果が期待できます。

今回の開発環境は次の通りです。
・64bit版 Windows8
・32bit版 Eclipse3.7 (Windows XPモードで使用)
・Android-SDK r22.3
・Android-NDK r9

針の画像です。

左から秒針、分針、時針のつもりです。
針の画像それぞれのピクセル数は32×128です。一番右の黒い塗りつぶしの領域は使用しません。

Eclipseのパッケージ・エクスプローラーで、プロジェクトの res フォルダーの下に
drawable-nodpi
というフォルダーを作り針の画像を配置します。

以下ソースです。
※ Android.mk と jni.cpp と glu.h の3つのファイルはEclipseのプロジェクト・エクスプローラーでjniというフォルダーを作ってそこに保存します。

アクティビティ(MainActivity.java)

package jp.fujiu.analogclockjni;

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

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

public class MainActivity extends Activity {
 static {
  System.loadLibrary("jni");
 }
 
 private MainSurface surface = null;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  surface = new MainSurface(getApplicationContext());
  surface.setRenderer(surface);
  surface.setFocusable(true);
  surface.setKeepScreenOn(true);
  setContentView(surface);
 }

 // OpenGLのViewクラス
 private class MainSurface extends GLSurfaceView implements Renderer{
  native private void setJniPixels(int[] pixels, int width, int height);
  native private void onJniSurfaceCreated();
  native private void onJniSurfaceChanged(int width, int height);
  native private void onJniDrawFrame();
  native private void jniSurfaceDestroyed();
  
  public MainSurface(Context context) {
   super(context);
   
   //画像を読み込んでJNIに渡す
   Bitmap dstImage = BitmapFactory.decodeResource(getResources(), R.drawable.clock_needles);
   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);
  }
 }
}

Android.mk

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

jni.cpp

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

extern "C" {
 // 針ポリゴンの頂点座標
 float secNeedle[] = { -0.125f, -0.5f, 0.125f, -0.5f, -0.125f, 0.5f, 0.125f, 0.5f };
 float minNeedle[] = { -0.125f, -0.5f, 0.125f, -0.5f, -0.125f, 0.5f, 0.125f, 0.5f };
 float hourNeedle[] = { -0.125f, -0.5f, 0.125f, -0.5f, -0.125f, 0.5f, 0.125f, 0.5f };
 
 //秒針画像の頂点
 float secNeedleCoords[] = { 0, 1, 0.25f, 1, 0, 0, 0.25f, 0 };
 
 //分針画像の頂点
 float minNeedleCoords[] = { 0.25f, 1, 0.5f, 1, 0.25f, 0, 0.5f, 0 };
 
 //時針画像の頂点
 float hourNeedleCoords[] = { 0.5f, 1, 0.75f, 1, 0.5f, 0, 0.75f, 0 };
 
 //テクスチャの各定義
 GLuint textures[1];
 GLuint textureId = 0;
 unsigned char* pixels;
 
 //テクスチャのサイズ
 int texWidth;
 int texHeight;
 
 // カメラの位置
 float cameraX = 0;
 float cameraY = 0;
 
 //現在時刻
 time_t now;
 struct tm *tmNow;
 int sec;
 int min;
 int hour;
 int preSec = -1;
 
 //針の角度
 float secDegree;
 float minDegree;
 float hourDegree;
 
 JNIEXPORT void JNICALL Java_jp_fujiu_analogclockjni_MainActivity_00024MainSurface_setJniPixels(JNIEnv *env, jobject, jintArray jintPixels, jint width, jint height) {
  texWidth = width;
  texHeight = height;
 
  // jintArrayをjint配列に変換
  jint* arr = env->GetIntArrayElements(jintPixels, NULL);
 
  // int型(4バイト)ARGBのピクセル情報を1バイトごとにRGBAに並べ替えてunsigned char型配列に格納
  int size = width * height;
  pixels = new unsigned char[size * 4];
  for (int i = 0; i < size; i++) {
   int j = i * 4;
   pixels[j + 2] = arr[i]; //Blue
   arr[i] >>= 8;
   pixels[j + 1] = arr[i]; //Green
   arr[i] >>= 8;
   pixels[j + 0] = arr[i]; //Red
   arr[i] >>= 8;
   pixels[j + 3] = arr[i]; //Alpha
  }
 }
 
 JNIEXPORT void JNICALL Java_jp_fujiu_analogclockjni_MainActivity_00024MainSurface_onJniSurfaceCreated(JNIEnv *, jobject) {
  // テクスチャ管理番号割り当て
  glDeleteTextures(1, textures);
  glGenTextures(1, textures);
  textureId = textures[0];
 
  // テクスチャ管理番号バインド
  glBindTexture(GL_TEXTURE_2D, textureId);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, texWidth, texHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, pixels);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
 }
 
 JNIEXPORT void JNICALL Java_jp_fujiu_analogclockjni_MainActivity_00024MainSurface_onJniSurfaceChanged(JNIEnv *, jobject, jint width, jint height) {
  glViewport(0, 0, width, height);
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
 
  int size = width>height ? height : width;
  glViewport((width - size) / 2, (height - size) / 2, size, size);
 
  // 背面塗り潰し色の指定・黒
  glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
 }
 
 JNIEXPORT void JNICALL Java_jp_fujiu_analogclockjni_MainActivity_00024MainSurface_onJniDrawFrame(JNIEnv *, jobject) {
  //現在時刻から各針の角度を算出
  now = time(NULL);
  tmNow = localtime(&now);
  sec = tmNow->tm_sec;
  if (sec != preSec){
   preSec = sec;
   secDegree = (float) sec * 6;
   min = tmNow->tm_min;
   minDegree = (float) min * 6 + secDegree / 60;
   hour = tmNow->tm_hour;
   hourDegree = (float) hour * 30 + minDegree / 12;
  }
 
  // 画面クリア
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
  glPushMatrix();
 
  // カメラ
  gluLookAt(cameraX, cameraY, 3, cameraX, cameraY, 0, 0, 1, 0);
 
  // テクスチャーの有効化
  glEnable(GL_TEXTURE_2D);
  glEnableClientState(GL_TEXTURE_COORD_ARRAY);
  glBindTexture(GL_TEXTURE_2D, textureId);
 
  //アルファブレンドの有効化
  glEnable(GL_BLEND);
  glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 
  glMatrixMode(GL_PROJECTION);
 
  //秒針の表示
  glPushMatrix();
  glLoadIdentity();
 
  // 頂点配列の指定
  glEnableClientState(GL_VERTEX_ARRAY);
  glVertexPointer(2, GL_FLOAT, 0, secNeedle);
 
  glRotatef(secDegree, 0, 0, -1);
 
  glTexCoordPointer(2, GL_FLOAT, 0, secNeedleCoords);
 
  // テクスチャ描画
  glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
 
  glDisableClientState(GL_VERTEX_ARRAY);
 
  glPopMatrix();
 
  //分針の表示
  glPushMatrix();
  glLoadIdentity();
 
  // 頂点配列の指定
  glEnableClientState(GL_VERTEX_ARRAY);
  glVertexPointer(2, GL_FLOAT, 0, minNeedle);
  glRotatef(minDegree, 0, 0, -1);
 
  glTexCoordPointer(2, GL_FLOAT, 0, minNeedleCoords);
 
  // テクスチャ描画
  glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
 
  glDisableClientState(GL_VERTEX_ARRAY);
 
  glPopMatrix();
 
  //時針の表示
  glPushMatrix();
  glLoadIdentity();
 
  // 頂点配列の指定
  glEnableClientState(GL_VERTEX_ARRAY);
  glVertexPointer(2, GL_FLOAT, 0, hourNeedle);
  glRotatef(hourDegree, 0, 0, -1);
 
  glTexCoordPointer(2, GL_FLOAT, 0, hourNeedleCoords);
 
  // テクスチャ描画
  glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
 
  glDisableClientState(GL_VERTEX_ARRAY);
 
  glPopMatrix();
 
  //アルファブレンドの無効化
  glDisable(GL_BLEND);
 
  // テクスチャーの無効化
  glDisableClientState(GL_TEXTURE_COORD_ARRAY);
  glDisable(GL_TEXTURE_2D);
 
  glPopMatrix();
 }
 
 JNIEXPORT void JNICALL Java_jp_fujiu_analogclockjni_MainActivity_00024MainSurface_jniSurfaceDestroyed(JNIEnv *, jobject) {
  delete[] pixels;
 }
}

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

※特別な権限(Permission)は不要なのでマニフェストは省略します。
Target SDK Version が4以上の設定でビルドできます。
Android1.6以降で動作します。
Android-NDKのビルド方法は環境に強く依存するので省略させて頂きます。
SH-03C(実機)、Android-SDK付属のエミュレーター、Blue Stacksで動作することを確認していますが動作保証は出来ません。

エミュレーターのスクリーンショットです。

前回のJavaだけで書いたアプリと同じように動作するように作ったので見た目の変化はありません。
1秒に1回しか画面が変化しないので、ログまでチェックしないとGCが減ったかどうかは分かりにくいですね。

関連ブログ
[Android] アナログ時計のアプリを作ってみました
[Android] ストップウォッチアプリの表示をC言語でスムーズに改造する
[Android] ストップウォッチアプリを作ってみました
[Android] 方位センサーを使ってコンパスアプリを作る
[Android] OpenGLでプロ生ちゃんをアニメーションさせる
[Windows8][Android] Can't bind to local 8600 for debugger
[Android] 端末の傾きに立方体を連動させる
[Android] フリーサイズの画像をOpenGLのテクスチャに表示する
[Android] Android-NDKでテクスチャを表示するには
[Android] OpenGLで頂点の多いポリゴンを扱うには

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

Mtk's Blog

2014年1月4日土曜日

[Android] アナログ時計のアプリをC/C++で改良

0 件のコメント:

コメントを投稿