随着Web技术的发展，越来越多的开发者开始探索如何在网页上展示更加丰富和生动的地理信息。Cesium.js作为一个强大的开源JavaScript库，能够帮助我们轻松地构建出逼真的地球三维模型，并支持多种高级功能，如动态光照、天气效果等。本文将通过一个实例来展示如何利用Cesium.js创建一个包含自定义材质和雨效的3D地球场景。
准备工作
首先，确保你的项目中已经引入了Cesium.js库。可以通过npm安装或者直接从Cesium官网下载最新版本。
npm install cesium --save
接下来，我们需要设置Cesium的访问令牌，这一步是为了加载来自Cesium Ion的数据源。请替换下面代码中的YOUR_ACCESS_TOKEN为你自己的令牌。
Cesium.Ion.defaultAccessToken = "YOUR_ACCESS_TOKEN";
创建基础场景
我们将从初始化一个基本的Cesium Viewer开始，这是所有Cesium应用的基础组件。通过设置terrain属性，我们可以加载世界地形数据，使地球模型看起来更加真实。
const initViewer = () => {
viewer = new Cesium.Viewer('sceneContainer', {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
};
首先为地球场景添加一个雨天效果
为了给场景增加更多的互动性和真实感，加入雨效。这可以通过Cesium的PostProcessStage来实现，它允许我们在渲染管线的最后阶段对整个画面进行处理。不多介绍网上随便一搜一大堆
rainEffect = new Cesium.PostProcessStage({
fragmentShader: `
uniform sampler2D colorTexture;
in vec2 v_textureCoordinates;
float hash(float x){
return fract(sin(x*23.3)*13.13);
}
void main(){
float time = czm_frameNumber / 120.0;
vec2 resolution = czm_viewport.zw;
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
vec3 c=vec3(.6,.7,.8);
float a=-.4;
float si=sin(a),co=cos(a);
uv*=mat2(co,-si,si,co);
uv*=length(uv+vec2(0,8.9))*.3+1.;
float v=1.-sin(hash(floor(uv.x*100.))*2.);
float b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;
c*=v*b;
out_FragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c, 1), 0.5);
}`,
});
实现的效果 如下图这样
为模型增加雨滴落下的感觉
这块也就跟上一篇模型积雪一个道理
tileset = await Cesium.Cesium3DTileset.fromUrl(
"http://data.mars3d.cn/3dtiles/max-fsdzm/tileset.json",
{
customShader: new Cesium.CustomShader({
uniforms: {
u_lightColor: {
type: Cesium.UniformType.VEC3,
value: new Cesium.Cartesian3(1, 1, 1),
},
u_rainAlpha: {
type: Cesium.UniformType.FLOAT,
value: 0,
},
},
fragmentShaderText: `
// MAX_RADIUS` 定义了影响当前像素点的周围区域半径。
// DOUBLE_HASH` 决定了是否使用两次哈希函数来增加随机性。
// HASHSCALE1` 和 `HASHSCALE3` 是用于哈希函数的缩放因子。
#define MAX_RADIUS 2
#define DOUBLE_HASH 0
#define HASHSCALE1 .1031
#define HASHSCALE3 vec3(.1031, .1030, .0973)
// 生成伪随机数
float hash12(vec2 p)
{
vec3 p3 = fract(vec3(p.xyx) * HASHSCALE1);
p3 += dot(p3, p3.yzx + 19.19);
return fract((p3.x + p3.y) * p3.z);
}
// 生成伪随机数
vec2 hash22(vec2 p)
{
vec3 p3 = fract(vec3(p.xyx) * HASHSCALE3);
p3 += dot(p3, p3.yzx+19.19);
return fract((p3.xx+p3.yz)*p3.zy);
}
// 获取顶点信息、UV坐标、法线等数据。
// 计算时间变量 `time` 用于动画效果。
// 使用双重循环遍历周围区域内的所有像素点，计算每个点的影响。
// 使用哈希函数生成随机位置，并根据时间和距离计算扰动值。
// 根据扰动值调整法线方向，模拟雨滴的效果。
// 最后混合原始材质颜色和新的颜色，同时考虑光线和环境光的影响。
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
vec3 positionEC = fsInput.attributes.positionEC;
vec3 positionMC = fsInput.attributes.positionMC;
vec2 uv = fsInput.attributes.texCoord_0 * 500.;
vec3 pos_dx = dFdx(positionEC);
vec3 pos_dy = dFdy(positionEC);
vec3 normalEC = normalize(cross(pos_dx, pos_dy));
vec4 positionWC = normalize(czm_inverseView * vec4(positionEC,1.0));
vec3 normalWC = normalize(czm_inverseViewRotation * normalEC);
float time = czm_frameNumber / 60.0;
vec2 p0 = floor(uv);
vec2 circles = vec2(0.);
for (int j = -MAX_RADIUS; j <= MAX_RADIUS; ++j)
{
for (int i = -MAX_RADIUS; i <= MAX_RADIUS; ++i)
{
vec2 pi = p0 + vec2(i, j);
#if DOUBLE_HASH
vec2 hsh = hash22(pi);
#else
vec2 hsh = pi;
#endif
vec2 p = pi + hash22(hsh);
float t = fract(0.3*time + hash12(hsh));
vec2 v = p - uv;
float d = length(v) - (float(MAX_RADIUS) + 1.)*t;
float h = 1e-3;
float d1 = d - h;
float d2 = d + h;
float p1 = sin(31.*d1) * smoothstep(-0.6, -0.3, d1) * smoothstep(0., -0.3, d1);
float p2 = sin(31.*d2) * smoothstep(-0.6, -0.3, d2) * smoothstep(0., -0.3, d2);
circles += 0.5 * normalize(v) * ((p2 - p1) / (2. * h) * (1. - t) * (1. - t));
}
}
circles /= float((MAX_RADIUS*2+1)*(MAX_RADIUS*2+1));
vec3 n = vec3(circles, sqrt(1. - dot(circles, circles)));
material.diffuse = mix(material.diffuse, vec3((n * vec3(1.2)).r) , u_rainAlpha * smoothstep(0., .5, dot(positionWC.xyz, normalWC)));
material.diffuse *= min(max(0.0, dot(normalEC, czm_sunDirectionEC) * 1.0) + u_lightColor, 1.0);
}
`,
}),
}
);
实现的效果如下图 放大可以看见模型上面也有噪点
加入水面的雨滴效果
let appearance = new Cesium.MaterialAppearance({
material: new Cesium.Material({
fabric: {
type: "MyImage",
uniforms: {
image: "./1.png",
},
},
}),
fragmentShaderSource: `
#define MAX_RADIUS 2
#define DOUBLE_HASH 0
#define HASHSCALE1 .1031
#define HASHSCALE3 vec3(.1031, .1030, .0973)
in vec2 v_st;
float hash12(vec2 p)
{
vec3 p3 = fract(vec3(p.xyx) * HASHSCALE1);
p3 += dot(p3, p3.yzx + 19.19);
return fract((p3.x + p3.y) * p3.z);
}
vec2 hash22(vec2 p)
{
vec3 p3 = fract(vec3(p.xyx) * HASHSCALE3);
p3 += dot(p3, p3.yzx+19.19);
return fract((p3.xx+p3.yz)*p3.zy);
}
void main()
{
float iTime = czm_frameNumber / 120.;
float resolution =20.;
vec2 uv = v_st * resolution;
vec2 p0 = floor(uv);
vec2 circles = vec2(0.);
for (int j = -MAX_RADIUS; j <= MAX_RADIUS; ++j)
{
for (int i = -MAX_RADIUS; i <= MAX_RADIUS; ++i)
{
vec2 pi = p0 + vec2(i, j);
#if DOUBLE_HASH
vec2 hsh = hash22(pi);
#else
vec2 hsh = pi;
#endif
vec2 p = pi + hash22(hsh);
float t = fract(0.3*iTime + hash12(hsh));
vec2 v = p - uv;
float d = length(v) - (float(MAX_RADIUS) + 1.)*t;
float h = 1e-3;
float d1 = d - h;
float d2 = d + h;
float p1 = sin(31.*d1) * smoothstep(-0.6, -0.3, d1) * smoothstep(0., -0.3, d1);
float p2 = sin(31.*d2) * smoothstep(-0.6, -0.3, d2) * smoothstep(0., -0.3, d2);
circles += 0.5 * normalize(v) * ((p2 - p1) / (2. * h) * (1. - t) * (1. - t));
}
}
circles /= float((MAX_RADIUS*2+1)*(MAX_RADIUS*2+1));
float intensity = mix(0.01, 0.15, smoothstep(0.1, 0.6, abs(fract(0.05*iTime + 0.5)*2.-1.)));
vec3 n = vec3(circles, sqrt(1. - dot(circles, circles)));
vec3 color = texture(image_0, uv/resolution - intensity*n.xy).rgb + 5.*pow(clamp(dot(n, normalize(vec3(1., 0.7, 0.5))), 0., 1.), 6.);
out_FragColor = vec4(color, 0.5);
}
`,
});
var positions = Cesium.Cartesian3.fromDegreesArray([
121.48033090358801, 29.790483294870796, 121.4778771950879,
29.79083578574342, 121.47877939338282, 29.79193540741442, 121.4804061804202,
29.791480141327728,
]);
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: Cesium.PolygonGeometry.fromPositions({
positions: positions,
height: 20,
}),
}),
appearance: appearance,
})
);
实现的效果如下图
结语
以上就是使用Cesium.js创建一个包含自定义材质和雨效的3D地球场景的完整过程。加点优化啥的 可以给水面加一个反射效果 原理就是创建一个反射摄像机 然后通过离屏渲染 叠加到材质上 差不多就是这个道理
