Androidアプリ開発 OpenGL 三角形に色を付け回転させる

三角形を表示することができた。今回は、白黒な画像なので、色を付けてみたいと思う。それに、3次元でモデルを作成したので3DCGなのではあるが、動きがないので、それっぽくみえない。三角形を回転させてみよう。
色を付ける
まず、色。これは「単に赤くしたい」だけなら簡単。glColor4fで、RGBAの値を設定してやればよい。RGBAは、Red、Green、Blue、Alpha。光の三原色とアルファ値で色を決めてやる。引数はfloatの数値で、0~1.0の範囲で指定する。赤にしたいのであれば、1.0、0.0、0.0、1.0を指定すればよい。

public void draw(GL10 gl) {
gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, buffer);
gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);
}

glColor4fをどこで実行すればよいかというと、glDrawArraysで描画する前ならどこでもよい。
サンプルでは、drawの先頭で行っている。
実行すると三角形が赤で表示される。
回転
次に、回転させてみよう。
回転は移動と同じく、マトリックスに回転パラメータを設定した後、glDrawArraysすることで自動的に行われる。
移動がglTranslatefであったのに対して、回転は、glRotatefで行う。ちなみに、メソッド名(関数名)の最後にfと付いているのは、引数がfloatである、という意味。
glRotatefには引数を4つ指定する。最初の引数は、回転の角度。角度の単位は、「度」。ラジアンではない。後の3つは、回転軸となるベクトルをx,y,zの順で指定する。1,0,0ならX軸まわりに回転する。0,1,0ならY軸。
Y軸が上下方向なので、三角形を「こま」のように回すには、0,1,0を指定すればよいであろう。ベクトルといっても単位ベクトルである必要はない。0,2,0でもかまわない。
回転の中心は常に座標系の原点(0,0,0)になる。原点から指定したベクトルの方向に軸を作って回転させる感じになる。
回転角度をフレームごとに変化させれば、アニメーションすることができる。回転角度をクラスのフィールドで覚えておき、描画する度にインクリメントして動画にする。

public class SampleGLSurfaceView extends GLSurfaceView {
private Model model = new Model();
private float angle = 0.0f;
// レンダラークラス
class OpenGLRenderer implements Renderer {
@Override
public void onDrawFrame(GL10 gl) {
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
gl.glMatrixMode(GL10.GL_MODELVIEW);
gl.glLoadIdentity();
gl.glTranslatef(0, 0, -3f);
gl.glRotatef(angle, 0, 1, 0);
angle += 2;
model.draw(gl);
}

実行してみると、見事に三角形が回転する。
回転させると3Dっぽくみえる。

ここで、ひとつ注意しなければならないことがある。移動と回転の順番である。
今現在のコードは、glTranslatefで移動して、glRotatefで回転している。これを回転して、移動といった順番に変更してみる。

@Override
public void onDrawFrame(GL10 gl) {
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
gl.glMatrixMode(GL10.GL_MODELVIEW);
gl.glLoadIdentity();
gl.glRotatef(angle, 0, 1, 0);
gl.glTranslatef(0, 0, -3f);
angle += 2;
model.draw(gl);
}

こうすると、回転軸がずれた感じになる。どうしてかというと、三角形を移動してから、回転をかけた感じになるから。コードの順番としては回転してから、移動なのではあるが、実際は逆になる。マトリックスへのパラメータの設定順が実際の変換順とは逆になる。ここが最大のポイント。

回転と移動の順番の違いは、以下のページでわかりやすく解説されている。

投稿者プロフィール

asai
asai
システムエンジニア
喋れる言語:日本語、C言語、SQL、JavaScript