OpenGLES：绘制一个颜色渐变的圆

一.概述

今天使用OpenGLES实现一个圆心是玫红色，向圆周渐变成蓝色的圆。

本篇博文的内容也是后续绘制3D图形的基础。

实现过程中，需要重点关注的点是：如何使用数学公式求得图形的顶点，以及加载颜色值。

废话不多说，开工吧！

二.Render类

Render类中需要关注的重点是：createCirclePositions()

这个函数中实现了圆形的顶点创建和颜色值加载

已知如下两个变量：

  • 圆半径：R；
  • 圆周的点与X轴的夹角：θ

求圆的顶点坐标需要求得两种坐标：

  • 圆心的顶点坐标
  • 圆周的顶点坐标

圆心坐标比较简单：(0，0)

圆周上点的坐标：

  • x = R * cos(θ)
  • y = R * sin(θ)

知道如何求得圆的顶点坐标后，如下就是Render类的实现代码：

public class CircleRender implements GLSurfaceView.Renderer {private final String TAG = CubeRender.class.getSimpleName();private final Context mContext;//圆形顶点位置private float vertexData[];//顶点的颜色private float colorData[];private FloatBuffer vertexBuffer;private FloatBuffer colorBuffer;//MVP矩阵private float[] mMVPMatrix = new float[16];//shader程序/渲染器private int shaderProgram;//返回属性变量的位置//变换矩阵private int uMatrixLocation;//位置private int aPositionLocation;//颜色private int aColorLocation;private float ratio;public CircleRender(Context context) {mContext = context;}@Overridepublic void onSurfaceCreated(GL10 gl, EGLConfig config) {Log.v(TAG, "onSurfaceCreated()");glClearColor(0.0f, 0.0f, 0.0f, 1.0f);initGLES();}public void initGLES() {Log.v(TAG, "initGLES!");/************** 着色器程序/渲染器 **************///创建并连接 着色器程序shaderProgram = ShaderUtils.createAndLinkProgram(mContext,"circle_vertex_shader.glsl","circle_fragtment_shader.glsl");if (shaderProgram == 0) {Log.v(TAG, "create And Link ShaderProgram Fail!");return;}//使用着色器源程序glUseProgram(shaderProgram);createCirclePositions(0.8f, 60);/************** 着色器变量 **************///获取着色器中的变量uMatrixLocation = glGetUniformLocation(shaderProgram, "u_Matrix");aPositionLocation = glGetAttribLocation(shaderProgram, "vPosition");aColorLocation = glGetAttribLocation(shaderProgram, "aColor");//为顶点、颜色、索引数据配置内存vertexBuffer = ShaderUtils.getFloatBuffer(vertexData);colorBuffer = ShaderUtils.getFloatBuffer(colorData);//启动深度测试glEnable(GL_DEPTH_TEST);}@Overridepublic void onSurfaceChanged(GL10 gl, int width, int height) {Log.v(TAG, "onSurfaceChanged(): " + width + " x " + height);glViewport(0, 0, width, height);//计算宽高比ratio = (float) width / height;}@Overridepublic void onDrawFrame(GL10 gl) {glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glClearColor(0.95f, 0.95f, 0.95f, 0.95f);mMVPMatrix = TransformUtils.getCircleMVPMatrix(ratio);//将变换矩阵传入顶点渲染器glUniformMatrix4fv(uMatrixLocation, 1, false, mMVPMatrix, 0);//准备顶点坐标和颜色数据glVertexAttribPointer(aPositionLocation, 3, GL_FLOAT, false, 0, vertexBuffer);glVertexAttribPointer(aColorLocation, 4, GL_FLOAT, false, 0, colorBuffer);//启用顶点位置和顶点颜色句柄glEnableVertexAttribArray(aPositionLocation);glEnableVertexAttribArray(aColorLocation);//绘制glDrawArrays(GL_TRIANGLE_FAN, 0, vertexData.length / 3);//禁止顶点数组的句柄glDisableVertexAttribArray(aPositionLocation);glDisableVertexAttribArray(aColorLocation);}private void createCirclePositions(float radius, int n) {ArrayList<Float> data = new ArrayList<>();data.add(0.0f);        //设置圆心坐标data.add(0.0f);data.add(0.0f);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)));data.add(0.0f);}float[] f = new float[data.size()];for (int i = 0; i < f.length; i++) {f[i] = data.get(i);}vertexData = f;//处理各个顶点的颜色colorData = new float[f.length * 4 / 3];ArrayList<Float> temp0 = new ArrayList<>();ArrayList<Float> temp2 = new ArrayList<>();ArrayList<Float> temp1 = new ArrayList<>();temp1.add(1.0f);temp1.add(0.0f);temp1.add(1.0f);temp1.add(0.0f);temp0.add(0.0f);temp0.add(0.0f);temp0.add(1.0f);temp0.add(0.0f);for (int i = 0; i < f.length / 3; i++) {if (i == 0) {temp2.addAll(temp1);} else {temp2.addAll(temp0);}}for (int i = 0; i < temp2.size(); i++) {colorData[i] = temp2.get(i);}}
}

三.ShaderUtils相关函数：

与之前的一样，常规代码

3.1 createAndLinkProgram()

    /** 创建和链接着色器程序* 参数：顶点着色器、片段着色器程序ResId* 返回：成功创建、链接了顶点和片段着色器的着色器程序Id*/public static int createAndLinkProgram(Context context, String vertexShaderFN, String fragShaderFN) {//创建着色器程序int shaderProgram = glCreateProgram();if (shaderProgram == 0) {Log.e(TAG, "Failed to create shaderProgram ");return 0;}//获取顶点着色器对象int vertexShader = loadShader(GL_VERTEX_SHADER, loadShaderSource(context, vertexShaderFN));if (0 == vertexShader) {Log.e(TAG, "Failed to load vertexShader");return 0;}//获取片段着色器对象int fragmentShader = loadShader(GL_FRAGMENT_SHADER, loadShaderSource(context, fragShaderFN));if (0 == fragmentShader) {Log.e(TAG, "Failed to load fragmentShader");return 0;}//绑定顶点着色器到着色器程序glAttachShader(shaderProgram, vertexShader);//绑定片段着色器到着色器程序glAttachShader(shaderProgram, fragmentShader);//链接着色器程序glLinkProgram(shaderProgram);//检查着色器链接状态int[] linked = new int[1];glGetProgramiv(shaderProgram, GL_LINK_STATUS, linked, 0);if (linked[0] == 0) {glDeleteProgram(shaderProgram);Log.e(TAG, "Failed to link shaderProgram");return 0;}return shaderProgram;}

3.2 getFloatBuffer()

    public static FloatBuffer getFloatBuffer(float[] array) {//将顶点数据拷贝映射到 native 内存中，以便opengl能够访问FloatBuffer buffer = ByteBuffer.allocateDirect(array.length * BYTES_PER_FLOAT)//直接分配 native 内存，不会被gc.order(ByteOrder.nativeOrder())//和本地平台保持一致的字节序（大/小头）.asFloatBuffer();//将底层字节映射到FloatBuffer实例，方便使用buffer.put(array)//将顶点拷贝到 native 内存中.position(0);//每次 put position 都会 + 1，需要在绘制前重置为0return buffer;}

四.TransformUtils相关函数

与以往不同的是，这次绘制需要求得mvp矩阵。

也就是model、view和project三个矩阵，最终再求得一个总的mvpMatrix矩阵

同时还需要设置投影方式，是透视投影还是正交投影。

相关理论知识可以参看官网的这一章：《坐标系统 - LearnOpenGL CN》

本篇博文不再复述

代码：

    public static float[] getCircleMVPMatrix(float ratio) {float[] modelMatrix = getIdentityMatrix(16, 0); //模型变换矩阵float[] viewMatrix = getIdentityMatrix(16, 0); //观测变换矩阵/相机矩阵float[] projectionMatrix = getIdentityMatrix(16, 0); //投影变换矩阵//设置透视投影Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7);//设置相机位置Matrix.setLookAtM(viewMatrix, 0, 0, 0, 7.0f, 0f, 0f, 0f, 0f, 1.0f, 0.0f);//计算变换矩阵float[] mvpMatrix = new float[16];Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, viewMatrix, 0);return mvpMatrix;}

五.着色器代码

5.1 circle_vertex_shader.glsl

#version 300 eslayout (location = 0) in vec4 vPosition;
layout (location = 1) in vec4 aColor;uniform mat4 u_Matrix;out vec4 vColor;void main() {gl_Position  = u_Matrix * vPosition;vColor = aColor;
}

5.2 circle_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;
}

六.UI实现

Render、GLSurfaceView与Activity、Fragment等之间的实现逻辑请根据自己项目的实际情况去实现

这里只贴出Render在GLSurfaceView中设置的代码：

    mGLSurfaceView = rootView.findViewById(R.id.Circle_GLSurfaceView);//设置GLES版本mGLSurfaceView.setEGLContextClientVersion(3);//创建Render对象，并将其设置到GLSurfaceViewmCircleRender = new CircleRender(getActivity());mGLSurfaceView.setRenderer(mCircleRender);mGLSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);

七.最终效果

最终效果如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/89883.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【ROS 2】-2 话题通信

【ROS 2】-2 话题通信

所有内容请看&#xff1a; 博客学习目录_Howe_xixi的博客-CSDN博客https://blog.csdn.net/weixin_44362628/article/details/126020573?spm1001.2014.3001.5502飞书原文链接&#xff1a; Docs
阅读更多...
LeetCode算法题---第3天

LeetCode算法题---第3天

注:大佬解答来自LeetCode官方题解 121.买卖股票的最佳时期 1.题目 2.个人解答 function maxProfit(prices) {//更新最低价格和最大利润let minPrice prices[0];let maxProfit 0;for (let i 1; i < prices.length; i) {// 如果当前价格比最低价格还低&#xff0c;更新最…
阅读更多...
情满中秋᛫欢度国庆 | 联诚发与你共度佳节！

情满中秋᛫欢度国庆 | 联诚发与你共度佳节！

转眼九月份又走到尽头 国庆和中秋正好撞了个满怀 随风飘扬的国旗与满街飘香的月饼 国泰民安与阖家团圆 这是大家与小家最美好的祈愿 当中秋遇上国庆&#xff0c;当团圆遇上国诞 双节来临之际 为庆祝传统佳节与祖国生日 也为感谢联诚发每位员工的辛勤付出 9月28日下午 …
阅读更多...
如何礼貌委婉地拒绝上级领导的加班要求？

如何礼貌委婉地拒绝上级领导的加班要求？

案例&#xff1a;领导发消息问我今天晚上能否加班完成一项工作&#xff0c;但我已经和一个重要的朋友约好了今晚一起吃饭&#xff0c;我该如何礼貌委婉地拒绝上级领导的加班要求&#xff0c;并且不让上级领导对我产生不好的印象呢? 回复&#xff1a;当面临类似情况时&#xf…
阅读更多...
从零开始之了解电机及其控制（11）实现空间矢量调制

从零开始之了解电机及其控制（11）实现空间矢量调制

广泛地说&#xff0c;空间矢量调制只是将电压矢量以及磁场矢量在空间中调制到任意角度&#xff0c;通常同时最大限度地利用整个电压范围。 其他空间矢量调制模式确实存在&#xff0c;并且根据您最关心的内容&#xff0c;它们可能值得研究。 如何实际执行这种所谓的交替反向序列…
阅读更多...
通过http发送post请求的三种Content-Type分析

通过http发送post请求的三种Content-Type分析

通过okhttp向服务端发起post网络请求&#xff0c;可以通过Content-Type设置发送请求数据的格式。 常用到的三种&#xff1a; 1&#xff09;application/x-www-form-urlencoded; charsetutf-8 2&#xff09;application/json; charsetutf-8 3&#xff09;multipart/form-dat…
阅读更多...
代理IP和Socks5代理在游戏领域的重要应用

代理IP和Socks5代理在游戏领域的重要应用

随着在线游戏的兴起&#xff0c;网络工程师在游戏领域的作用变得愈发关键。他们不仅需要优化网络性能&#xff0c;还需要确保游戏体验的流畅性。本文将深入探讨代理IP和Socks5代理在游戏领域的关键应用和影响。 降低游戏延迟 在竞技游戏和多人在线游戏中&#xff0c;低延迟是…
阅读更多...
SecureCRT连接Amazon EC2 Linux AMI

SecureCRT连接Amazon EC2 Linux AMI

SecureCRT连接Amazon EC2 Linux AMI_securecrt aws ec2_姜亚轲的博客-CSDN博客 最近在AWS上创建了一台EC2实例&#xff0c;最后在创建密钥对之后下载pem证书文件&#xff0c;接下来我们讲解利用这个pem文件如何登录到EC2服务器上。 使用工具&#xff1a;SecureCRT 8.5 在AWS E…
阅读更多...
HTML5中使用video标签

HTML5中使用video标签

参考链接 <videocontrolscontrolslist"nodownload noplaybackrate"disablePictureInPicture"true"disableRemotePlayback"true"src"https://www.runoob.com/try/demo_source/movie.mp4"></video>隐藏下载&#xff1a;nod…
阅读更多...
ios证书类型及其作用说明

ios证书类型及其作用说明

ios证书类型及其作用说明 很多刚开始接触iOS证书的开发者可能不是很了解iOS证书的类型功能和概念。下面对iOS证书的几个方面进行介绍。 apple开发账号分类&#xff1a; 免费账号&#xff1a; 无需支付费用给apple&#xff0c;使用个人信息注册的账号 可以开发测试安装&…
阅读更多...
No133.精选前端面试题，享受每天的挑战和学习

No133.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…
阅读更多...
【函数式编程】函数式编程、纯函数、高阶函数以及函数柯里化

【函数式编程】函数式编程、纯函数、高阶函数以及函数柯里化

最近在学习React&#xff0c;看到了高阶函数以及函数柯里化等概念&#xff0c;因为对这些内容还比较生疏&#xff0c;于是查找了资料&#xff0c;发现都跟一个叫函数式编程的思想有关&#xff0c;于是搜集各方资料&#xff0c;稍微系统性地做了点自己的记录用于以后的复习。想要…
阅读更多...
Android AMS——ATMS解析（四）

Android AMS——ATMS解析（四）

ActivityTaskManagerService 是 Android 系统中的核心服务之一，它负责管理应用程序的活动（Activity）和任务栈（Task Stack）。这里我们接上一篇内容继续分析 APP 启动流程， startActivity() 方法，调用了 ATMS，我们继续往下看。 一、ATMS源码分析 1、ActivityTaskManage…
阅读更多...
AUTOSAR RTE介绍（更新版230925）

AUTOSAR RTE介绍（更新版230925）

RTE是什么 AUTOSAR RTE(Run Time Environment)实现了AUTOSAR系统中的虚拟功能总线（VFB），提供了SWC(Software Component)之间的访问接口和SWC对于BSW资源的访问接口。RTE为SWC中的Runnable提供与其他SWC或者BSW模块通信的接口，RTE将Runnable映射到OS Task中，并且管理Runna…
阅读更多...
关于vcruntime140.dll丢失如何修复,电脑多种修复vcruntime140.dll丢失方法

关于vcruntime140.dll丢失如何修复,电脑多种修复vcruntime140.dll丢失方法

在使用某些软件或执行某些代码时&#xff0c;可能会遇到“找不到 vcruntime140.dll&#xff0c;无法继续执行代码”的错误提示。这通常意味着你的计算机上缺少 Visual C Redistributable for Visual Studio 2015 的运行时库&#xff0c;或者该库的版本不正确。 三种解决方法解决…
阅读更多...
Polygon Miden zkRollup中的UTXO+账户混合状态模型

Polygon Miden zkRollup中的UTXO+账户混合状态模型

1. 引言 本文重点讨论Polygon Miden所设计的UTXO账户混合状态模型&#xff0c;以实现某些有趣的属性。 Miden的目标是&#xff1a;【即越具有隐私性&#xff0c;其可扩展性越好】 构建可扩展去中心化的rollup采用支持隐私的架构 Miden支持灵活的交易模式&#xff1a; 公开…
阅读更多...
一致性 Hash 算法

一致性 Hash 算法

是什么&#xff1a; 一致性 hash&#xff0c;是一种比较特殊的 hash 算法&#xff0c;它的核心思想是解决在分布式环境下&#xff0c; hash 表中可能存在的动态扩容和缩容的问题。 为什么会出现一致性Hash 一般情况下&#xff0c;我们会使用 hash 表的方式以 key-value 的方式来…
阅读更多...
HTTP Tunnel与后门攻击

HTTP Tunnel与后门攻击

后门攻击是指利用隐藏在系统中的漏洞或者特殊设计&#xff0c;以获取未授权的访问权限或者绕过安全控制的攻击方式。通过后门攻击&#xff0c;攻击者可以在受感染的系统上进行非法操作、窃取敏感信息或者控制系统。后门攻击可以采用多种形式&#xff0c;其目的都是为了绕过安全…
阅读更多...
原神启动原神启动原神启动原神启动

原神启动原神启动原神启动原神启动

测试游戏抽卡场景是确保玩家可以正常抽取虚拟物品或角色的重要部分。以下是一些可能的游戏抽卡场景的测试用例示例&#xff1a; 1.正常抽卡流程&#xff1a; 2.测试用户是否能够成功进行一次或多次抽卡操作。 3.确保每次抽卡后&#xff0c;用户收到相应的物品或角色。 4.抽卡…
阅读更多...
新手程序员怎么接单？

新手程序员怎么接单？

程序员如何在自己年富力强的时候&#xff0c;最大化发挥自己的能力&#xff1f;将超能力转化为“钞能力”&#xff1f; 有人还在苦哈哈当老黄牛&#xff0c;一身使不完的牛劲&#xff0c;有人已经另辟蹊径&#xff0c;开创了自己的一片致富小天地。 接单找兼职&#xff0c;就…
阅读更多...
最新文章

Copyright @ 2022~2023