美文网首页
第一节(后半堂):我们不画三角形(2)

第一节(后半堂):我们不画三角形(2)

作者: wo存在 | 来源:发表于2017-11-29 16:20 被阅读19次

上面说到需要编译两个着色器。

我们将编译着色器的方法提取出来:

第一步:

前面几行代码我就不解释了。

第四行:我们使用glCreateShader来创建一个代表shader 的OpenGL对象。这时必须告诉OpenGL,你想创建 fragment shader还是vertex shader。这里就是shaderType的作用。返回的是这个着色器的唯一标识ID。

第七行:我们使用glShaderSource来获取这个着色器的源码。第一个参数:这个着色器的唯一标识;第二个参数:几个着色器,第三个参数:这个着色器的源码地址,第四个参数:长度地址

第八行:调用glCompileShader在运行时编译这个着色器。

这个方法封装完成之后,下面我们开始编译这两个着色器.

1 把它们俩关联起来

2 告诉OpenGL来调用这个程序

第二步:

创建两个变量GLuint _positonSlot;

                        GLint _colorSlot;  用来获取两个着色器的指针

前两行代码老规矩不解释了。

第三行:调用了glCreateProgram得到编译器的唯一标识。

第四行,第五行:将两个着色器连接起来组成一个整体的program并连接到这个编译器上。

第六行:调用glUseProgram让OpenGL执行我的program。

第七、八行:调用glGetAttribLocation来获取这两个着色器的指针。至于后面的“position”和“SourceColor”,可以看下我们的SimpleVertex.glsl中,头部定义了两个变量:attribute vec4 Position和attribute vec4 SourceColor,我们这里的目的就是获取这两个变量的值,然后赋值给_positonSlot和_colorSlot变量。

第九行:调用glEnableVertexAttribArray来启用着色器数据。

第三步:

在你用OpenGL渲染图形的时候,时刻要记住一点,你只能直接渲染三角形,而不是其它诸如矩形的图形。所以,一个菱形需要分开成两个三角形来渲染

我们已经完成了着色器的编译,接下来我们画出我们要画的菱形。

先来分析下这个菱形的结果:

这四个点分别是V1(0.5,0,0),V2(-0.5,0.5,0),V3(-0.5,0,0),V0(0.5,-0.5,0)

分析可以知道,我们分隔的两个三角形是顶点(V1,V2,V3)和(V3,V0,V1)

第四步:我们创建一个结构体来存放这些点和这些顶点的颜色

C语言中的结构体,存放位置和颜色 上面分析的四个点的坐标位置和顶点颜色

下面创建三角形的两个顶点数组

就是我们刚才分析的(V1,V2,V3)和(V3,V0,V1)

第五步:创建VBO

传数据到OpenGL的话,最好的方式就是用Vertex Buffer对象。

基本上,它们就是用于缓存顶点数据的OpenGL对象。通过调用一些function来把数据发送到OpenGL-land。(是指OpenGL的画面?)

这里有两种顶点缓存类型– 一种是用于跟踪每个顶点信息的(正如我们的Vertices array),另一种是用于跟踪组成每个三角形的索引信息(我们的Indices array)。

这里面很多东西和第一节的东西一样,这里的说明就标记到代码里面了

第六步:我们重写第一节的render方法。

第七步:下面我们在重写的initFrame方法里面依次调用

运行看看结果吧。

相关文章

  • 第一节(后半堂):我们不画三角形(2)

    上面说到需要编译两个着色器。 我们将编译着色器的方法提取出来: 第一步: 前面几行代码我就不解释了。 第四行:我们...

  • 第一节:我们不画三角形!

    东西很多,很多东西我就不费话了,时间比金钱重要! 作为一个IOS程序员,如何学习OpenGL? 这一系列的东西,都...

  • CSS画三角形、圆形、椭圆形总结

    CSS画正方形长方形很简单,本文就不说了。 一、三角形 1、CSS画等腰三角形 2、画直角三角形: 二、画圆形 注...

  • 如何画一个三角形

    画三角形和其他图形同理,这里主要介绍下画三角形。 1️⃣.使用图形上下文:CGContextRef2️⃣.使用UI...

  • 今日缠绕画:蚀刻

    虽然线条画的不咋好,但是整体还是很满意。 一画三角形 二把三角形边延长相接 三画中间分界线 四画阴影 结束! 今天...

  • CSS 怎么画三角形

    画三角形的原理 我们画三角形是通过 border 这个样式来画的。平常的 border 在你们眼中可能是这样的 当...

  • 【胡小豆日记14】:品德课上的笑话

    下午,品德课上发生了一件搞笑的事情,等我慢慢道来。 下午第一节课是品德课,我很期待这堂课的到来,因为这堂课的后半节...

  • 素描课

    今天在素描课上我们学了三角形和圆柱的穿插。 三角形和圆柱的穿插要先画高度,画完高度再量宽,接着画三角...

  • 三角形的认识

    一、谜语引课 二、探究新知 1.画三角形 2.三角形特征 3.总结三角形的概念 4.表示三角形 5.三角形的高 6...

  • 【转】用CSS画各种形状(一)

    本篇是以下两篇文章的转载和总结 纯CSS画基本形状用CSS画三角形,普通版,文艺小阴影版~ 1、画方形 2、画正圆...

网友评论

      本文标题:第一节(后半堂):我们不画三角形(2)

      本文链接:https://www.haomeiwen.com/subject/lzaubxtx.html