/var/log/messages

debugging with sixth sense

OpenGL ES にてグラデな背景

自分メモです。

位置情報が以下なカンジ。

    float positions[] = {
        -1f, -1f, 0f, // 左上
        -1f, 1f, 0f,  // 左下
        1f, -1f, 0f,  // 右上
        1f, 1f, 0f,   // 右下
    };

全部、なので固定です。で、この配列を OpenGL なメモリに転送。

    ByteBuffer bb _ ByteBuffer.allocateDirect(positions.length*4);
    bb.order(ByteOrder.nativeOrder());
    FloatBuffer fb = bb.asFloatBuffer();
    fb.put(position);
    fb.position(0);

あるいはグラデな背景なので頂点毎の色の情報を定義します。

    float colors [] = {
            4f / 255f, 68f / 255f, 154f / 255f, 1f,   // 左下
            25f / 255f, 140f / 255f, 255f / 255f, 1f, // 左上
            3f / 255f, 67f / 255f, 153f / 255f, 1f,   // 右下
            25f / 255f, 140f / 255f, 255f / 255f, 1f, // 右上
    };

これも同様に OpenGL なメモリに転送しますが同じ命令の並びなので略。その後、GL_VERTEX_ARRAY と GL_COLOR_ARRAY を有効にして描画な形です。

    gl10.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    gl10.glEnableClientState(GL10.GL_COLOR_ARRAY);
    gl10.glVertexPointer(3, GL10.GL_FLOAT, 0, fb);
    gl10.glColorPointer(4, GL10.GL_FLOAT, 0, mColorBuffer);

    gl10.glMatrixMode(GL10.GL_MODELVIEW);

    gl10.glLoadIdentity();

    gl10.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

ええとこんな引用では微妙なので gist も以下に貼っておきます。

このサンプルは初めての OpenGL ES に記載されている材料およびそこから提供されているサンプルコードを使わせて頂いております。それにしてもこの書籍は良書だと思います。

サンプルな MainActivity の中の GLRendererBase のサブクラスの定義ですが

  • onSurfaceChanged でテクスチャな配列にリソースな素材を Bitmap として読み込んで格納
  • setTexture という手続きで配列のどの要素を扱うかを確定させる
  • setTextureArea という手続きで表示対象となっているテクスチャについてその UV 座標の指定を行なう
  • drawQuad という手続きで任意座標に四角を描画する (頂点座標の指定)

なんか細かい部分を色々スルーしちゃってますねorz ただ、ざっくりベースでは合ってるはずで、手続き分割のカンジも凄く分かりやすくて良いですよね。

で、背景描画についてはテクスチャ使っていないので drawQuad ではなくて drawBackground という手続きを定義して云々してます。

また、このサンプルはテクスチャ動かしてないですが、

  • 動かさないものについては glPushMatrix と glPopMatrix の呼び出しで囲む
  • 動かすものについては glPushMatrix および glPopMatrix の呼び出し不要

という形で切り分けることができるようです。

Comments