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

注:文章译自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

时间: 2024-10-14 20:02:03

[WebGL入门]九,顶点缓存的基础的相关文章

[WebGL入门]五,矩阵的基础知识

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 不是让你到店前面排队 lufy:你一定奇怪,为什么叫这个题目,因为日语中的矩阵叫做"行列",所以作者就给读者们开了个玩笑,我就这么直接翻译了,大家知道什么意思就行了. 在3D渲染的世界里,会很频繁的用到矩阵. 这里所说的矩阵,是数学里的矩阵.英语中叫做Matrix. 矩阵虽然听起来好

[WebGL入门]十五,为多边形涂抹颜色(顶点颜色的指定)

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 增加顶点属性的个数 上次,终于绘制了一个三角形,但是只绘制了一个纯白色的多边形.这次,给多边形的顶点中添加颜色属性,基本上做的事情和上一篇文章一样,只是稍微增加点步骤而已.首先,就像以前多次重复的那样,顶点可以包含很多种情报(参考:顶点缓存和基础),而且每一个情报叫做

[WebGL入门]二十六,纹理绘图

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 WebGL与纹理 上次介绍了用点光源的光来进行补色着色的方法.在片段着色器中对光进行计算,阴影,亮点等效果都非常的漂亮,3D场景的真实度大幅度提升.并且能和顶点颜色一起使用,理解了前面讲解的内容之后,就应该能进行比较高质量的3D渲染了.这一次,来看高级一点的纹理的使用

[WebGL入门]十九,遮挡剔除和深度测试

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 多边形的外侧,内侧和遮挡剔除 上次介绍了索引缓存,以及使用IBO来绘图,使用索引缓存可以循环利用重复的顶点,能够提高绘图效率.这之后的文章,如果没有特殊的原因的话,基本上都会使用索引缓存,通过drawElements来绘图.这次来说一下遮挡剔除和深度测试,这是两个重要

[WebGL入门]八,着色器的说明和基础

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 认识GLSL WebGL是无法利用固定渲染管线的,这个在之前的文章(四,渲染准备)里已经简单的说明过了.所以,代替它的是可编辑渲染管线中的一种着色语言,叫做GLSL(OpenGL Shading Language). 是用来在OpenGL中着色编程的语言,GLSL使用C语言为基础,并且有自己独

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

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 顶点属性的意思 上次的文章中,介绍了一下从着色器的生成,编译,到程序对象的生成和着色器的连接.这次,简单的说一下模型数据的定义和顶点属性的处理.另外,介绍一下根据模型数据生成VBO的方法.VBO的使用要比生成难理解一些,但是不要担心,后面会慢慢说明.接下来看一下顶点属性.顶点属性,说的简单点,

[WebGL入门]十八,利用索引缓存来绘图

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 对应复杂的模型 上次,通过操作模型坐标变换矩阵,实现了多个模型的移动,旋转和放大缩小.但是,渲染的依然是简单的三角形,是个构造及其简单的模型.但是实际中,用WebGL来绘制一个简单的三角形的机会是很少见的.至少是个四角多边形吧,通常会是更复杂的模型.伴随着模型的复杂化

[WebGL入门]六,顶点和多边形

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 可以在三维空间中描画的东西 要说在WebGL的世界里能够描画什么,其实任何东西都可以描画.而描画的最基本的东西就是下面几种. ?点 ?线段 ?三角形 虽然在OpenGL中提供了矩形的绘制,但是WebGL中基本上只能绘制上面的三种类型.和二维世界不同,比如像HTML中的img标签那样,简单的在画

[WebGL入门]三,3D绘图的基础知识

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 二维和三维 三维空间--我们生活这个这个现实的世界就是一个三维空间. 在三维的世界里,所有的东西都由横,竖,深度.将这些东西重现,就是一个实时3D渲染.但是再现这个3D空间,我们是在一个2D的显示器上来实现的. 电脑和手机的屏幕,都是一个2D的显示器.至少现在还没有一个3D的显示设备,当然,研