初识 OpenGL
OpenGL, 全称 Open Graphics Library, 即开放式图形库, 是行业领域中最为广泛接纳的 2D/3D 图形 API.
作为一名 iOS 开发人员, 学习 OpenGL 知识后, 可以从事的行业主要有地图底层渲染
, 直播
, 图片美化
等.
在 macOS 上搭建 OpenGL 开发环境
所谓工欲善其事, 必先利其器, 进行 OpenGL 开发之前, 需要先搭建 OpenGL 开发环境. macOS 上搭建 OpenGL 开发环境的方式主要有手动下载代码库
和使用 homebrew 安装
两种. 这里使用的是手动下载的方法进行搭建.
手动下载代码库
OpenGL 开发中使用到的库主要有 glew
和 GLTools
两个, 代码可以直接从文末的 Demo 中直接下载.
1. 新建项目
打开 Xcode, 选择 Create a new Xcode project
(或使用 command+shift+n) -> macOS -> Cocoa App
2. 添加 OpenGL
和 GLUT
库
点击 project, 选择 Build Phases
-> Link Binary With Libraries
-> +
, 分别添加 OpenGL.framework
和 GLUT.framework
两个库
3. 手动添加代码库
右键点击 -> Add Files to ...
, 选择事先下载好的代码库中的 include
文件夹(或者直接将include
拖拽到项目中), 同时勾选 Copy items if needed
使用同样的方法将 libGLTools.a
添加到 Frameworks
文件夹中
4. 添加 Header Search Paths
将 GLTools.h 和 glew.h 的路径添加到 Header Search Paths 中
5. 删除系统生成的文件并创建 main.cpp
文件
选中系统自动生成的 AppDelegate.h
, AppDelegate.m
, ViewController.h
, ViewController.m
及 main.m
文件并删除, 然后创建 main.cpp
文件, 创建时取消选中 Also create a header file
6. 编写代码
在 main.cpp
中敲入以下代码, 编译时会报 error, 此时只需将报错信息中的 import 将 <> 改为 "" 即可
#include <stdio.h>
#include "GLTools.h"
#include <glut/glut.h>
GLBatch triangleBatch;
GLShaderManager shaderManager;
void changeSize(int w, int h) {
glViewport(0, 0, w, h);
}
void renderScene(void) {
// 清屏
glClear(GL_COLOR_BUFFER_BIT);
GLfloat redColor[] = {1.0f, 0.0f, 0.0f, 1.0f};
// 设置使用的是固定管线
shaderManager.UseStockShader(GLT_SHADER_IDENTITY, redColor);
triangleBatch.Draw();
glutSwapBuffers();
}
void setupRC() {
// 设置清屏颜色
glClearColor(0.0f,0.0f,1.0f,1.0f);
// 初始化管线
shaderManager.InitializeStockShaders();
// 选择三角形顶点位置
GLfloat verts[] = {
-0.5f,0.0f,0.0f,
0.5f,0.0f,0.0f,
0.0f,0.5f,0.0f,
};
// 开始绘制
triangleBatch.Begin(GL_TRIANGLES, 3);
triangleBatch.CopyVertexData3f(verts);
triangleBatch.End();
}
int main(int argc,char* argv[]){
gltSetWorkingDirectory(argv[0]);
// 初始化 glut
glutInit(&argc, argv);
// 设置了程序所使用的窗口类型
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
// 设置所需的窗口大小
glutInitWindowSize(800, 600);
// 创建窗口并设置标题
glutCreateWindow("Triangle");
// 设置窗体大小改变时的回调
glutReshapeFunc(changeSize);
// 设置显示回调
glutDisplayFunc(renderScene);
GLenum err = glewInit();
if(GLEW_OK != err) {
fprintf(stderr,"glew error:%s\n",glewGetErrorString(err));
return 1;
}
// 绘制图形
setupRC();
// 一个无限执行的循环
glutMainLoop();
return 0;
}
复制代码
7. 运行结果
8. 关于 warning
直接使用上述代码时会出现一堆的 warning, 这是因为 GLUT
这个库从 macOS 10.9
后便被弃用了, 但是不影响学习或正常开发. 如果不想看到一堆 warning 或者想要使用较新的工具, 可以使用 glfw
代替. 因为笔者学习的教材使用的 GLUT, 所以这里也用 GLUT 入门, 后续有机会会学学 glfw 的使用.
Tips
一些术语
- 顶点: 屏幕中显示出来的一个点, 是 OpenGL 的基础, OpenGL 中的图形就是由大量的顶点以及顶点间的连线构成的
- 光栅化: 实际绘制或填充每个顶点之间的像素形成线程
- 着色: 沿着顶点之间改变颜色值, 能够轻松创建光照照射在一个立方体上的效果
- 纹理贴图: 一个用来贴到三角形或多边形上的图片
- 混合: 将不同颜色混到一起
OpenGL 的渲染流程
图元的类型
类型 | 值 | 说明 |
---|---|---|
GL_POINTS | 0x0000 | 一个个独立的顶点 |
GL_LINES | 0x0001 | 多条线段 |
GL_LINE_STRIP | 0x0002 | 不闭合的折现 |
GL_LINE_LOOP | 0x0003 | 闭合的折现 |
GL_TRAINGLES | 0x0004 | 多个独立的三角形 |
GL_TRAINGLE_STRIP | 0x0005 | 多个连续的三角形 |
GL_TRAINGLE_FAN | 0x0006 | 扇状连续的三角形 |
GL_QUADS | 0x0007 | 多个独立的四边形 |
GL_QUAD_STRIP | 0x0008 | 多个连续的四边形 |
GL_POLYGON | 0x0009 | 单个简单的凸多边形 |