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

标签: WebGL
6378人阅读 评论(1) 收藏 举报
分类:

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



本次的demo的运行结果


对应复杂的模型

上次,通过操作模型坐标变换矩阵,实现了多个模型的移动,旋转和放大缩小。但是,渲染的依然是简单的三角形,是个构造及其简单的模型。
但是实际中,用WebGL来绘制一个简单的三角形的机会是很少见的。至少是个四角多边形吧,通常会是更复杂的模型。
伴随着模型的复杂化,顶点的个数也会大幅度增加,越是精密圆滑的模型,所需要的顶点的量也会变的肥大化。javascript中倒是没有什么限制,也不是为了节省内存或者是节省代码量,直接绘制这些大量顶点数据也不是说不可以,但是尽可能的减少数据量这种想法是程序员本性。
在WebGL中,有一种方法可以防止顶点数据的肥大化,是使用索引缓存来管理顶点数据。索引缓存又叫IBO(index buffer objact),是缓存的一种。而且,现在为止一直使用的类似的缓存还有VBO,IBO一般和VBO一起使用。


顶点的增加

像刚才说的一样,顶点增加的越多,管理的顶点数据就越庞大。但是,可以使用反复使用少量的顶点来形成多边形。
来看一下具体的例子吧。
多边形是由三角形组成的,比如一个矩形就是由两个三角形组成的。

那么,这时候需要几个顶点呢?
看刚才的图的话,需要四个顶点,而定义一个三角形需要三个顶点,两个多边形的话,按说是应该需要六个顶点的吧。
顶点的坐标情报是完全相同的,如果重复的顶点多次被定义的话,明显是浪费的。所以,应该考虑顶点的重复利用。

重复的顶点的再利用,尽可能减少顶点数据,这时候顶点缓存就出现了。顶点缓存,是用来保存顶点的索引情报的。像刚才的图一样,第一个多边形使用的是[ 1, 2, 3 ]这三个顶点,同样,第二个多边形使用的是[ 2, 3, 4 ]这三个顶点。
这样,绘制多边形的时候告诉WebGL使用哪些顶点的就是顶点索引,这次的四边形效果还不够明显,而越是巨大的复杂的模型,使用索引缓存的作用就会越大。
使用索引缓存,除了节省代码量之外,还有另外很大的好处。
使用索引缓存的话,可以直接使用GPU的内存,不用每次绘图都向GPU传递数据,这样速度会更快。
技能节省代码量,又实现高速化,所以没有理由不使用IBO。


IBO的生成

索引缓存的生成步骤,和顶点缓存类似,虽然有几个参数变化,但是基本上是同样的流程。
这次的demo新定义了一个create_ibo函数,来看一下代码吧。
>自定义函数create_ibo

// IBO的生成函数
function create_ibo(data){
    // 生成缓存对象
    var ibo = gl.createBuffer();
    
    // 绑定缓存
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
    
    // 向缓存中写入数据
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW);
    
    // 将缓存的绑定无效化
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
    
    // 返回生成的IBO
    return ibo;
}

和生成VBO的时候一样,首先使用createBuffer函数来生成空的缓存对象,然后绑定缓存,bindBuffer函数的第一个参数是一个和VBO不一样的内置常量 gl.ELEMENT_ARRAY_BUFFER,指定这个常量生成的缓存就是IBO。
然后绑定缓存并写入数据,VBO的时候,传入的参数的是Float32Array型数据,但是索引缓存使用的不是浮点型小数,而是整数,所以这里使用的是Int16Array型数据。
这个自定义函数create_ibo,传入的参数是一个数组,和生成VBO的函数create_vbo是一样的。IBO所用的数组数据和VBO一样,都是提前定义好的。
>索引数据的数组定义的例子

var index = [
    0, 1, 2,
    1, 2, 3
];

有四个顶点的时候,像上面写的一样,第一个三角形使用顶点[ 0, 1, 2 ],第二个三角形使用顶点[ 1, 2, 3 ]来绘制的意思。顶点的索引是从0开始的,需要注意,数组是一维数组。


绘图相关的变更点

了解了索引缓存的生成,接着看一下索引缓存的使用步骤。
使用IBO进行渲染,需要提前将IBO和WebGL进行绑定,用下面的代码可以实现。
>IBO绑定的代码
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
传入刚才生成的IBO(变量ibo),这样就完成了IBO的绑定,但是光是绑定IBO,是没办法进行绘图的,还需要修改一下绘图命令。
到现在为止,渲染多边形一直是使用drawArrays函数,为了使用IBO进行绘图,需要使用drawElements函数。这个函数的使用例子如下。
>使用drawElements函数的绘图命令举例
gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0);
这个drawElements函数有四个参数,第一个参数是表示渲染怎样的顶点的常量,第二个参数是索引缓存的元素数,第三个参数是索引数据的数据大小,第四个参数是索引数据的起始索引offset。
比较难理解的是第二个参数,这里的话,传入保存索引数据的数组长度的话就可以了,其他的参数没什么特殊限制的话,不做修改就这么使用的话就行了。


总结

使用索引缓存IBO,既可以节约数据,又能够提高渲染顶点的效率,而且,模型越复杂影响越大,这是程序员非常乐意看到的。
索引缓存和顶点缓存一样,可以使用纯粹的一维数组来生成,生成的IBO进行绑定后就可以使用了,利用IBO绘图的时候使用drawElements函数是重点。
这次的demo,顶点着色器和片段着色器是没有任何变化的,所以,还使用以前的HTML代码,javascript的内容多少有些变化,最后会给出完整代码,另外,文章最后会贴出本次demo的链接,可以参考一下。


下次,会介绍一下遮挡剔除和深度。


>script.js的完整代码

onload = function(){
    // canvas对象获取
    var c = document.getElementById('canvas');
    c.width = 500;
    c.height = 300;
    
    // webgl的context获取
    var gl = c.getContext('webgl') || c.getContext('experimental-webgl');
    
    // 顶点着色器和片段着色器的生成 
    var v_shader = create_shader('vs');
    var f_shader = create_shader('fs');
    
    // 程序对象的生成和连接
    var prg = create_program(v_shader, f_shader);
    
    // attributeLocation的获取
    var attLocation = new Array(2);
    attLocation[0] = gl.getAttribLocation(prg, 'position');
    attLocation[1] = gl.getAttribLocation(prg, 'color');
    
    // 将元素数attribute保存到数组中
    var attStride = new Array(2);
    attStride[0] = 3;
    attStride[1] = 4;
    
    // 保存顶点的颜色情报的数组
    var position = [
         0.0,  1.0,  0.0,
         1.0,  0.0,  0.0,
        -1.0,  0.0,  0.0,
         0.0, -1.0,  0.0
    ];
	// 保存顶点的颜色情报的数组  
    var color = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        1.0, 1.0, 1.0, 1.0
    ];
    
    // 保存顶点的索引的数组
    var index = [
        0, 1, 2,
        1, 2, 3
    ];
    
    // 生成VBO
    var pos_vbo = create_vbo(position);
    var col_vbo = create_vbo(color);
    
    // 将VBO进行绑定并添加
    set_attribute([pos_vbo, col_vbo], attLocation, attStride);
    
    // 生成IBO
    var ibo = create_ibo(index);
    
    // IBO进行绑定并添加
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
    
    // uniformLocationの取得
    var uniLocation = gl.getUniformLocation(prg, 'mvpMatrix');
    
    // 使用minMatrix.js对矩阵的相关处理
    // matIV对象生成
    var m = new matIV();
    
    // 各种矩阵的生成和初始化 
    var mMatrix = m.identity(m.create());
    var vMatrix = m.identity(m.create());
    var pMatrix = m.identity(m.create());
    var tmpMatrix = m.identity(m.create());
    var mvpMatrix = m.identity(m.create());
    
    // 视图x投影坐标变换矩阵
    m.lookAt([0.0, 0.0, 5.0], [0, 0, 0], [0, 1, 0], vMatrix);
    m.perspective(45, c.width / c.height, 0.1, 100, pMatrix);
    m.multiply(pMatrix, vMatrix, tmpMatrix);
    
    // 定义计数器
    var count = 0;
    
    // 持续循环
    (function(){
        // canvasを初期化
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clearDepth(1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        
        // 计数器递增
        count++;
        
        // 使用计数器算出角度 
        var rad = (count % 360) * Math.PI / 180;
        
        // 模型坐标变换矩阵的生成(沿着Y轴旋转)
        m.identity(mMatrix);
        m.rotate(mMatrix, rad, [0, 1, 0], mMatrix);
        m.multiply(tmpMatrix, mMatrix, mvpMatrix);
        gl.uniformMatrix4fv(uniLocation, false, mvpMatrix);
        
        // 使用索引进行绘图
        gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0);
        
        // context刷新
        gl.flush();
        
        // 为了循环,进行递归处理  
        setTimeout(arguments.callee, 1000 / 30);
    })();
    
    // 生成着色器的函数  
    function create_shader(id){  
        // 用来保存着色器的变量  
        var shader;  
          
        // 根据id从HTML中获取指定的script标签  
        var scriptElement = document.getElementById(id);  
          
        // 如果指定的script标签不存在,则返回  
        if(!scriptElement){return;}  
          
        // 判断script标签的type属性  
        switch(scriptElement.type){  
              
            // 顶点着色器的时候  
            case 'x-shader/x-vertex':  
                shader = gl.createShader(gl.VERTEX_SHADER);  
                break;  
                  
            // 片段着色器的时候  
            case 'x-shader/x-fragment':  
                shader = gl.createShader(gl.FRAGMENT_SHADER);  
                break;  
            default :  
                return;  
        }  
          
        // 将标签中的代码分配给生成的着色器  
        gl.shaderSource(shader, scriptElement.text);  
          
        // 编译着色器  
        gl.compileShader(shader);  
          
        // 判断一下着色器是否编译成功  
        if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){  
              
            // 编译成功,则返回着色器  
            return shader;  
        }else{  
              
            // 编译失败,弹出错误消息  
            alert(gl.getShaderInfoLog(shader));  
        }  
    }  
      
    // 程序对象的生成和着色器连接的函数  
    function create_program(vs, fs){  
        // 程序对象的生成  
        var program = gl.createProgram();  
          
        // 向程序对象里分配着色器  
        gl.attachShader(program, vs);  
        gl.attachShader(program, fs);  
          
        // 将着色器连接  
        gl.linkProgram(program);  
          
        // 判断着色器的连接是否成功  
        if(gl.getProgramParameter(program, gl.LINK_STATUS)){  
          
            // 成功的话,将程序对象设置为有效  
            gl.useProgram(program);  
              
            // 返回程序对象  
            return program;  
        }else{  
              
            // 如果失败,弹出错误信息  
            alert(gl.getProgramInfoLog(program));  
        }  
    }  
      
    // 生成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相关的函数  
function set_attribute(vbo, attL, attS){  
    // 处理从参数中得到的数组  
    for(var i in vbo){  
        // 绑定缓存  
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo[i]);  
          
        // 将attributeLocation设置为有效  
        gl.enableVertexAttribArray(attL[i]);  
          
        //通知并添加attributeLocation  
        gl.vertexAttribPointer(attL[i], attS[i], gl.FLOAT, false, 0, 0);  
    }  
}  
    // IBO的生成函数
function create_ibo(data){
    // 生成缓存对象
    var ibo = gl.createBuffer();
    
    // 绑定缓存
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
    
    // 向缓存中写入数据
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW);
    
    // 将缓存的绑定无效化
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
    
    // 返回生成的IBO
    return ibo;
}

};

利用索引缓存(IBO)绘图的demo

http://wgld.org/s/sample_006/


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

6
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1552368次
    • 积分:16596
    • 等级:
    • 排名:第649名
    • 原创:87篇
    • 转载:0篇
    • 译文:32篇
    • 评论:2289条
    联系我
    lufy.legend@gmail.com
    偶也微博了
    我写的书
      icon
      系统讲解HTML 5 Canvas的基础知识和高级技巧,深入剖析开源库件lufylegend的原理与使用以实例为向导,详细讲解射击游戏、物理游戏、网络游戏等各类游戏的开发思路和技巧
      qq交流群:298385345
    lufylegend.js游戏引擎官网
    博客专栏
    我开发的游戏
      三国记
    三国记是一款以三国时期为背景的战略类游戏,玩家可以任选一名君主,以统一全国为目标。
      三国记-乱世群雄
    本游戏以三国为背景,本次更新为第一部黄巾之乱的后续剧情,续作了群雄讨伐董卓,界桥之战以及救援徐州等剧情。
      三国记-经典战役版
    本游戏以三国为背景,玩家在游戏中可以体验三国中的四个经典战役,虎牢关之战,官渡之战,赤壁之战,夷陵之战。
    最新评论