（二）OpenGL中的Shader

• 

小华同学的学习笔记

 

仰望星空，脚踏实地

• 目录视图
• 摘要视图
• 订阅

 

（二）OpenGL中的Shader

标签： opengl

2016-09-08 19:30  240人阅读  评论(0)  收藏  举报

  分类：

OpenGL学习笔记（1） 

目录(?)[+]

学习总结自：http://learnopengl.com/#!Getting-started/Hello-Triangle 
http://learnopengl.com/#!Getting-started/Shaders 
继上篇文章中提到，OpenGL是为了在GPU上同时跑成千上万个程序，在GPU上跑的这些小程序，称为Shader。

准备

我们在运行GPU程序前，得准备几样东西：1）输入数据。2）数据缓冲区。3）Shader程序。4）GLSL（OpenGL Shade Language）主程序。 
以画一个三角形为例， 
1）输入数据包括：a. 三点顶点的坐标。b. 三个顶点的颜色。

  GLfloat vertices[] = {
        // 坐标        // 颜色
         0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  // 右下角
        -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  // 左下角
         0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f   // 顶点 
    };

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

2）数据缓存区包括：a. 数据怎么识别。哪一块是坐标数据？哪一块是颜色数据? b. 哪一块数据是第一个三角形的数据？哪一块数据是第二个三角形的数据？

 GLuint VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glBindVertexArray(VAO);// 首先绑定VAO结构。一个VAO对应一个形状对象，包含了一个形状的所有属性，包括颜色、坐标等等。用shader程序调用VAO这个结构，可以画出对应的图像来。

    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//在绑定VAO之后，绑定VBO结构。**这样VBO就属于之前被绑定VAO的一部分。**里面包含了预先定义好的数组vertices，vertices就是一个浮点数组，包含具体的坐标、颜色值。


    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);
    glEnableVertexAttribArray(0);// 坐标属性。让Vertex Shader将这部分数据作为坐标导入。

    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
    glEnableVertexAttribArray(1);// 颜色属性。让Vertex Shader将这部分数据作为坐标颜色值导入。

    glBindVertexArray(0); // Unbind VAO

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

3）Shader 程序。将导入GPU的数据，为对应的坐标点画上对应的颜色。

// Shaders
const GLchar* vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 position;\n"//location = 0，与之前绑定VAO步骤中的函数glEnableVertexAttribArray(0)对应，把坐标数据导入到 vec3 position 这个shader中的坐标变量。
    "layout (location = 1) in vec3 color;\n"//location = 1，与之前绑定VAO步骤中的函数glEnableVertexAttribArray(1)对应，把坐标数据导入到 vec3 color这个shader中的颜色变量。
    "out vec3 ourColor;\n"
    "void main()\n"
    "{\n"
    "gl_Position = vec4(position, 1.0);\n"
    "ourColor = color;\n"//将颜色值直接赋值给输出的变量ourColor，在Fragment Shader中也有一个同名的变量，所有最终像素的颜色就是此颜色值。
    "}\0";
const GLchar* fragmentShaderSource = "#version 330 core\n"
    "in vec3 ourColor;\n" //OpenGL Shader程序会直接将同名的变量联系到一起，这个ourColor就是vertex shader中的输出的ourColor
    "out vec4 color;\n"
    "void main()\n"
    "{\n"
    "color = vec4(ourColor, 1.0f);\n"
    "}\n\0";

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

4）GLSL 主程序

 GLuint shaderProgram = glCreateProgram(); //创建一个GLSL主程序
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);//将两个shader挂载到主程序上
    glLinkProgram(shaderProgram);//链接shader程序。编译shader的步骤在此之前。接下来会详细介绍

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

步骤

为何要将1）输入数据。2）数据缓冲区。3）Shader程序。4）GLSL（OpenGL Shade Language）主程序。这个几个模块分开介绍呢？ 
因为这几块相互独立，这是OpenGL比较明显的特点。详细说，就是GLSL主程序可以链接任意一个编译好的shader程序，编译好的shader程序可以装载不同的VAO(Vertext Array Object，它是VBO的老大，Shader 调用的时候是直接调VAO，VBO包含了数据，VAO包含了VBO以及如何让Shader识别这些VBO数据的一些属性)，VAO又可以用不同的方式装载不同的数据。 
以这段代码为例，只粘贴了比较关键的代码，完整源码请参考： 
http://learnopengl.com/code_viewer.php?code=getting-started/shaders-interpolated 
程序的结果就是对三角形的三个顶点画上红、绿、蓝三种颜色，三角形中间区域的颜色OpenGL会自动插值出来，这是OpenGL的神奇之处（我也还没懂原理）。 

//--------------这不是完整源码，着重介绍重要的几个步骤------------------//

//---------编写shader 程序----------//
const GLchar* vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 position;\n"
    "layout (location = 1) in vec3 color;\n"
    "out vec3 ourColor;\n"
    "void main()\n"
    "{\n"
    "gl_Position = vec4(position, 1.0);\n"
    "ourColor = color;\n"
    "}\0"; 
const GLchar* fragmentShaderSource = "#version 330 core\n"
    "in vec3 ourColor;\n"
    "out vec4 color;\n"
    "void main()\n"
    "{\n"
    "color = vec4(ourColor, 1.0f);\n"
    "}\n\0";//简单易懂的Shader源码

//---------编译和链接shader程序----------//
GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader); //因为shader程序是在GPU上跑，所以不是和CPP文件一起编译。Shader程序如果有BUG，在编译CPP的时候不会出错，而是在运行CPP工程的时候报错。

 GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);

 GLuint shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram); //将shader程序与GLSL主程序链接到一起

//---------编写VAO，VBO以及具体导入的数据----------//
 GLfloat vertices[] = {
        // Positions         // Colors
         0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  // Bottom Right
        -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  // Bottom Left
         0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f   // Top 
    };//三个顶点的坐标和颜色值

    GLuint VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);//可以生成多个VAO和多个VBO。一个只能对应一个VBO。画多个图形，就得用不同的VAO包含不同的VBO
    glBindVertexArray(VAO);//绑定VAO之后，接下来的所有操作都被记录到此VAO当中，直到这个VAO被解除绑定为止。VAO就是画一个图形所需要的所有属性。绑定完这个VAO之后，可以接着绑定其它的VAO。

    glBindBuffer(GL_ARRAY_BUFFER, VBO);//绑定VBO到当前VAO中，注意GL_ARRAY_BUFFER这个类型只能绑定一个VBO
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//绑定数据到VBO对象当中
    // Position attribute
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);//坐标位置在vertices数组中起始点为0，步长为6个FLOAT数据的长度
    glEnableVertexAttribArray(0);//用vertex shader中的Location0来导入数据，Location0就是坐标数据
    // Color attribute
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));//坐标位置在vertices数组中起始点为3，步长为6个FLOAT数据的长度
    glEnableVertexAttribArray(1);//用vertex shader中的Location1来导入数据，Location0就是颜色标数据

    glBindVertexArray(0); // 解除绑定VAO，对这个VAO的所有操作到此为止，之前的操作被全部保存
 // 循环画图
    while (!glfwWindowShouldClose(window))
    {
        // 检测是否有键盘触发事件
        glfwPollEvents();

        // Render
        // Clear the colorbuffer
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);//设置背景颜色
        glClear(GL_COLOR_BUFFER_BIT);

        // Draw the triangle
        glUseProgram(shaderProgram);//导入一个GLSL主程序
        glBindVertexArray(VAO);//导入其中一个VAO,一个主程序可以链接多个VAO，在画完这个VAO之后，可以接着画另外一个VAO代表的图形。这是OpenGL比较明显的特征
        glDrawArrays(GL_TRIANGLES, 0, 3);//画三角形
        glBindVertexArray(0); //glBindVertexArray(）将VAO属性复位，也就是不绑定任意一个VAO

        // Swap the screen buffers
        glfwSwapBuffers(window);
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77

顶

0

 

踩

0

 

 

• 上一篇（一）OpenGL渲染的基本流程
• 下一篇ROS的话题（Topic）

我的同类文章

OpenGL学习笔记（1）

• •（一）OpenGL渲染的基本流程2016-09-06阅读846

参考知识库

PHP知识库

6509关注|1053收录

猜你在找

OpenGL ES2.0 中级篇 OpenGL-实现视频播放(FFMpeg) OpenGL实现RGB到YUV的转化 OpenGL ES2.0基础 OpenGL视频教程

OpenGL ES 着色器shader介绍 GPU 加速下的图像处理 Opengl es shader opengl版本支持和shader支持判断 Cocos2dx-OpenGL ES20教程编写自己的shader2 Lua中使用openGL shader时Scale9Sprite无法变灰色

查看评论

  暂无评论

发表评论

• 用 户 名：
• yz2010

• 评论内容：
• 

•   

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场

核心技术类目

全部主题  Hadoop  AWS  移动游戏  Java  Android  iOS  Swift  智能硬件  Docker  OpenStack  VPN  Spark  ERP  IE10  Eclipse  CRM  JavaScript  数据库  Ubuntu  NFC  WAP  jQuery  BI  HTML5  Spring  Apache  .NET  API  HTML  SDK  IIS  Fedora  XML  LBS  Unity  Splashtop  UML  components  Windows Mobile  Rails  QEMU  KDE  Cassandra  CloudStack  FTC  coremail  OPhone  CouchBase  云计算  iOS6  Rackspace  Web App  SpringSide  Maemo Compuware  大数据  aptech  Perl  Tornado  Ruby  Hibernate  ThinkPHP  HBase  Pure  Solr  Angular  Cloud Foundry  Redis  Scala  Django  Bootstrap

• 个人资料

 
BeyondTheBuzzer

 

• 访问：15889次
• 积分：319
• 等级： 
• 排名：千里之外

• 原创：15篇
• 转载：0篇
• 译文：0篇
• 评论：6条

• 文章搜索

• 文章分类

• MCU编程(4)
• OpenCV学习(4)
• Android开发(2)
• VR(1)
• OpenGL学习笔记(2)
• ROS学习笔记(2)
• 四轴飞行器(1)

• 文章存档

2016年09月 (5) 2016年01月 (1) 2015年05月 (1) 2015年03月 (3) 2015年02月 (1)

展开

• 阅读排行

• OpenCV手势识别-手掌特征提取(3272)
• 开源四轴飞行器CC3D的稳定模式和PID算法简介(2172)
• Linux开源智能视频监控软件zoneminder的安装(1532)
• VR中的图形畸变(1405)
• OpenCL嵌入式图像处理(1126)
• （一）OpenGL渲染的基本流程(845)
• 飞思卡尔KL25Z开发板开发经验(799)
• OpenCV 将Mat数据转成Video格式视频(784)
• 用OpenCV的随机树算法(Random Forest Tree)进行手势检测(747)
• Android Bitmap加载透明背景图片(729)

• 评论排行

• OpenCV手势识别-手掌特征提取(4)
• Linux开源智能视频监控软件zoneminder的安装(1)
• 用OpenCV的随机树算法(Random Forest Tree)进行手势检测(1)
• OpenCV 随机森林(Random Forest)手势识别应用---样本选择问题(0)
• Android Bitmap加载透明背景图片(0)
• android 自定义POP window弹出窗口，用于信息提示(0)
• Linux Ubuntu环境下对SD卡分区(烧写uboot,kernel,及filesystem)(0)
• OpenCL嵌入式图像处理(0)
• OpenCV 将Mat数据转成Video格式视频(0)
• (一)ROS的Roscore命令(0)

• 推荐文章

• • * 云计算的那些事儿之计算虚拟化
  • * 微服务--分布式事务的实现方法及替代方案
  • * 你应该知道的 Android 数据库更新策略
  • * HDFS副本放置节点选择的优化
  • * CSDN日报20170416 ——《为什么程序员话少钱多死得早？》
  • * 凡人视角C++之string(上)

• 最新评论

• OpenCV手势识别-手掌特征提取

  VictorChi: 你的图片是晚上拍的吗？白天用红外线摄像头怎么拍出这样的图片

• OpenCV手势识别-手掌特征提取

  午夜小学徒丶磊: 怎么集成到XCode，文件缺少啊。

• OpenCV手势识别-手掌特征提取

  BeyondTheBuzzer: @songrui_Lai:同事在淘宝买的，具体型号不太清楚。普通的红外摄像头即可。

• 用OpenCV的随机树算法(Random Forest Tree)进行手势检测

  woxiangjiayou: 请问你的训练识别代码还有吗?

• OpenCV手势识别-手掌特征提取

  songrui_Lai: 请问工程用的是哪种红外摄像头？

公司简介 | 招贤纳士 | 广告服务 | 联系方式 | 版权声明 | 法律顾问 | 问题报告 | 合作伙伴 | 论坛反馈

网站客服 杂志客服 微博客服 [email protected] 400-600-2320 | 北京创新乐知信息技术有限公司 版权所有 | 江苏知之为计算机有限公司 | 江苏乐知网络技术有限公司

京 ICP 证 09002463 号 | Copyright © 1999-2016, CSDN.NET, All Rights Reserved 

学习总结自：http://learnopengl.com/#!Getting-started/Hello-Triangle 
http://learnopengl.com/#!Getting-started/Shaders 
继上篇文章中提到，OpenGL是为了在GPU上同时跑成千上万个程序，在GPU上跑的这些小程序，称为Shader。

准备

我们在运行GPU程序前，得准备几样东西：1）输入数据。2）数据缓冲区。3）Shader程序。4）GLSL（OpenGL Shade Language）主程序。 
以画一个三角形为例， 
1）输入数据包括：a. 三点顶点的坐标。b. 三个顶点的颜色。

  GLfloat vertices[] = {
        // 坐标        // 颜色
         0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  // 右下角
        -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  // 左下角
         0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f   // 顶点 
    };

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

2）数据缓存区包括：a. 数据怎么识别。哪一块是坐标数据？哪一块是颜色数据? b. 哪一块数据是第一个三角形的数据？哪一块数据是第二个三角形的数据？

 GLuint VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glBindVertexArray(VAO);// 首先绑定VAO结构。一个VAO对应一个形状对象，包含了一个形状的所有属性，包括颜色、坐标等等。用shader程序调用VAO这个结构，可以画出对应的图像来。

    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//在绑定VAO之后，绑定VBO结构。**这样VBO就属于之前被绑定VAO的一部分。**里面包含了预先定义好的数组vertices，vertices就是一个浮点数组，包含具体的坐标、颜色值。


    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);
    glEnableVertexAttribArray(0);// 坐标属性。让Vertex Shader将这部分数据作为坐标导入。

    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
    glEnableVertexAttribArray(1);// 颜色属性。让Vertex Shader将这部分数据作为坐标颜色值导入。

    glBindVertexArray(0); // Unbind VAO

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

3）Shader 程序。将导入GPU的数据，为对应的坐标点画上对应的颜色。

// Shaders
const GLchar* vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 position;\n"//location = 0，与之前绑定VAO步骤中的函数glEnableVertexAttribArray(0)对应，把坐标数据导入到 vec3 position 这个shader中的坐标变量。
    "layout (location = 1) in vec3 color;\n"//location = 1，与之前绑定VAO步骤中的函数glEnableVertexAttribArray(1)对应，把坐标数据导入到 vec3 color这个shader中的颜色变量。
    "out vec3 ourColor;\n"
    "void main()\n"
    "{\n"
    "gl_Position = vec4(position, 1.0);\n"
    "ourColor = color;\n"//将颜色值直接赋值给输出的变量ourColor，在Fragment Shader中也有一个同名的变量，所有最终像素的颜色就是此颜色值。
    "}\0";
const GLchar* fragmentShaderSource = "#version 330 core\n"
    "in vec3 ourColor;\n" //OpenGL Shader程序会直接将同名的变量联系到一起，这个ourColor就是vertex shader中的输出的ourColor
    "out vec4 color;\n"
    "void main()\n"
    "{\n"
    "color = vec4(ourColor, 1.0f);\n"
    "}\n\0";

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

4）GLSL 主程序

 GLuint shaderProgram = glCreateProgram(); //创建一个GLSL主程序
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);//将两个shader挂载到主程序上
    glLinkProgram(shaderProgram);//链接shader程序。编译shader的步骤在此之前。接下来会详细介绍

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

步骤

为何要将1）输入数据。2）数据缓冲区。3）Shader程序。4）GLSL（OpenGL Shade Language）主程序。这个几个模块分开介绍呢？ 
因为这几块相互独立，这是OpenGL比较明显的特点。详细说，就是GLSL主程序可以链接任意一个编译好的shader程序，编译好的shader程序可以装载不同的VAO(Vertext Array Object，它是VBO的老大，Shader 调用的时候是直接调VAO，VBO包含了数据，VAO包含了VBO以及如何让Shader识别这些VBO数据的一些属性)，VAO又可以用不同的方式装载不同的数据。 
以这段代码为例，只粘贴了比较关键的代码，完整源码请参考： 
http://learnopengl.com/code_viewer.php?code=getting-started/shaders-interpolated 
程序的结果就是对三角形的三个顶点画上红、绿、蓝三种颜色，三角形中间区域的颜色OpenGL会自动插值出来，这是OpenGL的神奇之处（我也还没懂原理）。 

//--------------这不是完整源码，着重介绍重要的几个步骤------------------//

//---------编写shader 程序----------//
const GLchar* vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 position;\n"
    "layout (location = 1) in vec3 color;\n"
    "out vec3 ourColor;\n"
    "void main()\n"
    "{\n"
    "gl_Position = vec4(position, 1.0);\n"
    "ourColor = color;\n"
    "}\0"; 
const GLchar* fragmentShaderSource = "#version 330 core\n"
    "in vec3 ourColor;\n"
    "out vec4 color;\n"
    "void main()\n"
    "{\n"
    "color = vec4(ourColor, 1.0f);\n"
    "}\n\0";//简单易懂的Shader源码

//---------编译和链接shader程序----------//
GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader); //因为shader程序是在GPU上跑，所以不是和CPP文件一起编译。Shader程序如果有BUG，在编译CPP的时候不会出错，而是在运行CPP工程的时候报错。

 GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);

 GLuint shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram); //将shader程序与GLSL主程序链接到一起

//---------编写VAO，VBO以及具体导入的数据----------//
 GLfloat vertices[] = {
        // Positions         // Colors
         0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  // Bottom Right
        -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  // Bottom Left
         0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f   // Top 
    };//三个顶点的坐标和颜色值

    GLuint VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);//可以生成多个VAO和多个VBO。一个只能对应一个VBO。画多个图形，就得用不同的VAO包含不同的VBO
    glBindVertexArray(VAO);//绑定VAO之后，接下来的所有操作都被记录到此VAO当中，直到这个VAO被解除绑定为止。VAO就是画一个图形所需要的所有属性。绑定完这个VAO之后，可以接着绑定其它的VAO。

    glBindBuffer(GL_ARRAY_BUFFER, VBO);//绑定VBO到当前VAO中，注意GL_ARRAY_BUFFER这个类型只能绑定一个VBO
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//绑定数据到VBO对象当中
    // Position attribute
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);//坐标位置在vertices数组中起始点为0，步长为6个FLOAT数据的长度
    glEnableVertexAttribArray(0);//用vertex shader中的Location0来导入数据，Location0就是坐标数据
    // Color attribute
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));//坐标位置在vertices数组中起始点为3，步长为6个FLOAT数据的长度
    glEnableVertexAttribArray(1);//用vertex shader中的Location1来导入数据，Location0就是颜色标数据

    glBindVertexArray(0); // 解除绑定VAO，对这个VAO的所有操作到此为止，之前的操作被全部保存
 // 循环画图
    while (!glfwWindowShouldClose(window))
    {
        // 检测是否有键盘触发事件
        glfwPollEvents();

        // Render
        // Clear the colorbuffer
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);//设置背景颜色
        glClear(GL_COLOR_BUFFER_BIT);

        // Draw the triangle
        glUseProgram(shaderProgram);//导入一个GLSL主程序
        glBindVertexArray(VAO);//导入其中一个VAO,一个主程序可以链接多个VAO，在画完这个VAO之后，可以接着画另外一个VAO代表的图形。这是OpenGL比较明显的特征
        glDrawArrays(GL_TRIANGLES, 0, 3);//画三角形
        glBindVertexArray(0); //glBindVertexArray(）将VAO属性复位，也就是不绑定任意一个VAO

        // Swap the screen buffers
        glfwSwapBuffers(window);
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77