注:文章译自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
[WebGL入门]九,顶点缓存的基础,布布扣,bubuko.com