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渲染中很全面，很专业的水准，而且这一套规范是以开源的方式来贡献出来，这也是难能可贵的。仿佛一枚绚丽的明珠放在了人类象牙塔尖，人人都有拥有它的机会，而且没有人可以据为己有。