标签：webgl

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

顶点属性的意思

上次的文章中，介绍了一下从着色器的生成，编译，到程序对象的生成和着色器的连接。这次，简单的说一下模型数据的定义和顶点属性的处理。另外，介绍一下根据模型数据生成VBO的方法。
VBO的使用要比生成难理解一些，但是不要担心，后面会慢慢说明。
接下来看一下顶点属性。
顶点属性，说的简单点，就是顶点包含的各种元素。WebGL中，顶点至少要包含的元素是位置情报，这个之前已经说过很多遍了。
顶点是三维空间中的任意一个点，所以一定要有位置情报，如果没有位置情报，则无法在三维空间中定义这个点，因为每个点都不一样，所以位置情报是必须的。lufy：感觉好罗嗦啊，作者是为了强调吧，可是真的好罗嗦啊，好罗嗦啊，啰嗦啊，嗦啊，啊.....
但是，顶点里还有可能包含其他属性，举个例子来说的话，比如顶点的颜色等等。根据顶点的颜色属性，来对多边形进行着色，或者透明等各种各样的处理。
另外的，还有顶点的法线，纹理坐标等相关的情报，这些都可以在顶点属性中自由的定义。DirectX中根据所谓的顶点格式来实现这些，但是在WebGL中顶点的各种属性都可以定义在顶点属性中。

顶点属性和VBO

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

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

VBO的生成

>生成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;
}

总结

下次，说一下如何准备坐标变换矩阵。

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

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

标签：webgl

原文地址：http://blog.csdn.net/lufy_legend/article/details/38407719