Cesium原理篇：GroundPrimitive
今天来看看GroundPrimitive，选择GroundPrimitive有三个目的：1 了解GroundPrimitive和Primitive的区别和关系 2 createGeometry的特殊处理 3 如何通过阴影体的方式实现贴地效果。
GroundPrimitive.prototype.update
可以认为GroundPrimitive是Primitive的扩展，通过Update我们可以很好的理解这个过程：
GroundPrimitive.prototype.update = function(frameState) { if (!defined(this._primitive)) { // Key 1 setMinMaxTerrainHeights(this, rectangle, frameState.mapProjection.ellipsoid); // Key 2 for (i = 0; i < length; ++i) { instance = instances[i]; geometry = instance.geometry; instanceType = geometry.constructor; groundInstances[i] = new GeometryInstance({ geometry : instanceType.createShadowVolume(geometry, getComputeMinimumHeightFunction(this), getComputeMaximumHeightFunction(this)), attributes : instance.attributes, id : instance.id, pickPrimitive : this }); } // Key 3 var that = this; primitiveOptions._createBoundingVolumeFunction = function(frameState, geometry) { createBoundingVolume(that, frameState, geometry); }; primitiveOptions._createRenderStatesFunction = function(primitive, context, appearance, twoPasses) { createRenderStates(that, context); }; primitiveOptions._createShaderProgramFunction = function(primitive, frameState, appearance) { createShaderProgram(that, frameState); }; primitiveOptions._createCommandsFunction = function(primitive, appearance, material, translucent, twoPasses, colorCommands, pickCommands) { createCommands(that, undefined, undefined, true, false, colorCommands, pickCommands); }; primitiveOptions._updateAndQueueCommandsFunction = function(primitive, frameState, colorCommands, pickCommands, modelMatrix, cull, debugShowBoundingVolume, twoPasses) { updateAndQueueCommands(that, frameState, colorCommands, pickCommands, modelMatrix, cull, debugShowBoundingVolume, twoPasses); }; this._primitive = new Primitive(primitiveOptions); } // Key 4 this._primitive.update(frameState); }
Key 1是计算该Primitive所在GlobeTile对应地形的最高点和最低点，这里只是一个粗略的计算，假如该Primitive的范围覆盖了多个Tile则取最后一个Tile高度的最大最小值，另外Cesium有一个json文件，里面保存了全球前6层的地球切片，里面的信息是该Tile对应高度的极值。因为GroundPrimitive对应的几何对象要贴地，所以这个信息会在构建geometry的时候用到。
Key 2是构建适合的Geometry，因为需要实现贴地效果，所以该geometry做了一个类似拉伸的效果，从一个面拉伸为一个体，这也是为什么要获取该Entity对应地形的极值，因为要根据极值拉伸到对应的高度。这个后面详细介绍。
key 3是构建了primitiveOptions，重载了里面的Render模块实现方式，Key2在数据层面上为贴地做准备，那Key3则在渲染逻辑上根据对应的geometry实现阴影体，从渲染角度实现了贴地
Key4，一切准备就绪，最后还是构造的Primitive，通过update完成最后的执行过程，这个过程就和之前的Primitive相同。
可见，GroundPrimitive在渲染的流程上和Primitive并无本质的不同，经过Key1~3的步骤，构造出可以贴地的Primitive，最终还是以Primitive的方式来执行渲染。
createShadowVolume
什么叫阴影体，一图以蔽之：
图1
图2
我想到了大话西游里面，至尊宝在变成齐天大圣的时候跟观音说的那句话“以前我看事物，是用肉眼去看。但在我死去那一刹那，我开始用心眼去看这个世界”。图1是我们看到的效果，而图2才是这个geometry真实的样子。希望你也能看得前所未有的那么清楚。而在实现中这个过程是先有图2那样的阴影体，再有图1的贴地效果，先有真家伙在做视觉上的假效果。我们还是以Rectangle作为例子来说一下这个过程。这个最简单，其他的在思路上大同小异，这些几何算法就不深究了，太专业了，所以只能望而却步。
RectangleGeometryLibrary.computeOptions
首先就是做好准备工作。对于Rectangle，默认每个网格的大小是PI/180的弧度，根据其高宽来计算这个矩形需要多少个网格，每个网格大概的高宽，最终返回一个json对象，这就是该Rectangle的几何信息，下面计算网格的时候就是以此为依据。
constructRectangle
好比你面对一堵墙，根据之前computePosition的参数，你采购了对应了一批瓷砖，下面的任务就是把瓷砖贴到墙上去。constructRectangle就是贴瓷砖的这个过程。
function constructRectangle(options) { // Key 1 for (var row = 0; row < height; ++row) { for (var col = 0; col < width; ++col) { RectangleGeometryLibrary.computePosition(options, row, col, position, st); positions[posIndex++] = position.x; positions[posIndex++] = position.y; positions[posIndex++] = position.z; } } // Key 2 var geo = calculateAttributes(positions, vertexFormat, ellipsoid, options.tangentRotationMatrix); // Key 3 var indicesSize = 6 * (width - 1) * (height - 1); var indices = IndexDatatype.createTypedArray(size, indicesSize); var index = 0; var indicesIndex = 0; for (var i = 0; i < height - 1; ++i) { for (var j = 0; j < width - 1; ++j) { var upperLeft = index; var lowerLeft = upperLeft + width; var lowerRight = lowerLeft + 1; var upperRight = upperLeft + 1; indices[indicesIndex++] = upperLeft; indices[indicesIndex++] = lowerLeft; indices[indicesIndex++] = upperRight; indices[indicesIndex++] = upperRight; indices[indicesIndex++] = lowerLeft; indices[indicesIndex++] = lowerRight; ++index; } ++index; } geo.indices = indices; return geo; }
position就是每块瓷砖的左上角位置，也就是vbo中对应的顶点数据，同时在calculateAttributes会根据需要创建法线，切线等数据；每一个瓷砖都可以通过两个三角形构成，就是一条对角线的工作，这就是indices的事情，对应vbo中的顶点索引：
constructExtrudedRectangle
假设我们生活在一个小镇，在这个小镇里面，所有人都生活在二维坐标系下，也就是点线面的几何形状，其实这个时候我们眼中的面也不过是线。突然有一天，一个球体来到这个小镇。在这个小镇居民的眼中，只能看到这个球的一个切面而已，换句话说，即使真的有一个三维的物体来到这个小镇，在小镇居民的眼里，他们也和二维物体一样并无差别（很多人由于自身能力的限制导致了无法突破自身的觉悟）。这个球不停的上下浮动，在小镇居民的眼里，会发现这条线的长度不停的变化，这时候有一个居民突然开窍了，于是骑在了这个球的身上，看到了一个全新的世界---三维的世界。
这个故事说的比较仓促，里面蕴涵了一个降维的思想，反其道而行之也可以做到二维升级到三维的过程。这也是constructExtrudedRectangle的思路。
function constructExtrudedRectangle(options) { var topBottomGeo = constructRectangle(options); // 沿椭球切线上移到最高点 var topPositions = PolygonPipeline.scaleToGeodeticHeight(topBottomGeo.attributes.position.values, maxHeight, ellipsoid, false); var length = topPositions.length; var newLength = length*2; var positions = new Float64Array(newLength); positions.set(topPositions); // 沿椭球切线上移到最低点 var bottomPositions = PolygonPipeline.scaleToGeodeticHeight(topBottomGeo.attributes.position.values, minHeight, ellipsoid); positions.set(bottomPositions, length); topBottomGeo.attributes.position.values = positions; for (i = 0; i < indicesLength; i += 3) { newIndices[i + indicesLength] = indices[i + 2] + posLength; newIndices[i + 1 + indicesLength] = indices[i + 1] + posLength; newIndices[i + 2 + indicesLength] = indices[i] + posLength; } // 立方体的四个围墙 for (i = 0; i < area; i+=width) { wallPositions = addWallPositions(wallPositions, posIndex, i*3, topPositions, bottomPositions); posIndex += 6; if (vertexFormat.st) { wallTextures = addWallTextureCoordinates(wallTextures, stIndex, i*2, topSt); stIndex += 4; } } for (i = area-width; i < area; i++) { } for (i = area-1; i > 0; i-=width) { } for (i = width-1; i >= 0; i--) { } }
代码注释如上，首先，不难理解矩形拉伸的结果是立方体。我们先把该Rectangle上移到最高点，这样有了一个顶，然后下移到最低点，这样就有了一个低，这里对低的indice的顺序求逆，用来区分正反面。这里，这个上移和下移的方向则是沿着地球椭球体的法线方向，由scaleToGeodeticHeight方法来实现。有了上下两个面，然后下来四个for循环就是构建这个围墙。
围墙构建的思路大致这样，如上123是顶面的一个边，abc则是地面对应的边，最终这面墙的顺序为：(1 a 2 b 3 c)组成其顶点数据，然后对应的构建其顶点索引，如绿色的线，最终构建完这面墙，同理构建其他三面围墙。这样实现了面拉伸为体。
Shadow Volume Rendering
上图取自GPUgems，你会有一个详细的了解。版本一：大致上就是通过模版缓冲区先渲染一遍，这样通过正反面的区分，最终获取该立方体对应的阴影部分。换人类的语言来重新描述一下：版本二：因为我们的立方体的顶面和低面都是取的当前Tile中的极值，所以该立方体肯定是和地球完全相交的，就好比齐天大圣把他的如意金箍棒插到地上，贴地的结果就是这个棍子和地面相交的部分。再看看上图，是否就能理解了。
通过版本二的描述，我们理解了这个思路，下面解释一下版本一，我们可以明白计算机，WebGL的方式来理解这个过程。
如上图，是一个立方体，下面正好贴地，上面黄色部分是一个光源，照射该物体后，我们能够看到的区域在模版缓冲区中+1，我们用蓝色的标识：
接着，面对我们的视线它的背面区域,我们对这个区域-1，用棕色来标记，如下图：
we got it!两个区域合并在一起，相同的区域，在缓冲期里面中和掉，值为0，而剩下的不为零（为1）的区域就是阴影部分，也是该立方体和地面相交的部分。因此，在阴影体渲染中，第一，前提是地球部分要优先绘制，这样就有深度信息，接着对阴影体渲染两次，一次是在模版缓冲区中，标识出阴影区域，然后在渲染到纹理或屏幕，这时进行过滤，只对模版缓冲区不为零（或等于1）的部分渲染，完成阴影体渲染。
如下图，第一个stencilPreloadRenderState是渲染到模版缓冲区中，可以看到正面为increase，反面为decrease；第二个colorRenderState是渲染到纹理，注意渲染条件为not equal，对应的mask为~0,这里，改为0x1更准确一下，效果也是一样的:
var stencilPreloadRenderState = { colorMask : { red : false, green : false, blue : false, alpha : false }, stencilTest : { enabled : true, frontFunction : StencilFunction.ALWAYS, frontOperation : { fail : StencilOperation.KEEP, zFail : StencilOperation.DECREMENT_WRAP, zPass : StencilOperation.DECREMENT_WRAP }, backFunction : StencilFunction.ALWAYS, backOperation : { fail : StencilOperation.KEEP, zFail : StencilOperation.INCREMENT_WRAP, zPass : StencilOperation.INCREMENT_WRAP }, reference : 0, mask : ~0 }, depthTest : { enabled : false }, depthMask : false }; var colorRenderState = { stencilTest : { enabled : true, frontFunction : StencilFunction.NOT_EQUAL, frontOperation : { fail : StencilOperation.KEEP, zFail : StencilOperation.KEEP, zPass : StencilOperation.DECREMENT_WRAP }, backFunction : StencilFunction.NOT_EQUAL, backOperation : { fail : StencilOperation.KEEP, zFail : StencilOperation.KEEP, zPass : StencilOperation.DECREMENT_WRAP }, reference : 0, mask : ~0 }, depthTest : { enabled : false }, depthMask : false, blending : BlendingState.ALPHA_BLEND };
渲染的过程在GroundPrimitive中createColorCommands中，可以看到对一个Primitive也会渲染两次，先渲染模版缓冲期，在渲染color，两个的顺序不能反。这个就是构建两个DrawCommand的过程，基于以前的章节，这个应该不难理解，这里就不再赘述了。
总结
至此，我们了解了Cesium在Worker线程中createGeometry的大致流程，也通过Rectangle为例，看到了构建阴影体的算法思路，最后也了解了通过模版缓冲区实现渲染阴影体的过程。这一个完成的流程，可以很好的体现Cesium在算法和OpenGL渲染中很全面，很专业的水准，而且这一套规范是以开源的方式来贡献出来，这也是难能可贵的。仿佛一枚绚丽的明珠放在了人类象牙塔尖，人人都有拥有它的机会，而且没有人可以据为己有。
