Android OpenGLES2.0繪制三角形（二）

2019-12-12 04:18:02

字體：大中小

供稿：網(wǎng)友

選擇繪制三角形作為OpenGL ES 2.0的第一個(gè)實(shí)例，是因?yàn)榍拔闹刑岬降模c(diǎn)、線、三角形是OpenGL ES世界的圖形基礎(chǔ)。無(wú)論多么復(fù)雜的幾何物體，在OpenGL ES的世界里都可以用三角形拼成。關(guān)于Android OpenGL ES 三角形的繪制，在Android官方文檔中有詳細(xì)的說(shuō)明和步驟，本文實(shí)例也是依照官方文檔步驟繪制的三角形。

步驟

依照官方文檔中的說(shuō)明，Android中利用OpenGL ES 2.0繪制三角形的步驟為：

1. 在AndroidManifest.xml文件中設(shè)置使用的OpenGL ES的版本：

<!-- Tell the system this app requires OpenGL ES 2.0. --><uses-feature android:glEsVersion="0x00020000" android:required="true" />

3.0的版本為0x00030000,3.1的版本為0x00030001。
需要注意的是前一篇博客中提到的Android各個(gè)版本對(duì)于OpenGL ES版本的支持，設(shè)置Android應(yīng)用的minSDK不應(yīng)該小于使用的支持OpenGL ES版本的最低Android SDK版本。

2. 毫無(wú)疑問(wèn)的，顯示三角形，需要一個(gè)載體。創(chuàng)建顯示三角形的Activity，利用GLSurfaceView作為顯示三角形的View，圖形的具體渲染工作都是在Render中完成的。

3. 實(shí)現(xiàn)GLSurfaceView的Render，在Render中完成三角形的繪制，具體行為有：

加載頂點(diǎn)和片元著色器
確定需要繪制圖形的坐標(biāo)和顏色數(shù)據(jù)
創(chuàng)建program對(duì)象，連接頂點(diǎn)和片元著色器，鏈接program對(duì)象。
設(shè)置視圖窗口(viewport)。
將坐標(biāo)數(shù)據(jù)顏色數(shù)據(jù)傳入OpenGL ES程序中
使顏色緩沖區(qū)的內(nèi)容顯示到屏幕上。

具體實(shí)現(xiàn)

我們?cè)O(shè)置好OpenGL ES版本、創(chuàng)建入口Activity并設(shè)置好GLSurfaceView做為顯示載體后，就進(jìn)入了我們最主要的工作了。

第一步

首先，我們需要編寫一個(gè)簡(jiǎn)單的頂點(diǎn)著色器和一個(gè)簡(jiǎn)單的片元著色器：
頂點(diǎn)著色器：

 attribute vec4 vPosition; void main() {  gl_Position = vPosition; }

片元著色器：

 precision mediump float; uniform vec4 vColor; void main() {  gl_FragColor = vColor; }

gl_Position和gl_FragColor都是Shader的內(nèi)置變量，分別為定點(diǎn)位置和片元顏色。

第二步

然后，我們確定我們要繪制的圖形的頂點(diǎn)坐標(biāo)和顏色：
我們現(xiàn)在需要繪制的是在一個(gè)三維空間中繪制一個(gè)三角形，三角形當(dāng)然是三個(gè)頂點(diǎn)了。因?yàn)槲覀內(nèi)切沃皇且粋€(gè)平面圖形，為了方便，我們現(xiàn)在不設(shè)置相機(jī)（相機(jī)在后面的博客中使用時(shí)在講解）的情況下，三角形正對(duì)我們來(lái)呈現(xiàn)。所以我們把三個(gè)頂點(diǎn)的Z坐標(biāo)都設(shè)定為0。
上篇博客中也有提到OpenGL ES坐標(biāo)映射到屏幕上，從屏幕中心垂直到上下左右邊緣距離都為1.0，所以（-1.0,0,0）和（0,1.0,0）到原點(diǎn)的距離在屏幕上呈現(xiàn)出來(lái)的結(jié)果是不一樣的，圖解如下（左邊是理想狀態(tài)，右邊是實(shí)際狀態(tài)）:

所以，為了不超出屏幕，我們的坐標(biāo)數(shù)據(jù)設(shè)置為：

float triangleCoords[] = {   0.5f, 0.5f, 0.0f, // top   -0.5f, -0.5f, 0.0f, // bottom left   0.5f, -0.5f, 0.0f // bottom right };

顏色數(shù)據(jù)，我們?cè)O(shè)置為單一顏色：

float color[] = { 1.0f, 1.0f, 1.0f, 1.0f }; //白色

第三步

接著我們開始在Render中實(shí)現(xiàn)我們的三角形繪制了。Render接口有三個(gè)方法，分別為onSurfaceCreated、onSurfaceChanged和onDrawFrame。
在onSurfaceCreated方法中，我們來(lái)創(chuàng)建program對(duì)象，連接頂點(diǎn)和片元著色器，鏈接program對(duì)象。

 //將背景設(shè)置為灰色 GLES20.glClearColor(0.5f,0.5f,0.5f,1.0f);  //申請(qǐng)底層空間 ByteBuffer bb = ByteBuffer.allocateDirect(    triangleCoords.length * 4); bb.order(ByteOrder.nativeOrder()); //將坐標(biāo)數(shù)據(jù)轉(zhuǎn)換為FloatBuffer，用以傳入給OpenGL ES程序 vertexBuffer = bb.asFloatBuffer(); vertexBuffer.put(triangleCoords); vertexBuffer.position(0);  int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER,    vertexShaderCode); int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER,    fragmentShaderCode); //創(chuàng)建一個(gè)空的OpenGLES程序 mProgram = GLES20.glCreateProgram(); //將頂點(diǎn)著色器加入到程序 GLES20.glAttachShader(mProgram, vertexShader); //將片元著色器加入到程序中 GLES20.glAttachShader(mProgram, fragmentShader); //連接到著色器程序 GLES20.glLinkProgram(mProgram);

第四步

在onSurfaceChanged中設(shè)置設(shè)置視圖窗口：

GLES20.glViewport(0,0,width,height);

第五步

最后在onDrawFrame中繪制:

 //將程序加入到OpenGLES2.0環(huán)境 GLES20.glUseProgram(mProgram); //獲取頂點(diǎn)著色器的vPosition成員句柄 mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition"); //啟用三角形頂點(diǎn)的句柄 GLES20.glEnableVertexAttribArray(mPositionHandle); //準(zhǔn)備三角形的坐標(biāo)數(shù)據(jù) GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,   GLES20.GL_FLOAT, false,   vertexStride, vertexBuffer); //獲取片元著色器的vColor成員的句柄 mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor"); //設(shè)置繪制三角形的顏色 GLES20.glUniform4fv(mColorHandle, 1, color, 0); //繪制三角形 GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount); //禁止頂點(diǎn)數(shù)組的句柄 GLES20.glDisableVertexAttribArray(mPositionHandle);

最終效果