基于Cesium实现逼真的水特效
Cesium 自带有水特效材质，实例代码如下：
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(
-180.0,
-90.0,
180.0,
90.0
),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
}),
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
}),
show: true
})
);
primitive.appearance.material = new Cesium.Material({
fabric: {
type: "Water",
uniforms: {
specularMap: "../images/earthspec1k.jpg",
normalMap: Cesium.buildModuleUrl(
"Assets/Textures/waterNormals.jpg"
),
frequency: 10000.0,
animationSpeed: 0.01,
amplitude: 1.0,
},
},
});
说明：
specularMap: 着色器源码：float specularMapValue = texture2D(specularMap, materialInput.st).r;用于判断当前区域是否为水域。
normalMap：水波动的法线纹理贴图
frequency：波的数量
animationSpeed：水震动的速度
amplitude：振幅大小
使用发现自带的水特效效果不是特别好，于是简单改改，将水透明化，代码如下：
fragmentShaderSource: 'varying vec3 v_positionMC;\n' +
'varying vec3 v_positionEC;\n' +
'varying vec2 v_st;\n' +
'void main()\n' +
'{\n' +
'czm_materialInput materialInput;\n' +
'vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));\n' +
'#ifdef FACE_FORWARD\n' +
'normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);\n' +
'#endif\n' +
'materialInput.s = v_st.s;\n' +
'materialInput.st = v_st;\n' +
'materialInput.str = vec3(v_st, 0.0);\n' +
'materialInput.normalEC = normalEC;\n' +
'materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);\n' +
'vec3 positionToEyeEC = -v_positionEC;\n' +
'materialInput.positionToEyeEC = positionToEyeEC;\n' +
'czm_material material = czm_getMaterial(materialInput);\n' +
'#ifdef FLAT\n' +
'gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);\n' +
'#else\n' +
'gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);\n' +
'gl_FragColor.a=0.85;\n' +
'#endif\n' +
'}\n'
结合倾斜摄影数据，改改水的相关参数也还凑合，可以看。但是你想要的水面倒影，水折射肯定是没有的。
下面我们可以看看three.js的水，看着挺清澈透明的，现实生活中也就生活用水有这个效果。但几乎有水的折射和反射效果了。
这里借鉴一下three.js的水特效代码：
融入到Cesium当中效果勉强可以看了，效果图如下：
图1
图2
图一和图二是同一份数据，，图一的水折射用的是影像图，图二的水折射是在水面几何数据下贴了石块纹理图，其实实际上的水是透明无色
转自：https://www.cnblogs.com/wanghui2011/articles/13100925.html
评论
vs =
'attribute vec3 position;' +
'attribute vec2 st;' +
'uniform mat4 u_modelViewMatrix;' +
'uniform mat4 u_invWorldViewMatrix;' +
//'uniform vec2 u_texCoordOffset;' +
//'uniform vec2 u_texCoordScale;' +
//'uniform float u_frameTime;' +
'uniform int u_clampToGroud;' +
'uniform vec3 u_camPos;' +
'uniform vec3 u_scale;' +
//'varying vec3 eyeDir;' + 'varying vec3 vToEye;' + //'varying vec2 texCoord;' + 'varying vec2 vUv;' + //'varying float myTime;' + //'varying vec4 projectionCoord;' + 'varying vec4 vCoord;' + 'void main(void)' + '{' + //gl_Position = ftransform(); 'vec4 positionW = u_modelViewMatrix * vec4(position.xyz, 1.0);' + 'vec4 eyep = czm_modelView * positionW;' + 'gl_Position = czm_projection * eyep; ' + 'if (u_clampToGroud == 1)' + '{' + //'eyeDir = (u_camPos - position.xyz) * u_scale;' +vToEye 'vToEye = (u_camPos - position.xyz) * u_scale;' + '} else {' + 'vec4 pos = u_modelViewMatrix * vec4(position.xyz,1.0);' + //'eyeDir = vec3(u_invWorldViewMatrix*vec4(pos.xyz,0.0));' + 'vToEye = vec3(u_invWorldViewMatrix*vec4(pos.xyz,0.0));' + //'projectionCoord = gl_Position;' + 'vCoord = gl_Position;' + '}' + //'texCoord = (st+u_texCoordOffset)*u_texCoordScale;' + //'vUv = (st+u_texCoordOffset)*u_texCoordScale;' + 'vUv = st;' + //'myTime = 0.01 * u_frameTime;' + '}'; var fs = [ 'uniform sampler2D tReflectionMap;', 'uniform sampler2D tRefractionMap;', 'uniform sampler2D tNormalMap0;', 'uniform sampler2D tNormalMap1;', 'uniform sampler2D tFlowMap;', 'uniform vec3 color;', 'uniform float reflectivity;', 'uniform vec4 config;', 'varying vec4 vCoord;', 'varying vec2 vUv;', 'varying vec3 vToEye;', 'void main() {', ' float flowMapOffset0 = config.x;', ' float flowMapOffset1 = config.y;', ' float halfCycle = config.z;', ' float scale = config.w;', ' vec3 toEye = normalize( vToEye );', // determine flow direction ' vec2 flow;', //' #ifdef USE_FLOWMAP', //' flow = texture2D( tFlowMap, vUv ).rg * 2.0 - 1.0;', ' flow = texture2D( tFlowMap, vUv ).rg;', //' #else', //' flow = flowDirection;', //' #endif', //' flow.x *= - 1.0;', // sample normal maps (distort uvs with flowdata) ' vec4 normalColor0 = texture2D( tNormalMap0, ( vUv * scale ) + flow * flowMapOffset0 );', ' vec4 normalColor1 = texture2D( tNormalMap1, ( vUv * scale ) + flow * flowMapOffset1 );', ' float flowLerp = abs( halfCycle - flowMapOffset0 ) / halfCycle;', ' vec4 normalColor = mix( normalColor0, normalColor1, flowLerp );', ' vec3 normal = normalize( vec3( normalColor.r * 2.0 - 1.0, normalColor.b, normalColor.g * 2.0 - 1.0 ) );', // calculate the fresnel term to blend reflection and refraction maps ' float theta = max( dot( toEye, normal ), 0.0 );', ' float reflectance = reflectivity + ( 1.0 - reflectivity ) * pow( ( 1.0 - theta ), 5.0 );', // calculate final uv coords ' vec3 coord = vCoord.xyz / vCoord.w;', ' vec2 coord1 = gl_FragCoord.xy / czm_viewport.zw;', ' vec2 uv = coord1.xy + coord.z * normal.xz * 0.05;', ' vec4 reflectColor = texture2D( tReflectionMap, vec2( 1.0 - uv.x, uv.y ) );', ' vec4 refractColor = texture2D( tRefractionMap, uv );', ' gl_FragColor = vec4( color, 1.0 ) * mix( refractColor, reflectColor, reflectance );', 'gl_FragColor = refractColor;', '}' ].join('\n');