lin1109221208的博客

OpenGL + OpenGL ES +Metal 系列文章汇总常用函数常用函数说明genType abs (genType x)返回x的绝对值genType sign (genType x)如果x>0，返回1.0；如果x=0，返回0，如果x<0，返回-1.0genType floor (genType x)返回小于等于x的最大整数值genType ceil (genType x)返回大于等于x的最小整数值genType fract (.

Metal介绍Metal是苹果在2018年推出用于取代在苹果端的业务的图形编程接口，在2018年之前使用的是基于OpenGL ES 封装的GLKit，通过Metal相关API直接操作GPU，能最大限度的利用GPU能力。特点Metal具有以下特点低CPU开销最佳GPU性能，即metal 能在GPU上发挥最大的性能最大限度的提高CPU/GPU 的并发性有效的资源管理图形管道 graphics pipelinesMetal中图形管道与OpenGL ES是一致的，并没有什么差别，如图所示

本案例的目的在于理解大长腿效果的实现以及图片的保存操作流程如下最终的效果图如下准备工作准备工作主要有3部分主控制器UI界面逻辑：主要是一些控件的操作自定义的GLKView（LongLegView）：用于显示 & 更新纹理图片两个封装的工具类LongLegVertexAttribArrayBuffer：缓存区初始化&更新、准备绘制及绘制的封装LongLegHelper：着色器编译及连接的封装这部分内容，将不作说明，如有疑问，请参考文末完整代码大长腿实现 &a

OpenGL 文章汇总基础知识一、了解 OpenGL 常见专有名词二、屏幕卡顿 及 iOS中的渲染流程解析三、OpenGL 渲染架构分析四、深入剖析【离屏渲染】原理五、OpenGL 渲染技巧：正背面剔除六、OpenGL 渲染技巧：深度测试、多边形偏移、 混合七、OpenGL中观察方式与矩阵的关系八、了解OpenGL中的向量、矩阵九、OpenGL 基础变化与矩阵堆栈十、OpenGL 纹理相关API十一、理解纹理坐标OpenGL案例案例 01、OpenGL入门–绘制三角形案

本案例的目的是理解如何用GLSL实现缩放+灵魂出窍+抖动+闪白+毛刺+幻觉6中动效滤镜准备工作准备工作的代码与OpenGL ES 案例11：分屏滤镜中一致，只需要修改相应的底部item数组及对应的着色器名称等，这里不再说明这部分内容滤镜算法6种滤镜的思路及实现如下所示下面只针对滤镜的自定义着色器中的GLSL代码进行解释说明缩放滤镜缩放原理：通过修改顶点着色器中的顶点和纹理的映射关系实现缩放缩放效果如下缩放的滤镜算法主要有以下几步：通过mod取模函数计算当前时间戳对应的时间周期计算

OpenGL ES 案例12：灰度+颠倒+马赛克（共5种）滤镜本案例的目的是理解如何用GLSL实现灰度+颠倒+马赛克（共5种）滤镜整体的效果图如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c4SodLTT-1597156566845)(https://upload-images.jianshu.io/upload_images/2251862-be323a8ac7062d5e.gif?imageMogr2/auto-orient/strip)]准备工作的代码与

本文案例代码有OC及Swift版本，详情见文末链接本案例的目的是理解如何用GLSL实现分屏（2/3/4/6/9）滤镜案例的效果图如下准备工作自定义着色器完成无分屏滤镜的着色器代码顶点着色器attribute vec4 Position;attribute vec2 TextureCoords;varying vec2 TextureCoordsVarying;void main(){ gl_Position = Position; TextureCoordsV.

粒子效果的实现需要使用两个类：CAEmitterLayer 和 CAEmitterCellCAEmitterLayerCAEmitterLayer是Core Animation中的特殊图层，继承自CALayer，是一个粒子发射器，用于控制粒子效果属性属性说明emitterCells粒子数组，创建好的粒子样式，需要放入数组中，支持多种粒子样式birthRate粒子的产生率，默认是1.0lifetime粒子的生命周期，默认是1.0emitterPosition

本案例旨在于了解OpenGL ES中自定义编程粒子效果的整体实现思路。案例的整体效果如下：从效果图中可以看出，案例实现了4种粒子效果，下面来说说实现的整体流程如图所示，大致分为4部分视图控制器类：实现粒子效果粒子类：管理并绘制粒子工具类：封装的着色器工具类着色器：GLSL自定义的顶点和片元着色器视图控制器类在这个类中主要是通过粒子类CCPointParticleEffect创建粒子对象，并实现4种粒子效果，然后系统调用GLKView & GLKViewDelegate代理方

本文案例代码有OC及Swift版本，详情见文末链接，讲解以OC版本为主本案例是在OpenGL ES 案例06：GLKit使用索引绘图案例的基础上新增纹理与颜色的混合填充功能相比GLSL案例的纹理颜色填充，GLKit中就相对比较简单很多，因为大部分代码apple都已经封装好了，我们只需要使用即可整体案例的效果如下整个案例也是OpenGL ES 案例06：GLKit使用索引绘图与OpenGL ES 入门：GLKit加载图片案例综合的一个例子在原有代码的基础上，需要修改的整体图示如下主要也是在.

本文案例代码有OC及Swift版本，详情见文末链接，讲解以OC版本为主本案例是在OpenGL ES 案例05：GLSL使用索引绘图案例的基础上新增纹理与颜色的混合填充功能整体效果图如下：这个案例的思路很简单，主要就是OpenGL ES 案例04：GLSL加载图片与OpenGL ES 案例05：GLSL使用索引绘图案例中功能结合的一个综合案例，下面主要针对新增的功能作一个说明如图所示，在案例05的基础上，作了以下修改注：图中标准的（！！！）即表示需要修改或者新增代码的位置主要需要修改和新增.

本文案例代码有OC及Swift版本，详情见文末链接，讲解以OC版本为主本案例的主要目的是理解GLKit中的索引绘图如果对索引绘图有不了解的，请先看OpenGL ES 案例05：GLSL使用索引绘图文章前半部分，有简要说明案例的效果如图所示[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Dppo4C4-1596349638198)(https://upload-images.jianshu.io/upload_images/2251862-ee0529b898e4d.

本案例的主要目的是理解GLSL中如何索引绘图在介绍本案例之前，首先说说什么是索引绘图一个图形中，有许多顶点，例如本案例中的金字塔，有5个面，由6个三角形组成，一共有18个顶点，然而实际肉眼可见的只有5个顶点，如下图所示索引绘图技巧就是指将图形中的肉眼可见的顶点，通过索引的方式表示顶点之间的连接，将重复顶点复用进行图形绘制的一种技巧案例的整体效果图如下案例的整体流程如图所示主要包含三部分准备工作：主要是导入三方数学库以及全局变量的定义自定义着色器：自定义顶点、片元着色器layoutS

在OpenGL ES 案例04：GLSL加载图片案例中，我们发现加载的图片是倒置的，如下图所示倒置的原因很简单，主要是由于纹理坐标的原点（0，0）是在左下角，而屏幕的坐标原点（0，0）是在左上角，形成倒置图形的过程如图所示下面介绍几种纹理倒置的解决方案方案一：图形顶点翻转180°，纹理保持原状图形顶点利用旋转矩阵旋转180°，如图所示在自定义的顶点着色器中实现顶点数据的翻转180°，需要将顶点 * 旋转矩阵，得到新的顶点坐标，在赋值给内建变量gl_Positionattribute v

本案例的主要目的在于理解GLSL语言自定义着色器以及自定义着色器是如何使用的案例的效果是利用GLSL自定义的着色去加载一张图片，效果图如下案例的整体流程图如下流程中主要分为4个模块准备工作：项目的创建及自定义视图、属性等自定义着色器：利用GLSL编写自定义的顶点、片元着色器初始化：创建layer、context，清空缓存区，以及设置Render和Frame缓存区绘制：主要是GLSL加载、顶点数据处理以及加载纹理，最后绘制到屏幕上准备工作项目的创建及自定义视图创建等，这里不作过多说明

在不会OpenGL ES的情况下，如何利用CoreAnimation实现一个立方体，并旋转，整体效果如下整体实现的思路如下主要分为两部分ViewDidLoad函数：初始化工作update更新：定时器实现旋转ViewDidLoad函数初始化工作包含两部分：addFaces：添加6个面，通过变换组合成立方体addCADisplayLink：添加定时器，并放入runloopaddFaces函数这部分主要是将6个面作相应的变换添加到容器中OC版本//添加面- (void)

本案例是实现一个有纹理的立方体，并根据任意轴旋转，整体效果如下未加光照增加光照效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A3ZRbOE5-1595926598305)(https://upload-images.jianshu.io/upload_images/2251862-e9c8473961298dc3.gif?imageMogr2/auto-orient/strip)]增加光照的主要的思路如下代码的实现主要分为4部分：准备工作：这

本案例的目的在于熟悉GLKit框架的使用，如果还有不了解的，可以看看这篇文章二、GLKit 及 常见API整体效果图如下：准备工作创建一个iOS项目，并将系统创建的ViewController的父类由UIViewController修改为GLKViewController，其中的view的父类由UIView修改为GLKViewOC版本在ViewController.h文件中导入GLKit框架的头文件#import <GLKit/GLKit.h>在ViewController.h

OpenGL ES GLSL语言EGL(Embedded Graphics Library)OpenGL ES 命令需要渲染上下⽂和绘制表面才能完成图形图像的绘制渲染上下⽂: 存储相关OpenGL ES状态，是一个状态机绘制表面：⽤于绘制图元的表面,需要指定渲染的缓存区,例如颜⾊缓、深度和模板OpenGL ES API 并没有提供如何创建渲染上下文或者上下文如何连接到原生窗口系 统. EGL 是Khronos 渲染API(如OpenGL ES) 和原⽣窗⼝系统之间的接⼝. 唯⼀支持 OpenGL

GLKit 简述先了解GLKit框架前，先附上GLKit的苹果官方文档GLKitAPIGLKit框架的设计目的是为了简化基于OpenGL/OpenGL ES的应用开发，加快了OpenGL/OpenGL ES应用程序开发GLKit功能提供高性能的数学运算（Math libraries）：提供常用的向量，四元数和矩阵运算。加载纹理（Texture loading）：允许加载各种纹理，且可以后台加载，通过GLKTextureLoader类来加载提供常见的着色器（effect）：包含以下3种着色器

OpenGL ESOpenGL ES是OpenGL的子集是针对嵌入式设备及移动终端设备的高级3D图形应用程序，例如iOS、Android、Windows等OpenGL ES 是跨平台的，不会提供窗口相关方法，需要系统各自提供载体在本文中，主要讲述的是iOS中的OpenGL ES，OpenGL ES API、OpenGL ES Programming GuideOpenGL ES渲染流程下图出自苹果官方文档OpenGL ES as a Client-Server ArchitectureO