【我的OpenGL学习进阶之旅】学习OpenGL ES 3.0 的实战 Awsome Demo （上）

最新推荐文章于 2024-08-15 09:25:54 发布
最新推荐文章于 2024-08-15 09:25:54 发布
阅读量3.9k 收藏 16
点赞数 1
分类专栏： # 计算机图形学 文章标签： opengles android
版权声明：本文为【字节卷动】原创，依据 [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) 许可证进行授权，欢迎转载，转载请附上出处链接及本声明。【博客地址 http://blog.csdn.net/ouyang_peng】
本文链接：https://blog.csdn.net/ouyang_peng/article/details/122202437
版权

一、介绍

最近在学习OpenGL ES 3.0 相关技术，写了一个Demo工程，记录学习。

三篇完整版链接：

1.1 项目地址：

1.2 项目介绍

主要是将下面来源的特效，自己手动敲一遍，熟悉OpenGL ES相关API和GLSL语法以及C++语法

  1. 《OpenGL ES 3.0编程指南》 这本书
  2. 【Learn OpenGL ES】 网站的一些示例
  3. 字节流动的 NDK_OpenGLES_3_0 项目代码
  4. 部分ShaderToy网站和 GLSL SANDBOX 网站上的特效移植到android端
  5. 转场动画GLTransitions网站上的特效移植到android端

1.3 相关链接

关于 OpenGL ES的相关知识，
可以参考下面的博客查看：

  1. 字节卷动 的 OpenGL ES 专栏
  2. 字节流动 的 Android OpenGLES 3.0 专栏
  3. 【Learn OpenGL ES】
  4. ShaderToy
  5. GLSL SANDBOX
  6. 转场动画 https://gl-transitions.com/gallery

二、案例效果展示

1. 展示一个基本的红色三角形

颜色在片段着色器写死的红色

在这里插入图片描述

2. 展示一个基本的蓝色三角形

颜色由glVertexAttrib4fv传给片段着色器

在这里插入图片描述

3. 展示一个基本的由红、绿、蓝三种颜色绘制而成的三角形

使用了顶点缓冲对象(Vertex Buffer Objects, VBO) 和 EBO 技术

在这里插入图片描述

4. 展示一个基本的由红、绿、蓝三种颜色绘制而成的三角形

使用了顶点缓冲对象(Vertex Buffer Objects, VBO) 、 EBO 和 映射缓冲区对象(Map Buffer) 技术

在这里插入图片描述

5. 展示一个基本的由红、绿、蓝三种颜色绘制而成的三角形

使用了 VBO 、 EBO 和 VAO 技术

在这里插入图片描述

6. 对比 两个基本的由红、绿、蓝三种颜色绘制而成的三角形

一个使用VBO绘制，另外一个不使用VBO绘制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5yRMP2e6-1640695721701)( https://github.com/ouyangpeng/OpenGLESDemo/blob/master/pics/triangle4.png)]

7. 展示一个在不停旋转的红色立方体

使用到了MVP矩阵（模型矩阵，观察矩阵和投影矩阵）技术

在这里插入图片描述

8. 展示一个简单的2D Texture 纹理

学习如何绘制一个2D纹理

在这里插入图片描述

9. 展示一个立方体贴图Cubemap

学习如何绘制一个立方体贴图Cubemap

10. 展示mip贴图(mipmapping)

学习纹理过滤和mip贴图(mipmapping)知识
在这里插入图片描述

11. 对比 三种不同纹理包装模式

12. 展示一个多重纹理

学习如何使用多重纹理
在这里插入图片描述

13. 展示一个不停变化位置的爆炸效果

学习如何用点精灵渲染粒子爆炸效果

在这里插入图片描述

14. 使用变化反馈的粒子系统实现源源不断喷射的爆炸效果

学习 使用变化反馈的粒子系统

在这里插入图片描述

15. 展示 3D纹理噪音

学习实现3D纹理噪音

在这里插入图片描述

16. 展示 多重渲染技术同时渲染到4个目标

学习 MRT(多重渲染目标) 技术

在这里插入图片描述

17 展示一幅立体地形画

学习 用顶点纹理读取渲染地形 技术
在这里插入图片描述

18 展示 深度纹理的阴影 效果图

使用深度纹理的阴影
在这里插入图片描述

19 展示 三个彩色三角形 不停旋转的效果

学习绘制三角形以及使用矩阵变化进行旋转的效果

请添加图片描述

20 展示 一个点和五个立方体 不停旋转的效果

学习 使用两个程序对象分别绘制点和立方体，并且使用矩阵变化进行旋转的效果
请添加图片描述

21 展示 一个点和五个立方体 不停旋转的效果

这是在上面案例的基础上添加每像素照明

请添加图片描述

22 展示 一个点和五个立方体 不停旋转的效果 , 并且立方体有基本的Texture纹理

这是在上面案例的基础上添加的基本纹理

请添加图片描述

23 展示 一个点和五个立方体 不停旋转的效果 , 然后切换混合模式的效果

展示触摸屏幕切换 混合模式的效果
请添加图片描述

24 Texture纹理 的不同过滤模式

本课程将介绍OpenGL ES中可用的不同纹理过滤模式
请添加图片描述

25 使用 顶点缓冲区对象（VBO）来绘制多个立方体

学到的知识点：立方体的数量可以改变，可以切换是否使用VBOs,Native可以调用Java方法
请添加图片描述

26 使用 IBO 来绘制

本课程将介绍索引缓冲区对象（IBO）
请添加图片描述

27 纹理映射

纹理映射就是通过为图元的顶点坐标指定恰当的纹理坐标，通过纹理坐标在纹理图中选定特定的纹理区域，最后通过纹理坐标与顶点的映射关系，将选定的纹理区域映射到指定图元上

在这里插入图片描述

28 YUV 渲染

YUV 图不能直接用于显示，需要转换为 RGB 格式，而 YUV 转 RGB 是一个逐像素处理的耗时操作，在 CPU 端进行转换效率过低，这时正好可以利用 GPU 强大的并行处理能力来实现 YUV 到 RGB 的转换

这个案例学习如何渲染YUV图像
在这里插入图片描述

29 使用 FBO 技术，实现将彩色照片渲染成黑白照片

学习 FBO(帧缓冲区对象) 进行离屏渲染
在这里插入图片描述

30 使用 EGL渲染 来实现 马赛克、网格、旋转、边缘、放大、形变等效果

学习 使用EGL渲染 技术
请添加图片描述

31 对纹理进行缩放和旋转

单指可以对图片进行旋转，双指可以进行缩放
请添加图片描述

32 学习光照基础

学习冯氏光照模型(Phong Lighting Model)，它由三种元素光组成，分别是环境光(Ambient Lighting)、散射光(Diffuse Lighting)及镜面光(Specular Lighting)
请添加图片描述

33 学习多光照实例

学习冯氏光照模型(Phong Lighting Model)的多光照实例
请添加图片描述

34 学习 OpenGL ES 实例化（Instancing）

OpenGL ES 实例化（Instancing）是一种只调用一次渲染函数就能绘制出很多物体的技术，可以实现将数据一次性发送给 GPU ，告诉 OpenGL ES 使用一个绘制函数，将这些数据绘制成多个物体

请添加图片描述

35 学习 OpenGL ES 模板测试

OpenGL ES 模板测试与深度测试类似，主要作用是利用模板缓冲区(Stencil Buffer)所保存的模板值决定当前片段是否被丢弃，且发生于深度测试之前。

请添加图片描述

36 学习 OpenGL ES 混合

OpenGL ES 混合本质上是将 2 个片元的颜色进行调和，产生一个新的颜色。
OpenGL ES 混合发生在片元通过各项测试之后，准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值，不再是新（源）片元直接覆盖缓冲区中的（目标）片元。
在这里插入图片描述

37 展示一个不停变化位置的粒子效果

再次实现一个粒子效果，不一样的实现方式
请添加图片描述

38 展示一个立方体贴图（天空盒）,可以旋转

使用立方体贴图实现一个天空盒效果
请添加图片描述

39 展示一个PBO示例

OpenGL PBO（Pixel Buffer Object），被称为像素缓冲区对象，主要被用于异步像素传输操作。PBO 仅用于执行像素传输，不连接到纹理，且与 FBO （帧缓冲区对象）无关。
请添加图片描述

未完待续…

字节卷动
关注
专栏目录
OpenGL的一些例子（可以对比一下 ，很简单的例子）
09-30
里面有 地月系（完整纹理版） 地月系（完整版） 所学几何体及其颜色搭配合集 三角形和四边形（旋转加颜色版） 三角形和四边形（无色版） 作为对比 各位兄弟 可以比较一下 学习一下
opengl_es_demo
03-26
opengl_es_demo
OpenGL示例项目教程
最新发布
gitblog_00819的博客
08-15 311
OpenGL示例项目教程 ogl-samplesThe OpenGL Samples Pack项目地址:https://gitcode.com/gh_mirrors/og/ogl-samples 项目目录结构及介绍 目录结构 ogl-samples/ ├── CMakeLists.txt ├── README.md ├── include/ ├── res/ ├── src/ │ ├── 3...
openGL 例子
做好当下
05-02 1091
用openGL画出的基本图形。#include #include #define PI 3.1415926535897 int main(int argc, char** argv){ auxInitDisplayMode (AUX_SINGLE | AUX_RGBA); auxInitPosition (0, 0, 300, 300); auxInitWindow(argv[0]); glClearColor(1.0,0.0,1.0,0
Android OpenGL ES（六）创建实例应用OpenGLDemos程序框架 .
weixin_33749242的博客
04-21 124
有了前面关于Android OpenGL ES的介绍，可以开始创建示例程序OpenGLDemos。 使用Eclipse 创建一个Android项目 Project Name: OpenGLDemos Build Target: Android 1.6 ( >1.5 即可） Application Name: Android OpenGL ES Demos Package Nam...
OpenGL ES Demo1
10-10
使用OpenGL ES模拟器在Windows上开发OpenGL ES程序。。
Awsome-Serverless：在此存储库中，我将上载有关无服务器和其他无服务器服务的学习方法以及如何使用它们的知识。
02-28
在此存储库中，我上载了我的无服务器计算和不同的无服务器服务的学习方法以及如何使用它们。 该存储库将为希望使用AWS入门Serveless并希望掌握它的任何人提供帮助。 完整存储库的学习路径议程： 什么是无服务器计算...
模式识别与智能计算的matlab实现源码-awsome-machine-learning:很棒的机器学习
05-19
模式识别与智能计算的matlab实现源码很棒的机器学习 精选的很棒的机器学习框架，库和软件的列表（按语言）。 受到awesome-php的启发。 如果您想为该列表做出贡献（请这样做），请向我发送请求请求或与我联系。此外，...
leetcode前两百-awsome-algorithms-Go:在Golang中学习算法的精选资源列表
07-01
开始学习算法可以更好地掌握他们正在学习的内容。 - 很好地解释了一些算法。 - 通过动画可视化数据结构和算法。 —— - 很多很好的解释和实现的算法。 - 排序算法的简单动画。 - 练习问题推荐器。 在线课程 - 第 I ...
Awsome_Deep_Geometry_Learning:有关3D形状处理的深度学习解决方案的资源列表
03-26
精选的深度几何学习资源列表 基于图像的方法 2012-NIPS-用于3d对象分类的卷积递归深度学习。 2014-NIPS-使用多尺度深度网络从单个图像进行深度图预测。 2014-ECCV-从RGB-D图像中学习丰富的功能以进行对象检测和...
OpenGL ES 1.0 Demo
08-17
很好用的特好用超好用OpenGL ES 1.0 Demo
opengl_es 3.0 Demo
07-05
opengl_es 3.0 官方demo！是opengl_es 3.0书籍的demo,欢迎下载学习
OpenGL经典实例
08-29
OpenGL经典实例
OpenGL ES 2.0入门demo
12-07
很好的OpenGL入门demo,教你学写最简单的shader，OpenGL的绘制流程。
OpenGL ES 学习demo
12-05
OpenGL ES 学习demo，自己学着画点，线，面，还有画文本不会了。还在学习中，不知道学习这个怎么样，到目前为止，还是刚开始学习。
swift-Awsome-Apple-Develop-Guide此文档是Apple平台开发所使用语言的主流学习资源
08-15
这个"Awsome-Apple-Develop-Guide"很可能包含了这些主题的详细教程、代码示例、最佳实践和进阶技巧。通过学习和实践这些资源，开发者不仅可以提高Swift编程技能，还能深入理解Apple平台的开发流程和最佳实践，从而...
OpenGL ES 3.0学习实践
zhuyong006的博客
04-18 236
OpenGL ES 3.0学习实践 android平台下OpenGL ES 3.0从零开始 android平台下OpenGL ES 3.0绘制纯色背景 android平台下OpenGL ES 3.0绘制圆点、直线和三角形 android平台下OpenGL ES 3.0绘制彩色三角形 android平台下OpenGL ES 3.0从矩形中看矩阵和正交投影 android平台下OpenGL ES 3...
OpenGL学习之实例化
Jeson_DeveloperWX
12-17 1092
实例化学习参考于LearnOpenGL-实例化网站，本次试验是基于Assimp这一节的纳米铠甲机器人为例，来简单实现实例化的绘制。 下面摘自实例化的原文，作用很重要颜色标注： 像这样绘制出你模型的其他实例，多次绘制之后，很快将达到一个瓶颈，这是因为你glDrawArrays或glDrawElements这样的函数(Draw call)过多。这样渲染顶点数据，会明显降低执行效率，这是因为OpenGL...
swiper的swiper-slide间隔
07-28
根据引用\[1\]中的描述，修改`slidesPerView`属性可以修改`swiper-slide`的宽度，但不能直接修改`swiper-slide`之间的间隔距离。如果你想要修改间隔距离，可以尝试使用CSS来调整样式。你可以通过设置`margin`或`padding`属性来改变`swiper-slide`之间的间隔距离。 另外，根据引用\[2\]和引用\[3\]中的代码，你可以看到在Vue.js中使用`vue-awesome-swiper`组件时，可以通过设置`slidesPerView`属性来控制`swiper-slide`之间的间隔距离。在引用\[2\]中的代码中，`swiperOption`对象中的`slidesPerView`属性被设置为`3.08`，这将影响`swiper-slide`之间的间隔距离。你可以根据需要调整这个值来改变间隔距离。 总结起来，如果你使用的是`vue-awesome-swiper`组件，可以通过设置`slidesPerView`属性来调整`swiper-slide`之间的间隔距离。如果你使用的是其他版本的Swiper，你可以尝试使用CSS来调整间隔距离。 #### 引用[.reference_title] - *1* [原来swiper的这个swiper-slide的间距调的这儿！](https://blog.csdn.net/m0_65292523/article/details/126361315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [swiper、vue-awsome-swiper插件使用](https://blog.csdn.net/weixin_43123984/article/details/126877867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [swiper2 swiper-slide 之间的间距调整](https://blog.csdn.net/weixin_30625691/article/details/98935677)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

字节卷动

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值