WebGL简易教程(三)：绘制一个三角形(缓冲区对象)
2019-09-04 16:57
目录
1. 概述
2. 示例：绘制三角形
1) HelloTriangle.html
2) HelloTriangle.js
3) 缓冲区对象
(1) 创建缓冲区对象(gl.createBuffer())
(2) 绑定缓冲区对象(gl.bindBuffer())
(3) 将数据写入缓冲区对象(gl.bufferData())
(4) 将缓冲区对象分配给attribute变量(gl.vertexAttribPointer())
(5) 开启attribute变量(gl.enableVertexAttribArray())
4) 基本图形绘制
3. 结果
4. 参考
1. 概述
在上一篇教程《WebGL简易教程(二)：向着色器传输数据》中，通过向着色器(shader)传输数据，改变了绘制点的大小和颜色。之前的例子只能绘制一个点，如果需要绘制如三角形、矩形或者立方体等稍微复杂的图形，需要怎么做呢？这个时候就需要一种很方便的机制——缓冲区对象（buffer object）。
我们知道，OpenGL/WebGL进行图形工作，需要访问显存的数据。而像C或者JS这样的编程语言去申请数据，总是保存在内存中——也就是说，需要把内存中的数据传输到显存，OpenGL/WebGL才能进行绘制。数据的申请、传输、释放是一种IO操作，对IO操作而言，分段的、多次的读写操作的效率总是比不上一次总体的读写操作。缓冲区对象正是用来解决这两个问题的：我们可以一次性向缓冲区对象填充大量的顶点数据，供顶点着色器使用。
这里就通过绘制一个三角形的实例，来讲解缓冲区对象的使用。一般来说，任何三维模型的基本单位就是三角形，会绘制三角形就能绘制任意复杂的图形。
2. 示例：绘制三角形
同之前的例子一样，绘制三角形的实例包含HTML和JavaScript两个部分。
1) HelloTriangle.html
Hello Triangle
这段HTML代码与之前的例子相比几乎没有改动，引入了需要webgl组件和主要的绘制代码HelloTriangle.js。没有特别改动的话，以后的html代码就不再介绍。
2) HelloTriangle.js
// 顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + // attribute variable
'void main() {\n' +
' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
'}\n';
// 片元着色器程序
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' + // uniform変数
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
function main() {
// 获取