哪家小吃培训网站做的最好,东莞专业网站设计制作公司,大连建设安全网站,wordpress中visitor目录
使用缓冲区对象
使用缓冲区对象向顶点着色器传入多个顶点的数据#xff0c;需要遵循以下五个步骤。
创建缓冲区对象#xff08;gl.createBuffer#xff08;#xff09;#xff09;
gl.createBuffer#xff08;#xff09;的函数规范
gl.deleteBuffer #…目录
使用缓冲区对象
使用缓冲区对象向顶点着色器传入多个顶点的数据需要遵循以下五个步骤。
创建缓冲区对象gl.createBuffer
gl.createBuffer的函数规范
gl.deleteBuffer
绑定缓冲区gl.bindBuffer
gl.bindBuffer的函数规范
向缓冲区对象中写入数据gl.bufferData
gl.bufferData的规范
类型化数组
将缓冲区对象分配给attribute变量gl.vertexAttribPointer gl.vertexAttribPointer的规范如下
开启attribute变量gl.enableVertexAttribArray
编辑 gl.disableVertexAttribArray
gl.drawArrays的第2个和第3个参数 WebGL提供了一种很方便的机制即缓冲区对象buffer object它可以一次性地向着色器传入多个顶点的数据。缓冲区对象是WebGL系统中的一块内存区域我们可以一次性地向缓冲区对象中填充大量的顶点数据然后将这些数据保存在其中供顶点着色器使用。
在进一步解释缓冲区对象前让我们先浏览一下下面的示例程序 var VSHADER_SOURCE attribute vec4 a_Position;\n void main() {\n gl_Position a_Position;\n gl_PointSize 10.0;\n }\n;var FSHADER_SOURCE void main() {\n gl_FragColor vec4(1.0, 0.0, 0.0, 1.0);\n }\n;function main() {// Retrieve canvas elementvar canvas document.getElementById(webgl);// Get the rendering context for WebGLvar gl getWebGLContext(canvas);if (!gl) {console.log(Failed to get the rendering context for WebGL);return;}// Initialize shadersif (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log(Failed to intialize shaders.);return;}// Write the positions of vertices to a vertex shadervar n initVertexBuffers(gl);if (n 0) {console.log(Failed to set the positions of the vertices);return;}// Specify the color for clearing canvasgl.clearColor(0, 0, 0, 1);// Clear canvasgl.clear(gl.COLOR_BUFFER_BIT);// 一次绘制了三个顶点顶点着色器执行了3次通过存储在缓冲区中的顶点坐标数据被依次传给attribute变量注意每次执行顶点着色器a_Position 的z和w分量值都会自动被设为0.0或1.0因为a_Position需要4个分量vec4而你只提供了两个gl.drawArrays(gl.POINTS, 0, n);
}function initVertexBuffers(gl) {var vertices new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);var n 3; // The number of vertices// Create a buffer objectvar vertexBuffer gl.createBuffer() if (!vertexBuffer) {console.log(Failed to create the buffer object);return -1;}// Bind the buffer object to targetgl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将第二个参数 vertices 中的数据写入了绑定到第一个参数 gl.ARRAY_BUFFER 上的缓冲区对象 p73gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);var a_Position gl.getAttribLocation(gl.program, a_Position);if (a_Position 0) {console.log(Failed to get the storage location of a_Position);return -1;}// 将绑定到 gl.ARRAY_BUFFER 的缓冲区对象分配给由 第一个参数 a_position 指定的 attribute变量gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);// 激活开启 attribute 变量使缓冲区对 attitude 变量的分配生效为了使顶点着色器能够访问缓冲区内的数据gl.enableVertexAttribArray(a_Position);return n;
}函数initVertexBuffers的任务是创建顶点缓冲区对象并将多个顶点的数据保存在缓冲区中然后将缓冲区传给顶点着色器。 函数的返回值是待绘制顶点的数量保存在变量n中。注意如果函数内发生错误返回的是负值。
示例程序仅调用了一次gl.drawArrays函数就完成了绘图操作这与 WebGL 变量uniform、gl.getUniformLocation、gl.uniform4f及其同族函数相关_山楂树の的博客-CSDN博客 不同。调用gl.drawArrays时传入的第3个参数是n而不是1上面链接传入了1。 因为我们在initvertexBuffer函数中利用缓冲区对象向顶点着色器传输了多个3个顶点的数据所以还需要通过第3个参数告诉gl.drawArrays函数需要绘制多少个顶点。WebGL系统并不知道缓冲区中有多少个顶点的数据即使它知道也不能确定是否要全部画出所以我们应该显式地告诉它要绘制多少个顶点。
使用缓冲区对象
前面说过缓冲区对象是WebGL系统中的一块存储区你可以在缓冲区对象中保存想要绘制的所有顶点的数据如下图所示。先创建一个缓冲区然后向其中写入顶点数据你就能一次性地向顶点着色器中传入多个顶点的attribute变量的数据。 在示例程序中向缓冲区对象写入的数据顶点坐标是一种特殊的JavaScript数组Float32Array如下所示。 使用缓冲区对象向顶点着色器传入多个顶点的数据需要遵循以下五个步骤。 1.创建缓冲区对象gl.createBuffer。 2.绑定缓冲区对象gl.bindBuffer。 3.将数据写入缓冲区对象gl.bufferData。 4.将缓冲区对象分配给一个attribute变量gl.vertexAttribPointer。 5.开启attribute变量gl.enableVertexAttribArray。 解析了上述五个步骤 创建缓冲区对象gl.createBuffer
显然在使用缓冲区对象之前你必须创建它。这是第1步 使用WebGL时你需要调用gl.createBuffer方法来创建缓冲区对象。下图示意了该方法执行前后WebGL系统的中间状态上面一张图是执行前的状态下面一张图是执行后的状态。执行该方法的结果就是WebGL系统中多了一个新创建出来的缓冲区对象。 gl.createBuffer的函数规范 gl.deleteBuffer
相应地gl.deleteBufferbuffer函数可用来删除被gl.createBuffer创建出来的缓冲区对象。 绑定缓冲区gl.bindBuffer
创建缓冲区之后的第2个步骤就是将缓冲区对象绑定到WebGL系统中已经存在的“目标”target上。这个“目标”表示缓冲区对象的用途在这里就是向顶点着色器提供传给attribute变量的数据这样WebGL才能够正确处理其中的内容。 gl.bindBuffer的函数规范 在示例程序中我们将缓冲区对象绑定到了gl.ARRAY_BUFFER目标上缓冲区对象中存储着的关于顶点的数据顶点的位置坐标。在执行完毕后WebGL系统内部状态发生了改变如下图所示 接下来我们就可以向缓冲区对象中写入数据了。
向缓冲区对象中写入数据gl.bufferData
第3步是开辟空间并向缓冲区中写入数据。我们使用gl.bufferData方法来完成这一步 该方法的效果是将第2个参数vertices中的数据写入了绑定到第1个参数gl.ARRAY_BUFFER上的缓冲区对象。我们不能直接向缓冲区写入数据而只能向“目标”写入数据所以要向缓冲区写数据必须先绑定。该方法执行之后WebGL系统的内部状态如下图所示。 从上图中可以看到定义在JavaScript程序中的数据被写入了绑定在gl.ARRAY_BUFFER上的缓冲区对象。下面是对gl.bufferData的规范。
gl.bufferData的规范 现在我们来看看gl.bufferData方法向缓冲区中传入了什么数据。该方法使用了一个特殊的数组vertices将数据传给顶点着色器。我们使用new运算符并以第一个顶点的x坐标和y坐标第二个顶点的x坐标和y坐标等等的形式创建这个数组 如你所见我们使用了Float32Array对象而不是JavaScript中更常见的Array对象。这是因为JavaScript中通用的数组Array是一种通用的类型既可以在里面存储数字也可以存储字符串而并没有对“大量元素都是同一种类型”这种情况比如vertices进行优化。为了解决这个问题WebGL引入了类型化数组Float32Array就是其中之一。
类型化数组
为了绘制三维图形WebGL通常需要同时处理大量相同类型的数据例如顶点的坐标和颜色数据。为了优化性能WebGL为每种基本数据类型引入了一种特殊的数组类型化数组。浏览器事先知道数组中的数据类型所以处理起来也更加有效率。
例子中的Float32Array就是一种类型化数组通常用来存储顶点的坐标或颜色数据。WebGL中的很多操作都要用到类型化数组比如gl.bufferData中的第2个参数
与JavaScript中的Array数组相似类型化数组也有一系列方法和属性包括一个常量属性如下所示。注意与普通的Array数组不同类型化数组不支持push和pop方法。 和普通的数组一样类型化数组可以通过new运算符调用构造函数并传入数据而被创造出来。比如为了创建Float32Array类型的顶点数据你可以向构造函数中传入普通数组0.00.5-0.5-0.50.5-0.5这个数组表示一些顶点的数据。注意创建类型化数组的唯一方法就是使用new运算符不能使用运算符那样创建的就是普通数组。 此外你也可以通过指定数组元素的个数来创建一个空的类型化数组例如 到目前为止你就完成了建立和使用缓冲区的前三个步骤即在WebGL系统中创建缓冲区绑定缓冲区对象到目标向缓冲区对象中写入数据。我们来看看在接下来的两步中WebGL是如何真正使用缓冲区来进行绘图的。
将缓冲区对象分配给attribute变量gl.vertexAttribPointer
你可以使用gl.vertexAttrib1234f系列函数为attribute变量分配值。但是这些方法一次只能向attribute变量分配传输一个值。而现在你需要将整个数组中的所有值——这里是顶点数据——一次性地分配给一个attribute变量。
gl.vertexAttribPointer方法解决了这个问题它可以将整个缓冲区对象实际上是缓冲区对象的引用或指针分配给attribute变量。示例程序将缓冲区对象分配给attribute变量a_Position。 gl.vertexAttribPointer的规范如下 执行完第4步后我们就将整个缓冲区对象分配给了attribute变量为WebGL绘图进行的准备工作即向location处的attribute变量传入缓冲区就差最后一步了进行最后的“开启”使这次分配真正生效如图所示 第5步也是最后一步就是开启激活attribute变量使缓冲区对attribute变量的分配生效。
开启attribute变量gl.enableVertexAttribArray
为了使顶点着色器能够访问缓冲区内的数据我们需要使用gl.enableVertex AttribArray方法来开启attribute变量。 注意虽然函数的名称似乎表示该函数是用来处理“顶点数组”的但实际上它处理的对象是缓冲区。这是由于历史原因从OpenGL中继承造成的。 当你执行gl.enableVertexAttribArray并传入一个已经分配好缓冲区的attribue变量后我们就开启了该变量也就是说缓冲区对象和attribute变量之间的连接就真正建立起来了如下图所示。 gl.disableVertexAttribArray
同样你可以使用gl.disableVertexAttribArray来关闭分配。 终于万事俱备了现在你只需要让顶点着色器运行起来它会自动将缓冲区中的顶点画出来。之前你使用gl.drawArrays方法绘制了一个点现在你要画多个点所用的仍然是gl.drawArrays方法但是用的是方法中的第2个和第3个参数。
注意开启attribute变量后你就不能再用gl.vertexAttrib1234f向它传数据了除非你显式地关闭该attribute变量。实际上你无法也不应该同时使用这两个函数。
gl.drawArrays的第2个和第3个参数
在对gl.drawArrays作进一步详细说明之前我们再看一下这个方法的规范。下表是规范的参数部分。 这个示例程序如下调用这个方法 WebGL 变量uniform、gl.getUniformLocation、gl.uniform4f及其同族函数相关_山楂树の的博客-CSDN博客此章由于我们仍然在绘制单个的点第1个参数mode仍然是gl.POINTS设置第2个参数为0表示从缓冲区中的第1个坐标开始画起设置第3个参数为3表示我们准备绘制3个点。
当程序运行到该代码时实际上顶点着色器执行了count3次我们通过存储在缓冲区中的顶点坐标数据被依次传给attribute变量如下图所示
注意每次执行顶点着色器a_Position的z和w分量值都会自动被设为0.0或1.0因为a_Position需要4个分量vec4而你只提供了两个。
gl.vertexAttribPointer的第2个参数size被设为2。之前说过这个参数表示缓冲区中每个顶点有几个分量值在缓冲区中你只提供x坐标和y坐标所以你将它设为2。 在绘出所有点后颜色缓冲区中的内容3个红点如图3.2所示就会自动显示在浏览器上其过程如图底部所示。
