一.概述

上一篇博文講解了怎么繪制一個彩色旋轉(zhuǎn)的立方體

這一篇講解怎么繪制一個彩色旋轉(zhuǎn)的圓柱

圓柱的頂點創(chuàng)建主要基于2D圓進行擴展，與立方體沒有相似之處

圓柱繪制的關(guān)鍵點就是將圓柱拆解成：兩個Z坐標(biāo)不為0的圓? + 一個長方形的圓柱面

繪制2D圓的過程這里不再復(fù)述，不理解的可以參看前面這篇博文：《OpenGLES：繪制一個顏色漸變的圓》

廢話不多說，正文開始了。?

二.Render：變量定義

2.1 常規(guī)變量定義

//著色器程序/渲染器
private int shaderProgram;//著色器mvp矩陣屬性
private int mvpMatrix;
//位置屬性
private int aPositionLocation;//surface寬高比率
private float ratio;

2.2 定義頂點坐標(biāo)數(shù)組和緩沖

概述中提到過，繪制圓柱的關(guān)鍵思路是將圓柱拆解成：兩個Z坐標(biāo)不為0的圓? + 一個長方形的圓柱面

所以定義三個頂點坐標(biāo)數(shù)組和對應(yīng)緩沖

//圓柱柱面頂點數(shù)組
private float[] vertexData;
//圓柱頂部圓的頂點數(shù)組
private float[] vertexData1;
//圓柱底部圓的頂點數(shù)組
private float[] vertexData2;//圓柱柱面頂點緩沖
private FloatBuffer vertexBuffer;
//圓柱頂部圓的頂點緩沖
private FloatBuffer vertexBuffer1;
//圓柱頂部圓的頂點緩沖
private FloatBuffer vertexBuffer2;

需要注意的是，這次我并沒有把頂點顏色單獨定義成一個數(shù)組，而且在Render類中也不會像上一篇繪制立方體時動態(tài)加載和填充頂點顏色值

這次我會換一種方式，直接把顏色填充和變換在著色器代碼中實現(xiàn)

最終的色彩漸變效果是一樣的，殊途同歸，豐富對OpenGLES不同實現(xiàn)方式的學(xué)習(xí)。

2.3?定義MVP矩陣

//MVP矩陣
private float[] mMVPMatrix = new float[16];

三.Render：著色器、內(nèi)存分配等

3.1 著色器創(chuàng)建、鏈接、使用

3.2 著色器屬性獲取、賦值

3.3 緩沖內(nèi)存分配

這幾個部分的代碼實現(xiàn)2D圖形繪制基本一致

可參考以前2D繪制的相關(guān)博文，里面都有詳細(xì)的代碼實現(xiàn)

不再重復(fù)展示代碼

四.Render：動態(tài)創(chuàng)建頂點

float radio = 0.6f;
int spanIdx = 60;vertexData = createSidePos(radio, spanIdx);
vertexData1 = createBottomCirclePos(radio, spanIdx, 0.7f);
vertexData2 = createBottomCirclePos(radio, spanIdx, -0.7f);

重點就在于創(chuàng)建圓柱頂點的兩個函數(shù)：

• createSidePos()
• createBottomCirclePos()

4.1 createSidePos()

private float[] createSidePos(float radius, int n) {ArrayList<Float> data = new ArrayList<>();//設(shè)置頂部/底部圓的頂點坐標(biāo)float angDegSpan = 360f / n;for (float i = 0; i < 360 + angDegSpan; i += angDegSpan) {data.add((float) (radius * Math.sin(i * Math.PI / 180f)));data.add((float) (radius * Math.cos(i * Math.PI / 180f)));//頂部/底部圓的頂點Z坐標(biāo)設(shè)置為-0.7fdata.add(-0.7f);data.add((float) (radius * Math.sin(i * Math.PI / 180f)));data.add((float) (radius * Math.cos(i * Math.PI / 180f)));//頂部/底部圓的頂點Z坐標(biāo)設(shè)置為-0.7fdata.add(0.7f);}//所有頂點坐標(biāo)float[] f = new float[data.size()];for (int i = 0; i < data.size(); i++) {f[i] = data.get(i);}return f;
}

4.2?createBottomCirclePos()

private float[] createBottomCirclePos(float radius, int n, float circleCenterZ) {ArrayList<Float> data = new ArrayList<>();//頂部/底部圓心坐標(biāo)data.add(0.0f);data.add(0.0f);data.add(circleCenterZ);//設(shè)置頂部/底部圓的頂點坐標(biāo)float angDegSpan = 360f / n;for (float i = 0; i < 360 + angDegSpan; i += angDegSpan) {data.add((float) (radius * Math.sin(i * Math.PI / 180f)));data.add((float) (radius * Math.cos(i * Math.PI / 180f)));//頂部/底部圓的頂點Z坐標(biāo)設(shè)置為-0.7fdata.add(circleCenterZ);}//所有頂點坐標(biāo)float[] f = new float[data.size()];for (int i = 0; i < data.size(); i++) {f[i] = data.get(i);}return f;
}

五.Render：繪制

5.1 MVP矩陣

//填充MVP矩陣
mMVPMatrix = TransformUtils.getCylinderMVPMatrix(ratio);
//將變換矩陣傳入頂點渲染器
glUniformMatrix4fv(mvpMatrix, 1, false, mMVPMatrix, 0);

5.2 繪制圓柱柱面、頂部圓、底部圓

(1).drawSide()

//準(zhǔn)備頂點坐標(biāo)和顏色數(shù)據(jù)
glVertexAttribPointer(aPositionLocation, 3, GL_FLOAT, false, 0, vertexBuffer);
//繪制
glDrawArrays(GL_TRIANGLE_STRIP, 0, vertexData.length / 3);

(2).drawBottomCircle1()

//準(zhǔn)備頂點坐標(biāo)和顏色數(shù)據(jù)
glVertexAttribPointer(aPositionLocation, 3, GL_FLOAT, false, 0, vertexBuffer1);
//繪制
glDrawArrays(GL_TRIANGLE_FAN, 0, vertexData1.length / 3);

(3).drawBottomCircle2()

//準(zhǔn)備頂點坐標(biāo)和顏色數(shù)據(jù)
glVertexAttribPointer(aPositionLocation, 3, GL_FLOAT, false, 0, vertexBuffer2);
//繪制
glDrawArrays(GL_TRIANGLE_FAN, 0, vertexData2.length / 3);

六.著色器代碼

6.1?cylinder_vertex_shader.glsl

先實現(xiàn)一個頂部綠色，底部紅色，柱面綠紅漸變的旋轉(zhuǎn)圓柱

#version 300 eslayout (location = 0) in vec4 vPosition;
layout (location = 1) in vec4 aColor;uniform mat4 mvpMatrix;out vec4 vColor;void main() {gl_Position = mvpMatrix * vPosition;if (vPosition.z == 0.7) {vColor = vec4(0.0, 1.0, 0.0, 0.0);    //綠} else if (vPosition.z == -0.7) {vColor = vec4(1.0, 0.0, 0.0, 0.0);    //紅}
}

6.2?cylinder_fragtment_shader.glsl

#version 300 es
#extension GL_OES_EGL_image_external_essl3 : require
precision mediump float;in vec4 vColor;out vec4 outColor;void main(){outColor = vColor;
}

七.最終效果

上一節(jié)中講了，先來一個頂部綠，底部紅，柱面綠紅漸變的旋轉(zhuǎn)3D圓柱

效果如下：

如何實現(xiàn)混色漸變的旋轉(zhuǎn)圓柱呢？

很簡單，只要修改頂點著色器代碼：

void main() {gl_Position = mvpMatrix * vPosition;//顏色混合漸變vColor = vec4(vPosition.x,vPosition.y, vPosition.z,0.0);
}

效果如下：

八.結(jié)束

彩色旋轉(zhuǎn)的3D圓柱繪制到此結(jié)束

下一篇講解彩色旋轉(zhuǎn)的圓錐