随笔分类 -  OpenGL

OpenGL相关知识
摘要:一、Metal 实现视频预览 首先我们知道视频其实就是一帧帧的图片。 渲染业务流程: (注:AVFoundation 有提供的预览图层: AVCaptureVideoPreviewLayer) 0、初始化工作 // 1.获取 MTKView 预览图层 self.mtkView = [[MTKView 阅读全文
posted @ 2020-08-30 14:52 张张_z 阅读(1747) 评论(0) 推荐(0)
摘要:一、Metal 大量顶点数据处理 如上图,setVertexByte: 方法对数据是有限制的 不能大于4K。当大量数据,超过了4K时,我们可以使用 MTLBuffer。 1、MTLBuffer 当顶点数量太多时,对CPU的消耗会增大,尤其在游戏、AI等场景中,为更好的扩展管理 (并不是为了图形图片的 阅读全文
posted @ 2020-08-28 23:58 张张_z 阅读(1246) 评论(0) 推荐(0)
摘要:通过 Metal,实现 渲染颜色到屏幕 和 三角形的绘制 两个简单案例。 一、Metal 使用 Metal Programing Guide 官方文档 类似于 OpenGL ES 的 GLKit, 苹果为开发者提供了 MetalKit 。并对开发者做了以下建议(当然这只是建议,不是必须遵循的规则): 阅读全文
posted @ 2020-08-27 23:55 张张_z 阅读(861) 评论(0) 推荐(0)
摘要:Metal 简介 与 Metal 编程语言语法。 一、Metal 简介 1、Metal 是 Apple 为了解决 3D 渲染而推出的框架。游戏开发者的新的技术平台,该技术能够为3D图像提高 10 倍的渲染性能。苹果2018年推出 Metal,在此之前一直使用OpenGL ES。 Metal 的2个目 阅读全文
posted @ 2020-08-26 00:34 张张_z 阅读(4076) 评论(0) 推荐(0)
摘要:此案例用来处理纹理的拉伸,并对拉伸后图片进行保存。 拉伸效果: 一、拉伸案例 - 主流程 1、加载原图 2、拉伸区域的滑块处理 -- sliderView 3、图片拉伸绘制 4、保存图片到本地相册 二、拉伸,顶点/纹理坐标处理过程 1、手动指定拉伸区域、选取合适的图元装配方式 8个顶点,通过方式 G 阅读全文
posted @ 2020-08-23 17:56 张张_z 阅读(2275) 评论(0) 推荐(1)
摘要:最终实现滤镜效果: 详细Demo文章见底部 一、缩放 1)实现思路:修改顶点坐标和纹理坐标的对应关系。纹理坐标不变的情况下,对顶点坐标进行放大. 缩放过程: 1、设置一次缩放效果的时长 duration 0.6 2、设置最大振幅 maxAmplitude 0.3 --> 放大程度 [1 ~ 1.3] 阅读全文
posted @ 2020-08-17 23:28 张张_z 阅读(820) 评论(0) 推荐(0)
摘要:图片显示到屏幕上由CPU/GPU 协作完成: CPU:计算视图 frame 、图片解码,需要绘制的图片通过数据总线交给 GPU。 GPU:纹理混合、顶点变换与计算、像素点的填充计算、渲染到帧缓冲区。 iOS双缓冲机制:2个帧缓冲区 纹理图片滤镜处理,通过修改片元着色器实现滤镜效果。 效果: 一、灰度 阅读全文
posted @ 2020-08-16 14:53 张张_z 阅读(773) 评论(0) 推荐(0)
摘要:案例:利用 GLSL 实现分屏滤镜 --> 2、3、4、6、9分屏。 分屏滤镜简单思路:绘制原始纹理图片 -- 绘制分屏 --> 1、片元着色器 来修改设置每个像素 --> 2、重绘 实现效果: 一、绘制原图过程不变: 1、创建图层:CAEAGLLayer 2、创建上下文 EAGLContext 3 阅读全文
posted @ 2020-08-13 22:33 张张_z 阅读(815) 评论(0) 推荐(0)
摘要:一、索引绘图 若要绘制下图目标图形,按普通处理方式则需要一个个进行N多个三角形的顶点处理。图中所用到顶点重复性很高,其实只有7个不同的顶点 --> 索引绘图 --> 将顶点按索引信息进行面的绘制 --> 索引数组:{1,2,3}{3,2,4}{4,2,7}{7,2,5} {4,7,2}{2,7,6} 阅读全文
posted @ 2020-08-03 19:39 张张_z 阅读(793) 评论(0) 推荐(0)
摘要:案例:使用编译链接自定义的着色器(shader),用简单的 glsl 语言来实现顶点、片元着色器,绘制图形并进行简单的变换。 思路: 1.创建图层 2.创建上下文 3.清空缓存区 4.设置 RenderBuffer 5.设置 FrameBuffer 6.开始绘制 Demo 一、准备工作 步骤 1~5 阅读全文
posted @ 2020-08-01 12:54 张张_z 阅读(1440) 评论(0) 推荐(0)
摘要:一、基础 1、OpenGL ES 不同版本 OpenGL ES 1.X:针对固定功能流水管线硬件 OpenGL ES 2.X:针对可编程流水管线硬件 OpenGL ES 3.X:OpenGL ES 2.0 的扩展 2、EGL的主要功能: 1. 和本地窗⼝系统(native windowing sys 阅读全文
posted @ 2020-08-01 12:37 张张_z 阅读(711) 评论(0) 推荐(0)
摘要:一、OpenGL ES 初识 1、OpenGL ES 简介 OpenGL ES (OpenGL for Embedded Systems) 是以手持和嵌⼊式为⽬标的⾼级3D图形应用程序编程接⼝口(API)。OpenGL ES 是⽬前智能⼿机中占据统治地位的图形API。⽀持的平台:iOS、Andrio 阅读全文
posted @ 2020-07-26 22:13 张张_z 阅读(972) 评论(0) 推荐(0)
摘要:案例中涉及到的点对应 《OpenGL七》 案例一、隧道 效果 Demo链接 1)四面: 2)主要代码: 1 // 初始化设置 2 void SetupRC() { 3 4 glClearColor(0.0f, 0.0f, 0.0f, 1.0f);// 黑色 5 shaderManager.Initi 阅读全文
posted @ 2020-07-23 23:33 张张_z 阅读(720) 评论(0) 推荐(0)
摘要:纹理基初知识 一、纹理 1)无论是 tga 文件还是 png/jpg 文件,最终图片文件都是要归结到位图文件去处理的。 纹理文件 --> TGA文件 --> OpenGL --> 位图 iOS开发中 --> OpenGL ES --> png/jpg --> 位图 2)原始图像数据: 图像存储空间 阅读全文
posted @ 2020-07-22 18:17 张张_z 阅读(1138) 评论(0) 推荐(0)
摘要:综合demo案例,效果如下 Demo地址 一、主要代码 1 // 初始化 设置 2 void SetupRC() { 3 4 // 初始化 5 glClearColor(0, 0.3, 0.5, 1); 6 shaderManager.InitializeStockShaders(); 7 // 开 阅读全文
posted @ 2020-07-22 14:03 张张_z 阅读(1215) 评论(0) 推荐(0)
摘要:关于矩阵和向量的相关知识,可能学过后几乎遗忘了干净,或是没有学过,但并不影响我们对相关API的使用。当然基础知识的理解会帮助我们弄明白和更好的进行OpenGL的开发工作。 GLTools库中的Math3d,其中包含了大量的OpenGL 3D数学的数据类型,矩阵、向量的计算等等 API。 一、向量 1 阅读全文
posted @ 2020-07-20 18:53 张张_z 阅读(961) 评论(0) 推荐(0)
摘要:/* 最新更新时间 2020-07-20 增加:矩阵压栈 */ /*****************************************************************/ 我们视觉上的物体的移动有2种方式: 1、物体移动,观察者(眼睛)不动; 2、物体不动,观察者移动。 阅读全文
posted @ 2020-07-14 12:37 张张_z 阅读(660) 评论(0) 推荐(0)
摘要:我们已经知道,OpenGL 在渲染时会把深度值和颜色值存储到对应的深度缓冲区和颜色缓冲区内。当深度缓冲区被关闭时(手动禁止写入深度缓冲区: glDepthMask(GL_FALSE)),颜色的变化是:新的颜色将简单覆盖掉颜色缓冲区中当前存的颜色色值;当深度缓冲区打开时,通过深度测试结果来决定新颜色是 阅读全文
posted @ 2020-07-14 12:35 张张_z 阅读(766) 评论(0) 推荐(1)
摘要:代码 or demo查看请滑动到最后。 一、问题场景: 在 3D 图形的渲染过程中,我们是需要来决定哪部分是要对观察者 可见/不可见 的,对于不可见的部分,我们就没有渲染的必要了,要及早丢弃掉他们。例子:一间草屋,我们站在门前的时候,草屋的背后我们是看不到的,那么就不要渲染它了。否则就会出现下图中的 阅读全文
posted @ 2020-07-10 00:26 张张_z 阅读(1518) 评论(0) 推荐(0)
摘要:一、OpenGL的渲染流程架构 三种渲染管线的传递方式:attribute(属性)、texture(纹理) 、uniform(统一) 图元装配(primitive assembly):下图 "OpenGL 基本图元" 的9中图元链接方式。 片元着色器 --> 逐个片元(片段)操作 --> 帧缓冲区 阅读全文
posted @ 2020-07-09 21:59 张张_z 阅读(1304) 评论(0) 推荐(0)