/OpenGLESDemo

Android OpenGL ES 3.0 练手学习Demo

Primary LanguageC++

一、介绍

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

三篇完整版链接：

1.1 项目地址：

Debug APP 下载地址：

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 （帧缓冲区对象）无关。 请添加图片描述

接下来几个案例都是ShaderToy上的案例，移植到Android端来展示

40 展示一段 ShaderToy的特效：跳动的心

请添加图片描述

41 展示一段 ShaderToy的特效：不断漂浮的云朵

在这里插入图片描述

42 展示一段 ShaderToy的特效：时光隧道

在这里插入图片描述

43 展示一段 ShaderToy的特效：燃烧的旋转的主序星

在这里插入图片描述

44 展示一段 ShaderToy的特效：天路

在这里插入图片描述

45 展示一段 ShaderToy的特效：A Day

在这里插入图片描述

46 展示一段 ShaderToy的特效：Atmosphere system test

在这里插入图片描述

47 展示几段 贝塞尔曲线 绘制的曲边扇形 混合而成的效果

学习如何绘制 贝塞尔曲线

在这里插入图片描述

48 展示一个随着时间变化逐渐放大眼睛的效果

学习如何实现 大眼效果 在这里插入图片描述

49 展示一个随着时间变化逐渐瘦脸的效果

学习如何实现 瘦脸效果

在这里插入图片描述

50 展示 一个随着时间变化头部逐渐放大的效果

学习如何实现 大头效果 在这里插入图片描述

51 展示 一个随着时间变化头部跟着晃动的效果

学习如何实现 头部晃动效果 在这里插入图片描述

52 展示 一个 可视化实时音频 的效果

学习如何实现 可视化实时音频 效果 在这里插入图片描述

53 展示 一个 刮刮卡 的效果

学习如何实现 刮刮卡 效果 在这里插入图片描述

54 展示 一个 3D 阿凡达（Avatar）效果

学习如何实现 3D 阿凡达（Avatar）效果 在这里插入图片描述

55 展示 动态（水波纹）涟漪 效果

学习如何实现 动态（水波纹）涟漪 效果

  • 实现效果1 在这里插入图片描述
  • 实现效果2 在这里插入图片描述

56 又见MRT

再一次学习 MRT(多重渲染目标) 技术 在这里插入图片描述

57 OpenGL ES 帧缓冲区位块传送（Blit）

学习 FBO Blit 技术 在这里插入图片描述

58 使用uniform 缓冲区对象，即UBO来展示图片

学习uniform 缓冲区对象，即 UBO技术 在这里插入图片描述

59 使用OpenGL实现RGB到YUV的图像格式转换

学习 OpenGL实现RGB到YUV的图像格式转换技术

在这里插入图片描述

60 展示 OpenGL ES 共享上下文 多线程绘制 技术

学习 MULTI THREAD RENDER 技术 在这里插入图片描述

61 展示 OpenGL 使用 FreeType 渲染文字

学习 OpenGL ES 文字渲染 技术 在这里插入图片描述

62 展示 人像留色

学习 人像留色技术：人体区域保留彩色，人体区域之外灰度化。 在这里插入图片描述

63 展示 3D模型

学习如何使用模型加载库Assimp来加载3D模型

在这里插入图片描述

接下来几个案例都是转场动画GLTransitions网站上的特效，移植到Android端来展示 Android 图片转场和轮播特效

学习 Android 图片转场和轮播特效 如何实现

1 图片转场效果1

在这里插入图片描述

2 图片转场效果2

在这里插入图片描述

3 图片转场效果3

在这里插入图片描述

4 图片转场效果4

在这里插入图片描述

5 图片转场效果5

在这里插入图片描述

6 图片转场效果6

在这里插入图片描述

7 图片转场效果7

在这里插入图片描述

8 图片转场效果8

在这里插入图片描述

9 图片转场效果9

在这里插入图片描述

10 图片转场效果10

在这里插入图片描述

11 图片转场效果11

在这里插入图片描述

12 图片转场效果12

在这里插入图片描述

13 图片转场效果13

在这里插入图片描述

14 图片转场效果14

在这里插入图片描述

15 图片转场效果15

在这里插入图片描述

16 图片转场效果16

在这里插入图片描述

17 图片转场效果17

在这里插入图片描述

18 图片转场效果18

在这里插入图片描述

19 图片转场效果19

在这里插入图片描述

20 图片转场效果20

在这里插入图片描述

21 图片转场效果21

在这里插入图片描述