cesium自定义雨、雪、雾材质遇到的问题，varying、texture2D等报错

今天必须记录下，是我在用cesium框架写实现雨、雪效果时遇到的一个bug。最后经过我不断地研究百度明白这玩意是官方框架的语法变了。话说这玩意不是应该向下兼容的嘛，哎哎哎！叹气

第一次是因为变量varying，官网将他改为了in,自己就在那里蒙圈找，具体报错如下：

Fragment shader failed to compile. Compile log: ERROR: 0:1: 'varying' : Illegal use of reserved word

好不容易改好了，有来个错texture2D没有可重载的函数，可气的我啊，好气好气啊，最后一顿百度才知道是方法的函数名也改动了，需要将texture2D改成texture。

Fragment shader failed to compile. Compile log: ERROR: 0:28: 'texture2D' : no matching overloaded function found

可能官方也是为了大体性能着想吧，Cesium 自 1.102.0 开始，为了更好支持跨平台，尤其是移动端，Cesium 默认使用 WebGL2 上下文，如果想使用 WebGL1 上下文，需要在地球初始化的时候设置相应的参数

在初始化时更改Cesium的语法上下文

如果我们需要改动的太多，又比较着急，也许可以用这个方法试试（但不确定，本人未试过）

const viewer = new Viewer("cesiumContainer", {
  // 指定上下文,将语法换成使用 WebGL1 上下文形式
  contextOptions: {
    requestWebgl1: true,
  },
});

如果可以更推荐用以下的方法

下面是以自定义雪材质为例：

    snow() {
        return "uniform sampler2D colorTexture;\n\
            varying vec2 v_textureCoordinates;\n\
            uniform float snowSpeed;\n\
                    uniform float snowSize;\n\
            float snow(vec2 uv,float scale)\n\
            {\n\
                float time=czm_frameNumber/snowSpeed;\n\
                float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
                uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
                uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
                p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
                k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
                return k*w;\n\
            }\n\
            void main(void){\n\
                vec2 resolution=czm_viewport.zw;\n\
                vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
                vec3 finalColor=vec3(0);\n\
                //float c=smoothstep(1.,0.3,clamp(uv.y*.3+.8,0.,.75));\n\
                float c=0.;\n\
                c+=snow(uv,30.)*.0;\n\
                c+=snow(uv,20.)*.0;\n\
                c+=snow(uv,15.)*.0;\n\
                c+=snow(uv,10.);\n\
                c+=snow(uv,8.);\n\
                c+=snow(uv,6.);\n\
                c+=snow(uv,5.);\n\
                finalColor=(vec3(c));\n\
                gl_FragColor=mix(texture2D(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);\n\
                }\n\
                ";
    }

上面整体代码是没问题的，但是上面的varying我们应该替换为in,gl_FragColor替换为out_FragColor,还有texture2D这个函数应该替换为texture。

下面是正确的添加雨、雪、雾特效和使用方式。

代码直接百度copy，然后本人自己稍微改动些 

创建SnowEffect.js的文件

import * as Cesium from 'cesium'
/*
 * @description:下雨效果，参考简书上的代码
 * @date：2022-01-20
 */

export class RainEffect {
    constructor(viewer, options) {
        if (!viewer) throw new Error('no viewer object!');
        options = options || {};
        //倾斜角度，负数向右，正数向左
        this.tiltAngle = Cesium.defaultValue(options.tiltAngle, -.6);
        this.rainSize = Cesium.defaultValue(options.rainSize, 0.3);
        this.rainSpeed = Cesium.defaultValue(options.rainSpeed, 60.0);
        this.viewer = viewer;
        this.init();
    }
    init() {
        this.rainStage = new Cesium.PostProcessStage({
            name: 'czm_rain',
            fragmentShader: this.rain(),
            uniforms: {
                tiltAngle: () => {
                    return this.tiltAngle;
                },
                rainSize: () => {
                    return this.rainSize;
                },
                rainSpeed: () => {
                    return this.rainSpeed;
                }
            }
        });
        this.viewer.scene.postProcessStages.add(this.rainStage);
    }

    destroy() {
        if (!this.viewer || !this.rainStage) return;
        this.viewer.scene.postProcessStages.remove(this.rainStage);
        this.rainStage.destroy();
        delete this.tiltAngle;
        delete this.rainSize;
        delete this.rainSpeed;
    }

    show(visible) {
        this.rainStage.enabled = visible;
    }

    rain() {
        return "uniform sampler2D colorTexture;\n\
                in vec2 v_textureCoordinates;\n\
                uniform float tiltAngle;\n\
                uniform float rainSize;\n\
                uniform float rainSpeed;\n\
                float hash(float x) {\n\
                    return fract(sin(x * 133.3) * 13.13);\n\
                }\n\
                void main(void) {\n\
                    float time = czm_frameNumber / rainSpeed;\n\
                    vec2 resolution = czm_viewport.zw;\n\
                    vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);\n\
                    vec3 c = vec3(.6, .7, .8);\n\
                    float a = tiltAngle;\n\
                    float si = sin(a), co = cos(a);\n\
                    uv *= mat2(co, -si, si, co);\n\
                    uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;\n\
                    float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);\n\
                    float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;\n\
                    c *= v * b;\n\
                    out_FragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c, 1), .5);\n\
                }\n\
                ";
    }
}

使用方法：

import {RainEffect} from './util/weather/RainEffect'
// 下雨
const drawRain = ()=>{
  // viewer地图的对象元素
  new RainEffect(viewer, {
      tiltAngle: -0.6, //倾斜角度
      rainSize: 0.6, // 雨大小
      rainSpeed: 120.0 // 雨速
  })
}

创建RainEffect.js的文件 

/**
 * @description:下雪效果，参考简书代码
 * @date：2022-01-20
 */
import * as Cesium from 'cesium'
export class SnowEffect {
    constructor(viewer, options) {
        if (!viewer) throw new Error('no viewer object!');
        options = options || {};
        this.snowSize = Cesium.defaultValue(options.snowSize, 0.02); //最好小于0.02
        this.snowSpeed = Cesium.defaultValue(options.snowSpeed, 60.0);
        this.viewer = viewer;
        this.init();
    }

    init() {
        this.snowStage = new Cesium.PostProcessStage({
            name: 'czm_snow',
            fragmentShader: this.snow(),
            uniforms: {
                snowSize: () => {
                    return this.snowSize;
                },
                snowSpeed: () => {
                    return this.snowSpeed;
                }
            }
        });
        this.viewer.scene.postProcessStages.add(this.snowStage);
    }

    destroy() {
        if (!this.viewer || !this.snowStage) return;
        this.viewer.scene.postProcessStages.remove(this.snowStage);
        this.snowStage.destroy();
        delete this.snowSize;
        delete this.snowSpeed;
    }

    show(visible) {
        this.snowStage.enabled = visible;
    }

    snow() {
        return "uniform sampler2D colorTexture;\n\
            in vec2 v_textureCoordinates;\n\
            uniform float snowSpeed;\n\
                    uniform float snowSize;\n\
            float snow(vec2 uv,float scale)\n\
            {\n\
                float time=czm_frameNumber/snowSpeed;\n\
                float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
                uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
                uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
                p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
                k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
                return k*w;\n\
            }\n\
            void main(void){\n\
                vec2 resolution=czm_viewport.zw;\n\
                vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
                vec3 finalColor=vec3(0);\n\
                //float c=smoothstep(1.,0.3,clamp(uv.y*.3+.8,0.,.75));\n\
                float c=0.;\n\
                c+=snow(uv,30.)*.0;\n\
                c+=snow(uv,20.)*.0;\n\
                c+=snow(uv,15.)*.0;\n\
                c+=snow(uv,10.);\n\
                c+=snow(uv,8.);\n\
                c+=snow(uv,6.);\n\
                c+=snow(uv,5.);\n\
                finalColor=(vec3(c));\n\
                out_FragColor=mix(texture(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);\n\
                }\n\
                ";
    }
}

使用方法：

import {SnowEffect} from './util/weather/SnowEffect'
// 下雪
const drawSnow = ()=>{
  // 下雪效果
    new SnowEffect(viewer, {
        snowSize: 0.02, // 雪花大小
        snowSpeed: 60.0, // 雪速
    })
}

创建FogEffect.js的文件  

/**
 * @description:雾效果，参考简书代码
 * @date：2022-01-20
 */
import * as Cesium from 'cesium'

export class FogEffect {
    constructor(viewer, options) {
        if (!viewer) throw new Error('no viewer object!');
        options = options || {};
        this.visibility = Cesium.defaultValue(options.visibility, 0.1);
        this.color = Cesium.defaultValue(options.color,
            new Cesium.Color(0.8, 0.8, 0.8, 0.5));
        this._show = Cesium.defaultValue(options.show, !0);
        this.viewer = viewer;
        this.init();
    }

    init() {
        this.fogStage = new Cesium.PostProcessStage({
            name: 'czm_fog',
            fragmentShader: this.fog(),
            uniforms: {
                visibility: () => {
                    return this.visibility;
                },
                fogColor: () => {
                    return this.color;
                }
            }
        });
        this.viewer.scene.postProcessStages.add(this.fogStage);
    }

    destroy() {
        if (!this.viewer || !this.fogStage) return;
        this.viewer.scene.postProcessStages.remove(this.fogStage);
        this.fogStage.destroy();
        delete this.visibility;
        delete this.color;
    }

    show(visible) {
        this._show = visible;
        this.fogState.enabled = this._show;
    }

    fog() {
        return "uniform sampler2D colorTexture;\n\
         uniform sampler2D depthTexture;\n\
         uniform float visibility;\n\
         uniform vec4 fogColor;\n\
         in vec2 v_textureCoordinates; \n\
         void main(void) \n\
         { \n\
            vec4 origcolor = texture(colorTexture, v_textureCoordinates); \n\
            float depth = czm_readDepth(depthTexture, v_textureCoordinates); \n\
            vec4 depthcolor = texture(depthTexture, v_textureCoordinates); \n\
            float f = visibility * (depthcolor.r - 0.3) / 0.2; \n\
            if (f < 0.0) f = 0.0; \n\
            else if (f > 1.0) f = 1.0; \n\
            out_FragColor = mix(origcolor, fogColor, f); \n\
         }\n";
    }
}

使用方法：

import {FogEffect} from './util/weather/FogEffect'
// 雾
const drawfog = ()=>{
    // 雾效果
    new FogEffect(viewer, {
        visibility: 0.2,
        color: new Cesium.Color(0.8, 0.8, 0.8, 0.3)
    })
}

好了，本次分享就这些啦。