mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-04 09:14:17 +00:00
140 lines
4.8 KiB
HTML
140 lines
4.8 KiB
HTML
<!--********************************************************************
|
|
* by jiawanlong
|
|
*********************************************************************-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
|
|
<script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
|
|
<script src="./weatherEffects.js"></script>
|
|
</head>
|
|
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
<audio style="display: none;" loop autoplay src="./dl.mp3"></audio>
|
|
<script type="text/javascript">
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
|
|
const viewer = new Cesium.Viewer('map', {
|
|
contextOptions: {
|
|
requestWebgl1: true,
|
|
},
|
|
});
|
|
|
|
viewer.camera.setView({
|
|
destination: Cesium.Cartesian3.fromDegrees(121.662323, 20.157338, 271712),
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(350.3),
|
|
pitch: Cesium.Math.toRadians(-27.4),
|
|
roll: 0.0
|
|
},
|
|
});
|
|
|
|
// 雨
|
|
new weatherEffects(viewer, {
|
|
name: 'a',
|
|
type: 'rain'
|
|
});
|
|
|
|
|
|
// 闪电
|
|
let Lightning = `
|
|
float hash(float x)
|
|
{
|
|
return fract(21654.6512 * sin(385.51 * x));
|
|
}
|
|
float hash(vec2 p)
|
|
{
|
|
return fract(1654.65157 * sin(15.5134763 * p.x + 45.5173247 * p.y + 5.21789));
|
|
}
|
|
vec2 hash2(vec2 p)
|
|
{
|
|
return vec2(hash(p * .754), hash(1.5743 * p + 4.5476351));
|
|
}
|
|
vec2 add = vec2(1.0, 0.0);
|
|
vec2 noise2(vec2 x)
|
|
{
|
|
vec2 p = floor(x);
|
|
vec2 f = fract(x);
|
|
f = f * f * (3.0 - 2.0 * f);
|
|
vec2 res = mix(mix(hash2(p),
|
|
hash2(p + add.xy), f.x),
|
|
mix(hash2(p + add.yx), hash2(p + add.xx), f.x), f.y);
|
|
return res;
|
|
}
|
|
vec2 fbm2(vec2 x)
|
|
{
|
|
vec2 r = vec2(0.0);
|
|
float a = 1.0;
|
|
for (int i = 0; i < 8; i++)
|
|
{
|
|
r += noise2(x) * a;
|
|
x *= 2.;
|
|
a *= .5;
|
|
}
|
|
return r;
|
|
}
|
|
float dseg(vec2 ba, vec2 pa)
|
|
{
|
|
float h = clamp(dot(pa, ba) / dot(ba, ba), -0.2, 1.);
|
|
return length(pa - ba * h);
|
|
}
|
|
uniform sampler2D colorTexture;
|
|
uniform float fall_interval;
|
|
uniform float mix_factor;
|
|
varying vec2 v_textureCoordinates;
|
|
void main(void){
|
|
vec2 uv = gl_FragCoord.xy;
|
|
float iTime = czm_frameNumber * fall_interval * clamp(fall_interval * 0.1, 0.01, 0.1);
|
|
vec2 p = uv / czm_viewport.zw;
|
|
vec2 d;
|
|
vec2 tgt = vec2(1., -1.);
|
|
float c = 0.;
|
|
if (p.y >= 0.)
|
|
c = (1. - (fbm2((p + .2) * p.y + .1 * iTime)).x) * p.y;
|
|
else
|
|
c = (1. - (fbm2(p + .2 + .1 * iTime)).x) * p.y * p.y;
|
|
vec3 col = vec3(0.);
|
|
vec3 col1 = c * vec3(.3, .5, 1.);
|
|
float mdist = 100000.;
|
|
float t = hash(floor(5. * iTime));
|
|
tgt += 4. * hash2(tgt + t) - 1.5;
|
|
if (hash(t + 2.3) > .6)
|
|
for (int i = 0; i < 100; i++) {
|
|
vec2 dtgt = tgt - p;
|
|
d = .05 * (vec2(-.5, -1.) + hash2(vec2(float(i), t)));
|
|
float dist = dseg(d, dtgt);
|
|
mdist = min(mdist, dist);
|
|
tgt -= d;
|
|
c = exp(-1.2 * dist) + exp(-55. * mdist);
|
|
col = c * vec3(.7, .8, 1.);
|
|
}
|
|
col += col1;
|
|
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(col, 0.0), mix_factor);
|
|
}
|
|
`
|
|
|
|
|
|
Cesium.PostProcessStageLibrary.createLightningStage = function (val) {
|
|
return new Cesium.PostProcessStage({
|
|
name: 'czm_lightning',
|
|
fragmentShader: Lightning,
|
|
uniforms: {
|
|
mix_factor: val.mix_factor,//混合系数0-1之间的数
|
|
fall_interval: 0.8,//0-1之间的数
|
|
}
|
|
});
|
|
}
|
|
|
|
var collection = viewer.scene.postProcessStages;
|
|
var lightning = Cesium.PostProcessStageLibrary.createLightningStage({
|
|
mix_factor: 0.35,//混合系数
|
|
});
|
|
collection.add(lightning);
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |