OpenGL初探

119 阅读4分钟

我正在参加「掘金·启航计划」

认识OpenGL相关概念

OpenGL(Open Graphics Library,开放图形库) 是一种用于创建3D图像的编程接口。
OpenGL主要是用于pc端,是跨平台跨编程语言的接口,支持所有的操作系统,Windows、LINUX、OS等,只操作GPU芯片来保证跨平台性。
OpenGL ES,相当于是OpenGL的一个子集,主要针对手机、PAD和游戏主机等嵌入式设备使用,用于移动端,使用的语言是GLSL,是着色器语言,iOS框架是GLKit。
像美图滤镜软件主要用的CoreImage 和 GPUImage 都是基于OpenGL ES实现的。
图形API本质是利用GPU芯片来高效渲染图形图像。

tips:CPU是串行运算,时间片快速切换调度任务,处理复杂的逻辑判断,C语言、C++代码是编译运行在CPU上的;GPU是并发运算,通过很多的计算单元执行任务,处理数据更高效,OpenGL语言GLSL,着色器语言,编译运行在GPU上。
1bd867ec67230eeb0285043ae4abbaeb.png

3D图形的常见用途

OpenGL用处:实现图形的底层渲染

  • 视频、图形、图片处理:音视频开发中视频解码后的数据渲染和滤镜处理、核心动画的绘制、地图引擎中地图上数据的渲染
  • 2D/3D游戏引擎开发:游戏开发中游戏场景和人物的渲染
  • 科学可视化
  • 医学软件开发
  • CAD(计算机辅助技术)
  • 虚拟实境(AR、VR)
  • AI人工智能
3D

计算机3D图像实质上也是平面的,它只是在计算机屏幕上所显示的二维图像,但它可以提供深度的错觉。
所有的3D都是通过2D+透视,d代表维度,表示一个正在描述或显示的物体具有3个维度:宽度、高度和深度。

坐标系

2D笛卡尔坐标系
x轴与y轴垂直定义一个xy面,绘制平面图形

3D笛卡尔坐标系
x轴、y轴、z轴,z轴是垂直于xy面,z轴表示深度,绘制3D图形\

image.png

image.png

3D图形技术和术语
  • 光栅化:图形是由像素点构成,将像素点显示到屏幕上的过程称为光栅化;
  • 着色:渲染图形的时候给像素点添加颜色;
    着色器语言是给GPU用的
  • 纹理:将纹理图片附着到需要绘制的图像上;
  • 混合:颜色混合效果;
渲染

渲染是图形图像数据转换成3D空间图像的操作,如图形绘制、图片显示到屏幕等数据可视化操作
图元:组成图像的基本单元
OpenGL里只有点、线、三角形,通过这三者来拼成各种形状

图元:

image.png

  • 线框渲染:平面通过线条形成;

image.png

  • 纯色渲染:通过颜色形成形状;

image.png

  • 纹理渲染:添加纹理到形状上;

image.png

着色器Shader(重要)

其实就是一段在GPU运行的程序。我们平时写的代码是给CPU运行的,Shader的程序需要用新的语法GLSL(OpenGL Shading Language)。
OpenGL渲染管线:一系列有序的处理阶段的序列,用于把我们应用中的数据转化到OpenGL,生成一个最终图像的过程
管线分为固定管线,可编程管线
GLSL:专门为图形开发设计的编程语言

着色器分类:

顶点着色器(必要)
细分着色器(可选)
几何着色器(可选)
片元着色器(必选),Metal里称为片元函数

着色器渲染流程:
顶点数据->顶点着色器(必要,接收顶点数据,单独处理每个顶点)
->细分着色器(可选,描述物体的形状,在管线中生成新的几何体处理(平顺)模型,生成最终状态;对所有的图像进行修改几何图元类型或放弃所有凸缘)
->几何着色器
->图元设置(图形的形状)
->剪切(剪切视口之外的绘制)
->光栅化(输入图元的数学描述,转化为与屏幕对应的位置像素片元)
->片元着色器(必选,给像素点添加颜色)
->显示效果\

image.png

image.png

CPU与GPU的通信过程

CPU将数据交给GPU处理需要通过OpenGL,OpenGL的buffers缓存区域(颜色缓存区、顶点缓存区、深度缓存区)解决数据饥饿问题,CPU和GPU的数据处理能力高于内存,CPU和GPU控制的内存是分开的,不能从一块内存复制到另一块内存执行,因为复制数据速度很慢,CPU和GPU都不能操作数据,也避免引起错误。
OpenGL使用客户端--服务端的形式实现,客户端是我们编写的代码,服务端是计算机图形硬件厂商所提供的OpenGL实现,OpenGL ES框架相当于Client去发起图像处理请求,GPU相当于Server负责处理图形操作。

实践学习

配置开发环境

1.画一个三角形
2.画一个正方形,边旋转边移动
3.地球公转及自转
3.金字塔

image.png

参考文章

合集1

合集2

固定着色器的理解和使用

纹理
www.jianshu.com/p/33bf3858a…