486 lines
22 KiB
HTML
486 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- Use correct character set. -->
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<!-- Tell IE to use the latest, best version. -->
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
|||
|
|
<title>Learning Cesium!</title>
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html, body, #cesiumContainer {
|
|||
|
|
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
|||
|
|
}
|
|||
|
|
#app{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
left: 150px;
|
|||
|
|
}
|
|||
|
|
fieldset{
|
|||
|
|
color:aliceblue
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<!-- 添加Element UI -->
|
|||
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|||
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<div id="app">
|
|||
|
|
<fieldset>
|
|||
|
|
<legend>场景模拟</legend>
|
|||
|
|
<el-button type="primary" @click="switchWeather('snow')">下雪</el-button>
|
|||
|
|
<el-button type="primary" @click="switchWeather('rain')">下雨</el-button>
|
|||
|
|
<el-button type="primary" @click="switchWeather('cloudy')">阴天</el-button>
|
|||
|
|
<el-button type="primary" @click="switchWeather('daytime')">白天</el-button>
|
|||
|
|
<el-button type="primary" @click="switchWeather('fog')">雾天</el-button>
|
|||
|
|
<el-button type="primary" @click="no">清除</el-button>
|
|||
|
|
</fieldset>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//========================================================================================
|
|||
|
|
//添加OSM的建筑
|
|||
|
|
// const tileset = viewer.scene.primitives.add(
|
|||
|
|
// new Cesium.Cesium3DTileset({
|
|||
|
|
// url: Cesium.IonResource.fromAssetId(96188),
|
|||
|
|
// })
|
|||
|
|
// );
|
|||
|
|
// Add OSM Building tileset
|
|||
|
|
// let osmBuildingsTileset = Cesium.createOsmBuildings();
|
|||
|
|
// viewer.scene.primitives.add(osmBuildingsTileset);
|
|||
|
|
// //设置条件渲染
|
|||
|
|
// osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
|
|||
|
|
// defines: {
|
|||
|
|
// mh: "${feature['cesium#estimatedHeight']}",
|
|||
|
|
// },
|
|||
|
|
// "color": {
|
|||
|
|
// conditions: [
|
|||
|
|
// ["${mh} >= 300", "rgba(45, 0, 75, 0.5)"],
|
|||
|
|
// ["${mh} >= 200", "rgb(102, 71, 151)"],
|
|||
|
|
// ["${mh} >= 100", "rgb(170, 162, 204)"],
|
|||
|
|
// ["${mh} >= 50", "rgb(224, 226, 238)"],
|
|||
|
|
// ["${mh} >= 25", "rgb(252, 230, 200)"],
|
|||
|
|
// ["${mh} >= 10", "rgb(248, 176, 87)"],
|
|||
|
|
// ["${mh} >= 5", "rgb(198, 106, 11)"],
|
|||
|
|
// ["true", "rgb(127, 59, 8)"]
|
|||
|
|
// ],
|
|||
|
|
// },
|
|||
|
|
// // "show" : "${Height} > 50.0"
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 粒子系统
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 下雪
|
|||
|
|
function snowScene(){
|
|||
|
|
const fragmentShader = `uniform sampler2D colorTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
float snow(vec2 uv,float scale)
|
|||
|
|
{
|
|||
|
|
float time = czm_frameNumber / 160.0;
|
|||
|
|
float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
|
|||
|
|
uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
|
|||
|
|
uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
|
|||
|
|
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
|
|||
|
|
k=smoothstep(0.,k,sin(f.x+f.y)*0.01);
|
|||
|
|
return k*w;
|
|||
|
|
}
|
|||
|
|
void main(void){
|
|||
|
|
vec2 resolution = czm_viewport.zw;
|
|||
|
|
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
|
|||
|
|
vec3 finalColor=vec3(0);
|
|||
|
|
float c = 0.0;
|
|||
|
|
c+=snow(uv,30.)*.0;
|
|||
|
|
c+=snow(uv,20.)*.0;
|
|||
|
|
c+=snow(uv,15.)*.0;
|
|||
|
|
c+=snow(uv,10.);
|
|||
|
|
c+=snow(uv,8.);
|
|||
|
|
c+=snow(uv,6.);
|
|||
|
|
c+=snow(uv,5.);
|
|||
|
|
finalColor=(vec3(c));
|
|||
|
|
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
let postProcessStage = new Cesium.PostProcessStage({fragmentShader});
|
|||
|
|
// viewer.scene.skyAtmosphere.hueShift = -0.8; //色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
// viewer.scene.skyAtmosphere.saturationShift = -0.7; //饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
viewer.scene.skyAtmosphere.brightnessShift = -0.33; //亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
viewer.scene.fog.enabled = true; //如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
// viewer.scene.fog.density = 0.001; //确定雾的密度的标量
|
|||
|
|
viewer.scene.fog.minimumBrightness = 0.8; //照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
|
|||
|
|
viewer.scene.postProcessStages.add(postProcessStage);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下雨
|
|||
|
|
function rain() {
|
|||
|
|
const fragmentShader = `uniform sampler2D colorTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
float hash(float x){
|
|||
|
|
return fract(sin(x*23.3)*13.13);
|
|||
|
|
}
|
|||
|
|
void main(void){
|
|||
|
|
float time = czm_frameNumber / 60.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,4.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.)*5.;
|
|||
|
|
c*=v*b;
|
|||
|
|
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5);
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
let postProcessStage = new Cesium.PostProcessStage({fragmentShader});
|
|||
|
|
viewer.scene.skyAtmosphere.hueShift = -0.8;//色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
viewer.scene.skyAtmosphere.saturationShift = -0.7;//饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
viewer.scene.skyAtmosphere.brightnessShift = -0.33;//亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
viewer.scene.fog.enabled = true;//如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
viewer.scene.fog.density = 0.001;//确定雾的密度的标量
|
|||
|
|
viewer.scene.fog.minimumBrightness = 0.8;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
|
|||
|
|
viewer.scene.postProcessStages.add(postProcessStage);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//阴天
|
|||
|
|
function cloudy(){
|
|||
|
|
const fragmentShader = `uniform sampler2D colorTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
void main(void){
|
|||
|
|
vec4 c=vec4(.01,.01,.01,0.1);
|
|||
|
|
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), c, 0.5);
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
let postProcessStage = new Cesium.PostProcessStage({fragmentShader});
|
|||
|
|
viewer.scene.skyAtmosphere.hueShift = -0.8;//色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
viewer.scene.skyAtmosphere.saturationShift = -0.7;//饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
viewer.scene.skyAtmosphere.brightnessShift = -0.9;//亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
// viewer.scene.fog.enabled = true;//如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
// viewer.scene.fog.density = 0.01;//确定雾的密度的标量
|
|||
|
|
// viewer.scene.fog.minimumBrightness = 0.5;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
|
|||
|
|
viewer.scene.postProcessStages.add(postProcessStage);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 白天
|
|||
|
|
function daytime (){
|
|||
|
|
var fragmentShader =`
|
|||
|
|
uniform sampler2D colorTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
uniform float scale;
|
|||
|
|
uniform vec3 offset;
|
|||
|
|
void main() {
|
|||
|
|
vec4 color = texture2D(colorTexture, v_textureCoordinates);
|
|||
|
|
gl_FragColor = vec4(color.rgb * scale + offset, 1.0);
|
|||
|
|
}`;
|
|||
|
|
let postProcessStage = new Cesium.PostProcessStage({
|
|||
|
|
fragmentShader : fragmentShader,
|
|||
|
|
uniforms : {
|
|||
|
|
scale : 1.1,
|
|||
|
|
offset : function() {
|
|||
|
|
return new Cesium.Cartesian3(0.1, 0.1, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
viewer.scene.skyAtmosphere.hueShift = 0.0;//色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
viewer.scene.skyAtmosphere.saturationShift = 0.0;//饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
viewer.scene.skyAtmosphere.brightnessShift =0.0;//亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
viewer.scene.fog.enabled = false;//如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
// viewer.scene.fog.density = 0.001;//确定雾的密度的标量
|
|||
|
|
// viewer.scene.fog.minimumBrightness = 0.8;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
viewer.scene.postProcessStages.add(postProcessStage);
|
|||
|
|
}
|
|||
|
|
//雾
|
|||
|
|
function fog(){
|
|||
|
|
const fragmentShader = `uniform sampler2D colorTexture;
|
|||
|
|
uniform sampler2D depthTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
void main(void)
|
|||
|
|
{
|
|||
|
|
vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);
|
|||
|
|
vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);//雾的颜色
|
|||
|
|
float depth = czm_readDepth(depthTexture, v_textureCoordinates);
|
|||
|
|
vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);
|
|||
|
|
float f=(depthcolor.r-0.22)/0.99;//雾的溶度
|
|||
|
|
if(f<0.0) f=0.0;
|
|||
|
|
else if(f>1.0) f=1.0;
|
|||
|
|
gl_FragColor = mix(origcolor,fogcolor,f);
|
|||
|
|
}`
|
|||
|
|
let postProcessStage = new Cesium.PostProcessStage({fragmentShader});
|
|||
|
|
viewer.scene.fog.enabled = true;//如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
// viewer.scene.fog.density = 0.001;//确定雾的密度的标量
|
|||
|
|
// viewer.scene.fog.minimumBrightness = 0.8;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
viewer.scene.postProcessStages.add(postProcessStage);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
new Vue({
|
|||
|
|
el: '#app',
|
|||
|
|
data: function() {
|
|||
|
|
return {
|
|||
|
|
visible: false ,
|
|||
|
|
viewer: null,
|
|||
|
|
mapboxAccess: "pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNsMDNvdDRybDEyc2YzZG9kbWZoY2FuOW0ifQ.4FH-BUupi46Z0zQ-CEm_Ig",
|
|||
|
|
postProcessStage: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
initCesium(){
|
|||
|
|
this.viewer = new Cesium.Viewer('cesiumContainer',{
|
|||
|
|
geocoder:false,//位置查找
|
|||
|
|
homeButton:false,//视图返回初始位置
|
|||
|
|
sceneModePicker:false,//视角选择器
|
|||
|
|
baseLayerPicker:false,//底图选择器
|
|||
|
|
navigationHelpButton:false,//导航帮助按钮
|
|||
|
|
animation:false,//动画控制器
|
|||
|
|
// creditContainer:"credit",//版权显示
|
|||
|
|
timeline:false,//时间线
|
|||
|
|
fullscreenButton:false,//全屏控件
|
|||
|
|
vrButton:false
|
|||
|
|
});
|
|||
|
|
this.viewer.camera.flyTo({
|
|||
|
|
destination: new Cesium.Cartesian3(-2325771.0288233184,5392181.511762224,2484480.395134067),
|
|||
|
|
orientation: {
|
|||
|
|
heading: 6.0399326,
|
|||
|
|
pitch: -0.30503,
|
|||
|
|
roll: 6.2825747,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
addMapboxLayer(){
|
|||
|
|
this.viewer.imageryLayers.removeAll();
|
|||
|
|
// 样式id查看：https://docs.mapbox.com/api/maps/styles/
|
|||
|
|
// URL格式的 mapbox://styles/:owner/:style， 其中 :owner 是您的 Mapbox 账户名 :style 是样式 ID 。
|
|||
|
|
// 可选值：streets-v10、outdoors-v10 、light-v9、dark-v9、satellite-v9、satellite-streets-v10
|
|||
|
|
const mapboxStyleImagery = new Cesium.MapboxStyleImageryProvider({
|
|||
|
|
styleId: "dark-v9",
|
|||
|
|
accessToken: this.mapboxAccess,
|
|||
|
|
// proxy: new Cesium.DefaultProxy("http://127.0.0.1:8080/proxy/"),
|
|||
|
|
});
|
|||
|
|
this.viewer.imageryLayers.addImageryProvider(mapboxStyleImagery);
|
|||
|
|
},
|
|||
|
|
addOSMBuilding(){
|
|||
|
|
let osmBuildingsTileset = Cesium.createOsmBuildings();
|
|||
|
|
this.viewer.scene.primitives.add(osmBuildingsTileset);
|
|||
|
|
//设置条件渲染
|
|||
|
|
osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
|
|||
|
|
defines: {
|
|||
|
|
mh: "${feature['cesium#estimatedHeight']}",
|
|||
|
|
},
|
|||
|
|
"color": {
|
|||
|
|
conditions: [
|
|||
|
|
["${mh} >= 300", "rgba(45, 0, 75, 0.5)"],
|
|||
|
|
["${mh} >= 200", "rgb(102, 71, 151)"],
|
|||
|
|
["${mh} >= 100", "rgb(170, 162, 204)"],
|
|||
|
|
["${mh} >= 50", "rgb(224, 226, 238)"],
|
|||
|
|
["${mh} >= 25", "rgb(252, 230, 200)"],
|
|||
|
|
["${mh} >= 10", "rgb(248, 176, 87)"],
|
|||
|
|
["${mh} >= 5", "rgb(198, 106, 11)"],
|
|||
|
|
["true", "rgb(127, 59, 8)"]
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
// "show" : "${Height} > 50.0"
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
snow(){
|
|||
|
|
const fragmentShader = `uniform sampler2D colorTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
float snow(vec2 uv,float scale)
|
|||
|
|
{
|
|||
|
|
float time = czm_frameNumber / 160.0;
|
|||
|
|
float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
|
|||
|
|
uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
|
|||
|
|
uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
|
|||
|
|
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
|
|||
|
|
k=smoothstep(0.,k,sin(f.x+f.y)*0.01);
|
|||
|
|
return k*w;
|
|||
|
|
}
|
|||
|
|
void main(void){
|
|||
|
|
vec2 resolution = czm_viewport.zw;
|
|||
|
|
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
|
|||
|
|
vec3 finalColor=vec3(0);
|
|||
|
|
float c = 0.0;
|
|||
|
|
c+=snow(uv,30.)*.0;
|
|||
|
|
c+=snow(uv,20.)*.0;
|
|||
|
|
c+=snow(uv,15.)*.0;
|
|||
|
|
c+=snow(uv,10.);
|
|||
|
|
c+=snow(uv,8.);
|
|||
|
|
c+=snow(uv,6.);
|
|||
|
|
c+=snow(uv,5.);
|
|||
|
|
finalColor=(vec3(c));
|
|||
|
|
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
this.postProcessStage = new Cesium.PostProcessStage({fragmentShader});
|
|||
|
|
// this.viewer.scene.skyAtmosphere.hueShift = -0.8; //色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
// this.viewer.scene.skyAtmosphere.saturationShift = -0.7; //饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
this.viewer.scene.skyAtmosphere.brightnessShift = -0.33; //亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
this.viewer.scene.fog.enabled = true; //如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
// this.viewer.scene.fog.density = 0.001; //确定雾的密度的标量
|
|||
|
|
this.viewer.scene.fog.minimumBrightness = 0.8; //照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
rain() {
|
|||
|
|
const fragmentShader = `uniform sampler2D colorTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
float hash(float x){
|
|||
|
|
return fract(sin(x*23.3)*13.13);
|
|||
|
|
}
|
|||
|
|
void main(void){
|
|||
|
|
float time = czm_frameNumber / 60.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,4.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.)*5.;
|
|||
|
|
c*=v*b;
|
|||
|
|
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5);
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
this.postProcessStage = new Cesium.PostProcessStage({fragmentShader});
|
|||
|
|
this.viewer.scene.skyAtmosphere.hueShift = -0.8;//色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
this.viewer.scene.skyAtmosphere.saturationShift = -0.7;//饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
this.viewer.scene.skyAtmosphere.brightnessShift = -0.33;//亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
this.viewer.scene.fog.enabled = true;//如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
this.viewer.scene.fog.density = 0.001;//确定雾的密度的标量
|
|||
|
|
this.viewer.scene.fog.minimumBrightness = 0.8;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
cloudy(){
|
|||
|
|
const fragmentShader = `uniform sampler2D colorTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
void main(void){
|
|||
|
|
vec4 c=vec4(.01,.01,.01,0.1);
|
|||
|
|
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), c, 0.5);
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
this.postProcessStage = new Cesium.PostProcessStage({fragmentShader});
|
|||
|
|
this.viewer.scene.skyAtmosphere.hueShift = -0.8;//色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
this.viewer.scene.skyAtmosphere.saturationShift = -0.7;//饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
this.viewer.scene.skyAtmosphere.brightnessShift = -0.9;//亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
// this.viewer.scene.fog.enabled = true;//如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
// this.viewer.scene.fog.density = 0.01;//确定雾的密度的标量
|
|||
|
|
// this.viewer.scene.fog.minimumBrightness = 0.5;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
daytime (){
|
|||
|
|
var fragmentShader =`
|
|||
|
|
uniform sampler2D colorTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
uniform float scale;
|
|||
|
|
uniform vec3 offset;
|
|||
|
|
void main() {
|
|||
|
|
vec4 color = texture2D(colorTexture, v_textureCoordinates);
|
|||
|
|
gl_FragColor = vec4(color.rgb * scale + offset, 1.0);
|
|||
|
|
}`;
|
|||
|
|
this.postProcessStage = new Cesium.PostProcessStage({
|
|||
|
|
fragmentShader : fragmentShader,
|
|||
|
|
uniforms : {
|
|||
|
|
scale : 1.1,
|
|||
|
|
offset : function() {
|
|||
|
|
return new Cesium.Cartesian3(0.1, 0.1, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.viewer.scene.skyAtmosphere.hueShift = 0.0;//色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
this.viewer.scene.skyAtmosphere.saturationShift = 0.0;//饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
this.viewer.scene.skyAtmosphere.brightnessShift =0.0;//亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
this.viewer.scene.fog.enabled = false;//如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
// this.viewer.scene.fog.density = 0.001;//确定雾的密度的标量
|
|||
|
|
// this.viewer.scene.fog.minimumBrightness = 0.8;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
fog(){
|
|||
|
|
const fragmentShader = `uniform sampler2D colorTexture;
|
|||
|
|
uniform sampler2D depthTexture;
|
|||
|
|
varying vec2 v_textureCoordinates;
|
|||
|
|
void main(void)
|
|||
|
|
{
|
|||
|
|
vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);
|
|||
|
|
vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);//雾的颜色
|
|||
|
|
float depth = czm_readDepth(depthTexture, v_textureCoordinates);
|
|||
|
|
vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);
|
|||
|
|
float f=(depthcolor.r-0.22)/0.99;//雾的溶度
|
|||
|
|
if(f<0.0) f=0.0;
|
|||
|
|
else if(f>1.0) f=1.0;
|
|||
|
|
gl_FragColor = mix(origcolor,fogcolor,f);
|
|||
|
|
}`
|
|||
|
|
this.postProcessStage = new Cesium.PostProcessStage({fragmentShader});
|
|||
|
|
this.viewer.scene.fog.enabled = true;//如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
// this.viewer.scene.fog.density = 0.001;//确定雾的密度的标量
|
|||
|
|
// this.viewer.scene.fog.minimumBrightness = 0.8;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//切换场景
|
|||
|
|
switchWeather(type){
|
|||
|
|
if(this.postProcessStage){
|
|||
|
|
// this.viewer.scene.postProcessStages.remove(this.postProcessStage);
|
|||
|
|
this.no();
|
|||
|
|
this.postProcessStage = null;
|
|||
|
|
}
|
|||
|
|
if(!type){
|
|||
|
|
return ;
|
|||
|
|
}
|
|||
|
|
//切换场景
|
|||
|
|
if(type === 'snow'){
|
|||
|
|
this.snow();
|
|||
|
|
}else if(type === 'rain'){
|
|||
|
|
this.rain();
|
|||
|
|
}else if(type === "cloudy"){
|
|||
|
|
this.cloudy();
|
|||
|
|
}else if(type === "fog"){
|
|||
|
|
this.fog();
|
|||
|
|
}else if(type === "daytime"){
|
|||
|
|
this.daytime();
|
|||
|
|
}
|
|||
|
|
if(this.postProcessStage){
|
|||
|
|
this.viewer.scene.postProcessStages.add(this.postProcessStage);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 清空，不加天气
|
|||
|
|
no(){
|
|||
|
|
this.viewer.scene.postProcessStages.remove(this.postProcessStage);
|
|||
|
|
this.viewer.scene.skyAtmosphere.hueShift = 0.0; //色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
|
|||
|
|
this.viewer.scene.skyAtmosphere.saturationShift = 0.0; //饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
|
|||
|
|
this.viewer.scene.skyAtmosphere.brightnessShift = 0.0; //亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
|
|||
|
|
this.viewer.scene.fog.enabled = false; //如果启用雾，则为 true ，否则为 false 。
|
|||
|
|
this.viewer.scene.fog.density = 0.001; //确定雾的密度的标量
|
|||
|
|
this.viewer.scene.fog.minimumBrightness = 0.8; //照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
created(){
|
|||
|
|
this.initCesium()
|
|||
|
|
this.addMapboxLayer()
|
|||
|
|
this.addOSMBuilding()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|