Skip to content

C
cesium-frame
Commit 86bc645a by jlc
Options

update：雪案例代码的修改

parent 0cd7e3aa
Showing with 63 additions and 58 deletions
src/examples/weather/snow/snow-function.js
export function addSnow() { export function addSnow(viewer) {
const script = document.createElement('script'); viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js'; fragmentShader: `
script.onload = () => { uniform sampler2D colorTexture;
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE' varying vec2 v_textureCoordinates;
uniform float snowSpeed;
const viewer = new window.Cesium.Viewer('cesiumContainer', { uniform float snowSize;
infoBox: false, float snow(vec2 uv,float scale)
}); {
float time=czm_frameNumber*snowSpeed;
viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({ float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
fragmentShader: ` uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
uniform sampler2D colorTexture; uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
varying vec2 v_textureCoordinates; p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
uniform float snowSpeed; k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);
uniform float snowSize; return k*w;
float snow(vec2 uv,float scale) }
{ varying vec4 fragColor;
float time=czm_frameNumber*snowSpeed; void main(void){
float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.; vec2 resolution=czm_viewport.zw;
uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale; vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d; vec3 finalColor=vec3(0);
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k); float c=0.;
k=smoothstep(0.,k,sin(f.x+f.y)*snowSize); c+=snow(uv,30.)*.0;
return k*w; c+=snow(uv,20.)*.0;
} c+=snow(uv,15.)*.0;
varying vec4 fragColor; c+=snow(uv,10.);
void main(void){ c+=snow(uv,8.);
vec2 resolution=czm_viewport.zw; c+=snow(uv,6.);
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y); c+=snow(uv,5.);
vec3 finalColor=vec3(0); finalColor=(vec3(c));
float c=0.; gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor, 1.0), 0.5);
c+=snow(uv,30.)*.0; }
c+=snow(uv,20.)*.0; `,
c+=snow(uv,15.)*.0; uniforms: {
c+=snow(uv,10.); snowSize: 0.02,
c+=snow(uv,8.); snowSpeed: 0.005
c+=snow(uv,6.); },
c+=snow(uv,5.); }));
finalColor=(vec3(c));
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor, 1.0), 0.5);
}
`,
uniforms: {
snowSize: 0.02,
snowSpeed: 0.005
},
}));
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
} }
src/examples/weather/snow/snow.vue
<template> <template>
<div id="cesiumContainer" class="cesium-container"></div> <div id="cesiumContainer" class="cesium-container"></div>
</template> </template>
<script setup> <script setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { addSnow } from './function'; import { addSnow } from './function';
let viewer;
onMounted(() => { onMounted(() => {
addSnow() const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
addSnow(viewer)
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
}); });
</script> </script>
<style> <style>
.cesium-container { .cesium-container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment