[Android] OpenGLでシャープ製端末用3D（立体視）アプリケーションを作る

How to create 3-dimensional Applications on OpenGL

[Android] 3Dアプリケーションの作り方 でSH Developers Squareの3D（立体視）用ライブラリーのインストールについて書きました。
このライブラリーを使って立体視可能なOpenGLアプリケーションを作ってみました。

※画像はイメージです

立体視アプリを作るためにはサイドバイサイド画像を表示します。
サイドバイサイド画像とは、左半分に左目からの視線に映る映像を、右半分に右目からの視線に映る映像を並べた画像です。左右の画像それぞれ横の解像度を半分に縮小します。
サイドバイサイド画像のサンプルです。左右とも同じCGですが少しだけ視点を変えてます。

この画像はピアプロ・キャラクター・ライセンスに基づいてクリプトン・フューチャー・メディア株式会社のキャラクター「鏡音リン」「鏡音レン」を描いたものです。

3D用ライブラリーは自動的に左右の画像を1ドットずつ交互に並べ替えて視差バリアで左目と右目にそれぞれに映像を見せる処理をしてくれます。

立体視アプリを作るに当たり、次の手順は完了しているものとします。

1. SH Develpoers Squareにユーザー登録しライブラリーをダウンロードする
2. ライブラリーをAndroid SDKのadd-onsフォルダーに解凍する
3. EclipseでAndroidプロジェクトを新規作成し、Build targetの「Sharp_addon」を選択する（Build targetは2.1以上ならどれでもOK）

OpenGLでサイドバイサイド画像を表示するには、1フレームごとに画面の左半分に左目の視線の映像を描画した後、右半分に右目の視線の映像を描画します。
今回のサンプルはGoogle codeのソースを参考に立体視アプリ用にアレンジしました。キューブが回転しながら前後左右に動きます。

マニフェスト(AndroidManifest.xml) <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="jp.fujiu.AndroidApp.ThreeDsample" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="7" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".Main" android:configChanges="keyboardHidden|orientation" android:screenOrientation="landscape"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <uses-library android:name="jp.co.sharp.android.stereo3dlcd"/> </application> </manifest>
Activity(Main.java)
package jp.fujiu.AndroidApp.ThreeDsample; 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 jp.co.sharp.android.stereo3dlcd.SurfaceController; import android.app.Activity; import android.content.Context; import android.opengl.GLSurfaceView; import android.opengl.GLU; import android.opengl.GLSurfaceView.Renderer; import android.os.Bundle; import android.view.MotionEvent; import android.view.Window; public class Main extends Activity { private MainSurface surface = null; @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); } private class MainSurface extends GLSurfaceView implements Renderer{ private SurfaceController sc = null; //頂点座標 private float vertices[] = new float[] { //前面 -0.5f, -0.5f, 0.5f, 0.5f, -0.5f, 0.5f, -0.5f, 0.5f, 0.5f, 0.5f, 0.5f, 0.5f, //背面 -0.5f, -0.5f, -0.5f, -0.5f, 0.5f, -0.5f, 0.5f, -0.5f, -0.5f, 0.5f, 0.5f, -0.5f, //左面 -0.5f, -0.5f, 0.5f, -0.5f, 0.5f, 0.5f, -0.5f, -0.5f, -0.5f, -0.5f, 0.5f, -0.5f, //右面 0.5f, -0.5f, -0.5f, 0.5f, 0.5f, -0.5f, 0.5f, -0.5f, 0.5f, 0.5f, 0.5f, 0.5f, //上面 -0.5f, 0.5f, 0.5f, 0.5f, 0.5f, 0.5f, -0.5f, 0.5f, -0.5f, 0.5f, 0.5f, -0.5f, //下面 -0.5f, -0.5f, 0.5f, -0.5f, -0.5f, -0.5f, 0.5f, -0.5f, 0.5f, 0.5f, -0.5f, -0.5f, }; //頂点座標バッファ private FloatBuffer vertexBuff; //オブジェクトの回転角度 private float xrot = 0.0f; private float yrot = 0.0f; //描画範囲 private int width; private int halfWidth; private int height; //3D・2D切替フラグ private boolean is3D = true; private boolean resetViewport = false; public MainSurface(Context context) { super(context); sc = new SurfaceController(this); sc.setStereoView(true); } @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { //背景の初期化 gl.glClearColor(1.0f, 1.0f, 1.0f, 0.0f); gl.glClearDepthf(1.0f); //バッファの生成 vertexBuff = makeFloatBuffer(vertices); //シェーディング gl.glShadeModel(GL10.GL_SMOOTH); //深度テスト gl.glEnable(GL10.GL_DEPTH_TEST); //モデルビュー変換 gl.glMatrixMode(GL10.GL_MODELVIEW); gl.glLoadIdentity(); } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { //描画範囲の初期化 this.width = width; this.halfWidth = width / 2; this.height = height; //射影変換 gl.glMatrixMode(GL10.GL_PROJECTION); gl.glLoadIdentity(); GLU.gluPerspective(gl, 45.0f, (float)width/(float)height, 0.1f, 100f); } @Override public void onDrawFrame(GL10 gl) { //背景塗り潰し gl.glClear(GL10.GL_COLOR_BUFFER_BIT|GL10.GL_DEPTH_BUFFER_BIT); if (is3D) { //(1)左の描画 gl.glViewport(0, 0, this.halfWidth, this.height); gl.glPushMatrix(); GLU.gluLookAt( gl, -0.05f, 0.0f, 3.0f, //カメラ座標 0.01f, 0.0f, 0.0f, //カメラの向き 0.0f, 1.0f, 0.0f //カメラ上方向 ); drawObjects(gl); gl.glPopMatrix(); //(2)右の描画 gl.glViewport(this.halfWidth, 0, this.halfWidth, this.height); gl.glPushMatrix(); GLU.gluLookAt( gl, 0.05f, 0.0f, 3.0f, //カメラ座標 -0.01f, 0.0f, 0.0f, //カメラの向き 0.0f, 1.0f, 0.0f //カメラ上方向 ); drawObjects(gl); gl.glPopMatrix(); } else { //単視点の描画 if (resetViewport) { gl.glViewport(0, 0, this.width, this.height); resetViewport = false; } gl.glPushMatrix(); GLU.gluLookAt( gl, 0.0f, 0.0f, 3.0f, //カメラ座標 0.0f, 0.0f, 0.0f, //カメラの向き 0.0f, 1.0f, 0.0f //カメラ上方向 ); drawObjects(gl); gl.glPopMatrix(); } //キューブの回転 xrot += 1.0f; yrot += 0.5f; } /** * This method is used in substitution for #onDrawFrame. * onDrawFrameメソッドの代わりにプリミティブを表示する処理を書く * @param gl the GL interface. */ private void drawObjects(GL10 gl){ gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuff); gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glPushMatrix(); //回転 gl.glRotatef(xrot, 1.0f, 0.0f, 0.0f); gl.glRotatef(yrot, 0.0f, 1.0f, 0.0f); //移動 gl.glTranslatef(1f, 1f, 0.0f); //赤い面の描画 gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 4, 4); //緑の面の描画 gl.glColor4f(0.0f, 1.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 8, 4); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 12, 4); //青い面の描画 gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 16, 4); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 20, 4); gl.glPopMatrix(); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case MotionEvent.ACTION_UP: //3D・2D切替 is3D = !is3D; sc.setStereoView(is3D); resetViewport = true; break; } return true; } } private static FloatBuffer makeFloatBuffer(float[] arr) { ByteBuffer bb = ByteBuffer.allocateDirect(arr.length*4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(arr); fb.position(0); return fb; } }
res/values/string.xmlは自動生成された内容を使ってます。
レイアウト用xmlは使用しません。

画面をタップするたびに3Dと2Dが切り替わります。
画面の向きは横に固定していますが、縦向きでも立体視できます。
立体感を演出するポイントはonDrawFrameメソッドの「(1)左の描画」「(2)右の描画」のGLU.gluLookAtによる視点の位置と向きです。
左右の視差を大きくすれば立体感も増えますが、大きくしすぎると映像が乱れて見えます。
このサンプルでは視点の位置は固定ですが、視点が移動するアプリでも右の描画の時だけ視点のX座標の位置と向きを変えるだけです。
ライブラリーのおかげで簡単に立体視化できますし、既存のOpenGLアプリの立体視化も簡単にできそうです。
立体視アプリケーションの開発コストはほとんど変わらないと思います。
ただし、横方向の実質的な解像度が半分になる、描画処理が2倍に増えるなどのデメリットがあります。仕様によってはパフォーマンス向上のため、やむなくポリゴンを減らす必要があるかもしれません。
サイドバイサイド方式は、どれだけフレームレートの低い端末でもちゃんとステレオ表示できるのが強みです。

立体視アプリ実行中のスクリーンショットはこんな画像です。

ポリゴンはサイドバイサイドで表示されてますが、タスクバーが1ドットごとにシャッフルされてます。
3Dテレビやニンテンドー3DSなど立体視のコンテンツが増えているので知っていて損はない技術だと思います。

キーワード
side by side image GLSurfaceView Renderer jp.co.sharp.android.stereo3dlcd.SurfaceController LYNX3D SH-30C GALAPAGOS SoftBank 003SH 005SH AQUOS PHONE 006SH SH-12C

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