AndroidのOpenGLでポリゴンを描画

AndroidのOpenGLでポリゴンを描画

medium_5061475386

こんにちは、keseranです。

さて前回はOpenGLの初期設定を行ったようなもので、起動しても画面には何も表示されていない状態でしたが、今回はポリゴンを表示してみましょう。

まず必要なものとしては
・頂点情報
・頂点カラー情報
この2つくらいですかね。

頂点カラー情報を入れているのはそのまま作ったのではただ真っ白なポリゴンが表示されるだけで味気ないと思うからです。

ではソースコードの方を見ていきましょう。

まず前回作成したGLRendererクラスに以下のメンバ変数を追加して下さい。
private int mScreenWidth; // スクリーンの幅
private int mScreenHeight; // スクリーンの高さ
private FloatBuffer mVertexBuffer; // 頂点バッファ
private FloatBuffer mColorBuffer; // 頂点カラーバッファ

これらの情報を見て、OpenGLはポリゴンを描画することが出来ます。

頂点情報の中身です。スクリーンの左上を基準としています。
左からXYZと指定しています。現在はZは使わないのですがこの方が都合が良いから入れています。
private float[] vertex = {
0.0f, 0.0f, 0.0f, // 左上
0.5f, 0.0f, 0.0f, // 右上
0.0f, 0.5f, 0.0f, // 左下
0.5f, 0.5f, 0.0f, // 右下
};

頂点カラーはRGBAの順番でそれぞれ頂点カラーを指定しています。
private float[] colors = {
1.0f, 0.0f, 0.0f, 1.0f, // 左上を赤
0.0f, 1.0f, 0.0f, 1.0f, // 右上を緑
0.0f, 0.0f, 1.0f, 1.0f, // 左下を青
1.0f, 1.0f, 1.0f, 1.0f, // 右下を白
};

そしてバッファの生成を行う関数を用意されていますのでこちらを使って下さい。
public static FloatBuffer makeFloatBuffer(float[] floatArray){
ByteBuffer byteBuffer = ByteBuffer.allocateDirect(floatArray.length * 4);
byteBuffer.order(ByteOrder.nativeOrder());
FloatBuffer fb = byteBuffer.asFloatBuffer();
fb.put(floatArray);
fb.position(0);
return fb;
}

ここまでは前準備になります。
さて実装の方に移っていきましょう。

まずスクリーンの幅と高さを保存しましょう。
前回作成しているonSurfaceChanged()メソッド内に書きます。
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
mScreenWidth = width;
mScreenHeight = height;

mVertexBuffer = makeFloatBuffer(vertex);
mColorBuffer = makeFloatBuffer(colors);
}

これで作る必要があるものは全て出来ました。
後は描画するだけです。onDrawFrame()メソッド内に以下のように記述しましょう。
@Override
public void onDrawFrame(GL10 gl) {
// 画面をクリア
gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

// ビューポートの設定
gl.glViewport(0, 0, mScreenWidth, mScreenHeight);
gl.glMatrixMode(GL10.GL_PROJECTION);

// マトリクス情報を初期化
gl.glLoadIdentity();

// 左上が(0.0f, 0.0f)
gl.glOrthof(0.0f, 1.0f, 1.0f, 0.0f, 1.0f, -1.0f);
gl.glMatrixMode(GL10.GL_MODELVIEW);

// 頂点配列を有効にする
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

// 頂点配列を指定する
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, mVertexBuffer);

// 頂点カラーを有効にする
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// 頂点カラー配列を指定する
gl.glColorPointer(4, GL10.GL_FLOAT, 0, mColorBuffer);

// 描画
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

// 有効にしたものを無効にする
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}

こちらのビューポート設定では画面左下を基準として画面のどこまでの領域を使用するか設定しています。
gl.glViewport(0, 0, mScreenWidth, mScreenHeight);

こちらは設定したビューポートの幅と高さを1.0fと見ています。
gl.glOrthof(0.0f, 1.0f, 1.0f, 0.0f, 1.0f, -1.0f);

以上でポリゴンの描画は完成です。
画面左上に四角形のポリゴンが表示されているはずです。

次回はポリゴンの移動や回転を紹介しようと思います。


この記事はあなたの役に立ちましたか?他の人達にも役立ちそうでしたら、上のボタンより共有をお願いします。共有して頂けたら今後提供する記事の参考やモチベーションアップにつながります。

Categorized: Android