Cesium学习笔记(15)

105 阅读1分钟

通过Appearance的片元着色器属性修改材质

简单例子

//使用Appearance中的片元着色器编写材质
  let appearance1 = new Cesium.EllipsoidSurfaceAppearance({
    //不使用Material设置材质
    // material: ma,
    fragmentShaderSource: `
    in vec3 v_positionMC;
    in vec3 v_positionEC;
    in vec2 v_st;
    uniform float uTime;

    void main()
    {
        czm_materialInput materialInput;
        out_FragColor = vec4(v_st,uTime,1.0);    
    }
    `
  })
  //声明一个变量(表示时间  gsap会改变uTime的值,从而改变out_FragColor值实现动画效果)
  appearance1.uniforms= {
    uTime: 0,
  }
  //动画效果
  gsap.to(appearance1.uniforms, {
    uTime: 1,
    duration: 2,
    repeat: -1,
    ease: "linear",
    yoyo: true,
  }
  )
  let primitive = new Cesium.Primitive({
    geometryInstances: [instance, instance2],
    appearance: appearance1,
    asynchronous: false,
  })

image.png

image.png

注意

void main()
    {
        czm_materialInput materialInput;
        //Cesium的版本不同,使用的webGL版本不同,
        // webGL1 版本下 使用gl_FragColor来设置片元颜色
        // webGL2 版本下 使用out_FragColor来设置片元颜色
        out_FragColor = vec4(v_st,uTime,1.0);    
    }

当然还可以Cesium使用的webGL版本,参考Cesium版本升级webgl问题,glsl代码报错,修改办法_cesium glsl-CSDN博客