[WebGL入门]十二，模型数据和顶点属性

Posted 2020-09-27 mthoutai

注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中假设有我的额外说明，我会加上［lufy：］。另外。鄙人webgl研究还不够深入，一些专业词语。假设翻译有误。欢迎大家指正。

顶点属性的意思

上次的文章中，介绍了一下从着色器的生成，编译，到程序对象的生成和着色器的连接。这次，简单的说一下模型数据的定义和顶点属性的处理。

另外，介绍一下依据模型数据生成VBO的方法。
VBO的使用要比生成难理解一些。可是不要操心，后面会慢慢说明。
接下来看一下顶点属性。
顶点属性，说的简单点，就是顶点包括的各种元素。WebGL中。顶点至少要包括的元素是位置情报。这个之前已经说过非常多遍了。
顶点是三维空间中的随意一个点，所以一定要有位置情报，假设没有位置情报。则无法在三维空间中定义这个点，由于每一个点都不一样，所以位置情报是必须的。lufy：感觉好罗嗦啊，作者是为了强调吧。可是真的好罗嗦啊，好罗嗦啊，啰嗦啊，嗦啊，啊.....
可是，顶点里还有可能包括其它属性，举个样例来说的话，比方顶点的颜色等等。

依据顶点的颜色属性，来对多边形进行着色，或者透明等各种各样的处理。
另外的，还有顶点的法线，纹理坐标等相关的情报，这些都能够在顶点属性中自由的定义。DirectX中依据所谓的顶点格式来实现这些，可是在WebGL中顶点的各种属性都能够定义在顶点属性中。

顶点属性和VBO

既然顶点属性是能够自由定义的，那么详细应该怎样来实现呢？
看过曾经的文章的话，应该知道顶点属性的个数和生成VBO的个数是一致的。假设顶点中有三个属性，那么就须要三个VBO。由于顶点属性必须通过VBO来传给顶点着色器。

VBO也叫做顶点缓存，和它的名字一样，就是将顶点相关的情报缓存起来。

顶点属性和VBO一对一进行分配，然后传给顶点着色器。
为了生成VBO，首先准备好和顶点个数相对应的矩阵。这里用的就是普通的javascript数组，当然Array对象也能够。可是不能够使用关联数组。要使用一维数组。

举个样例，由三个顶点定义多边形的时候，写成以下这样。

>保存模型数据的数组的样例

var vertex_position = [
    // X,   Y,   Z
     0.0, 1.0, 0.0,
     1.0, 0.0, 0.0,
    -1.0, 0.0, 0.0
];

为了让大家看的更easy些，中间加了换行，能够看到这是一个一维数组。包括有9个元素，三个顶点都分别包括了X，Y。Z的坐标。顶点数x要素的数，就是3x3=9，所以数组中元素的个数是9。

VBO的生成

用矩阵准备好顶点数据之后，就能够使用这个矩阵来生成VBO了，生成VBO的时候使用WebGL的createBuffer函数，这个函数就是用来生成缓存的。可是这个函数并非用来直接生成VBO的，它仅仅是生成了一个缓存对象，依据它里面保存的内容不同。用途也是不用的。
要操作缓存，首先必须跟WebGL进行绑定。就是说。要向“缓存”这个“光盘”中写入数据的时候，必须连接到WebGL这个“光驱”上。
绑定了缓存之后。使用bufferData函数来向缓存中写入数据，把这些处理写成一个函数。就是以下这样。

>生成VBO的函数

function create_vbo(data){
    // 生成缓存对象
    var vbo = gl.createBuffer();
    
    // 绑定缓存
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    
    // 向缓存中写入数据
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
    
    // 将绑定的缓存设为无效
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
    
    // 返回生成的VBO
    return vbo;
}

这个函数。接受一个矩阵作为參数，最后返回生成的VBO。首先使用createBuffer生成缓存对象。接着绑定缓存，然后写入数据。

绑定缓存的时候使用bindBuffer函数，这个函数有两个參数。第一个參数是缓存的类型。第二个參数是指定缓存对象。

将第一个參数指定为gl.ARRAY_BUFFER就能够生成VBO。
另外，bufferData函数的第二个參数中出现的Float32Array对象，是javascript的类型数组。和一般的Array对象相似，是处理浮点型小数的时候使用的数组对象。3D世界里小数的准确度非常重要，所以使用类型数组来传递数据。而第三个參数中的gl.STATIC_DRAW这个常量，定义了这个缓存中内容的更新频率。

VBO的话，模型数据基本上就是直接这么重复用，所以使用这个常量。

能够绑定WebGL的缓存，一次仅仅能绑定一个。所以要操作其它的缓存的时候。必须要绑定对应的缓存。

所以在函数的最后，再次使用bindBuffer函数。设定第二个參数为null，来将上次的绑定无效化，这是为了防止WebGL中的缓存一致保留。而出现和预想不一致的情况。

总结

顶点中的属性是由程序猿来自由加入的，须要的VBO的个数就是加入的属性个数。
顶点属性的各个数据，使用纯粹的一维数组，当然，数组的元素个数要依据想要绘制的顶点个数来定义。
生成VBO的时候。首先要把缓存绑定到WebGL。然后对应的数据，要转换为对应的类型，然后使用指定的常量来写入数据。

而为了避免预想之外的发生错误，数据写入结束之后，要将WebGL中绑定的缓存无效化。
这样，一连串的处理之后，模型数据就能够被顶点着色器利用了。下一回以后。说一下将VBO传给着色器的步骤，首先先把VBO的准备部分好好理解一下吧。

下次，说一下怎样准备坐标变换矩阵。

转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend