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

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

为了让大家看的更容易些,中间加了换行,可以看到这是一个一维数组,包含有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

[WebGL入门]十二,模型数据和顶点属性,布布扣,bubuko.com

时间: 2024-10-14 00:19:16

[WebGL入门]十二,模型数据和顶点属性的相关文章

[WebGL入门]十四,绘制多边形

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 这是本次的demo的运行结果 绘制流程 这次终于该绘制多边形了,之前的文章(十一,着色器的编译和连接)中介绍了HTML,顶点着色器和片段着色器,这次看一下javascript从开始到最终的全部处理.如果前两篇文章介绍的内容完全理解的话,这次的内容也应该不难了.或许会有不容易理解的地方,不要着急

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

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

[WebGL入门]十六,绘制多个模型

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 顶点缓存的重复利用 上一篇文章中,向多边形的三个顶点中添加了颜色这个新的顶点属性,给多边形涂抹了颜色.而且知道,使用新的VBO可以给对顶点属性进行自由的扩张.那么,这次来挑战一下同时绘制多个模型.但是,不准备新的VBO,还利用上次的VBO,就是说,重复利用VBO,只操

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

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

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

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

[WebGL入门]十,矩阵计算和外部库

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 重要的使用方法 矩阵的计算方法,也不是什么特别奇怪复杂的东西,如果数学好好学习的话,没有基础也可以进行基本的矩阵计算.但是,如果不知道矩阵的加法和乘法运算的话,要进行稍微复杂一些的矩阵计算是非常难的.DirectX也好,OpenGL也好,事实上,如果你不能掌握矩阵的使用的话,编程会变得非常难的

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje

Android入门(十二)SQLite事务、升级数据库

原文链接:http://www.orlion.ga/610/ 一.事务 SQLite支持事务,看一下Android如何使用事务:比如 Book表中的数据都已经很老了,现在准备全部废弃掉替换成新数据,可以先使用delete()方法将Book表中的数据删除, 然后再使用insert()方法将新的数据添加到表中.我们要保证的是,删除旧数据和添加新数据的操作必须一起完成,否则就还要继续保留原来的旧数据.                 Button replaceData = (Button) find

SpringMVC基础学习(二)—模型数据

一.处理模型数据 1.处理模型数据的途径      SpringMVC提供以下几种途径输出模型数据:      (1)ModelAndView: 处理方法返回值类型为ModelAndView,方法体即可通过该对象添加模型数据.      (2)Map及Model: 入参为Map和Model,处理方法返回时,Map中的数据会自动添加到模型中.      (3)@SessionAttributes: 将模型中的某个属性暂存到HttpSession中,以便多个轻轻能共享这个属性.      (4)@M