OpenGL
关于OpenGL的介绍及案例
Style_月月
越努力,越幸运
展开
-
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 · 1344 阅读 · 0 评论 -
四、深入剖析【离屏渲染】原理
深入剖析【离屏渲染】原理离屏渲染与正常渲染屏幕上最终显示的数据有两种加载流程正常渲染加载流程离屏渲染加载流程从图上看,他们之间的区别就是离屏渲染比正常渲染多了一个离屏缓冲区,这个缓冲区的作用是什么呢?下面来仔细说说首先,说说正常渲染流程正常渲染流程APP中的数据经过CPU计算和GPU渲染后,将结果存放在帧缓冲区,利用视频控制器从帧缓冲区中取出,并显示到屏幕上。在GPU的渲染流程中,显示到屏幕上的图像是遵循大画家算法按照由远及近的顺序,依次将结果存储到帧缓冲区视屏控制器从帧缓冲区中原创 2020-07-07 16:57:02 · 1621 阅读 · 0 评论 -
案例09:球体世界
本案例是基于案例06:大球自转+小球公转+移动的基础上增加了纹理和镜像显示,最终的效果如图所示整体的流程图如下所示其中涉及改动的函数主要有:SetupRC:在原有代码的基础上,增加纹理相关数据及设置loadTGATexture:将TGA文件加载为2D纹理RenderScene:镜面球体部分、地板、非镜面球体部分的绘制Drawsomething:大球、静态小球、动态小球的绘制SetupRC函数该函数主要是数据的初始化,包括顶点、纹理等,函数流程图如下纹理相关的有以下几部分地板数原创 2020-08-14 10:17:51 · 417 阅读 · 0 评论 -
案例08:隧道
本案例主要目的多个纹理如何使用,加深对纹理的使用的理解。整体的案例效果如图所示下面接着说说隧道的绘制过程,整体的流程图如下:其中main、ChangeSize、ShutdownRC就不多作说明,SetupRC:初始化背景色、着色器,生成纹理,并设置顶点及纹理坐标RenderScene:清理缓存、绑定纹理并绘制隧道SpecialKeys:根据上下键位,记录前后移动的深度值,并重新渲染ProcessMenu:根据选择的菜单选项,for循环更换所有纹理的过滤方式,并重新渲染SetupRC函原创 2020-08-14 10:16:44 · 382 阅读 · 0 评论 -
案例07:金字塔+纹理
本次案例的目的在于理解纹理的使用案例整体效果图如下整体流程图如图所示简单说下几个函数的作用main:这个不用多说,程序入口SetupRC:初始化数据LoadTGATexture:加载纹理MakePyramid:设置金字塔顶点数据及纹理坐标RenderScene:渲染函数,绑定纹理、绘制金字塔SpecialKeys:图形根据特殊键位的出发进行旋转ShutdownRC:清理数据,类似于iOS中的dealloc函数下面重点介绍下跟纹理相关的几个函数SetupRC函数函数流程图如下原创 2020-08-14 10:15:40 · 409 阅读 · 0 评论 -
OpenGL + OpenGL ES +Metal 系列文章汇总
OpenGL 文章汇总基础知识一、了解 OpenGL 常见专有名词二、屏幕卡顿 及 iOS中的渲染流程解析三、OpenGL 渲染架构分析四、深入剖析【离屏渲染】原理五、OpenGL 渲染技巧:正背面剔除六、OpenGL 渲染技巧:深度测试、多边形偏移、 混合七、OpenGL中观察方式与矩阵的关系八、了解OpenGL中的向量、矩阵九、OpenGL 基础变化与矩阵堆栈十、OpenGL 纹理相关API十一、理解纹理坐标OpenGL案例案例 01、OpenGL入门–绘制三角形案原创 2020-08-14 10:33:17 · 1793 阅读 · 0 评论 -
3D数学基础 简要归纳
3D数学基础 简要归纳计算机图形学第一准则:看上去是对的就是对的,简单记为近似原则OpenGL是基于3D的,屏幕是2D的OpenGL中使用的是列向量左手系&右手系OpenGL更多的是基于左手系线性代数更多是基于右手系3D图形学中常用坐标系世界坐标系:系统的绝对坐标系物体坐标系:物体产生关联摄像机坐标系/照相机坐标系惯性坐标系:物体坐标系转换为世界坐标系的 “半途”,目的是为了减少复杂度,是一个过渡eg:以下情景基于什么坐标系?书在我的西边还是北边?==>原创 2020-07-28 16:51:30 · 2030 阅读 · 0 评论 -
案例06:大球自转+小球公转+移动
案例06:大球自转+小球公转+移动这个案例是OpenGL中的一个比较经典的综合案例,结合了OpenGL中大部分知识点,下面就来了解下这个案例先来看看最终的效果整体的流程的如下其中,比较重要的逻辑都在以下三个函数中SetupRC函数RenderScene函数SpecialKeys函数下面来详细说说整体的效果的实现,可以大致分为4部分地板大球(自转)小球(包含50个静态小球+1个围绕大球公转的动态小球)移动(特殊键位上下左右触发)准备工作流程图中的ChangeSize、m原创 2020-07-19 00:06:16 · 1443 阅读 · 0 评论 -
案例05:球的自转
利用OpenGL中定时器,实现球体自转的效果,效果如图所示整体实现的流程图如下流程中的main、setupRC、DrawWireFrameBatch等函数与几何图形的绘制基本一致,这里就不再重复说明着重说下RenderScene函数,这里包括定时器的开启及自转的实现清理缓冲区:颜色和深度缓冲区开启定时器:基于时间的变化,获得旋转的角度,此时,就相当ios中NSTimer的创建 //1、基于时间变化 CStopWatch--NSTimer定时器 static CStopWatch原创 2020-07-19 00:05:26 · 614 阅读 · 0 评论 -
案例04:几何图形绘制
其实大部分的代码在之前的案例中都已经写过了,这个案例的主要目的是了解OpenGL中系统定义好的模型有哪些。最终的实现效果如下:整体的流程图如下所示根据上面的流程图,大致说下函数的功能main函数:初始化GL相关库注册自定义函数初始化数据ChangeSize函数:设置视口设置投影方式得到投影矩阵,并载入投影矩阵堆栈设置变换管道,管理矩阵堆栈setupRC函数初始化:背景色,固定着色器开启深度测试设置观察方式利用三角形批次类创建球、环、圆柱、锥、磁盘Re原创 2020-07-19 00:04:36 · 558 阅读 · 0 评论 -
十一、理解纹理坐标
纹理坐标就是纹理与图形的映射关系,图形中每个顶点都会关联一个纹理坐标,表示顶点需要从该位置读取纹理图像的数据。纹理坐标的范围是 0 到 1 之间,顶点坐标一般是用( x,y,z)描述,而纹理坐标是用( s,t,r)描述常规情况下,纹理坐标默认左下角为(0,0),右上角为(1,1),如图所示纹理坐标的映射关系并不是固定的,可以根据图片的翻转,进行不同的映射,但是不能让图片交叉,有以下几种映射情况...原创 2020-07-19 00:03:41 · 7262 阅读 · 1 评论 -
十、OpenGL 纹理相关API
十、OpenGL 纹理相关API图片在屏幕上的显示,最终都是解码成位图,然后进行显示的。一个图形在帧缓存区中的存储空间,可以根据如下公式计算,图像存储空间 = 图像的高度 * 图像宽度 * 每个像素的字节数纹理是一种图形数据,主要用于在屏幕上包装不同的物体,就像新房装修,需要贴不同的墙纸,此时的墙纸就是我们所说的纹理。在OpenGL中,纹理一般是TGA文件在实际的iOS开发中,我们一般不使用OpenGL,而是使用OpenGL ES,从而可以直接使用png、jpg的压缩图片来作为纹理数据,最终原创 2020-07-19 00:03:01 · 376 阅读 · 0 评论 -
九、OpenGL 基础变化与矩阵堆栈
基础变化OpenGL中涉及的基础变化主要有以下5种变换说明视图变换指定观察者位置模型变换在场景中移动物体模型视图描述视图/模型变换的二元性投影改变视景体大小 和 设置它的投影方式视口伪变化,对窗口上最终输出进行缩放视图变换视图变换是应用到场景中的第一种变换,通过物体/观察者在Z轴上的移动,确定场景中利于观察的位置默认情况下,透视投影中的观察者位置处于原点(0,0,0),并沿着z轴负方向看向屏幕里面,一般通过moveForward方法来调整原创 2020-07-19 00:02:23 · 453 阅读 · 0 评论 -
八、了解OpenGL中的向量、矩阵
向量了解向量之前,先了解什么是标量标量:只有大小,例如:1,12,13等向量是有方向的标量,即不仅有大小,还有方向单位向量单位向量是长度为1的向量,向量长度通过下列公式计算如果一个向量不是单位向量,可以通过单位化将其转化为单位向量,即 非零向量除以向量的模,如下图所示向量点乘点乘只能发生在两个向量之间,且点乘时,两向量必须是单位向量,如果不是,需要将向量进行单位化后,再点乘点乘得到的是两个向量之间的夹角的余弦值 即 cosα,范围在[-1, 1]之间,是一个标量O.原创 2020-07-19 00:01:33 · 774 阅读 · 0 评论 -
OpenGL基础代码总结
OpenGL基础代码归纳总结工具类头文件着色器管理类#include "GLShaderManager"GLTools函数#include "GLTools.h"freeglut静态库在Mac 系统下,#include<glut/glut.h>在Windows 和 Linux上,我们使⽤用freeglut的静态库版本并且需要添加⼀一个宏#include <math.h>#ifdef __APPLE__#include <glut/glu原创 2020-07-19 00:00:40 · 859 阅读 · 0 评论 -
七、OpenGL中的观察方式 & 矩阵堆栈
目前在OpenGL中,矩阵的变换主要涉及两种观察方式:观察者不动,物体动观察者动,物体不动两种方式涉及步骤大致总结如下:ChangeSize函数设置投影方式,得到投影矩阵,并往矩阵堆栈中压入一个单元矩阵(单元矩阵的压入可省略) //创建投影矩阵,并将它载入投影矩阵堆栈中 viewFrustum.SetPerspective(35.0f, float(w)/float(h), 1.0f, 500.0f); projectionMatrix.LoadMatrix(vie原创 2020-07-18 23:59:53 · 630 阅读 · 0 评论 -
案例07:纹理金字塔
本次案例的目的在于理解纹理的使用案例整体效果图如下整体流程图如图所示简单说下几个函数的作用main:这个不用多说,程序入口SetupRC:初始化数据LoadTGATexture:加载纹理MakePyramid:设置金字塔顶点数据及纹理坐标RenderScene:渲染函数,绑定纹理、绘制金字塔SpecialKeys:图形根据特殊键位的出发进行旋转ShutdownRC:清理数据,类似于iOS中的dealloc函数下面重点介绍下跟纹理相关的几个函数SetupRC函数函数流程图如下原创 2020-07-18 23:58:01 · 425 阅读 · 0 评论 -
了解OpenGL中的坐标系
了解OpenGL中的坐标系分类OpenGL中坐标系主要分为两大类右手系左手系如图所示常用坐标系而我们常用的坐标系主要有以下几种世界坐标系物体坐标系惯性坐标系照相机坐标系NDC 标准化设置坐标各个坐标系相应的说明如图所示物体、惯性、世界三个坐标系之间的关系在物体成像到屏幕的过程中,需要经过这三个坐标系的相互转换,惯性坐标系是物体坐标系向世界坐标系转换的”重点“物体坐标系仅通过平移即可转换到惯性坐标系惯性坐标系仅通过旋转即可转换到世界坐标系如图所示物体成像原创 2020-07-12 17:58:51 · 875 阅读 · 1 评论 -
案例03 补充:金字塔等图形边框的绘制
在案例 03:金字塔、六边形、圆环的绘制的文章中,针对边框的绘制,并没有作详细说明,下面将这部分补充完善下。首先,我们先思考,如果在绘制金字塔时,在没有绘制黑色边框问题的情况下,是什么样的。效果如图所示:从图上我们可以看出,金字塔绘制的过程中出现类似ZFighting的问题,主要是OpenGL中没有办法通过相同颜色的图层,来区分图层关系,因此需要给图形绘制黑色边框,以便于区分不同图层。黑色图层的绘制流程如图所示函数中主要包含两部分图形的绘制 即 金字塔边框的绘制 即 黑色边框图形的绘制原创 2020-07-12 17:57:44 · 417 阅读 · 0 评论 -
七、OpenGL中观察方式与矩阵的关系
目前在OpenGL中,矩阵的变换主要涉及两种观察方式:观察者不动,物体动观察者动,物体不动两种方式涉及步骤大致总结如下:ChangeSize函数设置投影方式,得到投影矩阵,并往矩阵堆栈中压入一个单元矩阵(单元矩阵的压入可省略) //创建投影矩阵,并将它载入投影矩阵堆栈中 viewFrustum.SetPerspective(35.0f, float(w)/float(h), 1.0f, 500.0f); projectionMatrix.LoadMatrix(vie原创 2020-07-12 17:56:28 · 627 阅读 · 0 评论 -
六、OpenGL 渲染技巧:深度测试、多边形偏移、 混合
六、OpenGL 渲染技巧:深度测试、多边形偏移、 混合深度测试在上一篇五、OpenGL 渲染技巧:正背面剔除中,文末还遗留一个问题未解决,在解决之前,先说说这种现象产生的原因甜甜圈缺口产生原因从图中可以看出,在甜甜圈旋转过程中,当前后两部分重叠时,对于我们而言,需要显示的是前面部分,后面部分是隐藏面,但是OpenGL中并不能清除的区分,两个图层谁显示在前,谁显示在后,由此导致甜甜圈产生了缺口。在解决这个问题前,我们先了解几个概念深度深度是指OpenGL坐标系中,像素点的Z坐标距观察者的距离原创 2020-07-11 15:39:07 · 1009 阅读 · 0 评论 -
五、OpenGL 渲染技巧:正背面剔除
在介绍正背面剔除前,首先通过一个案例说明为什么我们需要正背面剔除我们需要绘制一个甜甜圈,整体的绘制流程如下(甜甜圈是OpenGL中提供的模型,直接使用即可)针对上图的部分函数,作以下说明SetupRC函数在金字塔的案例中使用的是观察者不动,物体动的方式,设置观察者到物体的距离,在甜甜圈案例中使用新的方式设置观察者到物体的距离,即观察者动,物体不动,并创建一个甜甜圈RenderScene函数主要是用于绘制甜甜圈,其流程如下所示最终,得到的甜甜圈如图所示/975F1004A621957F6原创 2020-07-09 11:50:12 · 1510 阅读 · 0 评论 -
案例 03:金字塔、六边形、圆环的绘制
该案例主要是对常见的图元连接方式的运用,常见的基本图元连接方式见此链接最终实现的效果如图所示:如图所示,整体的绘制流程如下main函数:程序入口ChangeSize函数:主要是设置视口及投影方式SetupRC函数:图形数据配置,主要是顶点数据及图元连接方式RenderScene函数:主要用于图形的绘制,可以系统触发,也可以开发者手动触发SpecialKeys函数:对特殊键位的回调处理KeyPressFunc:针对空格键的回调处理DrawWireFrameBatch:用于立体图形的填充原创 2020-07-09 06:49:39 · 750 阅读 · 0 评论 -
三、OpenGL 渲染架构分析
OpenGL中的渲染架构如图所示主要分为两个模块Client:是指常见的iOS代码和OpenGL API方法,这部分是在CPU中运行Server:是指OpenGL底层的渲染等处理,是运行在GPU中的架构分析客户端中通过iOS代码调用OpenGL API中的方法,将图形渲染的相关数据通过通道传递到服务器中顶点着色器和片元着色器,并交由GPU处理。服务器通过与客户端的通道接收传递的数据,并交由相应着色器进行渲染处理,并将最终的结果渲染到屏幕上###数据传递从图上我们可以看出,客户端和服原创 2020-07-07 02:28:38 · 892 阅读 · 0 评论 -
二、屏幕卡顿 及 iOS中的渲染流程解析
屏幕卡顿屏幕卡顿是指图形图像的在显示时出现了撕裂(即图片错位显示)、掉帧(重复显示同一帧数据)等问题,导致用户能直观的从屏幕上看到的一种异常现象为什么会出现这种情况呢?下面就来详细解说下屏幕卡顿###【高频面试题】屏幕卡顿的原因主要有以下三种原因CPU和GPU在渲染的流水线中耗时过长,导致从缓存区获取位图显示时,下一帧的数据还没有准备好,获取的仍是上一帧的数据,产生掉帧现象,掉帧就会导致屏幕卡顿苹果官方针对屏幕撕裂问题,目前一直使用的方案是垂直同步+双缓存区,可以从根本上防止和解决屏幕撕裂,但原创 2020-07-05 22:17:46 · 668 阅读 · 0 评论 -
案例 02、OpenGL入门--正方形键位控制
效果图如下所示:整体的流程图如下主要需要实现以下两部分:绘制正方形特殊键位移动函数绘制正方形在之前的三角形绘制中,我们已经了解了图形绘制的一个基本流程,那么正方形的绘制就是水到渠成的,只需要在三角形代码的基础上做以下修改:定义顶点到原心距离,即 正方形边长 = blockSize * 2GLfloat blockSize = 0.1f;修改顶点数组//正方形四个点的坐标GLfloat vVerts[] = { -blockSize, -blockSize, 0原创 2020-07-04 15:37:46 · 455 阅读 · 0 评论 -
了解常见的图形API
常见的图形API目前比较常见的图形API主要有以下几种OpenGLOpenGL ESOPenCVDirectXMetal下面来具体介绍下各种API的特点OPenGL(Open Graphics Library)OpenGL是一个跨平台、跨语言的编程图形框架,主要用于windows、mac等PC端它将计算机资源资源抽象成一个个OpenGL对象,对这些资源的操作抽象为一个个OpenGL指令要点跨平台、跨语言OpenGL对象:计算机资源OpenGL指令:对计算机资源的操作原创 2020-07-02 23:33:16 · 4642 阅读 · 0 评论 -
案例 01、OpenGL入门--绘制三角形
OpenGL中三角形的绘制,就类似于学习编程时的Hello world,是一个入门级的使用,重点在于理解图形是如何绘制的在绘制之前,需要先介绍几个知识#一、知识补充工具类主要有三个工具类着色器管理类GLTools函数freeglut静态库与之相对应的头文件如下所示重要函数3个自定义函数+main函数二、绘制三角形准备工作搭建好OpenGL环境,具体可以参考Mac OpenGL 环境搭建,这里就不再重复说明了绘制三角形的整体流程如下所示:下面主要解释下两个函数设置数据原创 2020-07-02 14:40:19 · 2625 阅读 · 0 评论 -
一、了解 OpenGL 常见专有名词
状态机可以理解为一个保存对象当前状态,且可以根据输入修改当前状态进行响应的机器特点记忆功能:保存当前状态(如使用颜色、混合功能是否开启等)接收输入:根据输入修改当前状态,且有相应输出进入停机状态时,不再接受输入,且停止工作上下文 Context一个保存OpenGL中各种状态的庞大状态机,是OpenGL指令执行的基础,需要在调用指令之前创建OpenGL函数 与 上下文不论何种语言,OpenGL函数都是面向过程的函数函数本质:对context中某个状态/对象进行操作可以原创 2020-07-02 01:49:31 · 486 阅读 · 0 评论 -
Mac OpenGL 环境搭建
一、准备工作需要准备一下资源1、CLTools2、glew3、libGLTools.a以上资源,可在百度云下载:链接:https://pan.baidu.com/s/1ytMI09aSkduC-8kFKVDmvQ 密码:khgu二、OpenGL 环境配置1、xcode -> File -> New -> Project -> MacOS -> App,命名为 OpenGL 环境搭建2、删除项目中的 Appdelegate.h、Appdelegate.m 、V原创 2020-07-01 23:50:36 · 2198 阅读 · 8 评论