[Android] OpenGL ESで文字を表示する

How to draw text on GLSurfaceView

AndroidのOpenGL ESには画面に文字を表示するAPIが無いようです。
いくつかのソースを調べたところ、文字を表示するために次のような2種類の方法がありました。

1.文字の形のポリゴンを表示する
2.文字を書いたビットマップ画像をテクスチャとして表示する

「1.文字の形のポリゴンを表示する」方法は、文字の種類や画数の多い日本語の表示には手間が多すぎます。
「2.文字を書いたビットマップ画像をテクスチャにする」のサンプルを作ってみます。
あらかじめ文字を書いたビットマップ画像を用意するのではなく、ビットマップ画像を動的に生成します。
注意するべき点はテクスチャに表示するビットマップ画像のサイズを2の累乗に設定することです。
例:128ピクセル×64ピクセル、512ピクセル×512ピクセル、など
このサイズを守らなくてもテクスチャ表示できる機種とできない機種があります。Android SDKのエミュレーターでは表示できてしまいますが、ほとんどの機種では表示できないと思います。
エミュレーターではテクスチャ表示できるのに実機では表示できない場合は画像のサイズが原因かもしれません。
テクスチャ表示するアプリは複数の機種で動作確認することをお勧めします。

GlSurfaceViewに現在時刻の文字を表示するサンプルソースです。
パーミッションは設定不要のためマニフェストは省略します。レイアウト用xmlも使いません。
package jp.fujiu.AndroidApp.GlClock; import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import java.util.Calendar; 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.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.opengl.GLSurfaceView; import android.opengl.GLU; import android.opengl.GLUtils; import android.opengl.GLSurfaceView.Renderer; import android.os.Bundle; public class Main extends Activity { private MainSurface surface = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setTitle(getClass().getSimpleName()); surface = new MainSurface(this); surface.setRenderer(surface); surface.setFocusable(true); surface.setKeepScreenOn(true); setContentView(surface); } @Override protected void onResume() { super.onResume(); } @Override protected void onPause() { super.onPause(); } private class MainSurface extends GLSurfaceView implements Renderer{ //頂点座標 private float apexs[] = new float[] { -1.5f, -1.5f, 1.5f, -1.5f, -1.5f, 1.5f, 1.5f, 1.5f, }; //頂点座標バッファ private FloatBuffer apexBuff; //頂点テクスチャ private float coords[] = new float[] { //上下反転 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, }; //頂点テクスチャバッファ private FloatBuffer coordsBuff; private int[] textures = new int[1]; private int textureId = 0; //回転の角度 private float rotateZ = 0.0f; //テクスチャ画像のサイズ private int bmpWidth; private int bmpHeight; //文字のサイズ private static final float TEXT_SIZE = 20.0f; //文字の色 private static final int TEXT_COLOR = Color.WHITE; //文字列の幅 private float stringWidth = 0.0f; //文字を描画する座標 private float drawX; private float drawY; private StringBuffer text = new StringBuffer(32); private Paint paint = null; private Calendar calendar = null; //最後にテクスチャを描画した時間 private int lastDrawSecond = -1; private int second; public MainSurface(Context context) { super(context); } @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { paint = new Paint(); paint.setTextSize(TEXT_SIZE); //文字の表示に必要な横幅を計算 text.append("ただ今 " + Calendar.getInstance().getTime().toLocaleString()); float[] widths = new float[text.length()]; paint.getTextWidths(text.toString(), widths); stringWidth = 0.0f; for (int i=0; i<widths.length; i++){ stringWidth += widths[i]; } //文字の表示に必要は横幅を満たす2の累乗の数を計算 bmpWidth = 2; while(stringWidth > bmpWidth){ bmpWidth *= 2; } //このサンプルではビットマップを正方形にするので高さは幅と同じ bmpHeight = bmpWidth; //文字を描画する座標を画像の中心に設定 drawX = ((float)bmpWidth - stringWidth) / 2.0f; drawY = ((float)bmpHeight + TEXT_SIZE) / 2.0f; //バッファの生成 apexBuff = makeFloatBuffer(apexs); coordsBuff = makeFloatBuffer(coords); } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { gl.glViewport(0, 0, width, height); gl.glMatrixMode(GL10.GL_PROJECTION); gl.glLoadIdentity(); GLU.gluPerspective(gl, 45.0f, (float)width/(float)height, 1f, 100f); GLU.gluLookAt(gl, 0, 0, 3, 0, 0, 0, 0, 1, 0); //背面塗り潰し色の指定 gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);//黒 } @Override public void onDrawFrame(GL10 gl) { calendar = Calendar.getInstance(); second = calendar.get(Calendar.SECOND); //秒以下を角度に設定 this.rotateZ = ((float)second + (float)calendar.get(Calendar.MILLISECOND)/1000.0f)* 6.0f; //1秒ごとにビットマップを書き換え if (lastDrawSecond != second){ lastDrawSecond = second; if (textureId != 0){ gl.glDeleteTextures(1, textures, 0); } gl.glGenTextures(1, textures, 0); textureId = textures[0]; gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId); //ビットマップ作成 Bitmap bitmap = Bitmap.createBitmap(bmpWidth, bmpHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); //文字の描画 text.delete(0, text.length()); text.append("ただ今 " + calendar.getTime().toLocaleString()); paint.setColor(TEXT_COLOR); canvas.drawText(text.toString(), drawX, drawY, paint); GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR); bitmap.recycle(); } gl.glClear(GL10.GL_COLOR_BUFFER_BIT); //テクスチャーの有効化 gl.glEnable(GL10.GL_TEXTURE_2D); gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId); //頂点配列の指定 gl.glVertexPointer(2, GL10.GL_FLOAT, 0, apexBuff); gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); //テクスチャ配列の指定 gl.glTexCoordPointer(2 ,GL10.GL_FLOAT, 0, coordsBuff); gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY); //描画 gl.glPushMatrix(); gl.glRotatef(this.rotateZ, 0.0f, 0.0f, -1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix(); gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY); //テクスチャーの無効化 gl.glDisable(GL10.GL_TEXTURE_2D); } } private static FloatBuffer makeFloatBuffer(float[] values) { ByteBuffer bb = ByteBuffer.allocateDirect(values.length*4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(values); fb.position(0); return fb; } } (2011年5月30日訂正、20011年8月2日訂正)
ポリゴンらしく回転させてます。1分ごとに1回転します。
※画像や文字を回転させるだけならSurfaceViewでもできます。文字を回転させても読みにくいだけです。

ビットマップ画像の作成（動的ビットマップ画像）は負荷が高いらしく、あまり短い間隔でビットマップ画像を作成するとLow Memoryの警告がたくさん出たあげく強制終了することがありした。
対策として1秒に1回だけビットマップ画像を作成することにしました。

GLSurfaceView#onDrawFrameメソッド内でのメモリーの確保や解放は極力避けた方がいいようです。（StringではなくStringBufferを使っているのもそのため）
負荷軽減のためにはあらかじめ文字を描いた画像（静的ビットマップ画像）を表示する方がいいと思います。

OpenGLは機種ごとの動作の違いがはっきり現れるので実機テストが欠かせません。

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

キーワード
GLSurfaceView Renderer createBitmap Canvas Panit