Cesium动态纹理（一）：区域放大扫描

转载于：https://www.yueyanshaosun.cn/ysCesium/views/31_ysc_addScan1.html

// 区域放大扫描初始化方法
function initData(){
	// 防止移动、放大缩小会视觉偏移depthTestAgainstTerrain 
	// 设置该属性为true之后，标绘将位于地形的顶部；如果设为false（默认值），那么标绘将位于平面上。缺陷：开启该属性有可能在切换图层时会引发标绘消失的bug。
	viewer.scene.globe.depthTestAgainstTerrain = true; 
	// 定义经纬度
	var longitude = "109.8"; 
	var latitude = "19.997";
	// 圆形扩大扫描圈中心点（根据经纬度坐标得到三维空间坐标）
	var cartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(longitude), Cesium.Math.toRadians(latitude), 0); 
	addCircleScanPostStage(viewer, cartographicCenter, 800, new Cesium.Color(0,1.0,0,1), 1000);
}

/**
 * 圆形扩大扫描圈
 * @param {Object} viewer
 * @param {Object} cartographicCenter 圆形扩大扫描圈中心点
 * @param {Object} maxRadius 半径
 * @param {Object} scanColor 颜色
 * @param {Object} duration 速度
 */
function addCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) {
	/*// 彩色纹理
	uniform sampler2D colorTexture;
	// 深度纹理
	uniform sampler2D depthTexture;
	// 纹理坐标
	varying vec2 v_textureCoordinates;
	// 扫描中心
	uniform vec4 u_scanCenterEC;
	// 扫描平面法线EC
	uniform vec3 u_scanPlaneNormalEC;
	// 半径
	uniform float u_radius;
	// 扫描的颜色
	uniform vec4 u_scanColor;
	// 视角 = (纹理坐标, 深度)
	vec4 toEye( in vec2 uv, infloat depth) {
	    vec2 xy = vec2((uv.x * 2.0 - 1.0), (uv.y * 2.0 - 1.0));
	    vec4 posInCamera = czm_inverseProjection * vec4(xy, depth, 1.0);
	    posInCamera = posInCamera / posInCamera.w;
	    return posInCamera;
	}
	// 平面点投影 = (扫描平面法线,扫描中心,视角)
	vec3 pointProjectOnPlane( in vec3 planeNormal, invec3 planeOrigin, invec3 point) {
	    vec3 v01 = point - planeOrigin;
	    float d = dot(planeNormal, v01);
	    return (point - planeNormal * d);
	}
	// 深度 = (釉色)
	float getDepth( in vec4 depth) {
	    float z_window = czm_unpackDepth(depth);
	    z_window = czm_reverseLogDepth(z_window);
	    float n_range = czm_depthRange.near;
	    float f_range = czm_depthRange.far;
	    return (2.0 * z_window - n_range - f_range) / (f_range - n_range);
	}
	void main() {
		// 得到釉色 = 结构二维(彩色纹理, 纹理坐标)
	    gl_FragColor = texture2D(colorTexture, v_textureCoordinates);
		// 深度 = (釉色 = 结构二维(深度纹理, 纹理坐标))
	    float depth = getDepth(texture2D(depthTexture, v_textureCoordinates));
		// 视角 = (纹理坐标, 深度)
	    vec4 viewPos = toEye(v_textureCoordinates, depth);
		// 平面点投影 = (扫描平面法线,扫描中心,视角)
	    vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);
	    // 差值
		float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);
		// 差值小于半径的时候，修改扫描圈的颜色
	    if (dis < u_radius) {
	        float f = 1.0 - abs(u_radius - dis) / u_radius;
	        f = pow(f, 4.0);
	        gl_FragColor = mix(gl_FragColor, u_scanColor, f);
	    }
	}*/
	
	// 扫描部分材质
    var ScanSegmentShader =
        "uniform sampler2D colorTexture;\n" +
        "uniform sampler2D depthTexture;\n" +
        "varying vec2 v_textureCoordinates;\n" +
        "uniform vec4 u_scanCenterEC;\n" +
        "uniform vec3 u_scanPlaneNormalEC;\n" +
        "uniform float u_radius;\n" +
        "uniform vec4 u_scanColor;\n" +
        "vec4 toEye(in vec2 uv, in float depth)\n" +
        " {\n" +
        " vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +
        " vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +
        " posInCamera =posInCamera / posInCamera.w;\n" +
        " return posInCamera;\n" +
        " }\n" +
        "vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +
        "{\n" +
        "vec3 v01 = point -planeOrigin;\n" +
        "float d = dot(planeNormal, v01) ;\n" +
        "return (point - planeNormal * d);\n" +
        "}\n" +
        "float getDepth(in vec4 depth)\n" +
        "{\n" +
        "float z_window = czm_unpackDepth(depth);\n" +
        "z_window = czm_reverseLogDepth(z_window);\n" +
        "float n_range = czm_depthRange.near;\n" +
        "float f_range = czm_depthRange.far;\n" +
        "return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +
        "}\n" +
        "void main()\n" +
        "{\n" +
        "gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" +
        "float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +
        "vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +
        "vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +
        "float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +
        "if(dis < u_radius)\n" +
        "{\n" +
        "float f = 1.0 -abs(u_radius - dis) / u_radius;\n" +
        "f = pow(f, 1.0);\n" +
        "gl_FragColor = mix(gl_FragColor, u_scanColor, f);\n" +
        "}\n" +
        "}\n";
    var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);
    var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);
    var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);
    var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);
    var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);
    var _time = (new Date()).getTime();
    var _scratchCartesian4Center = new Cesium.Cartesian4();
    var _scratchCartesian4Center1 = new Cesium.Cartesian4();
    var _scratchCartesian3Normal = new Cesium.Cartesian3();
    var ScanPostStage = new Cesium.PostProcessStage({
        fragmentShader: ScanSegmentShader,
        uniforms: {
            u_scanCenterEC: function () {
                return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
            },
            u_scanPlaneNormalEC: function () {
                var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
                var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
                _scratchCartesian3Normal.x = temp1.x - temp.x;
                _scratchCartesian3Normal.y = temp1.y - temp.y;
                _scratchCartesian3Normal.z = temp1.z - temp.z;
                Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
                return _scratchCartesian3Normal;

            },
            u_radius: function () {
                return maxRadius * (((new Date()).getTime() - _time) % duration) / duration;
            },
            u_scanColor: scanColor
        }
    });
    viewer.scene.postProcessStages.add(ScanPostStage);
    return (ScanPostStage);
}