VUE3-Cesium(着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现)

发布时间:2023-11-07 18:30

目录

1. 运用着色器编写图案

​2.着色器实现动画绘图

3.着色器实现圆环扩散效果

4.着色器实现雷达图效果


1. 运用着色器编写图案

1)挤出一个盒子

  const extrudePolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,
      ])
    ),
    // extrudedHeight: 30000,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: extrudePolygon,
    id: \"挤出四边形\",
  });

2)设置材质

const material = new Cesium.Material({
    fabric: {
      // type: \"Color\",
      // uniforms: {
      //   color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
      // },
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
          czm_material material = czm_getDefaultMaterial(materialInput);
          material.diffuse = vec3(0.84,0.66,0.81);
          
          return material;
      }
      `,
    },
  });
 console.log(material.shaderSource);

控制台输出:

\"VUE3-Cesium(着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现)_第1张图片\" 

3)着色器设置材质外观

 const appearance = new Cesium.MaterialAppearance({
    fragmentShaderSource: `
    varying vec3 v_positionEC;
    varying vec3 v_normalEC;
    varying vec2 v_st;

   void main()
  {
    vec3 positionToEyeEC = -v_positionEC;

    vec3 normalEC = normalize(v_normalEC);
   #ifdef FACE_FORWARD
    normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
   #endif

    czm_materialInput materialInput;
    materialInput.normalEC = normalEC;
    materialInput.positionToEyeEC = positionToEyeEC;
    materialInput.st = v_st;
    czm_material material = czm_getMaterial(materialInput);
   //  实现圆
   // float strength = 1.0 - distance(v_st,vec2(0.5,0.5))*2.0;  
   // material.diffuse = vec3(strength);
   // material.alpha = step(0.0,strength);

   // 渐变环
   float strength =  1.0-(abs(distance(v_st,vec2(0.5,0.5))-0.25)*4.0);
   material.diffuse = vec3(strength);
   material.alpha = step(0.0,strength);


   #ifdef FLAT
    gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);
   #else
    gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
   #endif
  }
    `,
  });

4)实例化着色图元

// 创建图元添加
  var primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance],
      appearance: appearance,
    })
  );

  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);

控制台输出:

\"VUE3-Cesium(着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现)_第2张图片\"

\"VUE3-Cesium(着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现)_第3张图片\"

 5)实现效果:


2.着色器实现动画绘图

1)挤出矩形

const extrudePolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,
      ])
    ),
    // extrudedHeight: 30000,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: extrudePolygon,
    id: \"挤出四边形\",
  });

2) 实例化材质:

  const material = new Cesium.Material({
    fabric: {
      // type: \"Color\",
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        uTime: 0,
      },
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
          czm_material material = czm_getDefaultMaterial(materialInput);
          material.diffuse = vec3(uTime,uTime,0.81);

          return material;
      }
      `,
    },
  });
  console.log(material);
  console.log(material.shaderSource);

3)安装gasp实现补间动画:

GASP是一款可以用来制作动画的js插件。GASP是一个JavaScript动画库,它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起,来创造一个高内聚的流畅动画序列。

安装:

npm install gsap

yarn add gasp

导入:

import gsap from \"gsap\";

使用:

第一个参数为要控制元素的选择器,第二个参数为控制元素的动画属性

  gsap.to(material.uniforms, {
    uTime: 1,
    duration: 1,//持续时长
    repeat: -1,//重复次数
    yoyo: true,//是否往返动画
    ease: \"linear\",//运动模式
    onUpdate: () => {
      console.log(\"值发生了修改\");

    },
  });

4)实例化材质表面和图元

const appearance = new Cesium.MaterialAppearance({
    material: material,
    // translucent: true,
    // closed: true,
  });

  // 创建图元添加
  var primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance],
      appearance: appearance,
    })
  );

  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);

5)实现效果:

 3.着色器实现圆环扩散效果

与上实现原理基本相似,通过挤出四边形,在该四边形上绘制半径变化的圆,并通过设置透明度,实现圆环扩散效果。

1)挤出矩形

const extrudePolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,
      ])
    ),
    // extrudedHeight: 30000,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: extrudePolygon,
    id: \"挤出四边形\",
  });

2)利用着色器绘制图形

const material = new Cesium.Material({
    fabric: {
      // type: \"Color\",
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        uTime: 0,
      },
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
          czm_material material = czm_getDefaultMaterial(materialInput);
          float strength =  1.0 - (abs(distance(materialInput.st,vec2(0.5,0.5))-0.25+uTime)*8.0);
          material.diffuse = vec3(strength,0.0,0.0);
          // step<0.5就为0,否则返回1
          // material.alpha = step(0.5,strength);
          // clamp,可以将内容限制在某个范围内
          if(strength<0.0){
            material.alpha = 0.0;//强度小于0,透明度为0
          }else{
            material.alpha = clamp(0.0,1.0,strength);//最小值,最大值,强度
          }
          
          return material;
      }
      `,
    },
  });
console.log(material.shaderSource);

3)利用gasp实现补间动画

gsap.to(material.uniforms, {
    uTime: 1,
    duration: 1,
    repeat: -1,
    ease: \"linear\",
    yoyo: true,//往返重复
  });

4)实例化着色器及图元实例

 const appearance = new Cesium.MaterialAppearance({
    material: material,
    // translucent: true,
    // closed: true,
  });
  
  appearance.material.uniforms.uTime = 0.0;
  // 创建图元添加
  var primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance],
      appearance: appearance,
    })
  );
  console.log(appearance);
  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);

5)实现效果:

6) 全部代码:






4.着色器实现雷达图效果

实现原理:

通过设置一个矩形盒子,并在其上用着色器绘制圆形,通过对角度的不停旋及动态变换的透明度转实现雷达图效果。

实现代码:






实现效果:

 

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号