Android 三種繪制形式
前言:大家都知道埋嵌，Android Opengles的基本圖元有點(diǎn)破加，線，三角形雹嗦，任何復(fù)雜的圖形都能用這個(gè)三個(gè)圖元構(gòu)成范舀，其中點(diǎn)的就只需要知道其坐標(biāo)值就可以繪制了，而線和三角形的繪制形式是有多種的了罪。wtf,有人會(huì)想著說的是什么意思尿背，線不就是兩個(gè)點(diǎn)的連線嗎？這種說法沒錯(cuò)捶惜，但這是繪制線的一種表現(xiàn)形式田藐，三角形也是類似的
一.點(diǎn)的繪制方式
在前兩篇講解三角形繪制的時(shí)候，大家肯定注意到了這一樣代碼：
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vCount);
這是繪制三角形的一種形式吱七，如果是繪制點(diǎn)改成
GLES20.glDrawArrays(GLES20.GL_POINTS, 0, vCount);
繪制點(diǎn)的簡(jiǎn)單汽久，就不過多的說明了.
二.線的繪制方式
首先貼張圖來展現(xiàn)一下opengl線的繪制是哪三種形態(tài):
從圖上可以直觀的展現(xiàn)出來：
- GL_LINES：是將傳入的頂點(diǎn)，依次兩兩配對(duì)組成線段進(jìn)行繪制踊餐，若頂點(diǎn)數(shù)為奇數(shù)景醇，則將最后一個(gè)給忽略掉。
- GL_LINE_STRIP：是將傳入的頂點(diǎn)吝岭，進(jìn)行依次的連接繪制
- GL_LINE_LOOP：是將傳入的頂點(diǎn)三痰，進(jìn)行依次的連接繪制，最后將頭尾頂點(diǎn)進(jìn)行連接窜管，形成一個(gè)閉環(huán)散劫。
NO Code No BB 下面從代碼層面上進(jìn)行著三種形式的展示：
在前兩章講解畫三角形的上面做一些修改就可以畫直線了.
在方法 :
initVertexData()
中，先對(duì)頂點(diǎn)頂點(diǎn)坐標(biāo)進(jìn)行一個(gè)修改幕帆，因?yàn)橐媰蓷l直線获搏，所以需要4個(gè)頂點(diǎn)即12個(gè)值.
vCount = 4; //因?yàn)槭?個(gè)頂點(diǎn)
float vertices[] = new float[]
{
-4 * UNIT_SIZE, 0,
0, 0, -4 * UNIT_SIZE, 0,
4 * UNIT_SIZE, 0, 0,
0, 4 * UNIT_SIZE, 0
};
在修改頂點(diǎn)顏色的值(這步可以不做，因?yàn)楸尘笆呛谏氖瑩Q成白色的清楚一點(diǎn))：
float colors[] = new float[]
{
1, 1, 1, 0,
1, 1, 1, 0,
1, 1, 1, 0,
1, 1, 1, 0
};
最后一步將
drawSelf()
中的繪制圖元替換掉就可以了,改成
GLES20.glDrawArrays(GLES20.GL_LINES, 0, vCount);
效果圖如下:
直線的第二種繪制方式:
將
GLES20.glDrawArrays(GLES20.GL_LINE_STRIP, 0, vCount);
效果圖如下:
直線的第三種繪制方式:
將
GLES20.glDrawArrays(GLES20.GL_LINE_STRIP, 0, vCount);
效果圖如下:
以上效果圖驗(yàn)證了直線的繪制方式常熙。
三角形的繪制方式
首先貼張圖來展現(xiàn)一下opengl三角形的繪制是哪三種形態(tài):
截圖來至于:《android游戲開發(fā)寶典》
- GL_TRIANGLE：其實(shí)繪制三角形類型之一纬乍。它是直接用三個(gè)頂點(diǎn)來表示一個(gè)三角形，這句話的意思就是假設(shè)你繪制3個(gè)三角形裸卫，有兩個(gè)三角形的頂點(diǎn)是重合的仿贬，還是分別要對(duì)重合頂點(diǎn)聲明，在頂點(diǎn)數(shù)組中會(huì)有12個(gè)頂點(diǎn)墓贿，其中有兩三個(gè)頂點(diǎn)的數(shù)據(jù)是重復(fù)的茧泪，但這是必須的，因?yàn)槊總€(gè)三角形的頂點(diǎn)都必須單獨(dú)的聲明募壕。
- GL_TRIANGLE_STRIP:繪制三角形帶调炬，在繪制過程中前一個(gè)三角形的后兩個(gè)頂點(diǎn)语盈，會(huì)被后一個(gè)三角形引用舱馅，然后串聯(lián)起來形成三角形帶。若有N個(gè)頂點(diǎn)刀荒，則繪制出的三角形有N-2個(gè)
- GL_TRIANGLE_FAN:以第一個(gè)點(diǎn)為中心點(diǎn)代嗤，其它頂點(diǎn)作為邊緣點(diǎn)繪制出組成扇型的相鄰三角形
NO Code No BB 下面從代碼層面上進(jìn)行著三種形式的展示：
在前兩章講解畫三角形的上面做一些修改就可以畫三角形了.
-
GL_TRIANGLE的繪制
首先是修改頂點(diǎn)數(shù)據(jù)將
initVertexData()
中的頂點(diǎn)數(shù)據(jù)修改為:
float vertices[] = new float[]{
//第一個(gè)triangle
-4*UNIT_SIZE,0,0,
0,-4*UNIT_SIZE,0,
0,0,0,
//第二個(gè)triangle
0,-4*UNIT_SIZE,0,
0,0,0,
4*UNIT_SIZE,-4*UNIT_SIZE,0,
//第三個(gè)triangle
0,0,0,
4*UNIT_SIZE,-4*UNIT_SIZE,0,
4*UNIT_SIZE,4*UNIT_SIZE,0
};
從上面可以看出，雖然有些頂點(diǎn)是重復(fù)的缠借，但GL_TRIANGLE畫三角形是各畫各的干毅，頂點(diǎn)數(shù)據(jù)之間不會(huì)復(fù)用的。
再將各個(gè)頂點(diǎn)的顏色給修改了
float colors[] = new float[]
{
1, 1, 1, 0,
1, 1, 1, 0,
1, 1, 1, 0,
1, 0, 0, 0,
1, 0, 0, 0,
1, 0, 0, 0,
0, 1, 0, 0,
0, 1, 0, 0,
0, 1, 0, 0,
};
因?yàn)橛?個(gè)頂點(diǎn)泼返，從顏色可以看出只有三種顏色即白硝逢，紅，綠绅喉。
最后將繪制模式給更改為:
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vCount);
最后的效果圖為:
- GL_TRIANGLE_STRIP的繪制
在繪制GL_TRIANGLE_STRIP的時(shí)候渠鸽，需要注意每個(gè)三角形頂點(diǎn)的繪制順序是有一定規(guī)律的如下:
其規(guī)律是：
構(gòu)建當(dāng)前三角形的頂點(diǎn)的連接順序依賴于要和前面已經(jīng)出現(xiàn)過的2個(gè)頂點(diǎn)組成三角形的當(dāng)前頂點(diǎn)的序號(hào)的奇偶性（如果從0開始）：
如果當(dāng)前頂點(diǎn)是奇數(shù)：
組成三角形的頂點(diǎn)排列順序：T = [n-1 n-2 n].
如果當(dāng)前頂點(diǎn)是偶數(shù)：
組成三角形的頂點(diǎn)排列順序：T = [n-2 n-21 n].
以上圖為例，第一個(gè)三角形柴罐，頂點(diǎn)v2序號(hào)是2徽缚，是偶數(shù)，則頂點(diǎn)排列順序是v0,v1,v2革屠。第二個(gè)三角形凿试，頂點(diǎn)v3序號(hào)是3，是奇數(shù)似芝，則頂點(diǎn)排列順序是v2,v1,v3,第三個(gè)三角形那婉，頂點(diǎn)v4序號(hào)是4，是偶數(shù)党瓮，則頂點(diǎn)排列順序是v2,v3,v4,以此類推吧恃。
首先因?yàn)轫旤c(diǎn)可以復(fù)用，所以將
initVertexData()
vCount=5 ,這個(gè)vCount千萬不能寫錯(cuò)麻诀，不然可能會(huì)出現(xiàn)一些莫名其妙的區(qū)域
是畫三個(gè)三角形形成的帶痕寓，所以需要5個(gè)頂點(diǎn).
再將頂點(diǎn)數(shù)據(jù)修改為:
/*TRIANGLE_STRIP*/
float vertices[] = new float[]{
//第一個(gè)triangle
-4 * UNIT_SIZE, 0, 0,
0, 4 * UNIT_SIZE, 0,
0, 0, 0,
4 * UNIT_SIZE, -4 * UNIT_SIZE, 0,
//0, -4 * UNIT_SIZE, 0,
4 * UNIT_SIZE, 4 * UNIT_SIZE, 0,
};
每個(gè)頂點(diǎn)對(duì)應(yīng)的顏色是:
float colors[] = new float[]
{
1, 1, 1, 0,
1, 0, 0, 0,
0, 1, 0, 0,
1, 1, 0, 0,
0, 0, 1, 0,
};
最后修改三角形的繪制方式:
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, vCount);
最后的效果圖為:
-
GL_TRIANGLE_FAN的繪制
這個(gè)沒什么可將的傲醉，直接上代碼:
initVertexData()//方法中
vCount = 5;
修改頂點(diǎn)數(shù)據(jù):
float v2x = (float) (4 * UNIT_SIZE * (Math.cos(Math.PI/6)));
float v2y = (float) (4 * UNIT_SIZE * (Math.sin(Math.PI/6)));
float v3x = (float) (4 * UNIT_SIZE * (Math.cos(Math.PI/3)));
float v3y = (float) (4 * UNIT_SIZE * (Math.sin(Math.PI/3)));
/*TRIANGLE_FAN*/
float vertices[] = new float[]{
//第一個(gè)triangle
0, 0, 0,
4 * UNIT_SIZE, 0, 0,
v2x, v2y, 0,
v3x, v3y, 0,
0, 4 * UNIT_SIZE, 0
};
顏色數(shù)據(jù)
float colors[] = new float[]
{
1, 1, 1, 0,
1, 0, 0, 0,
0, 1, 0, 0,
1, 1, 0, 0,
0, 0, 1, 0,
};
最后修改繪制模式為:
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, vCount);
最后的效果圖為:
三角形的繪制就介紹完畢了
