OpenGLES:绘制一个混色旋转的3D圆柱

这篇具有很好参考价值的文章主要介绍了OpenGLES:绘制一个混色旋转的3D圆柱。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果展示

本篇博文会实现两种混色效果的3D圆柱:

opengles绘制圆柱,OpenGL/OpenGLES,3d,图像处理,计算机视觉,图形渲染,算法opengles绘制圆柱,OpenGL/OpenGLES,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> data = new 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<Float> data = new 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圆柱

效果如下:

opengles绘制圆柱,OpenGL/OpenGLES,3d,图像处理,计算机视觉,图形渲染,算法

如何实现混色渐变的旋转圆柱呢?

很简单,只要修改顶点着色器代码

void main() {
    gl_Position = mvpMatrix * vPosition;

    //颜色混合渐变
    vColor = vec4(vPosition.x,vPosition.y, vPosition.z,0.0);
}

效果如下:

opengles绘制圆柱,OpenGL/OpenGLES,3d,图像处理,计算机视觉,图形渲染,算法

八.结束语

两种混色旋转的3D圆柱绘制过程到此讲解结束

下一篇讲解混色旋转的圆锥文章来源地址https://www.toymoban.com/news/detail-717726.html

到了这里,关于OpenGLES:绘制一个混色旋转的3D圆柱的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • OpenGL ES入门教程(二)之绘制一个平面桌子

    上一篇文章OpenGL ES入门教程(一)编写第一个OpenGL程序,我们创建了自己的第一个OpenGL程序,实现了绘制红色背景的Activity页面,算是OpenGL ES的hello world程序吧。本篇文章基于上一篇文章基础上讲解如何使用OpenGL绘制一张平面桌子,桌子由一个长方形构成,且长方形中间绘制一

    2024年01月17日
    浏览(35)
  • OPenGL笔记--创建一个3D场景

    通过前面的学习,基本掌握了怎么绘制图形,使用纹理,接下来就来创建一个3D场景。 基本原理 一个复杂的场景肯定是由一些简单的图形,通过某种组合方式构建起来的,在OPenGL中也不例外;例如:在绘制立方体的时候,立方体也是由6个正方形围起来的; 基本图形 由于显卡

    2024年02月11日
    浏览(40)
  • OpenGL —— 2.5、绘制第一个三角形(附源码,glfw+glad)(更新:纹理贴图)

    源码效果   C++源码        纹理图片            需下载stb_image.h这个解码图片的库,该库只有一个头文件。         具体代码:            vertexShader.glsl              fragmentShader.glsl              main.c      

    2024年02月11日
    浏览(48)
  • 计算机图形学,OpenGL编写的一个可实现旋转缩放移动的房间,内有数十种交互

    #include stdlib.h #includestdio.h #includewindows.h #include GL/glut.h #include math.h #include gl/GLU.h //颜色宏定义 #define white 1.0f, 1.0f, 1.0f #define black 0.0f, 0.0f, 0.0f #define red 1.0f, 0.0f, 0.0f #define blue 0.0f, 0.0f, 1.0f #define skyBlue 135.0/255.0, 206.0/255.0, 1.0f #define plum 1.0f, 187.0/255.0, 1.0f //浅紫色 #define pink 1.0f, 1

    2024年04月17日
    浏览(63)
  • [Python从零到壹] 七十二.图像识别及经典案例篇之OpenGL入门及绘制基本图形和3D图

    十月太忙,还是写一篇吧!祝大家1024节日快乐O(∩_∩)O 欢迎大家来到“Python从零到壹”,在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解,真心想把自己近十年的编程经验分享给大家

    2024年02月06日
    浏览(52)
  • OpenGLES:3D立方体纹理贴图

    前几篇博文讲解了OpenGLES绘制多种3D图形,并赋予丰富的色彩,但是在这些3D图形绘制过程中,有一点还没有涉及,就是 纹理贴图。 今天这篇博文我会用如下 六张图片 对立方体进行纹理贴图,实现 六个面都是贴图 的3D旋转立方体 2.1 常规变量定义 2.2 顶点、纹理相关变量定义

    2024年02月08日
    浏览(41)
  • 【OpenGL ES】三维图形绘制

    不积跬步,无以至千里;不积小流,无以成江海。要沉下心来,诗和远方的路费真的很贵! 颜色的简单搭配: 不红+不绿+不蓝 = 黑 红+绿+蓝 = 白 红+绿 = 黄 红+蓝 = 紫 绿+蓝 = 青蓝 投影主要分为 正交投影 和 透视投影 两种。 正交投影 没有近大远小的效果,是平行投影,投影

    2023年04月08日
    浏览(48)
  • 实验3—OpenGL的键盘交互绘制

    一、实验目的 1.理解OpenGL坐标系的概念,掌握OpenGL裁剪窗口、视区、显示窗口的概念和它们 之间的关系,学会计算世界坐标和屏幕坐标。 2.学会OpenGL的简单键盘交互操作。 3.学会OpenGL的简单字符绘制。 4.进一步掌握OpenGL点、直线、多边形的绘制。 二、实验内容 1.调岀实验一

    2024年04月11日
    浏览(27)
  • c++ QT opengl鼠标控制平移、缩放、绕点旋转

    坐标系固定在左下角 坐标系和正方形 一起旋转,但不平移与缩放 鼠标左键平移正方形,右键旋转,滚轮缩放(放大与缩小) 编写绘制正方形与坐标系函数 在OpenGL窗口界面绘制 实现鼠标左键平移移动,右键旋转,滚轮缩放(放大与缩小) 设置正方形的旋转点 ,以及坐标系

    2024年02月06日
    浏览(36)
  • OpenGL ES 绘制一张图片

    GLSL 的修饰符与数据类型 GLSL 中变量的修饰符 const:修饰不可被外界改变的常量 attribute:修饰经常更改的变量,只可以在顶点着色器中使用 uniform:修饰不经常更改的变量,可用于顶点着色器和片段着色器 varying:修饰在顶点着色器计算,然后传递到片元着色器中使用的变量

    2024年02月06日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包