Cesium application-add rain and snow

As a three-dimensional Earth, the effect of rain and snow in the scene seems to increase the sense of reality. The demo on the cesium official website contains weather system instances, which are made by the particle system in cesium. As shown in the effect, the essence of the particle system is to add a lot of objects to the scene and use the billboard technology to present them. This implementation method is troublesome when the angle of view changes (drawing closer, pulling farther, translating, or rotating), the particles will change or even disappear, affecting the experience. Consider using the shader method to directly simulate the effect of rain and snow, just found the shader of the simulation of rain and snow written by catzpaw, decisively added to the cesium.

 

1. Add glsl code

The simulated Effect of rain and snow written by catzpaw is as follows. What we need to do is to integrate the effect with the earth scenario. This uses the post-processing process described in the previous blog. You only need to add a postprocessstage to create the snow effect and add a postprocessstate to create the rain effect.

First, create the snow. glsl file and the rain. glsl file in the source/shaders/postprocessstages folder, and store the bitwise coloring code of the rain and snow effect in the glsl file. The Code is as follows:

1 Uniform sampler2d colortexture; // input Scene Rendering photo 2 varying vec2 v_texturecoordinates; 3 4 float snow (vec2 UV, float scale) 5 {6 float time = czm_framenumber/60.0; 7 float W = smoothstep (1 ., 0 ., -UV. y * (scale/10 .)); if (W <. 1) return 0 .; 8 UV + = Time/scale; UV. Y + = time * 2. /scale; UV. X + = sin (UV. Y + time *. 5)/scale; 9 UV * = scale; vec2 S = floor (UV), F = fract (UV), P; float K = 3 ., d; 10 p =. 5 +. 35 * sin (11. * fract (sin (S + P + scale) * mat2 (7,3, 6,5) * 5 .)) -F; D = length (p); k = min (D, k); 11 K = smoothstep (0 ., k, sin (F. X + F. y) * 0.01); 12 Return K * w; 13} 14 15 void main (void) {16 vec2 resolution = czm_viewport.zw; 17 vec2 UV = (gl_fragcoord.xy * 2. -Resolution. XY)/min (resolution. x, resolution. y); 18 vec3 finalcolor = vec3 (0); 19 // float c = smoothstep (1 ., 0.3, clamp (UV. y *. 3 +. 8, 0 .,. 75); 20 float c = 0.0; 21 C + = snow (UV, 30 .) *. 0; 22 C + = snow (UV, 20 .) *. 0; 23 C + = snow (UV, 15 .) *. 0; 24 C + = snow (UV, 10 .); 25 C + = snow (UV, 8 .); 26 C + = snow (UV, 6 .); 27 C + = snow (UV, 5 .); 28 finalcolor = (vec3 (c); // on-screen snow color 29 gl_fragcolor = mix (texture2d (colortexture, v_texturecoordinates), vec4 (finalcolor, 1), 0.5 ); // combine snow and 3D scenes for 30 31}

 

1 Uniform sampler2d colortexture; // input Scene Rendering photo 2 varying vec2 v_texturecoordinates; 3 4 float Hash (float X) {5 return fract (sin (x * 133.3) * 13.13 ); 6} 7 8 void main (void) {9 10 float time = czm_framenumber/60.0; 11 vec2 resolution = czm_viewport.zw; 12 13 vec2 UV = (gl_fragcoord.xy * 2. -Resolution. XY)/min (resolution. x, resolution. y); 14 vec3 c = vec3 (. 6 ,. 7 ,. 8); 15 16 float a = -. 4; 17 float Si = sin (A), CO = cos (a); 18 UV * = mat2 (CO,-Si, si, CO ); 19 UV * = length (UV + vec2 (0, 4.9 ))*. 3 + 1 .; 20 21 float v = 1. -Sin (Hash (floor (UV. x * 100 .)) * 2 .); 22 float B = clamp (ABS (sin (20. * Time * V + UV. y * (5. /(2. + V ))))-. 95,0 ., 1 .) * 20 .; 23 C * = V * B; // on-screen rain color 24 25 gl_fragcolor = mix (texture2d (colortexture, v_texturecoordinates), vec4 (C, 1), 0.5 ); // integrates rain and 3D scenes 26}

The glsl code that generates rain and snow is amazing. It is just a mathematical computation. It is very important to realize that it is important to learn mathematics well. I would like to worship the gods again, haha.

2. Create postprocessstage

After finishing the glsl code in the previous step, create the postprocessstage object. You can create a postprocessstage object by adding two functions to the postprocessstagelibray class. The Code is as follows:

 1 PostProcessStageLibrary.createSnowStage = function() { 2         var snow = new PostProcessStage({ 3             name : ‘czm_snow‘, 4             fragmentShader : Snow 5         }); 6         return snow; 7     } 8  9     PostProcessStageLibrary.createRainStage = function() {10         var snow = new PostProcessStage({11             name : ‘czm_rain‘,12             fragmentShader : Rain13         });14         return snow;15     }

3. External call

After preparing the preceding content, you can directly call it on the HTML page. To achieve more realistic results, you also need to change the atmospheric parameters. The code and effects are as follows:

1 var collection = viewer.scene.postProcessStages;2 var snow = Cesium.PostProcessStageLibrary.createSnowStage();3 collection.add(snow);4 scene.skyAtmosphere.hueShift = -0.8;5 scene.skyAtmosphere.saturationShift = -0.7;6 scene.skyAtmosphere.brightnessShift = -0.33;7 8 scene.fog.density = 0.001;9 scene.fog.minimumBrightness = 0.8;

 

4. Summary

Using shader to simulate rain and snow is not affected by the position of the viewpoint, which is equivalent to a full screen post-processing. Of course, there are some enhancements to the effect simulation. The steps described in this article can be used as a reference for you to add post-processing results on cesium.

PS: You can scan the QR code to add a group for cesium communication. We look forward to seeing you join us !!!

Cesium application-add rain and snow