效果展示
本篇博文会实现两种混色效果的3D圆柱：
一.圆柱体解析
上一篇博文讲解了怎么绘制一个混色旋转的立方体
这一篇讲解怎么绘制一个混色旋转的圆柱
圆柱的顶点创建主要基于2D圆进行扩展，与立方体没有相似之处
圆柱绘制的关键点就是将圆柱拆解成：两个Z坐标不为0的圆 + 一个长方形的圆柱面
绘制2D圆的过程这里不再复述，不理解的可以参看前面这篇博文：《OpenGLES：绘制一个颜色渐变的圆》
废话不多说，正文开始了。
二.GLRender：变量定义
2.1 常规变量定义
//着色器程序/渲染器
private int shaderProgram;
//着色器mvp矩阵属性
private int mvpMatrix;
//位置属性
private int aPositionLocation;
//surface宽高比率
private float ratio;
2.2 定义顶点坐标数组和缓冲
概述中提到过，绘制圆柱的关键思路是将圆柱拆解成：两个Z坐标不为0的圆 + 一个长方形的圆柱面
所以定义三个顶点坐标数组和对应缓冲
//圆柱柱面顶点数组
private float[] vertexData;
//圆柱顶部圆的顶点数组
private float[] vertexData1;
//圆柱底部圆的顶点数组
private float[] vertexData2;
//圆柱柱面顶点缓冲
private FloatBuffer vertexBuffer;
//圆柱顶部圆的顶点缓冲
private FloatBuffer vertexBuffer1;
//圆柱顶部圆的顶点缓冲
private FloatBuffer vertexBuffer2;
需要注意的是，这次我并没有把顶点颜色单独定义成一个数组，而且在Render类中也不会像上一篇绘制立方体时动态加载和填充顶点颜色值
这次我会换一种方式，直接把颜色填充和变换在着色器代码中实现
最终的色彩渐变效果是一样的，殊途同归，丰富对OpenGLES不同实现方式的学习。
2.3 定义MVP矩阵
//MVP矩阵
private float[] mMVPMatrix = new float[16];
三.GLRender：着色器、内存分配等
3.1 着色器创建、链接、使用
3.2 着色器属性获取、赋值
3.3 缓冲内存分配
这几个部分的代码实现2D图形绘制基本一致
可参考以前2D绘制的相关博文，里面都有详细的代码实现
不再重复展示代码
四.GLRender：动态创建顶点
float radio = 0.6f;
int spanIdx = 60;
vertexData = createSidePos(radio, spanIdx);
vertexData1 = createBottomCirclePos(radio, spanIdx, 0.7f);
vertexData2 = createBottomCirclePos(radio, spanIdx, -0.7f);
重点就在于创建圆柱顶点的两个函数：
createSidePos()createBottomCirclePos()
4.1 createSidePos()
private float[] createSidePos(float radius, int n) {
ArrayList
//设置顶部/底部圆的顶点坐标
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坐标设置为-0.7f
data.add(-0.7f);
data.add((float) (radius * Math.sin(i * Math.PI / 180f)));
data.add((float) (radius * Math.cos(i * Math.PI / 180f)));
//顶部/底部圆的顶点Z坐标设置为-0.7f
data.add(0.7f);
}
//所有顶点坐标
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
//顶部/底部圆心坐标
data.add(0.0f);
data.add(0.0f);
data.add(circleCenterZ);
//设置顶部/底部圆的顶点坐标
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坐标设置为-0.7f
data.add(circleCenterZ);
}
//所有顶点坐标
float[] f = new float[data.size()];
for (int i = 0; i < data.size(); i++) {
f[i] = data.get(i);
}
return f;
}
五.GLRender：绘制
5.1 MVP矩阵
//填充MVP矩阵
mMVPMatrix = TransformUtils.getCylinderMVPMatrix(ratio);
//将变换矩阵传入顶点渲染器
glUniformMatrix4fv(mvpMatrix, 1, false, mMVPMatrix, 0);
getCylinderMVPMatrix()：
public static float[] getCylinderMVPMatrix(float ratio) {
float[] modelMatrix = getIdentityMatrix(16, 0); //模型变换矩阵
float[] viewMatrix = getIdentityMatrix(16, 0); //观测变换矩阵/相机矩阵
float[] projectionMatrix = getIdentityMatrix(16, 0); //投影变换矩阵
mConeRotateAgree = (mConeRotateAgree + 1) % 360;
//旋转方向xyz三个轴是相对于相机观察方向的
Matrix.rotateM(modelMatrix, 0, mConeRotateAgree, 1, 0, 1); //获取模型旋转变换矩阵
//设置相机位置
Matrix.setLookAtM(viewMatrix, 0, 5, 0.0f, -3.0f, 0f, 0f, 0f, 0f, 0.0f, 1.0f);
//设置透视投影
Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 10);
//计算变换矩阵
float[] tmpMatrix = new float[16];
Matrix.multiplyMM(tmpMatrix, 0, viewMatrix, 0, modelMatrix, 0);
float[] mvpMatrix = new float[16];
Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, tmpMatrix, 0);
return mvpMatrix;
}
5.2 绘制圆柱柱面、顶部圆、底部圆
(1).drawSide()
//准备顶点坐标和颜色数据
glVertexAttribPointer(aPositionLocation, 3, GL_FLOAT, false, 0, vertexBuffer);
//绘制
glDrawArrays(GL_TRIANGLE_STRIP, 0, vertexData.length / 3);
(2).drawBottomCircle1()
//准备顶点坐标和颜色数据
glVertexAttribPointer(aPositionLocation, 3, GL_FLOAT, false, 0, vertexBuffer1);
//绘制
glDrawArrays(GL_TRIANGLE_FAN, 0, vertexData1.length / 3);
(3).drawBottomCircle2()
//准备顶点坐标和颜色数据
glVertexAttribPointer(aPositionLocation, 3, GL_FLOAT, false, 0, vertexBuffer2);
//绘制
glDrawArrays(GL_TRIANGLE_FAN, 0, vertexData2.length / 3);
六.着色器代码
6.1 cylinder_vertex_shader.glsl
先实现一个顶部绿色，底部红色，柱面绿红渐变的旋转圆柱
#version 300 es
layout (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;
}
七.两种效果
上一节中讲了，先来一个顶部绿，底部红，柱面绿红渐变的旋转3D圆柱
效果如下：
如何实现混色渐变的旋转圆柱呢？
很简单，只要修改顶点着色器代码：
void main() {
gl_Position = mvpMatrix * vPosition;
//颜色混合渐变
vColor = vec4(vPosition.x,vPosition.y, vPosition.z,0.0);
}
效果如下：
八.结束语
两种混色旋转的3D圆柱绘制过程到此讲解结束
下一篇讲解混色旋转的圆锥
好文阅读
您阅读本篇文章共花了：
发表评论