案例 01、OpenGL入门--绘制三角形

简介: OpenGL中三角形的绘制,就类似于学习编程时的Hello world,是一个入门级的使用,重点在于理解图形是如何绘制的

OpenGL中三角形的绘制,就类似于学习编程时的Hello world,是一个入门级的使用,重点在于理解图形是如何绘制的


在绘制之前,需要先介绍几个知识


一、知识补充


工具类


主要有三个工具类

  • 着色器管理类
  • GLTools函数
  • freeglut静态库

与之相对应的头文件如下所示


微信图片_20220512195359.png


重要函数


3个自定义函数+main函数

微信图片_20220512195150.png

ChangeSize主要是用于改变窗口大小,需要在main中通过glutReshaperFunc(函数名) 注册为重塑函数

==>  glViewport中有4个参数,分别是x, y, w, h

==>  其中x,y表示窗口中视图的左下角坐标,通常都是为0

==>  w,h表示窗口的宽和高,通常用像素位表示

void changeSize(int w,int h)
{
    glViewport(0, 0, w, h);
}
  • setupRC函数主要用于配置图形绘制所需的顶点数据、颜色等
  • RenderScene函数是将传入的顶点数据、颜色等通过批次容器类提交到着色器中进行绘制渲染。需要在main函数中通过glutDisplayFunc(函数名) 注册为 显示函数
  • main函数是程序入口函数,在main中需要做一些绘制前的准备工作,比如 初始化缓存窗口、设置窗口大小等
    ==> 具体的流程图如下:


微信图片_20220512195945.png微信图片_20220512195945.png

微信图片_20220512195945.png

代码如下所示

int main(int argc,char *argv[])
{
  //初始化GLUT库,这个函数只是传说命令参数并且初始化glut库
  glutInit(&argc, argv);
  //初始化双缓冲窗口
  glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
  //GLUT窗口大小、窗口标题
  glutInitWindowSize(800, 600);
  glutCreateWindow("Triangle");
  //注册重塑函数
  glutReshapeFunc(changeSize);
  //注册显示函数
  glutDisplayFunc(RenderScene);
  //初始化一个GLEW库,确保OpenGL API对程序完全可用。
  GLenum status = glewInit();
  //在试图做任何渲染之前,要检查确定驱动程序的初始化过程中没有任何问题
  if (GLEW_OK != status) {
      printf("GLEW Error:%s\n",glewGetErrorString(status));
      return 1;
  }
  //设置我们的渲染环境
  setupRC();
  glutMainLoop();
  return  0;
}

二、绘制三角形


三角形绘制完成后的效果如下:

微信图片_20220512200332.png

准备工作

搭建好OpenGL环境,具体可以参考Mac OpenGL 环境搭建,这里就不再重复说明了

  • 准备工作的流程图如下:

微信图片_20220512201857.png


  • 绘制三角形的整体流程如下所示:

微信图片_20220512202041.png

下面主要解释下两个函数


设置数据:setupRC函数


  • setupRC函数主要是针对需要绘制图形的顶点,颜色等数据的配置,并且利用批次容器类,将其传递到着色管理器中
  • 系统监听到数据已经配置完成,去自动调用OpenGL的渲染回调函数

函数中的主要代码如下

void setupRC()
{
    //1、设置清屏颜色(背景颜色)
    glClearColor(0.98f, 0.40f, 0.7f, 1);
    //2、初始化一个渲染管理器
    shaderManager.InitializeStockShaders();
    //3、指定顶点数据,每个顶点有三个坐标:xyz
    GLfloat vVerts[] = {
        -0.5f,0.0f,0.0f,
        0.5f,0.0f,0.0f,
        0.0f,0.5f,0.0f
    };
    //4、利用批次容器类将顶点数据传入着色管理器
    triangleBatch.Begin(GL_TRIANGLES, 3);
    triangleBatch.CopyVertexData3f(vVerts);
    triangleBatch.End();
}

显示回调函数:RenderScene函数


  • RenderScene函数中利用着色管理器针对传入的顶点数据在屏幕上进行绘制
  • 图形绘制前,需要清理一个/一组特定的缓冲区,并指定图形绘制的画笔颜色


主要代码如下:


void RenderScene(void)
{
    //1.清除一个或者一组特定的缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    //2.设置一组浮点数来表示红色
    GLfloat vRed[] = {1.0,1.00,0.0,0.5f};
    //3、顶点数据传递到存储着色器    shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);
    //4、提交着色器,进行绘制
    triangleBatch.Draw();
   //5、将后台缓冲区进行渲染,然后结束后交换给前台
    glutSwapBuffers();
}


相关文章
|
vr&ar Android开发 C++
Android OpenGL入门
Android OpenGL入门
Android OpenGL入门
|
存储 API
学习OpenGL ES之绘制三角形
OpenGL入门经典案例,绘制一个三角形
学习OpenGL ES之绘制三角形
|
存储 索引
OpenGL学习笔记(八):进一步理解VAO、VBO和SHADER,并使用VAO、VBO和SHADER绘制一个三角形 下
OpenGL学习笔记(八):进一步理解VAO、VBO和SHADER,并使用VAO、VBO和SHADER绘制一个三角形
OpenGL学习笔记(八):进一步理解VAO、VBO和SHADER,并使用VAO、VBO和SHADER绘制一个三角形 下
|
存储 C语言 C++
OpenGL学习笔记(八):进一步理解VAO、VBO和SHADER,并使用VAO、VBO和SHADER绘制一个三角形 上
OpenGL学习笔记(八):进一步理解VAO、VBO和SHADER,并使用VAO、VBO和SHADER绘制一个三角形
OpenGL学习笔记(八):进一步理解VAO、VBO和SHADER,并使用VAO、VBO和SHADER绘制一个三角形 上
|
算法 Serverless
OpenGL ES 案例13:动效滤镜(6种)
OpenGL ES 案例13:动效滤镜(6种)
309 0
OpenGL ES 案例13:动效滤镜(6种)
|
编解码 算法 iOS开发
OpenGL ES 案例12:灰度+颠倒+马赛克(3种)滤镜
OpenGL ES 案例12:灰度+颠倒+马赛克(3种)滤镜
219 0
OpenGL ES 案例12:灰度+颠倒+马赛克(3种)滤镜
|
缓存 算法
OpenGL ES 案例11:分屏滤镜
OpenGL ES 案例11:分屏滤镜
189 0
OpenGL ES 案例11:分屏滤镜
|
索引
OpenGL ES 案例08:GLKit使用索引绘图 + 纹理颜色混合
OpenGL ES 案例08:GLKit使用索引绘图 + 纹理颜色混合
96 0
OpenGL ES 案例08:GLKit使用索引绘图 + 纹理颜色混合
|
索引
OpenGL ES 案例07:GLSL使用索引绘图 + 纹理颜色混合
OpenGL ES 案例07:GLSL使用索引绘图 + 纹理颜色混合
339 0
OpenGL ES 案例07:GLSL使用索引绘图 + 纹理颜色混合
|
存储 缓存 API
OpenGL ES 案例04:GLSL加载图片
OpenGL ES 案例04:GLSL加载图片
276 0
OpenGL ES 案例04:GLSL加载图片