OpenGL 入门-简单图形的渲染

2020-07-06 本文已影响0人远方竹叶

一. 环境搭建

准备资源

GLTools
glew
libGLTools.a

打开 Xcode -> macOS -> App

创建空工程.png

添加 OpenGL.framework 和 GLUT.framework 两个系统库

添加系统库.png

将资源文件中的 libGLTools.a 直接拖到工程的 Frameworks 文件里面以及 include 文件拖到工程文件下

添加资源文件.png

删除文件 AppDelegate.h、AppDelegate.m、main.m、ViewController.h、ViewController.m

删除文件.png

创建 main.cpp 文件

创建cpp文件.png

去掉创建头文件的勾选

取消勾选&输入main.png

二. 绘制一个正方形并用键盘移动

定义定顶点到坐标轴的距离

GLfloat blockSize = 0.1f;

初始化正方形的四个顶点位置（顶点坐标数组）

GLfloat vVerts[] = {
    -blockSize, -blockSize, 0.0f,
    blockSize, -blockSize, 0.0f,
    blockSize, blockSize, 0.0f,
    -blockSize, blockSize, 0.0f
};

程序的入口 mian()

初始化 OpenGL 环境变量
设置窗口大小
注册回调函数
设置渲染环境

int main(int argc,char *argv[]) {
    
    //设置当前工作目录，针对MAC OS X
    gltSetWorkingDirectory(argv[0]);
    
    //初始化GLUT库,这个函数只是传说命令参数并且初始化glut库
    glutInit(&argc, argv);
    
    //初始化双缓冲窗口，其中标志GLUT_DOUBLE、GLUT_RGBA、GLUT_DEPTH、GLUT_STENCIL分别指双缓冲窗口、RGBA颜色模式、深度测试、模板缓冲区
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
    
    //GLUT窗口大小、窗口标题
    glutInitWindowSize(1000, 800);
    glutCreateWindow("Square");
    
    //注册重塑函数
    glutReshapeFunc(changeSize);
    //注册显示函数
    glutDisplayFunc(RenderScene);

    //特殊键位响应函数
    glutSpecialFunc(SpeciaKeys);

    /*
     初始化一个GLEW库,确保OpenGL API对程序完全可用。
     在试图做任何渲染之前，要检查确定驱动程序的初始化过程中没有任何问题
     */
    GLenum status = glewInit();
    if (GLEW_OK != status) {
        printf("GLEW Error:%s\n",glewGetErrorString(status));
        return 1;
    }
    
    //设置我们的渲染环境（包括背景色，类的初始化，数据构建）
    setupRC();
    
    glutMainLoop();

    return  0;
}

changeSize()：自定义函数，通过 glutReshaperFunc(函数名) 注册为重塑函数。当屏幕大小发⽣生变化或者第一次创建窗口时，会调⽤该函数调整窗口⼤小/视口⼤小。

void changeSize(int w, int h) {
    //x，y 参数代表窗口中视图的左下角坐标，而宽度、高度是像素为表示，通常x，y都是为0
    glViewport(0, 0, w, h);
}

RenderScene()：自定义函数，通过 glutDisplayFunc(函数名) 注册为显示渲染函数。当屏幕发⽣变化或者开发者主动渲染会调用此函数，用来实现数据->渲染过程。

void RenderScene() {
    
    //1.清除缓存区（使用到的清除，可以多写）
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    
    //2.设置一组浮点数来表示一个色值
    GLfloat vRed[] = {1.0, 0.0, 0.0, 1.0f};
    
    //使用着色器
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vRed);
    
    //提交着色器
    triangleBatch.Draw();
    
    //执行交换缓存区（双缓存）
    glutSwapBuffers();
}

setupRC()：⾃定义函数，设置你需要渲染的图形的相关顶点数据/颜⾊数据等准备工作

void setupRC() {
     //设置窗口的背景颜色
    glClearColor(0.98f, 0.40f, 0.7f, 1);
    
    //初始化一个渲染管理器(固定管线)。
    shaderManager.InitializeStockShaders();
    
    //利用 GLBatch 批次处理，图元链接方式设置为 GL_TRIANGLE_FAN，将数据传递到着⾊器
    triangleBatch.Begin(GL_TRIANGLE_FAN, 4);
    triangleBatch.CopyVertexData3f(vVerts);
    triangleBatch.End();
}

SpeciaKeys()：自定义函数，当用户使⽤特殊键位则会调⽤用该函数

初始化定义.png

void SpeciaKeys(int key, int x, int y) {
    //定义移动一步的长度
    GLfloat stepLength = 0.025f;
    //选取一个顶点作为基点计算（相对顶点D）
    GLfloat blockX = vVerts[0];
    GLfloat blockY = vVerts[10];
    
    //根据键盘标记的移动方向（上下左右），调整相对移动坐标（blockX/blockY）
    if (key == GLUT_KEY_UP) {
        blockY += stepLength;
    }
    if (key == GLUT_KEY_DOWN) {
        blockY -= stepLength;
    }
    if (key == GLUT_KEY_LEFT) {
        blockX -= stepLength;
    }
    if (key == GLUT_KEY_RIGHT) {
        blockX += stepLength;
    }
    
    //边界问题（边缘碰撞处理，防出界）
    if (blockX < -1.0f) {
        blockX = -1.0f;//移动到最左边
    }
    if (blockX > 1.0f - blockSize * 2) {
        blockX = 1.0f - blockSize * 2;//移动到最右边
    }
    if (blockY > 1.0f) {
        blockY = 1.0f;//移动到最上边
    }
    if (blockY < -1.0f + blockSize * 2) {
        blockY = -1.0f + blockSize * 2;//移动到最下边
    }
    
    //更新顶点坐标ABCD（根据相对顶点D，计算其他三个顶点的坐标）
    vVerts[0] = blockX;
    vVerts[1] = blockY - blockSize * 2;
    
    vVerts[3] = blockX + blockSize * 2;
    vVerts[4] = blockY - blockSize * 2;
    
    vVerts[6] = blockX + blockSize * 2;
    vVerts[7] = blockY;
    
    vVerts[9] = blockX;
    vVerts[10] = blockY;
    
    //将顶点数组通过 GLBatch 帮助类将顶点传输到存储着⾊色器器中， 并⼿手动出发渲染函数
    triangleBatch.CopyVertexData3f(vVerts);
    glutPostRedisplay();
}

第二种方法

以上方法适合顶点较少的图形，如果图形的顶点数很多（例如100个甚至更多），这个时候计算每个顶点的坐标就显得很繁琐，就没那么高效了，这个时候可以通过使用矩阵来实现

主要是根据X轴、Y轴移动的距离，生成一个平移的矩阵，通过图形*平移矩阵 = 移动后的图形，得到最终效果。与上个方法相比较，只需要更改 RenderScene、SpecialKeys 里相关代码

可以将初始化的平移距离理解为正方形的中心，即原点，在图形移动时，其中心点也发生了移动，所以我们要计算的边缘的移动距离就是两个中心店之间的平移距离

定义两个全局变量

//记录移动图形时，在x轴上平移的距离
GLfloat xPos = 0.0f;
//记录移动图形时，在y轴上平移的距离
GLfloat yPos = 0.0f;

RenderScene() 函数相关代码如下：

void RenderScene() {
    //清除一个或一组特定的缓冲区
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    
    //设置一组浮点数来表示红色
    GLfloat vRed[] = {1.0f, 0.0f, 0.0f, 1.0f};
    
    //定义矩阵
    M3DMatrix44f mTransformMatrix;
    
    //平移矩阵
    m3dTranslationMatrix44(mTransformMatrix, xPos, yPos, 0.0f);
    
    //当单元着色器不够用时，使用平面着色器
    //参数1：存储着色器类型
    //参数2：使用什么矩阵变换
    //参数3：颜色
    shaderManager.UseStockShader(GLT_SHADER_FLAT, mTransformMatrix, vRed);
    
    //提交着色器
    triangleBatch.Draw();
    glutSwapBuffers();
}

SpecialKeys() 函数相关代码如下：

void SpecialKeys(int key, int x, int y) {
    GLfloat stepSize = 0.025f;
    
    if (key == GLUT_KEY_UP) {
        
        yPos += stepSize;
    }
    
    if (key == GLUT_KEY_DOWN) {
        yPos -= stepSize;
    }
    
    if (key == GLUT_KEY_LEFT) {
        xPos -= stepSize;
    }
    
    if (key == GLUT_KEY_RIGHT) {
        xPos += stepSize;
    }
    
    //碰撞检测
    if (xPos < (-1.0f + blockSize)) {
        
        xPos = -1.0f + blockSize;
    }
    
    if (xPos > (1.0f - blockSize)) {
        xPos = 1.0f - blockSize;
    }
    
    if (yPos < (-1.0f + blockSize)) {
        yPos = -1.0f + blockSize;
    }
    
    if (yPos > (1.0f - blockSize)) {
        yPos = 1.0f - blockSize;
    }
    
    glutPostRedisplay();
}

完整代码-绘制正方形
资源包-工具

OpenGL 入门-简单图形的渲染

一. 环境搭建

二. 绘制一个正方形并用键盘移动

第二种方法

猜你喜欢

热点阅读