什么网站有设计视频,专业网站建设公司兴田德润信任高,网站都有什么费用,湖州建设企业网站效果展示
混色旋转的3D立方体 一.概述
之前关于OpenGLES实战开发的博文#xff0c;不论是实现相机滤镜还是绘制图形#xff0c;都是在2D纬度
这篇博文开始#xff0c;将会使用OpenGLES进入3D世界
本篇博文会实现一个颜色渐变、旋转的3D立方体
动态3D图形的绘制#xf…效果展示
混色旋转的3D立方体 一.概述
之前关于OpenGLES实战开发的博文不论是实现相机滤镜还是绘制图形都是在2D纬度
这篇博文开始将会使用OpenGLES进入3D世界
本篇博文会实现一个颜色渐变、旋转的3D立方体
动态3D图形的绘制需要具备一些基础的线性代数(向量、矩阵)和空间坐标系转换相关知识这里就不再做理论科普需要自己先行学习具体可以参考OpenGL官网的如下三章讲解得十分详细
《变换》《坐标系统》《摄像机》
二.GLRender变量定义
2.1 常规变量定义
//shader程序/渲染器
private int shaderProgram;private int vPosition;
private int aColor;
private int mvpMatrix;//suface宽高比
private float ratio;
2.2 定义顶点、颜色、索引数组和缓冲
本次立方体的绘制先定义顶点、颜色和索引数组然后通过直接绘制索引缓冲来绘制立方体
三个数组及缓冲定义如下 private FloatBuffer vertexBuffer;private FloatBuffer colorBuffer;private ShortBuffer indexBuffer;private float vertexData[] {-1.0f, 1.0f, 1.0f, //正面左上0-1.0f, -1.0f, 1.0f, //正面左下11.0f, -1.0f, 1.0f, //正面右下21.0f, 1.0f, 1.0f, //正面右上3-1.0f, 1.0f, -1.0f, //反面左上4-1.0f, -1.0f, -1.0f, //反面左下51.0f, -1.0f, -1.0f, //反面右下61.0f, 1.0f, -1.0f, //反面右上7};//八个顶点的颜色与顶点坐标一一对应private float colorData[] {1.0f, 1.0f, 0.0f, // v0 Yellow1.0f, 0.0f, 1.0f, // v1 Magenta 粉红1.0f, 0.0f, 0.0f, // v2 Red1.0f, 1.0f, 1.0f, // v3 White0.0f, 0.0f, 1.0f, // v4 Blue0.0f, 1.0f, 1.0f, // v5 Cyan 蓝绿0.0f, 1.0f, 0.0f, // v6 Green0.0f, 0.0f, 0.0f, // v7 Black};private short indexData[] {6, 7, 4, 6, 4, 5, //后面6, 3, 7, 6, 2, 3, //右面6, 5, 1, 6, 1, 2, //下面0, 3, 2, 0, 2, 1, //正面0, 1, 5, 0, 5, 4, //左面0, 7, 3, 0, 4, 7, //上面};2.3 定义MVP矩阵 //MVP矩阵private float[] mMVPMatrix new float[16];
三.GLRender着色器、内存分配等
3.1 着色器创建、链接、使用
3.2 着色器属性获取、赋值
3.3 三个缓冲内存分配
这几个部分的代码实现与上一篇2D圆绘制基本一致
可以参考上一篇博文《OpenGLES绘制一个颜色渐变的圆》
不再重复展示代码
四.GLRender绘制
绘制流程与之前2D的基本一致有两点不太一样要注意
4.1 MVP矩阵赋值
//填充MVP矩阵
mMVPMatrix TransformUtils.getCubeMVPMatrix(ratio);
//设置MVP变换矩阵到着色器程序/渲染器
glUniformMatrix4fv(mvpMatrix, 1, false, mMVPMatrix, 0);
//计算MVP变换矩阵
public static float[] getCubeMVPMatrix(float ratio) {//初始化modelMatrix, viewMatrix, projectionMatrixfloat[] modelMatrix getIdentityMatrix(16, 0); //模型变换矩阵float[] viewMatrix getIdentityMatrix(16, 0); //观测变换矩阵/相机矩阵float[] projectionMatrix getIdentityMatrix(16, 0); //投影变换矩阵//获取modelMatrix, viewMatrix, projectionMatrixmCubeRotateAgree (mCubeRotateAgree 1) % 360;Matrix.rotateM(modelMatrix, 0, mCubeRotateAgree, -1, -1, 1); //获取模型旋转变换矩阵Matrix.setLookAtM(viewMatrix, 0, 0, 5, 10, 0, 0, 0, 0, 1, 0); //获取观测变换矩阵设置相机位置Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 20); //获取透视投影变换矩阵正交投影Matrix.orthoM(...)//计算MVP变换矩阵: mvpMatrix projectionMatrix * viewMatrix * modelMatrixfloat[] tempMatrix new float[16];float[] mvpMatrix new float[16];Matrix.multiplyMM(tempMatrix, 0, viewMatrix, 0, modelMatrix, 0);Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, tempMatrix, 0);return mvpMatrix;
}
4.2 绘制索引缓冲
//索引法绘制正方体
glDrawElements(GL_TRIANGLES, indexData.length, GL_UNSIGNED_SHORT, indexBuffer);五.着色器代码
着色器代码与上一篇2D圆绘制其实也是相同的
再展示一遍以示关键点
如下
(1).cube_vertex_shader.glsl
#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;vColor aColor;
}
(2).cube_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立方体的实现过程到此讲解结束
最终实现效果如博文开始的效果展示
