https://www.cnblogs.com/fuckgiser/p/6027520.html
最近研究Cesium的实例化，尽管该技术需要在WebGL2.0，也就是OpenGL ES3.0才支持。调试源码的时候眼前一亮，发现VAO和glDrawBuffers都不是WebGL1.0的标准函数，都是扩展功能，看来WebGL2.0标准的推广势在必行啊。同时发现，通过ANGLE_instanced_arrays的扩展，也可以在WebGL1.0下实现实例化，创建实例化方法的代码如下：
var glDrawElementsInstanced;
var glDrawArraysInstanced;
var glVertexAttribDivisor;
var instancedArrays;
// WebGL2.0标准直接提供了实例化接口
if (webgl2) {
glDrawElementsInstanced = function(mode, count, type, offset, instanceCount) {
gl.drawElementsInstanced(mode, count, type, offset, instanceCount);
};
glDrawArraysInstanced = function(mode, first, count, instanceCount) {
gl.drawArraysInstanced(mode, first, count, instanceCount);
};
glVertexAttribDivisor = function(index, divisor) {
gl.vertexAttribDivisor(index, divisor);
};
} else {
// WebGL1.0下
// 扩展ANGLE_instanced_arrays
instancedArrays = getExtension(gl, ['ANGLE_instanced_arrays']);
if (defined(instancedArrays)) {
glDrawElementsInstanced = function(mode, count, type, offset, instanceCount) {
instancedArrays.drawElementsInstancedANGLE(mode, count, type, offset, instanceCount);
};
glDrawArraysInstanced = function(mode, first, count, instanceCount) {
instancedArrays.drawArraysInstancedANGLE(mode, first, count, instanceCount);
};
glVertexAttribDivisor = function(index, divisor) {
instancedArrays.vertexAttribDivisorANGLE(index, divisor);
};
}
}
// 涉及到实例化的三个方法
this.glDrawElementsInstanced = glDrawElementsInstanced;
this.glDrawArraysInstanced = glDrawArraysInstanced;
this.glVertexAttribDivisor = glVertexAttribDivisor;
this._instancedArrays = !!instancedArrays;
通过这样的封装，Cesium.Context提供了标准的实例化方法，不需要用户过多的关心WebGL标准的差异。而实例化的渲染也非常简单，核心代码如下：
functioncontinueDraw(context, drawCommand) {
// ……
var instanceCount = drawCommand.instanceCount;
if (defined(indexBuffer)) {
offset = offset * indexBuffer.bytesPerIndex;
// offset in vertices to offset in bytes
count = defaultValue(count, indexBuffer.numberOfIndices);
if (instanceCount === 0) {
context._gl.drawElements(primitiveType, count, indexBuffer.indexDatatype, offset);
} else {
context.glDrawElementsInstanced(primitiveType, count, indexBuffer.indexDatatype, offset, instanceCount);
}
} else {
count = defaultValue(count, va.numberOfVertices);
if (instanceCount === 0) {
context._gl.drawArrays(primitiveType, offset, count);
} else {
context.glDrawArraysInstanced(primitiveType, offset, count, instanceCount);
}
}
// ……
｝
是否实例化渲染，取决于你所构造的DrawCommand是否有实例化的信息，对应代码中的drawCommand.instanceCount，如果你的实例化数目不为零，则进行实例化的渲染。因此，Context中对实例化进行了封装，内部的渲染机制中，实例化和非实例化的渲染机制差别并不大。从应用的角度来看，我们并不需要关心Context的实现，而是通过构造DrawCommand来决定是否想要实例化渲染。
之前我们较详细的介绍过Renderer.DrawCommand模块，如果不清楚的回去再翻翻看，在VertexArray中实现了VAO中创建attr.vertexAttrib，这里有一个instanceDivisor属性，这就是用来表示该attribute是否是实例化的divisor：
attr.vertexAttrib = function(gl) {
var index = this.index;
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer._getBuffer());
gl.vertexAttribPointer(index, this.componentsPerAttribute, this.componentDatatype, this.normalize,
this.strideInBytes, this.offsetInBytes);
gl.enableVertexAttribArray(index);
if (this.instanceDivisor > 0) {
context.glVertexAttribDivisor(index, this.instanceDivisor);
context._vertexAttribDivisors[index] = this.instanceDivisor; context._previousDrawInstanced = true;
}
};
根据OpenGL的定义，glVertexAttribDivisor在设置多实例渲染时，位于index位置的顶点着色器中顶点属性是如何分配值到每个实例的。instanceDivisor如果是0，那该属性的多实例特性将被禁用，其他值则表示顶点着色器中，每instanceDivisor个实力会分配一个新的属性值。
可见，对于一个DrawCommand，实例化有三处特别的地方，一个是attribute的instanceDivisor属性，用来确定实例化的频率，一个是instanceCount，实例化的个数，最后一个，当然是顶点着色器了，attribute属性传到顶点着色器了，你得用才有效果啊。因为实例化的*度很高，所以多数情况下需要你自己写。
当然，目前Cesium用实例化的地方不多，只有BillboardCollection和3D Tiles中用到了，提供了完整的实现方法，不妨看看Cesium自己的调用方式，学习一下Cesium中如何使用实例化的。
ModelInstanceCollection
我们先看一下3D Tiles中实例化的实现方式，这个较为简单，因为3D Tiles中的数据都是预处理的，可以直接加载，另外因为模型是gltf，自带Shader，不需要过多的逻辑判断。
上面是一个3D Tiles实例化的效果图，可见除了位置不同，其他的都一致。实例化正是避免相同属性之间的内存和显存的调度，同时对不同的属性的调度进行优化，从而提高渲染效率。我们先看一下数据处理的代码：
functiongetVertexBufferData(collection, context, result) {
var instances = collection._instances;
var instancesLength = collection.length;
var collectionCenter = collection._center;
var vertexSizeInFloats = 12;
if (!defined(result)) {
result = new Float32Array(instancesLength * vertexSizeInFloats);
}
for (var i = 0; i < instancesLength; ++i) {
var modelMatrix = instances[i].modelMatrix;
// Instance matrix is relative to center
var instanceMatrix = Matrix4.clone(modelMatrix, scratchMatrix);
instanceMatrix[12] -= collectionCenter.x;
instanceMatrix[13] -= collectionCenter.y;
instanceMatrix[14] -= collectionCenter.z;
var offset = i * vertexSizeInFloats;
// First three rows of the model matrix
result[offset + 0] = instanceMatrix[0];
result[offset + 1] = instanceMatrix[4];
result[offset + 2] = instanceMatrix[8];
result[offset + 3] = instanceMatrix[12];
result[offset + 4] = instanceMatrix[1];
result[offset + 5] = instanceMatrix[5];
result[offset + 6] = instanceMatrix[9];
result[offset + 7] = instanceMatrix[13];
result[offset + 8] = instanceMatrix[2];
result[offset + 9] = instanceMatrix[6];
result[offset + 10] = instanceMatrix[10];
result[offset + 11] = instanceMatrix[14];
}
return result;
}
代码有点长，但不难理解，instancesLength是要进行实例化的实例个数，collectionCenter则是这些实例Collection的中心点，以前这些实例中都保存的是相对球心的模型矩阵，这样构建instancesLength个DrawCommand，最终渲染到FBO中。但发现，这些实例基本一样啊，以前是一笔一划的渲染出来，不然先弄一个印章，然后啪啪啪的盖在不同的位置就可以了，这样多快啊。所以现在要对他进行实例化的改造。这样，当我在collectionCenter位置构造了一个实例（印章），你们告诉我距离中心点的偏移量，我就知道在哪里直接“盖”这个实例了。所以，数据上，我们需要把这个矩阵改为相对collectionCenter的，getVertexBufferData就是做这个事情。接着在createVertexBuffer中我们将这个矩阵数据构建成一个VertexBuffer：
function createVertexBuffer(collection, context) {
var vertexBufferData = getVertexBufferData(collection, context);
collection._vertexBuffer = Buffer.createVertexBuffer({
context : context,
typedArray : vertexBufferData, usage : dynamic ? BufferUsage.STREAM_DRAW : BufferUsage.STATIC_DRAW
});
}
这样，当我们创建好适合实例化的VertexBuffer后，就可以封装实例化的属性：
function createModel(collection, context) {
var instancingSupported = collection._instancingSupported;
var modelOptions;
if (instancingSupported) {
createVertexBuffer(collection, context);
var instancedAttributes = {
czm_modelMatrixRow0 : {
index : 0, // updated in Model
vertexBuffer : collection._vertexBuffer,
componentsPerAttribute : 4,
componentDatatype : ComponentDatatype.FLOAT,
normalize : false,
offsetInBytes : 0,
strideInBytes : componentSizeInBytes * vertexSizeInFloats,
instanceDivisor : 1
},
czm_modelMatrixRow1 : {
index : 0, // updated in Model
vertexBuffer : collection._vertexBuffer,
componentsPerAttribute : 4,
componentDatatype : ComponentDatatype.FLOAT,
normalize : false,
offsetInBytes : componentSizeInBytes * 4,
strideInBytes : componentSizeInBytes * vertexSizeInFloats,
instanceDivisor : 1
},
czm_modelMatrixRow2 : {
index : 0, // updated in Model
vertexBuffer : collection._vertexBuffer,
componentsPerAttribute : 4,
componentDatatype : ComponentDatatype.FLOAT,
normalize : false,
offsetInBytes : componentSizeInBytes * 8,
strideInBytes : componentSizeInBytes * vertexSizeInFloats,
instanceDivisor : 1
}
};
modelOptions.precreatedAttributes = instancedAttributes;
}
collection._model = new Model(modelOptions);
}
这里稍微有一些麻烦，将矩阵分解为3个vec4的attribute，分别对应czm_modelMatrixRow0~2，这里可以看到，每一个实例化的属性中，instanceDivisor值为1，也就是一个实例更新一次，正好对应每一个实例的偏移量。 最后构造成Model(_precreatedAttributes)。
该Model实际上就是一个实例集合，在Model.update()中调用createVertexArrays方法创建VAO。这样完成了一个arraybuffer（内存）->VertexBuffer（显存）->Attributes->VertexArray的整个过程。最后绑定到DrawCommand中进行渲染。整个流程大概如下：
ModelInstanceCollection.prototype.update = function(frameState) {
if (this._state === LoadState.NEEDS_LOAD) {
this._state = LoadState.LOADING;
this._instancingSupported = context.instancedArrays;
// 数据处理，符合实例化的需要
createModel(this, context);
}
var model = this._model;
// 创建VAO
model.update(frameState);
if (instancingSupported) {
// 构造最终的DrawCommand
// 指定instanceCount
// 绑定VertexArray
createCommands(this, modelCommands.draw, modelCommands.pick);
}
}
这样，一个实例化的DrawCommand完成，以前需要Count个DrawCommand渲染的过程，只需要一个DrawCommand一次性渲染instanceCount个实例即可。当然，这里没有给出3D Instance Tiles的顶点着色器代码，只好自己想象这样一个转换代码：a_position为原点，通过czm_modelMatrixRow0，czm_modelMatrixRow1，czm_modelMatrixRow2三个相对原点的偏移矩阵构造出czm_instanced_modelView模型试图矩阵，最终结合投影矩阵计算出gl_Position。
Billboard:
这里主要介绍Billboard中实例化的设计和封装，至于Billboard的整个过程，我们后续在介绍DataSource模块时再详细介绍。首先，我们要自己明白，对Billboard进行实例化渲染的意义在哪里，在目标明确的基础下，我们才能总结这些实例之间的共同出和不同点，方能更好的设计：哪些属性需要实例化，哪些属性不需要。
大家可以自己思考一下，再往下看。因为这个涉及到对Billboard的理解，本篇主要集中在实例化上面，所以，直接给出Cesium的设计。
var attributeLocationsInstanced = {
direction : 0,
positionHighAndScale : 1,
positionLowAndRotation : 2,
// texture offset in w
compressedAttribute0 : 3,
compressedAttribute1 : 4,
compressedAttribute2 : 5,
eyeOffset : 6,
// texture range in w
scaleByDistance : 7,
pixelOffsetScaleByDistance : 8
};
如上是Cesium中Billboard需要的attribute属性，对每一个实例而言，direction都是一样的，而其他八个属性则不同。direction是公告板的四个顶点的相对位置（比例），对于所有公告板，这四个顶点之间的相对位置是一样的，就好比一个印章，你只需要缩放一下相对位置就可以改变整体大小，移动一下位置就可以改变整体位置，旋转也是如此。无论怎么变，Billboard的样式都不会走样。因此， 在BillboardCollection中，会默认创建唯一的公告板的direction：
functiongetIndexBufferInstanced(context) {
var indexBuffer = context.cache.billboardCollection_indexBufferInstanced;
if (defined(indexBuffer)) {
return indexBuffer;
}
indexBuffer = Buffer.createIndexBuffer({
context : context,
typedArray : new Uint16Array([0, 1, 2, 0, 2, 3]),
usage : BufferUsage.STATIC_DRAW,
indexDatatype : IndexDatatype.UNSIGNED_SHORT
});
indexBuffer.vertexArrayDestroyable = false;
context.cache.billboardCollection_indexBufferInstanced = indexBuffer;
return indexBuffer;
}
function getVertexBufferInstanced(context) {
var vertexBuffer = context.cache.billboardCollection_vertexBufferInstanced;
if (defined(vertexBuffer)) {
return vertexBuffer;
}
vertexBuffer = Buffer.createVertexBuffer({
context : context,
typedArray : new Float32Array([0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0]),
usage : BufferUsage.STATIC_DRAW
});
vertexBuffer.vertexArrayDestroyable = false;
context.cache.billboardCollection_vertexBufferInstanced = vertexBuffer;
return vertexBuffer;
}
如上，大家可以想象一个矩形（Billboard），中间画一条对角线分成了两个相接的三角形，小学几何里面说过三角形的稳定性，因此，该矩形通过两个三角形确保了样式不变。我们先看看VertexBuffer，顶点数据为：[0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0]，也就是Billboard的四个顶点，顶点索引为[0, 1, 2, 0, 2, 3]，把四个点分成了两个三角形（0, 1, 2,）和（0, 2, 3）。这样，我们通过indexBuffer和vertexBuffer，构建了一个Billboard样式，并将它保存在context.cache下，分别是billboardCollection_indexBufferInstanced和billboardCollection_vertexBufferInstanced，作为一个全局的单例。
就好比百米决赛，每个运动员都在高速奔跑，而摄像机也需要实时调整位置，保持一个最佳角度捕捉运动员的动作。一个公告板的的样式确定了，但在不同的位置，角度以及公告报的大小，每个Billboard在不同的位置，这些属性都会不同。因此这些属性就是需要实例化的部分，并且这些属性值（Buffer）需要实时的更新。
createVAF(context, numberOfBillboards, buffersUsage, instanced) {
// 需要实例化的属性
var attributes = [
{
index : attributeLocations.positionHighAndScale,
componentsPerAttribute : 4,
componentDatatype : ComponentDatatype.FLOAT,
usage : buffersUsage[POSITION_INDEX]
},
{
index : attributeLocations.positionLowAndRotation,
componentsPerAttribute : 4,
componentDatatype : ComponentDatatype.FLOAT,
usage : buffersUsage[POSITION_INDEX]
},
// ……
{
index : attributeLocations.pixelOffsetScaleByDistance,
componentsPerAttribute : 4,
componentDatatype : ComponentDatatype.FLOAT,
usage : buffersUsage[PIXEL_OFFSET_SCALE_BY_DISTANCE_INDEX]
}];
// direction不需要实例化
if (instanced) {
attributes.push({
index : attributeLocations.direction,
componentsPerAttribute : 2,
componentDatatype : ComponentDatatype.FLOAT,
vertexBuffer : getVertexBufferInstanced(context)
});
}
// 计算需要实例化的个数
// 也就是Billboard的个数
var sizeInVertices = instanced ? numberOfBillboards : 4 * numberOfBillboards;
return new VertexArrayFacade(context, attributes, sizeInVertices, instanced);
}
createVAF创建了结构体attributeLocationsInstanced所需要的所有属性，也是渲染每一个Billboard实例时，在顶点着色器中需要的attribute属性，这里主要有三个关键点：（1）只有direction属性创建了vertexBuffer，而其他八个属性是空的，需要实时的更新属性值，也是需要实例化的属性；（2）确定了instanceCount，也就是sizeInVertices；（3）最终Billboard所有attribute属性（实例化和不需要实例化的direction）都交给了VertexArrayFacade。前两点都很明确，现在就看VertexArrayFacade到底干了什么。
还是先思考一下，attribute都已经准备好了，下来应该是CreateVertexArray的过程了，而这里有两处不同，第一，实例化所需要的八个属性并没有VertexBuffer，需要一个机制：（1）对所有实例更新这八个属性值（2）属性中有需要实例化的，需要在attribute中标识instanceDivisor属性为true，而direction则不需要实例化。因此不难理解，VertexArrayFacade就是BillboardCollection和VertexArray之间的一个过渡，用来解决上面的两个问题。
functionVertexArrayFacade(context, attributes, sizeInVertices, instanced) {
var attrs = VertexArrayFacade._verifyAttributes(attributes);
var length = attrs.length;
for (var i = 0; i < length; ++i) {
var attribute = attrs[i];
// 如果存在vertexBuffer，比如direction属性
// 则不需要实时更新属性值
// 放到precreatedAttributes，可以直接用
if (attribute.vertexBuffer) {
precreatedAttributes.push(attribute); continue;
}
// 没有vertexBuffer的
// 则放到attributesForUsage
// 后面对这些属性进行赋值
usage = attribute.usage;
attributesForUsage = attributesByUsage[usage];
if (!defined(attributesForUsage)) {
attributesForUsage = attributesByUsage[usage] = [];
}
attributesForUsage.push(attribute);
}
｝
如上对attribute根据是否需要实例化，进行了区分。然后在渲染时，在更新队列中更新数据：
BillboardCollection.prototype.update = function(frameState) {
if (billboardsLength > 0) {
// 创建Attribute属性
this._vaf = createVAF(context, billboardsLength, this._buffersUsage, this._instanced);
vafWriters = this._vaf.writers;
// 数据有更新时，需要重写实例化的属性值
for (var i = 0; i < billboardsLength; ++i) {
var billboard = this._billboards[i];
billboard._dirty = false;
writeBillboard(this, context, textureAtlasCoordinates, vafWriters, billboard);
}
// 创建实例化的VAO，这里使用同一个顶点索引，也就是用一个相同的样式
this._vaf.commit(getIndexBuffer(context));
}
}
这里，writeBillboard通过vafWriters方法，将实例化的属性值写入到arraybuffer中，这里就不详细介绍过程了。简单说就三个过程：创建，写，提交。 首先在VertexArrayFacade初始化中，最终会调用_resize，这里虽然并不知道实例化attribute属性的值，但所占内存的大小是明确的，所以会在内存中创建一个属性值均为0的arraybuffer。然后在createWriters中实现了写的方法，VertexArrayFacade通过闭包的方式绑定到writers属性中，BillboardCollection中对应：vafWriters = this._vaf.writers，实现属性值的写操作。最后，通过commit提交，创建VAO，将内存中的Buffer传递到显存中。
VertexArrayFacade.prototype.commit = function(indexBuffer){
for (i = 0, length = allBuffers.length; i < length; ++i) {
buffer = allBuffers[i];
// 创建VertexBuffer
// 将写到arraybuffer中的属性值绑定到显存中
recreateVA = commit(this, buffer) || recreateVA;
}
// 创建attribute，指定实例化属性
// instanceDivisor : instanced ? 1 : 0
VertexArrayFacade._appendAttributes(attributes, buffer, offset, this._instanced);
// 添加之前已经创建好的非实例化的attribute
attributes = attributes.concat(this._precreated);
// 创建VAO
va.push({
va : new VertexArray({
context : this._context,
attributes : attributes, indexBuffer : indexBuffer
}),
indicesCount : 1.5 * ((k !== (numberOfVertexArrays - 1)) ? (CesiumMath.SIXTY_FOUR_KILOBYTES - 1) : (this._size % (CesiumMath.SIXTY_FOUR_KILOBYTES - 1)))
});
}
如上，完成了BillboardCollection中VAO的创建。最后一步，就是顶点着色器中如何使用这些属性，这里主要看一个思路，看一下实例化和非实例化之间的区别，以及如何配合：
vec4 computePositionWindowCoordinates(vec4 positionEC, vec2 imageSize, float scale, vec2 direction, vec2 origin, vec2 translate, vec2 pixelOffset, vec3 alignedAxis, bool validAlignedAxis, float rotation, bool sizeInMeters)
{
vec2 halfSize = imageSize * scale * czm_resolutionScale;
// 通过direction，判断当前的顶点位于四个顶点中的哪一个
// 左上,左下，右下，右上？
// 所有实例的direction都是一致的，因此该属性不需要实例化 halfSize *= ((direction * 2.0) - 1.0); // 下面根据实例化的属性来计算该点的真实位置
……
}
总结
实例化是一个强大功能，但性能的提升往往需要跟数据紧密联系，需要有一个数据规范的前提，所以Cesium目前对实例化应用的地方并不多，但即使这样，Cesium也意识到必要性，即使WebGL1.0规范并不支持的情况下，也通过扩展的方式来支持。当然，最重要的是能够学习到Cesium对实例化的封装和应用，以及如何理解，哪些不同的attribute需要实例化。