- 博客(24)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 OpenGL + OpenGL ES +Metal 系列文章汇总
OpenGL 文章汇总基础知识一、了解 OpenGL 常见专有名词二、屏幕卡顿 及 iOS中的渲染流程解析三、OpenGL 渲染架构分析四、深入剖析【离屏渲染】原理五、OpenGL 渲染技巧：正背面剔除六、OpenGL 渲染技巧：深度测试、多边形偏移、 混合七、OpenGL中观察方式与矩阵的关系八、了解OpenGL中的向量、矩阵九、OpenGL 基础变化与矩阵堆栈十、OpenGL 纹理相关API十一、理解纹理坐标OpenGL案例案例 01、OpenGL入门–绘制三角形案
2020-08-14 10:33:17
1771
原创 Metal 案例06：视频文件渲染
本案例的目的在于理解本地视频文件渲染的过程整体的效果图如下整体的流程图如下主要分为三部分viewDidLoad函数：绘制前的准备工作MTKViewDelegate协议：视频文件渲染Metal着色文件：处理顶点数据，以及将YUV转换为RGB格式显示准备工作在此之前还需要作一些准备创建OC与C共用的.h文件AVassetreader工具类共用文件主要包含以下内容顶点数据结构体//顶点数据结构typedef struct { //顶点坐标(x,y,z,w)
2020-08-29 23:50:53
938
1
原创 理解 RGB & YUV 颜色编码
RGB 和 YUV 都是色彩空间模型，下面来分别介绍下RGB 颜色编码RGB颜色编码格式，是指每种颜色都可以用（红，绿，蓝）三种原色来表示，将RGB分别取不同的值，会展示不同的颜色。用RGB表示的图像中，每个像素点都有红、绿、蓝三个原色，每种颜色都占用8 bit，即一个字节，所以一个像素点占用24bit，即3个字节，如下图所示当有一张 1280 * 720 大小的图片时，该图片中有 1280 * 720个像素点，其中每个像素点都采用RGB编码格式，那么这张图片就会占用1280 * 720 * 3
2020-08-27 22:23:05
1757
2
原创 Metal 案例05：视频采集 & 实时渲染
本案例主要是利用Metal实现摄像头采集内容的即刻渲染处理，理解视频采集、处理及渲染的流程视频实时采集并渲染的效果图如下，以下效果是由于设置了高斯模糊滤镜，其中高斯模糊滤镜的sigma参数值越高，图像越模糊视频渲染的实现思路主要有以下三步1、通过AVFoundation进行视频数据的采集，并将采集到的原始数据存储到CMSampleBufferRef中，即视频帧数据（视频帧其实本质也是一张图片）2、通过CoreVideo将CMSampleBufferRef中存储的图像数据，转换为Metal可以直接
2020-08-27 15:28:11
920
原创 Metal 案例04：加载图片
本案例的目的在于理解如何加载TGA图片，以及加载PNG/JPG图片加载TGA图片加载TGA图片的效果如图所示整体案例流程图如下所示准备工作在加载图片之前，需要作以下准备工作：UI视图控制器类OC与OC的.h桥接文件CJLImage类创建metal文件创建自定义render渲染循环类UI视图控制器类在viewDidLoad函数中创建MTKView对象、自定义render对象，并设置view的代理为render，其流程与Metal 入门级02：加载三角形中是一致的，不再过多说明
2020-08-26 00:15:14
868
原创 Metal 案例03：大批量顶点数据的图形渲染
本案例的目的在于理解顶点数据的两种存储方式以及它们的区别和应用场景在Metal 入门级02：加载三角形案例中，顶点数据的存储使用的是数组，当顶点传递时通过setVertexBytes(_:length:index:)方法，主要是由于绘制三角形时，所需的顶点只有3个，顶点数据很少，所以可以通过数组存储，此时的数据是存储在CPU中的。那当顶点数据很多时，我们如何存储及传递呢？针对setVertexBytes(_:length:index:)方法在苹果的官方文档中有如下说明对于小于4KB（即4096字节）的
2020-08-25 13:30:17
820
原创 Metal Shader language (着色语言规范)总结
Metal简述Metal着色器语言是用来编写 3D图形渲染逻辑、并行Metal计算核心逻辑 的一门编程语言，当你使用Metal框架来完成APP的实现时则需要使用Metal编程语言。Metal语言使用Clang 和LLVM进行编译处理，编译器对于在GPU上的代码执行效率有更好的控制Metal基于C++ 11.0语言设计的，在C++基础上多了一些扩展和限制，主要用来编写在GPU上执行的图像渲染逻辑代码以及通用并行计算逻辑代码Metal 像素坐标系统：Metal中纹理 或者 帧缓存区attachment
2020-08-23 12:02:07
2074
原创 Metal 简述 & API
Metal介绍Metal是苹果在2018年推出用于取代在苹果端的业务的图形编程接口，在2018年之前使用的是基于OpenGL ES 封装的GLKit，通过Metal相关API直接操作GPU，能最大限度的利用GPU能力。特点Metal具有以下特点低CPU开销最佳GPU性能，即metal 能在GPU上发挥最大的性能最大限度的提高CPU/GPU 的并发性有效的资源管理图形管道 graphics pipelinesMetal中图形管道与OpenGL ES是一致的，并没有什么差别，如图所示
2020-08-21 10:20:48
1330
原创 Metal 入门级02：绘制三角形
本案例的目的在于理解Metal中使用着色器绘制三角形的流程整体效果图如下整体的流程图如下与Metal 入门级01：颜色的渲染加载相比，viewDidLoad函数基本没变化，主要变化的是initWithMetalKitView函数和drawInMTKView代理方法initWithMetalKitView函数：增加了metal着色器文件初始化的准备工作drawInMTKView代理方法：增加了metal绘制三角形的流程准备工作创建metal文件command + N -->
2020-08-20 19:19:21
872
原创 Metal 入门级01：颜色的渲染加载
本案例的目的在于了解metal相关API的使用，及简单渲染的流程整体的效果图如下[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6rPeo7y-1597917160097)(https://upload-images.jianshu.io/upload_images/2251862-4ff70a960e47bd63.gif?imageMogr2/auto-orient/strip)]案例的整体流程如下主要分为两部分viewDidLoad函数：加载自定义的渲染视图
2020-08-20 17:53:29
745
原创 OpenGL ES 综合案例14：大长腿
本案例的目的在于理解大长腿效果的实现以及图片的保存操作流程如下最终的效果图如下准备工作准备工作主要有3部分主控制器UI界面逻辑：主要是一些控件的操作自定义的GLKView（LongLegView）：用于显示 & 更新纹理图片两个封装的工具类LongLegVertexAttribArrayBuffer：缓存区初始化&更新、准备绘制及绘制的封装LongLegHelper：着色器编译及连接的封装这部分内容，将不作说明，如有疑问，请参考文末完整代码大长腿实现 &a
2020-08-17 01:23:21
541
原创 案例09：球体世界
本案例是基于案例06：大球自转+小球公转+移动的基础上增加了纹理和镜像显示，最终的效果如图所示整体的流程图如下所示其中涉及改动的函数主要有：SetupRC：在原有代码的基础上，增加纹理相关数据及设置loadTGATexture：将TGA文件加载为2D纹理RenderScene：镜面球体部分、地板、非镜面球体部分的绘制Drawsomething：大球、静态小球、动态小球的绘制SetupRC函数该函数主要是数据的初始化，包括顶点、纹理等，函数流程图如下纹理相关的有以下几部分地板数
2020-08-14 10:17:51
415
原创 案例08：隧道
本案例主要目的多个纹理如何使用，加深对纹理的使用的理解。整体的案例效果如图所示下面接着说说隧道的绘制过程，整体的流程图如下：其中main、ChangeSize、ShutdownRC就不多作说明，SetupRC：初始化背景色、着色器，生成纹理，并设置顶点及纹理坐标RenderScene：清理缓存、绑定纹理并绘制隧道SpecialKeys：根据上下键位，记录前后移动的深度值，并重新渲染ProcessMenu：根据选择的菜单选项，for循环更换所有纹理的过滤方式，并重新渲染SetupRC函
2020-08-14 10:16:44
380
原创 案例07：金字塔+纹理
本次案例的目的在于理解纹理的使用案例整体效果图如下整体流程图如图所示简单说下几个函数的作用main：这个不用多说，程序入口SetupRC：初始化数据LoadTGATexture：加载纹理MakePyramid：设置金字塔顶点数据及纹理坐标RenderScene：渲染函数，绑定纹理、绘制金字塔SpecialKeys：图形根据特殊键位的出发进行旋转ShutdownRC：清理数据，类似于iOS中的dealloc函数下面重点介绍下跟纹理相关的几个函数SetupRC函数函数流程图如下
2020-08-14 10:15:40
407
原创 OpenGL ES 案例13：动效滤镜（6种）
本案例的目的是理解如何用GLSL实现缩放+灵魂出窍+抖动+闪白+毛刺+幻觉6中动效滤镜准备工作准备工作的代码与OpenGL ES 案例11：分屏滤镜中一致，只需要修改相应的底部item数组及对应的着色器名称等，这里不再说明这部分内容滤镜算法6种滤镜的思路及实现如下所示下面只针对滤镜的自定义着色器中的GLSL代码进行解释说明缩放滤镜缩放原理：通过修改顶点着色器中的顶点和纹理的映射关系实现缩放缩放效果如下缩放的滤镜算法主要有以下几步：通过mod取模函数计算当前时间戳对应的时间周期计算
2020-08-14 01:42:17
937
1
原创 OpenGL ES 案例12：灰度+颠倒+马赛克（3种）滤镜
OpenGL ES 案例12：灰度+颠倒+马赛克（共5种）滤镜本案例的目的是理解如何用GLSL实现灰度+颠倒+马赛克（共5种）滤镜整体的效果图如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c4SodLTT-1597156566845)(https://upload-images.jianshu.io/upload_images/2251862-be323a8ac7062d5e.gif?imageMogr2/auto-orient/strip)]准备工作的代码与
2020-08-11 22:37:35
1017
原创 Swift ：SnapKit 更新约束 & label宽度自适应
创建约束phoneNumLabel.snp.makeConstraints { (maker) in maker.left.equalToSuperview().offset(16) maker.top.equalToSuperview().offset(16) maker.height.equalTo(18) maker.width.equalTo(180)}更新约束更新约束有两种方式在原有约束的基础上更新：更新topphoneNumLabel.snp.m
2020-08-10 15:06:35
4178
原创 OpenGL ES 案例11：分屏滤镜
本文案例代码有OC及Swift版本，详情见文末链接本案例的目的是理解如何用GLSL实现分屏（2/3/4/6/9）滤镜案例的效果图如下准备工作自定义着色器完成无分屏滤镜的着色器代码顶点着色器attribute vec4 Position;attribute vec2 TextureCoords;varying vec2 TextureCoordsVarying;void main(){ gl_Position = Position; TextureCoordsV.
2020-08-09 21:33:02
623
1
原创 iOS 粒子效果实现：CAEmitterLayer + CAEmitterCell
粒子效果的实现需要使用两个类：CAEmitterLayer 和 CAEmitterCellCAEmitterLayerCAEmitterLayer是Core Animation中的特殊图层，继承自CALayer，是一个粒子发射器，用于控制粒子效果属性属性说明emitterCells粒子数组，创建好的粒子样式，需要放入数组中，支持多种粒子样式birthRate粒子的产生率，默认是1.0lifetime粒子的生命周期，默认是1.0emitterPosition
2020-08-06 19:39:29
1003
原创 了解 OpenGL ES实现自定义编程粒子效果 思路
本案例旨在于了解OpenGL ES中自定义编程粒子效果的整体实现思路。案例的整体效果如下：从效果图中可以看出，案例实现了4种粒子效果，下面来说说实现的整体流程如图所示，大致分为4部分视图控制器类：实现粒子效果粒子类：管理并绘制粒子工具类：封装的着色器工具类着色器：GLSL自定义的顶点和片元着色器视图控制器类在这个类中主要是通过粒子类CCPointParticleEffect创建粒子对象，并实现4种粒子效果，然后系统调用GLKView & GLKViewDelegate代理方
2020-08-06 17:39:22
597
原创 OpenGL ES 案例08：GLKit使用索引绘图 + 纹理颜色混合
本文案例代码有OC及Swift版本，详情见文末链接，讲解以OC版本为主本案例是在OpenGL ES 案例06：GLKit使用索引绘图案例的基础上新增纹理与颜色的混合填充功能相比GLSL案例的纹理颜色填充，GLKit中就相对比较简单很多，因为大部分代码apple都已经封装好了，我们只需要使用即可整体案例的效果如下整个案例也是OpenGL ES 案例06：GLKit使用索引绘图与OpenGL ES 入门：GLKit加载图片案例综合的一个例子在原有代码的基础上，需要修改的整体图示如下主要也是在.
2020-08-03 14:14:20
368
原创 OpenGL ES 案例07：GLSL使用索引绘图 + 纹理颜色混合
本文案例代码有OC及Swift版本，详情见文末链接，讲解以OC版本为主本案例是在OpenGL ES 案例05：GLSL使用索引绘图案例的基础上新增纹理与颜色的混合填充功能整体效果图如下：这个案例的思路很简单，主要就是OpenGL ES 案例04：GLSL加载图片与OpenGL ES 案例05：GLSL使用索引绘图案例中功能结合的一个综合案例，下面主要针对新增的功能作一个说明如图所示，在案例05的基础上，作了以下修改注：图中标准的（！！！）即表示需要修改或者新增代码的位置主要需要修改和新增.
2020-08-03 13:47:01
857
原创 OpenGL ES 案例06：GLKit使用索引绘图
本文案例代码有OC及Swift版本，详情见文末链接，讲解以OC版本为主本案例的主要目的是理解GLKit中的索引绘图如果对索引绘图有不了解的，请先看OpenGL ES 案例05：GLSL使用索引绘图文章前半部分，有简要说明案例的效果如图所示[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Dppo4C4-1596349638198)(https://upload-images.jianshu.io/upload_images/2251862-ee0529b898e4d.
2020-08-02 14:28:12
448
原创 OpenGL ES 案例05：GLSL使用索引绘图
本案例的主要目的是理解GLSL中如何索引绘图在介绍本案例之前，首先说说什么是索引绘图一个图形中，有许多顶点，例如本案例中的金字塔，有5个面，由6个三角形组成，一共有18个顶点，然而实际肉眼可见的只有5个顶点，如下图所示索引绘图技巧就是指将图形中的肉眼可见的顶点，通过索引的方式表示顶点之间的连接，将重复顶点复用进行图形绘制的一种技巧案例的整体效果图如下案例的整体流程如图所示主要包含三部分准备工作：主要是导入三方数学库以及全局变量的定义自定义着色器：自定义顶点、片元着色器layoutS
2020-08-01 16:47:53
913
Effective Objective-C 2.0 编写高质量iOS与OS X代码的52个有效方法.rtf
2020-05-14
swift 版本Callkit放骚扰标记demo
2019-01-09
swift 实现导航栏随tableView滑动颜色渐变、头部图片往上移动效果和往下放大效果
2019-01-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人