2011年5月8日 星期日

[ Android OpenGL ES 教學(四)] 添加顏色

基礎閱讀:[ Android OpenGL ES 教學(三)] 轉換相關方法 發表在http://cheng-min-i-taiwan.blogspot.com/2011/04/android-opengl-es_3388.html
延伸閱讀:[ Android OpenGL ES 教學(五)] 貼皮技術 發表在 http://cheng-min-i-taiwan.blogspot.com/2011/05/android-opengl-es_09.html
參考文章:OpenGL ES Tutorial for Android – Part IV – Adding colors 發表在http://blog.jayway.com/2010/01/14/opengl-es-tutorial-for-android-%E2%80%93-part-iv-adding-colors/

今天試著從參考文章中學習如何在三個旋轉的四方形上添加顏色


首先您必須宣告一個顏色的陣列來對映到四邊形的四個角,每一個角的顏色都包括紅,藍,綠,及透明度的資訊, 其宣告如下:
// 將顏色資訊對應到點陣列上
float[] colors = { 1f, 0f, 0f, 1f, // 左上角 0 red
0f, 1f, 0f, 1f, // 左下角 1 green
0f, 0f, 1f, 1f, // 右下角 2 blue
1f, 0f, 1f, 1f, // 右上角 3 magenta
};

另外也必須宣告一個儲存顏色的浮點緩衝區
// 顏色緩衝區
private FloatBuffer colorBuffer;

把顏色的資訊放到衝區中
// 浮點數是4位元組,顏色(RGBA) * 4 位元組
ByteBuffer cbb = ByteBuffer.allocateDirect(colors.length * 4);
cbb.order(ByteOrder.nativeOrder());
colorBuffer = cbb.asFloatBuffer();
colorBuffer.put(colors);
colorBuffer.position(0);

最後在畫出四方形前將顏色緩衝區打開並指定顏色緩衝區。
// 在渲染期間啟用顏色緩衝區
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// 指定顏色緩衝區。
gl.glColorPointer(4, GL10.GL_FLOAT, 0, colorBuffer);

以下是Square.java完整的列表, 粗體字表示新增部份

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import java.nio.ShortBuffer;

import javax.microedition.khronos.opengles.GL10;

public class Square {
// 點的陣列
private float vertices[] = { -1.0f, 1.0f, 0.0f, // 0, 左上角
-1.0f, -1.0f, 0.0f, // 1, 左下角
1.0f, -1.0f, 0.0f, // 2, 右下角
1.0f, 1.0f, 0.0f, // 3, 右上角
};

// 將顏色資訊對應到點陣列上
float[] colors = { 1f, 0f, 0f, 1f, // 左上角 0 red
0f, 1f, 0f, 1f, // 左下角 1 green
0f, 0f, 1f, 1f, // 右下角 2 blue
1f, 0f, 1f, 1f, // 右上角 3 magenta
};


// 連接點的次序
private short[] indices = { 0, 1, 2, 0, 2, 3 };

// 點的緩衝區
private FloatBuffer vertexBuffer;

// 索引值緩衝區
private ShortBuffer indexBuffer;

// 顏色緩衝區
private FloatBuffer colorBuffer;


public Square() {
// 浮點數是4位元組因此需要把點陣列長度乘以4
ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
vbb.order(ByteOrder.nativeOrder());
vertexBuffer = vbb.asFloatBuffer();
vertexBuffer.put(vertices);
vertexBuffer.position(0);

// 短整數是2位元組因此需要把點陣列長度乘以2
ByteBuffer ibb = ByteBuffer.allocateDirect(indices.length * 2);
ibb.order(ByteOrder.nativeOrder());
indexBuffer = ibb.asShortBuffer();
indexBuffer.put(indices);
indexBuffer.position(0);

// 浮點數是4位元組,顏色(RGBA) * 4 位元組
ByteBuffer cbb = ByteBuffer.allocateDirect(colors.length * 4);
cbb.order(ByteOrder.nativeOrder());
colorBuffer = cbb.asFloatBuffer();
colorBuffer.put(colors);
colorBuffer.position(0);

}

/**
* 畫圖函式
*
* @param gl
*/
public void draw(GL10 gl) {
// 逆時鐘
gl.glFrontFace(GL10.GL_CCW);
// 啟動CULL_FACE
gl.glEnable(GL10.GL_CULL_FACE);
// 刪除多邊形的背景
gl.glCullFace(GL10.GL_BACK);

// 啟動點的緩衝區
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// 指定位置和資料格式
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);

// 在渲染期間啟用顏色緩衝區
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// 指定顏色緩衝區。
gl.glColorPointer(4, GL10.GL_FLOAT, 0, colorBuffer);


// 以三點劃出三角形
gl.glDrawElements(GL10.GL_TRIANGLES, indices.length,
GL10.GL_UNSIGNED_SHORT, indexBuffer);

// 除能點的緩衝區
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
// 除能CULL_FACE
gl.glDisable(GL10.GL_CULL_FACE);
}
}

沒有留言:

張貼留言