首页 > 代码库 > [WebGL入门]九，顶点缓存的基础

[WebGL入门]九，顶点缓存的基础

2024-07-15 12:37:05   220人阅读

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


局部坐标

使用WebGL可以绘制各种各样的3D模型，而且，还可以绘制点和线，决定绘制什么肯定需要顶点。
没有顶点的话，也就没有多边形了，因为没有办法进行点和线的绘制了。所以，WebGL的编程中一定要处理顶点情报。而且，顶点中有必须要包含的情报，那就是顶点的位置坐标。
既然顶点的位置坐标是必须的，那么要如何定义这些信息呢？
顶点最终在画面上绘制的时候，要经过模型坐标变换，视图坐标变换和投影坐标变换，这个已经说过好多遍了。但是，在使用坐标情报之前，首先必须定义这些顶点群的构成，否则就没有办法开始了。
定点群放到什么位置，就表现为坐标，一般叫做局部坐标。局部坐标就是模型的各个顶点相对于原点（x，y，z都为0）的坐标。
比如，一个局部坐标为（1.0,0.0,0.0）的顶点，x轴方向距离原点的距离是1.0。同样，各个顶点都依次定义了局域坐标，这样顶点的位置就形成了。


保存顶点的情报

这些顶点的局部坐标，必须在WebGL程序中进行变换，然后传给顶点着色器。在WebGL中，为了处理这些顶点的信息，并将这些顶点信息保存，则需要使用顶点缓存。
缓存（buffer），是表示数据保存空间的一般的计算机用语。WebGL中还有帧缓存，索引缓存等各种缓存，但是不管哪种缓存，你只需要把它想成保存数据的一块儿空间就行了。顶点缓存是其中的一种，就是用来保存顶点信息的，WebGL中的顶点缓存叫做VBO（vertex buffer object）。


顶点缓存必须，且不是唯一的

顶点缓存的作用，不光是保存顶点的位置，位置以外跟顶点相关的信息都可以用顶点缓存来保存。
比如，顶点的法线，颜色，文理坐标等所有跟顶点相关的信息都可以用顶点缓存来保存和管理。但是需要注意一点的是，向顶点信息中追加信息的时候，需要使用相应的VBO。


顶点缓存和attribute

上次的文章里，已经介绍了顶点着色器接收数据的机制，attribute修饰符定义的变量。
其实，担任向这个attribute变量里传入数据的任务的就是VBO。WebGL的程序中，先把顶点的信息保存到VBO中，接着，通知着色器哪个VBO和哪个attribute变量相关，然后顶点着色器就可以正确的处理这些顶点了。
根据前面的内容，顶点缓存相关的处理的具体流程如下。
?顶点的各种信息保存到数组里
?使用WebGL的方法生成VBO
?使用WebGL的方法将数组中的信息传给VBO
?顶点着色器中的attribute函数和VBO结合
VBO的生成过程中，首先在最初的时候必须把数据保存到数组中，因为顶点的信息（位置）中必须有x，y，z，所以数组的长度必须是顶点数x3，这个时候需要注意，数组不可以使用多维数组，VBO的生成需要使用一维数组。
准备好保存顶点信息的数组之后，使用WebGL的context的方法生成VBO，当然生成的时候VBO是空的，然后将顶点信息的数组传给它。
然后，比如把顶点着色器中的attribute函数和VBO关联起来。上面也说了，VBO中不是只能保存一种信息，位置情报以外的法线和颜色等信息存在的时候，要准备合适的VBO，然后通知WebGL哪个VBO和哪个attribute变量相关联。


总结

这样，顶点缓存应该理解了吧。
顶点里添加怎样的情报，程序员是可以自由决定的，DirectX中有一种叫做［灵活顶点格式］的机制，WebGL中顶点格式是没有的，程序员必须自己处理所有的顶点情报。
只需要添加你想要添加的顶点信息的VBO就行了，VBO的生成方法以及怎样把数组信息传递给VBO等等，以后的文章中会详细的介绍。首先，把大概的流程理解一下。
最难理解的是怎样把attribute变量相关联，这个以后肯定会详细的介绍的。这次，只需要了解了顶点缓存的作用就足够了。


下次，讲一下坐标变换中不能缺少的矩阵的计算方法，把这些讲完之后，就可以在画面上绘制多边形了，期待吧。


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


联系
我们