WebGL2系列之实例数组(Instanced Arrays)

实例化数组

实例化是一种只调用一次渲染函数却能绘制出很多物体的技术，它节省渲染一个物体时从CPU到GPU的通信时间。
实例数组是这样的一个对象，使用它，可以把原来的的uniform变量转换成attribute变量，而且这个attribute变量对应的缓冲区可以被多个对象使用；这样在绘制的时候，可以减少webgl的调用次数。

背景

假设这样的一个场景：你需要绘制很多个形状相同的物体，但是每个物体的颜色、位置却不一样，通常的做法是这样的：

for(var  i = 0; i < amount_of_models_to_draw; i++)
{
    doSomePreparations(); // bind VAO, bind Textures, set uniforms etc.
    gl.drawArrays(gl.TRIANGLES, 0, amount_of_vertices);
}

但是这种做法的一个缺点是：当绘制的对象的数量巨大之后，执行的效率就会变的很慢了；这是因为每一次绘制的时候，都需要调用很多webgl 的很多方法，比如绑定VAO对象，绑定贴图，设置uniform变量，告诉GPU从哪个缓冲区区读取顶点数据，以及从哪里找到顶点属性，所有这些都会是CPU和GPU的资源消耗过多。

实例化

如果能够讲数据一次性发送给GPU，然后告诉WebGL使用一个绘制函数，绘制多个物体，就会更方便。这种技术，便是实例化技术。这种技术的实现思路，就是把原本的uniform变量，比如变换矩阵，变成attribute变量，然后把多个对象的矩阵数据，写在一起，然后创建所有矩阵的VBO对象（顶点缓存区）； 创建好缓冲区后，把所有对象的矩阵数据通过bufferData 上传到缓冲区中，这和普通的attribute变量的缓冲区没什么差别。
接下来，就是和普通的VBO差异的部分：该缓冲区可以在多个对象之间共享。每个对象 取该缓冲区的一部分数据，作为attribute变量的值，方法如下:

  gl.vertexAttribDivisor(index, divisor)

通过gl.vertexAttribDivisor方法指定缓冲区中的每一个值，用于多少个对象，比如divisor = 1，表示每一个值用于一个对象；如果divisor=2，表示一个值用于两个对象。 index表示的attribute变量的地址。

然后，通过调用如下方法进行绘制：

gl.drawArraysInstanced(mode, first, count, instanceCount);
gl.drawElementsInstanced(mode, count, type, offset, instanceCount);

这两个方法和 gl.drawArrays与gl.drawElements类似，不同的是多了第四个参数 instanceCount，表示一次绘制多少个对象。
通过这个方法，便能实现一次调用绘制多个对象的目标。

案例说明

代码展示

本案例 将一次绘制多个四边形，代码如下：

 var count = 3000;
        var positions = new Float32Array([
            -1/count, 1/count, 0.0,
            -1/count, -1/count, 0.0,
            1/count, 1/count, 0.0,
            1/count, -1/count, 0.0,
        ]);
        var positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(0);
        var colors = new Float32Array([
            1.0, 0.0, 0.0,
            0.0, 1.0, 0.0,
            0.0, 0.0, 1.0,
            1.0, 1.0, 1.0,
        ]);
        var colorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
        gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(1);

        var indices = new Uint8Array([
            0,1,2,
            2,1,3
        ]);

        var indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW); //给缓冲区填充数据

        var offsetArray = [];
        for(var i = 0;i < count;i ++){
            for(var j = 0; j < count; j ++){
                var x = ((i + 1) - count/2) / count * 4;
                var y = ((j + 1) - count/2) / count * 4;
                var z = 0;
                offsetArray.push(x,y,z);
            }
        }

        var offsets = new Float32Array(offsetArray)

        var offsetBuffer = gl.createBuffer();
        var aOffsetLocation = 2;
        gl.bindBuffer(gl.ARRAY_BUFFER, offsetBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, offsets, gl.STATIC_DRAW);
        gl.enableVertexAttribArray(aOffsetLocation);
        gl.vertexAttribPointer(aOffsetLocation, 3, gl.FLOAT, false, 12, 0);
        gl.vertexAttribDivisor(aOffsetLocation, 1);

        // ////////////////
        // // DRAW
        // ////////////////
        gl.clear(gl.COLOR_BUFFER_BIT);// 清空颜色缓冲区
        // // 绘制第一个三角形
        gl.bindVertexArray(triangleArray);
        gl.drawElementsInstanced(gl.TRIANGLES,indices.length,gl.UNSIGNED_BYTE,0,count * count);

定义四边形VBO、IBO数据

首先定义一个变量count，绘制四边形的个数为 count * count,也就是count 列 count行个四边形。 然后一下代码定义四边形的顶点坐标、颜色和索引相关数据，这在WebGL1中多次使用，不在赘述：

var positions = new Float32Array([
            -1/count, 1/count, 0.0,
            -1/count, -1/count, 0.0,
            1/count, 1/count, 0.0,
            1/count, -1/count, 0.0,
        ]);
        var positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(0);
        var colors = new Float32Array([
            1.0, 0.0, 0.0,
            0.0, 1.0, 0.0,
            0.0, 0.0, 1.0,
            1.0, 1.0, 1.0,
        ]);
        var colorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
        gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(1);

        var indices = new Uint8Array([
            0,1,2,
            2,1,3
        ]);

        var indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW); //给缓冲区填充数据

uniform变量改成attribute变量

接下来，为了把每个四边形分开，我们给每个四边形定义一个偏移量（此处的偏移量可以相当于变换矩阵），在WebGL1中，这个偏移量会以uniform变量的方式定义，但是在实例化的技术下，该偏移量定义为attribute变量, layout(location=2) in vec4 offset:

var vsSource = `#version 300 es
       ......
        layout(location=2) in vec4 offset;
        ......
        void main() {
            vColor = color;
            gl_Position = position  + offset;
        }
`;

定义偏移量的数据及VBO

然后定义每个对象的偏移量数据的数组：

        for(var i = 0;i < count;i ++){
            for(var j = 0; j < count; j ++){
                var x = ((i + 1) - count/2) / count * 4 - 2/count;
                var y = ((j + 1) - count/2) / count * 4 - 2/count;
                var z = 0;
                offsetArray.push(x,y,z);
            }
        }

这个偏移量，将会使所有的四边形，按照count 行 count 列排列。
定义了偏移量数组之后，创建相应的缓冲区和开启attribute变量：

   var offsetBuffer = gl.createBuffer();
        var aOffsetLocation = 2; // 偏移量attribute变量地址
        gl.bindBuffer(gl.ARRAY_BUFFER, offsetBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, offsets, gl.STATIC_DRAW);
        gl.enableVertexAttribArray(aOffsetLocation); // 启用偏移量attribute变量从缓冲区取数据
        gl.vertexAttribPointer(aOffsetLocation, 3, gl.FLOAT, false, 12, 0); // 定义每个数据的长度为3个分量，长度为12 = 3 * 4（浮点数长度）。
        gl.vertexAttribDivisor(aOffsetLocation, 1);

gl.vertexAttribDivisor

注意 gl.vertexAttribDivisor(aOffsetLocation, 1); 这一行，1表示指定每个数据(定义每个数据的长度为3个分量，长度为12 = 3 * 4（浮点数长度)) 被一个四边形所用，而每一个四边形的绘制期间，attribute变量offset保持不变，这个uniform变量类似。

gl.drawElementsInstanced 绘制多个实例

接下来，调用方法绘制多个实例，


        // ////////////////
        // // DRAW
        // ////////////////
        gl.clear(gl.COLOR_BUFFER_BIT);// 清空颜色缓冲区
        // // 绘制第一个三角形
        gl.bindVertexArray(triangleArray);
        gl.drawElementsInstanced(gl.TRIANGLES,indices.length,gl.UNSIGNED_BYTE,0,count * count);

gl.drawElementsInstanced 将会绘制count * count个四边形的实例，需要注意的是，绘制实例的个数，不能多于attribute变量offset变量的对应的缓冲区的数据个数，前面代码offsetArray定义了count*count个数据（注意每个数据有3个分量，所以数据个数不等于offsetArray数组长度），因此绘制的示例个数不能超过count * count 个，但是可以少于。

案例效果说明

如果把count 指定为10，最终绘制的效果如下：

绘制10*10个示例

可以看出，一次绘制调用，绘制出了100个对象；
如果通过WebGL1的方式需要遍历100次绘制。因此可以看出减少了绘制的遍历。
当然如果只是绘制100个四边形，遍历方法也没什么不好，实例化的威力主要体现在，当数据量变到很大的时候，比如在笔者电脑上，把count值改为4000，那么会绘制4000 * 4000 = 一千六百万个四边形，如下：

九百万个四边形

可以看出，还是可以很好的绘制出来（虽然由于对象太多，已经看不清楚界限）
而采用WebGL1 循环遍历的方式，估计最多也就能够达到万级别的绘制循环数量，千万级别的数量简直不可想象。
当然这个数量 也是有限制的，比如在笔者的机器上，把count改成5000，也就是5000 * 5000 = 两千五百万的时候，机器就奔溃了。

奔溃了

WebGL1 扩展

在WebGL1中，可以通过扩展来ANGLE_instanced_arrays来实现，相关函数如下：

var ext = gl.getExtension(‘ANGLE_instanced_arrays‘);

ext.vertexAttribDivisorANGLE(index, divisor);

ext.drawArraysInstancedANGLE(mode, first, count, primcount);

ext.drawElementsInstancedANGLE(mode, count, type, offset, primcount);

更多精彩内容，请关注公众号:ITman彪叔

ITman彪叔公众号

原文地址：https://www.cnblogs.com/flyfox1982/p/10070578.html

时间： 2024-11-01 19:24:33

WebGL2系列之实例数组(Instanced Arrays)的相关文章

设计模式学习总结系列应用实例

1.单例模式 应用实例:1.一个党只能有一个主席.2.Windows是多进程多线程的,在操作一个文件的时候,就不可避免地出现多个进程或线程同时操作一个文件的现象,所以所有文件的处理必须通过唯一的实例来进行.3.一些设备管理器常常设计为单例模式,比如一个电脑有两台打印机,在输出的时候就要处理不能两台打印机打印同一个文件. 2.工厂模式 应用实例:1.你需要一辆汽车,你可以直接从工厂里面提货,而不用去管这辆汽车是怎么做出来的,以及这个汽车里面的具体实现 2.Hibernate换数据库只需换方言和驱动

学渣乱搞系列之后缀数组

学渣乱搞系列之后缀数组 by 狂徒归来 后缀数组,其nlogn的构造方法,比较麻烦,十几个循环,基数排序?计数排序?各种排序,各种凌乱,学渣表示鸭梨很大啊!学渣从<挑战程序设计竞赛>中偷学了一点nlog2n的构造方法. 字符串后缀(Suffix)是指从字符串的某个位置开始到其末尾的字符串子串.我们认为原串和空串也是后缀. 后缀数组(Suffix Array)指的是将某个字符的所有后缀按字典序排序后得到的数组.排序方式很多,时间复杂度也不同.有基数排序的倍增法o(nlogn),有DC3构造方法o

c语言实现动态指针数组Dynamic arrays

c语言实现动态数组. 基本原理:事先准备好一个固定长度的数组.如果长度不够的时候,realloc一块区域.另外:在数组元素减少的情况下,需要缩减数组长度. 主要接口: cp_bool DyArrayAppend(DyArray* pArr, void* pData)//加数据到数组末尾 cp_bool DyArrayExpand(DyArray* pArr, cp_int32 nNeed)//扩展数组 cp_bool DyArrayDelete(DyArray* pArr, cp_int32 n

Java入门系列：实例讲解ArrayList用法

本文通过实例讲解Java中如何使用ArrayList类. Java.util.ArrayList类是一个动态数组类型,也就是说,ArrayList对象既有数组的特征,也有链表的特征.可以随时从链表中添加或删除一个元素.ArrayList实现了List接口. 大家知道,数组是静态的,数组被初始化之后,数组长度就不能再改变了.ArrayList是可以动态改变大小的.那么,什么时候使用Array(数组),什么时候使用ArrayList?答案是:当我们不知道到底有多少个数据元素的时候,就可使用Array

ECharts系列 - 地图 实例一

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html 1.项目结构 js文件夹: 下载了EChar

CoreJavaE10V1P3.10 第3章 Java的基本编程结构－3.10 数组（Arrays）

数组是存储同一类型数据的数据结构 数组的声明与初始化 int[] a; int a[]; int[] a = new int[100]; int[] a = new int[100]; for (int i = 0; i < 100; i++) a[i] = i; // fills the array with numbers 0 to 99 一旦创建就不可改变其大小 3.10.1 for each 循环 for each循环可以用来为数组赋值 for (variable : collectio

java数组中Arrays类

使用Arrays类之后要先导入包,即在开头添加这行: import.java.util.Arrays 1,排序:Arrays.sort(数组名) 排序后为数组升序. 2,将数组转换成字符串:Arrays.toString(数组名)

java数组类Arrays：比较，填充，排序

int i1[] = {1,2,3,4,5,6}; int i2[] = {6,5,4,3,2,1}; //排序 Arrays.sort(i2); System.out.println(i1.equals( i2 )); System.out.println( Arrays.equals(i1, i2) ); //将数组2的内容填充3 Arrays.fill(i2, 3); System.out.println( Arrays.toString(i2) );

JS三教九流系列-jquery实例开发到插件封装3

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址  http://my.oschina.net/u/2352644/blog/490827 8-17实例地址 http://my.oschina.net/u/2352644/blog/491933 效果目录: 18.计数增加效果 19.模仿3d的焦点图效果 20.倒计时效果 21.导航滚动监听 18.计数增加效果 我