Cesium源码剖析---Ambient Occlusion(环境光遮蔽)

　　Ambient Occlusion简称AO，中文没有太确定的叫法，一般译作环境光遮蔽。百度百科上对AO的解释是这样的：AO是来描绘物体和物体相交或靠近的时候遮挡周围漫反射光线的效果，可以解决或改善漏光、飘和阴影不实等问题，解决或改善场景中缝隙、褶皱与墙角、角线以及细小物体等的表现不清晰问题，综合改善细节尤其是暗部阴影，增强空间的层次感、真实感，同时加强和改善画面明暗对比，增强画面的艺术性。AO简单来说就是根据周围物体对光线的遮挡程度，改变明暗效果。AO具体理论原理在网上都可以找到，感兴趣的可以去查阅，此处只把Cesium中AO的实现过程作一下介绍。闲言少叙，直接上代码。

1. 开启AO及效果

　　在Cesium中开启AO效果非常简单，和之前讲的开启Silhouette效果类似，代码如下：

var ambientOcclusion = viewer.scene.postProcessStages.ambientOcclusion;
ambientOcclusion.enabled = true;
ambientOcclusion.uniforms.ambientOcclusionOnly = false;
ambientOcclusion.uniforms.intensity = 3;
ambientOcclusion.uniforms.bias = 0.1;
ambientOcclusion.uniforms.lengthCap = 0.03;
ambientOcclusion.uniforms.stepSize = 1;
ambientOcclusion.uniforms.blurStepSize = 0.86;

没有开启AO效果如下图一，开启AO效果如下图二，单纯的AO图如图三：

2. JS内部代码实现

　　在PostProcessStageLibrary类中添加AO功能的代码如下：

PostProcessStageLibrary.createAmbientOcclusionStage = function() {
        var generate = new PostProcessStage({
            name : 'czm_ambient_occlusion_generate',
            fragmentShader : AmbientOcclusionGenerate,
            uniforms : {
                intensity : 3.0,
                bias : 0.1,
                lengthCap : 0.26,
                stepSize : 1.95,
                frustumLength : 1000.0,
                randomTexture : undefined
            }
        });
        var blur = createBlur('czm_ambient_occlusion_blur');
        blur.uniforms.stepSize = 0.86;
        var generateAndBlur = new PostProcessStageComposite({
            name : 'czm_ambient_occlusion_generate_blur',
            stages : [generate, blur]
        });

        var ambientOcclusionModulate = new PostProcessStage({
            name : 'czm_ambient_occlusion_composite',
            fragmentShader : AmbientOcclusionModulate,
            uniforms : {
                ambientOcclusionOnly : false,
                ambientOcclusionTexture : generateAndBlur.name
            }
        });

        var uniforms = {};
        defineProperties(uniforms, {
            intensity : {
                get : function() {
                    return generate.uniforms.intensity;
                },
                set : function(value) {
                    generate.uniforms.intensity = value;
                }
            },
            bias : {
                get : function() {
                    return generate.uniforms.bias;
                },
                set : function(value) {
                    generate.uniforms.bias = value;
                }
            },
            lengthCap : {
                get : function() {
                    return generate.uniforms.lengthCap;
                },
                set : function(value) {
                    generate.uniforms.lengthCap = value;
                }
            },
            stepSize : {
                get : function() {
                    return generate.uniforms.stepSize;
                },
                set : function(value) {
                    generate.uniforms.stepSize = value;
                }
            },
            frustumLength : {
                get : function() {
                    return generate.uniforms.frustumLength;
                },
                set : function(value) {
                    generate.uniforms.frustumLength = value;
                }
            },
            randomTexture : {
                get : function() {
                    return generate.uniforms.randomTexture;
                },
                set : function(value) {
                    generate.uniforms.randomTexture = value;
                }
            },
            delta : {
                get : function() {
                    return blur.uniforms.delta;
                },
                set : function(value) {
                    blur.uniforms.delta = value;
                }
            },
            sigma : {
                get : function() {
                    return blur.uniforms.sigma;
                },
                set : function(value) {
                    blur.uniforms.sigma = value;
                }
            },
            blurStepSize : {
                get : function() {
                    return blur.uniforms.stepSize;
                },
                set : function(value) {
                    blur.uniforms.stepSize = value;
                }
            },
            ambientOcclusionOnly : {
                get : function() {
                    return ambientOcclusionModulate.uniforms.ambientOcclusionOnly;
                },
                set : function(value) {
                    ambientOcclusionModulate.uniforms.ambientOcclusionOnly = value;
                }
            }
        });

        return new PostProcessStageComposite({
            name : 'czm_ambient_occlusion',
            stages : [generateAndBlur, ambientOcclusionModulate],
            inputPreviousStageTexture : false,
            uniforms : uniforms
        });
    };

 　　从上面的代码可以看出，代码创建了generate、blur、ambientOcclusionModulate三个处理阶段。generate负责计算屏幕上每个像素的遮挡值，并生成一张灰度图；blur是对generate生成的灰度图就行模糊平滑处理；ambientOcclusionModulate负责根据灰度图对原始场景颜色就行调整。下面分别对这三个阶段进行详细介绍。

2.1 generate代码实现

　　计算像素遮蔽因子的过程可以概括为：在像素周围，计算采样点对中心像素的遮蔽值，然后对遮蔽值进行累加，最后得到中心像素的遮蔽值。具体实现可以分为两部分：

　　1：在视空间下计算像素代表面片的法向量

　　将中心像素以及上下左右的四个像素转换到视空间下，就得到了这五个像素在视空间下的三维位置，记为posInCamera、posInCameraUp、posInCameraDown、posInCameraLeft、posInCameraRight。通过上下左右四个点与中心点的差值得到up、down、left、right四个向量，分别从上下向量、左右向量中选取模较小的向量，记为DX、DY。最后通过normalize(cross(DY, DX))得到中心像素的法向量。整个过程如下图所示：

　　

　　glsl对应的代码如下：

vec4 clipToEye(vec2 uv, float depth)
{
    vec2 xy = vec2((uv.x * 2.0 - 1.0), ((1.0 - uv.y) * 2.0 - 1.0));
    vec4 posEC = czm_inverseProjection * vec4(xy, depth, 1.0);
    posEC = posEC / posEC.w;
    return posEC;
}

//Reconstruct Normal Without Edge Removation
vec3 getNormalXEdge(vec3 posInCamera, float depthU, float depthD, float depthL, float depthR, vec2 pixelSize)
{
    vec4 posInCameraUp = clipToEye(v_textureCoordinates - vec2(0.0, pixelSize.y), depthU);
    vec4 posInCameraDown = clipToEye(v_textureCoordinates + vec2(0.0, pixelSize.y), depthD);
    vec4 posInCameraLeft = clipToEye(v_textureCoordinates - vec2(pixelSize.x, 0.0), depthL);
    vec4 posInCameraRight = clipToEye(v_textureCoordinates + vec2(pixelSize.x, 0.0), depthR);

    vec3 up = posInCamera.xyz - posInCameraUp.xyz;
    vec3 down = posInCameraDown.xyz - posInCamera.xyz;
    vec3 left = posInCamera.xyz - posInCameraLeft.xyz;
    vec3 right = posInCameraRight.xyz - posInCamera.xyz;

    vec3 DX = length(left) < length(right) ? left : right;
    vec3 DY = length(up) < length(down) ? up : down;

    return normalize(cross(DY, DX));
}

void main(void)
{
    float depth = czm_readDepth(depthTexture, v_textureCoordinates);
    vec4 posInCamera = clipToEye(v_textureCoordinates, depth);

    if (posInCamera.z > frustumLength)
    {
        gl_FragColor = vec4(1.0);
        return;
    }

    vec2 pixelSize = 1.0 / czm_viewport.zw;
    float depthU = czm_readDepth(depthTexture, v_textureCoordinates- vec2(0.0, pixelSize.y));
    float depthD = czm_readDepth(depthTexture, v_textureCoordinates+ vec2(0.0, pixelSize.y));
    float depthL = czm_readDepth(depthTexture, v_textureCoordinates- vec2(pixelSize.x, 0.0));
    float depthR = czm_readDepth(depthTexture, v_textureCoordinates+ vec2(pixelSize.x, 0.0));
    vec3 normalInCamera = getNormalXEdge(posInCamera.xyz, depthU, depthD, depthL, depthR, pixelSize);
}

 　　2: 计算周围空间对面片的遮蔽值

　　在上一步得到了视空间下的面片法向量，接下来就是计算周围空间对面片的遮挡值。过程可以概括为以下几个步骤：

　　（1）选取要参与遮蔽值计算的空间。周围空间范围的选择是通过在像素坐标系下以中心像素为圆心，以设定值为半径，得到一个圆，但并不是要取圆中的所有像素，因为这样会带来很大的计算量。取而代之的是在四个方向上进行采样，方向值引入一个随机扰动，可以避免出现特别规则的阴影效果。

　　（2）在选取了方向后，就在该方向上根据设定的采样步长进行采样，得到新的像素，将该像素转换到视空间下，记为stepPosInCamera。

　　（3）通过stepPosInCamera与posInCamera作差值得到向量diffVec，向量的长度len代表了该点与中心点的距离。通过lengthCap这个值对采样的空间距离进行限制，超出该值的采样点将作废。

　　（4）通过向量与法向量的点乘，得到值dotVal。dotVal实际表示了两个向量之间夹角的大小，该值越大，表示与法向量夹角越小，遮蔽值越大。

　　（5）通过len的长度计算该位置遮蔽值的权重，得到一个遮蔽值localAO。

　　（6）在同一个方向上选取一个最大的localAO值作为该方向上的ao值，然后将四个方向上的ao值相加，并除以4，得到新的ao。

　　（7）根据给定的intensity参数对ao值就行幂次变换，得到最终的ao值。

　　选取采样方向的效果如下图所示：

　　对应的glsl代码如下:

float ao = 0.0;
    vec2 sampleDirection = vec2(1.0, 0.0);
    float gapAngle = 90.0 * czm_radiansPerDegree;

    // RandomNoise
    float randomVal = texture2D(randomTexture, v_textureCoordinates).x;

    float inverseViewportWidth = 1.0 / czm_viewport.z;
    float inverseViewportHeight = 1.0 / czm_viewport.w;

    //Loop for each direction
    for (int i = 0; i < 4; i++)
    {
        float newGapAngle = gapAngle * (float(i) + randomVal);
        float cosVal = cos(newGapAngle);
        float sinVal = sin(newGapAngle);

        //Rotate Sampling Direction
        vec2 rotatedSampleDirection = vec2(cosVal * sampleDirection.x - sinVal * sampleDirection.y, sinVal * sampleDirection.x + cosVal * sampleDirection.y);
        float localAO = 0.0;
        float localStepSize = stepSize;

        //Loop for each step
        for (int j = 0; j < 6; j++)
        {
            vec2 directionWithStep = vec2(rotatedSampleDirection.x * localStepSize * inverseViewportWidth, rotatedSampleDirection.y * localStepSize * inverseViewportHeight);
            vec2 newCoords = directionWithStep + v_textureCoordinates;

            //Exception Handling
            if(newCoords.x > 1.0 || newCoords.y > 1.0 || newCoords.x < 0.0 || newCoords.y < 0.0)
            {
                break;
            }

            float stepDepthInfo = czm_readDepth(depthTexture, newCoords);
            vec4 stepPosInCamera = clipToEye(newCoords, stepDepthInfo);
            vec3 diffVec = stepPosInCamera.xyz - posInCamera.xyz;
            float len = length(diffVec);

            if (len > lengthCap)
            {
                break;
            }

            float dotVal = clamp(dot(normalInCamera, normalize(diffVec)), 0.0, 1.0 );
            float weight = len / lengthCap;
            weight = 1.0 - weight * weight;

            if (dotVal < bias)
            {
                dotVal = 0.0;
            }

            localAO = max(localAO, dotVal * weight);
            localStepSize += stepSize;
        }
        ao += localAO;
    }

    ao /= 4.0;
    ao = 1.0 - clamp(ao, 0.0, 1.0);
    ao = pow(ao, intensity);
    gl_FragColor = vec4(vec3(ao), 1.0);

 2.2 blur代码实现

　　对上一步得到的遮蔽值图需要进行平滑，采用的是高斯平滑算法。实现思路就是在水平方向和垂直方向上根据权重叠加相邻像素值，算法讲解可以查询https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch40.html。glsl实现代码如下：

#define SAMPLES 8

uniform float delta;
uniform float sigma;
uniform float direction; // 0.0 for x direction, 1.0 for y direction

uniform sampler2D colorTexture;

#ifdef USE_STEP_SIZE
uniform float stepSize;
#else
uniform vec2 step;
#endif

varying vec2 v_textureCoordinates;
void main()
{
    vec2 st = v_textureCoordinates;
    vec2 dir = vec2(1.0 - direction, direction);

#ifdef USE_STEP_SIZE
    vec2 step = vec2(stepSize / czm_viewport.zw);
#else
    vec2 step = step;
#endif

    vec3 g;
    g.x = 1.0 / (sqrt(czm_twoPi) * sigma);
    g.y = exp((-0.5 * delta * delta) / (sigma * sigma));
    g.z = g.y * g.y;

    vec4 result = texture2D(colorTexture, st) * g.x;
    for (int i = 1; i < SAMPLES; ++i)
    {
        g.xy *= g.yz;

        vec2 offset = float(i) * dir * step;
        result += texture2D(colorTexture, st - offset) * g.x;
        result += texture2D(colorTexture, st + offset) * g.x;
    }
    gl_FragColor = result;
}

 2.3 ambientOcclusionModulate代码实现

　　ambientOcclusionModulate非常简单，就是根据ao值对原始场景的图片就行明暗处理，产生阴影效果。glsl代码如下：

uniform sampler2D colorTexture;
uniform sampler2D ambientOcclusionTexture;
uniform bool ambientOcclusionOnly;
varying vec2 v_textureCoordinates;

void main(void)
{
    vec3 color = texture2D(colorTexture, v_textureCoordinates).rgb;
    vec3 ao = texture2D(ambientOcclusionTexture, v_textureCoordinates).rgb;
    gl_FragColor.rgb = ambientOcclusionOnly ? ao : ao * color;
}

 3. 总结

　　Cesium中AO的实现方式属于HBAO(Horizon-based Ambient Occlusion)，相对于传统的SSAO，HBAO对阴影的处理效果更好，使场景更加真实。终于把HDAO的实现原理彻底搞明白了，一个字：爽，哈哈哈！！！

PS：Cesium交流可以扫码加群，期待你的加入！！！