上一篇的补充,通过绘制三角形来完成矩形的绘制。此外,完成章节后练习。

绘制矩形

一个矩形由两个三角形组成,因此绘制矩形需要绘制两个三角形,一共6个顶点,其中2个顶点重复画了两次。

为了减小开销,仅储存矩形的4个顶点来完成绘制,需要使用Element Buffer Object按照绘制顺序存储顶点索引。

举例说明:矩形四个顶点(a, b, c, d),EBO中存储的索引为(0, 1, 2, 0, 2, 3),表示矩形由三角形abc和acd组成。

创建和配置EBO的方法与VBO类似:

初始化顶点和索引数组

  1. float vertices[] = {0.5f, 0.5f, 0.0f,
  2. 0.5f, -0.5f, 0.0f,
  3. -0.5f, 0.5f, 0.0f,
  4. -0.5f, -0.5f, 0.0f};
  5. unsigned int indices[] = {0, 1, 2,
  6. 1, 2, 3};

创建EBO

  1. unsigned int EBO;
  2. glGenBuffers(1, &EBO);

配置EBO

同样可以通过绑定VAO来保存EBO的配置。



但要注意,和VBO不同的是,在解绑VAO之前,不可以解绑EBO。

  1. glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
  2. glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

渲染循环

在使用EBO时,调用glDrawElements函数代替glDrawArrays函数。

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

练习

1. Try to draw 2 triangles next to each other using glDrawArrays by adding more vertices.

  1. float vertices[] = {0.5f, 0.5f, 0.0f,
  2. 0.5f, -0.5f, 0.0f,
  3. -0.5f, 0.5f, 0.0f,
  4. 0.5f, 0.5f, 0.0f,
  5. -0.5f, 0.5f, 0.0f,
  6. 0.0f, 1.0f, 0.0f};
  1. while(!glfwWindowShouldClose(window)){
  2. processInput(window);
  3. glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
  4. glClear(GL_COLOR_BUFFER_BIT);
  5. glUseProgram(shaderProgram);
  6. glBindVertexArray(VAO);
  7. glDrawArrays(GL_TRIANGLES, 0, 6);
  8. glfwSwapBuffers(window);
  9. glfwPollEvents();
  10. }

2. Create the same 2 triangles using two different VAOs and VBOs for their data.

  1. float vertices1[] = {0.5f, 0.5f, 0.0f,
  2. 0.5f, -0.5f, 0.0f,
  3. -0.5f, 0.5f, 0.0f};
  4. float vertices2[] = {0.5f, 0.5f, 0.0f,
  5. -0.5f, 0.5f, 0.0f,
  6. 0.0f, 1.0f, 0.0f};
  1. unsigned int VBO[2];
  2. unsigned int VAO[2];
  1. glGenVertexArrays(2, VAO);
  2. glGenBuffers(2, VBO);
  3. glBindVertexArray(VAO[0]);
  4. glBindBuffer(GL_ARRAY_BUFFER, VBO[0]);
  5. glBufferData(GL_ARRAY_BUFFER, sizeof(vertices1), vertices1, GL_STATIC_DRAW);
  6. glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3*sizeof(float), (void*)0);
  7. glEnableVertexAttribArray(0);
  8. glBindBuffer(GL_ARRAY_BUFFER, 0);
  9. glBindVertexArray(VAO[1]);
  10. glBindBuffer(GL_ARRAY_BUFFER, VBO[1]);
  11. glBufferData(GL_ARRAY_BUFFER, sizeof(vertices2), vertices2, GL_STATIC_DRAW);
  12. glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3*sizeof(float), (void*)0);
  13. glEnableVertexAttribArray(0);
  14. glBindBuffer(GL_ARRAY_BUFFER, 0);
  15. glBindVertexArray(0);
  1. while(!glfwWindowShouldClose(window)){
  2. processInput(window);
  3. glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
  4. glClear(GL_COLOR_BUFFER_BIT);
  5. glUseProgram(shaderProgram);
  6. glBindVertexArray(VAO[0]);
  7. glDrawArrays(GL_TRIANGLES, 0, 3);
  8. glBindVertexArray(VAO[1]);
  9. glDrawArrays(GL_TRIANGLES, 0, 3);
  10. glfwSwapBuffers(window);
  11. glfwPollEvents();
  12. }

*3.Create two shader programs where the second program uses a different fragment shader that outputs the color yellow; draw both triangles again where one outputs the color yellow. *

  1. int fragmentShader[2];
  2. const char *fragmentShaderSource1 = "#version 330 core\n"
  3. "out vec4 fragColor;"
  4. "void main()"
  5. "{fragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);}";
  6. const char *fragmentShaderSource2 = "#version 330 core\n"
  7. "out vec4 fragColor;"
  8. "void main()"
  9. "{fragColor = vec4(1.0f, 1.0f, 0.0f, 1.0f);}";
  1. fragmentShader[0] = glCreateShader(GL_FRAGMENT_SHADER);
  2. glShaderSource(fragmentShader[0], 1, &fragmentShaderSource1, NULL);
  3. glCompileShader(fragmentShader[0]);
  4. fragmentShader[1] = glCreateShader(GL_FRAGMENT_SHADER);
  5. glShaderSource(fragmentShader[1], 1, &fragmentShaderSource2, NULL);
  6. glCompileShader(fragmentShader[1]);
  7. shaderProgram[0] = glCreateProgram();
  8. glAttachShader(shaderProgram[0], vertexShader);
  9. glAttachShader(shaderProgram[0], fragmentShader[0]);
  10. glLinkProgram(shaderProgram[0]);
  11. shaderProgram[1] = glCreateProgram();
  12. glAttachShader(shaderProgram[1], vertexShader);
  13. glAttachShader(shaderProgram[1], fragmentShader[1]);
  14. glLinkProgram(shaderProgram[1]);
  15. glDeleteShader(vertexShader);
  16. glDeleteShader(fragmentShader[0]);
  17. glDeleteShader(fragmentShader[1]);
  1. while(!glfwWindowShouldClose(window)){
  2. processInput(window);
  3. glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
  4. glClear(GL_COLOR_BUFFER_BIT);
  5. glUseProgram(shaderProgram[0]);
  6. glBindVertexArray(VAO[0]);
  7. glDrawArrays(GL_TRIANGLES, 0, 3);
  8. glUseProgram(shaderProgram[1]);
  9. glBindVertexArray(VAO[1]);
  10. glDrawArrays(GL_TRIANGLES, 0, 3);
  11. glfwSwapBuffers(window);
  12. glfwPollEvents();
  13. }

OpenGL学习(2)——绘制三角形(补)的更多相关文章

  1. Android OpenGL 入门示例----绘制三角形和正方形

    Android上对OpenGl的支持是无缝的,所以才有众多3D效果如此逼真的游戏,在Camera的一些流程中也有用到GLSurfaceView的情况.本文记录OpenGL在Android上的入门级示例 ...

  2. Linux OpenGL 实践篇-3 绘制三角形

    本次实践是绘制两个三角形,重点理解顶点数组对象和OpenGL缓存的使用. 顶点数组对象 顶点数组对象负责管理一组顶点属性,顶点属性包括位置.法线.纹理坐标等. OpenGL缓存 OpenGL缓存实质上 ...

  3. iOS OpenGL ES简单绘制三角形

    OpenGL 是用于2D/3D图形编程的一套基于C语言的统一接口. windows,Linux,Unix上均可兼容. OpenGL ES 是在OpenGL嵌入式设备上的版本, android/iOS ...

  4. OpenGL学习(2)——绘制三角形

    在创建窗口的基础上,添加代码实现三角形的绘制. 声明和定义变量 在屏幕上绘制一个三角形需要的变量有: 三角形的三个顶点坐标: Vertex Buffer Object 将顶点数据存储在GPU的内存中: ...

  5. OpenGL学习进程(11)第八课:颜色绘制的详解

        本节是OpenGL学习的第八个课时,下面将详细介绍OpenGL的颜色模式,颜色混合以及抗锯齿.     (1)颜色模式: OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. R ...

  6. OpenGL学习进程(10)第七课:四边形绘制与动画基础

        本节是OpenGL学习的第七个课时,下面以四边形为例介绍绘制OpenGL动画的相关知识:     (1)绘制几种不同的四边形: 1)四边形(GL_QUADS) OpenGL的GL_QUADS图 ...

  7. OpenGL学习进程(4)第二课:绘制图形

    本节是OpenGL学习的第二个课时,下面介绍如何用点和线来绘制图形:     (1)用点的坐标来绘制矩形: #include <GL/glut.h> void display(void) ...

  8. 1.opengl绘制三角形

    顶点数组对象:Vertex Array Object,VAO,用于存储顶点状态配置信息,每当界面刷新时,则通过VAO进行绘制. 顶点缓冲对象:Vertex Buffer Object,VBO,通过VB ...

  9. Android OpenGL ES(十)绘制三角形Triangle .

    三角形为OpenGL ES支持的面,同样创建一个DrawTriangle Activity,定义6个顶点使用三种不同模式来绘制三角形: float vertexArray[] = { -0.8f, - ...

随机推荐

  1. fedora 开启 apache 并 开启目录浏览模式

    在内网中 暂时需要一台 文件 服务器,所以准备安装一台 http服务器并开启目录访问权限.这次使用 apache 在 fedora 28 机器上: 因为 fedora 28 已经包含 httpd 软件 ...

  2. jQuery插件实例四:手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  3. 阿里云 IOT 对接设备开发 C# 开发设备对接阿里云 IOT平台

    一,创建阿里云 IOT 产品.设备 目前阿里云每月赠送 100 万条流量,可以免费使用基础版.高级版,开通后即可免费使用. 阿里云 IOT 平台地址 https://iot.console.aliyu ...

  4. java使用elasticsearch进行模糊查询-已在项目中实际应用

    java使用elasticsearch进行模糊查询 使用环境上篇文章本人已书写过,需要maven坐标,ES连接工具类的请看上一篇文章,以下是内容是笔者在真实项目中运用总结而产生,并写的是主要方法和思路 ...

  5. 【Ansible 文档】【译文】网络支持

    Networking Support 网络支持 Working with Networking Devices 使用网络设备 自从Ansible 2.1开始,你现在可以使用成熟模型 - 编写 play ...

  6. ffmpeg常用参数一览表

    基本选项: -formats 输出所有可用格式 -f fmt 指定格式(音频或视频格式) -i filename 指定输入文件名,在linux下当然也能指定:0.0(屏幕录制)或摄像头 -y 覆盖已有 ...

  7. MP实战系列(十七)之乐观锁插件

    声明,目前只是仅仅针对3.0以下版本,2.0以上版本. 意图: 当要更新一条记录的时候,希望这条记录没有被别人更新 乐观锁实现方式: 取出记录时,获取当前version 更新时,带上这个version ...

  8. [转]numpy中的np.max 与 np.maximum区别

    转自:https://blog.csdn.net/lanchunhui/article/details/52700895

  9. pyspider爬取数据存入mysql--2.测试数据库能否连通

    做一个简单的测试,看数据能否存入mysql 1 #!/usr/bin/env python 2 # -*- encoding: utf-8 -*- 3 # Created on 2017-10-26 ...

  10. 【hdu4405】AeroplaneChess

    题目大意:问从0到n所花费时间平均时间.每次有投骰子,投到几就走几步.原题还有坐飞机 #include<iostream> #include<cmath> #include&l ...