• Cesium从已知的自定义材质扩展其他效果（二）

    通过传图片，实现一个可以设置重复次数和持续时间的流动线条。是在常见的流动线条效果上面更改了一些代码。找了很多，但都是单一的流动效果，不能设置重复次数，于是就自己重新改动了一点。

    1. function FlowLineMaterial(opt) {
    2.     this.defaultColor = new Cesium.Color(0, 0, 0, 0);
    3.     opt = opt || {};
    4.     this._definitionChanged = new Cesium.Event();
    5.     this._color = undefined;
    6.     this.color = opt.color || this.defaultColor; //颜色
    7.     this._duration = opt.duration || 1000; //时长
    8.     this.url = opt.url; //材质图片
    9.     this._time = undefined;
    10. }
    11.  
    12. FlowLineMaterial.prototype.getType = function (time) {
    13.     return "FlowLine";
    14. };
    15.  
    16. FlowLineMaterial.prototype.getValue = function (time, result) {
    17.     if (!Cesium.defined(result)) {
    18.         result = {};
    19.     }
    20.     result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, this.defaultColor, result.color);
    21.     result.image = this.url;
    22.     if (this._time === undefined) {
    23.         this._time = new Date().getTime();
    24.     }
    25.     result.time = (new Date().getTime() - this._time) / this._duration;
    26.  
    27.     return result;
    28. };
    29.  
    30. FlowLineMaterial.prototype.equals = function (other) {
    31.     return this === other ||
    32.         other instanceof FlowLineMaterial && Cesium.Property.equals(this._color, other._color);
    33. };
    34.  
    35. Object.defineProperties(FlowLineMaterial.prototype, {
    36.     isConstant: {
    37.         get: function get() {
    38.             return false;
    39.         }
    40.     },
    41.     definitionChanged: {
    42.         get: function get() {
    43.             return this._definitionChanged;
    44.         }
    45.     },
    46.     color: Cesium.createPropertyDescriptor('color')
    47. });
    48.  
    49.  
    50. Cesium.Material._materialCache.addMaterial("FlowLine", {
    51.     fabric: {
    52.         type: "FlowLine",
    53.         uniforms: {
    54.             color: new Cesium.Color(1, 0, 0, 1.0),
    55.             image: '',
    56.             time: 0,
    57.             repeat: new Cesium.Cartesian2(1.0, 1.0)
    58.         },
    59.  
    60.         source: "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    61.                     {\n\
    62.                         czm_material material = czm_getDefaultMaterial(materialInput);\n\
    63.                         vec2 st = repeat * materialInput.st;\n\
    64.                         vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
    65.                         if(color.a == 0.0)\n\
    66.                         {\n\
    67.                             material.alpha = colorImage.a;\n\
    68.                             material.diffuse = colorImage.rgb; \n\
    69.                         }\n\
    70.                         else\n\
    71.                         {\n\
    72.                             material.alpha = colorImage.a * color.a;\n\
    73.                             material.diffuse = max(color.rgb * material.alpha * 3.0, color.rgb); \n\
    74.                         }\n\
    75.                         return material;\n\
    76.                     }"
    77.     },
    78.     translucent: function translucent() {
    79.         return true;
    80.     }
    81. });

    使用起来的话也很简单，只不过要注意repeat的值，并不是普通的数字，而是Cartesian2类型的值。

    用法如下；重复两次

    1. viewer.entities.add({
    2.   name: 'PolylineTrail',
    3.   polyline: {
    4.     positions: Cesium.Cartesian3.fromDegreesArrayHeights([
    5.       110,30, 100000,
    6.       114, 30, 100000,
    7.       114, 50, 1000000]),
    8.     width: 5,
    9.     material: new FlowLineMaterial({
    10.       color: Cesium.Color.fromCssColorString('#00ff00'),
    11.       duration: 5000,
    12.       repeat: new Cesium.Cartesian2(2.0,1.0),
    13.       url: 'img/lineArrow2.png'
    14.     })
    15.   }
    16. });
    17.  
    18.  
    19. viewer.zoomTo(viewer.entities);

    效果图：

     如果完善一下的话，就可以只传数字，从而实现在x方向或者y方向上的重复。

    主要原理是fabric的source里面。

    materialInput.st 是一个vec2类型的值，repeat最后也会变成vec2类型的值。两个相乘，应该就是向量的乘法。

    materialInput.st的第一个值可以看成是沿线的方向，第二个值是线的垂直方向。沿线的方向重复了两次。

    对于流动墙体，则有两种情况。一种是环形围绕墙的动画，一种是在垂直方向上的动画。

    如果将这种思路应用到环绕墙效果上，那么repeat也是一样的设置，对于垂直墙动画，也是一样的，只不过方向不同而已。

    环绕墙在原先基础上显示两个环绕效果：

     代码如下：

    1. function PolylineTrailLinkMaterialProperty(color, duration, repeat) {
    2.   this._definitionChanged = new Cesium.Event();
    3.   this._color = undefined;
    4.   this._repeat = undefined;
    5.   this._colorSubscription = undefined;
    6.   this.color = color;
    7.   this.repeat = repeat;
    8.   this.duration = duration;
    9.   this._time = (new Date()).getTime();
    10. }
    11. Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
    12.   isConstant: {
    13.       get: function () {
    14.           return false;
    15.       }
    16.   },
    17.   definitionChanged: {
    18.       get: function () {
    19.           return this._definitionChanged;
    20.       }
    21.   },
    22.   color: Cesium.createPropertyDescriptor('color'),
    23.   repeat: Cesium.createPropertyDescriptor('repeat')
    24. });
    25. PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
    26.   return 'PolylineTrailLink';
    27. }
    28. PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
    29.   if (!Cesium.defined(result)) {
    30.       result = {};
    31.   }
    32.   result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    33.   result.repeat = Cesium.Property.getValueOrClonedDefault(this._repeat, time,new Cesium.Cartesian2(1.0,1.0), result.repeat);
    34.   result.image = Cesium.Material.PolylineTrailLinkImage;
    35.   result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    36.   return result;
    37. }
    38. PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
    39.   return this === other ||
    40.       (other instanceof PolylineTrailLinkMaterialProperty &&
    41.           Property.equals(this._color, other._color))
    42. }
    43. Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
    44. Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
    45. Cesium.Material.PolylineTrailLinkImage = "./img/colors.png";
    46. Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    47.                                             {\n\
    48.                                                  czm_material material = czm_getDefaultMaterial(materialInput);\n\
    49.                                                  vec2 st = repeat * materialInput.st;\n\
    50.                                                  vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
    51.                                                  material.alpha = colorImage.a * color.a;\n\
    52.                                                  material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
    53.                                                  return material;\n\
    54.                                              }";
    55. Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
    56.   fabric: {
    57.       type: Cesium.Material.PolylineTrailLinkType,
    58.       uniforms: {
    59.         color: new Cesium.Color(1.0, 0.0, 0.0, 1),
    60.         image: Cesium.Material.PolylineTrailLinkImage,
    61.         time: 0,
    62.         repeat: new Cesium.Cartesian2(1.0,1.0)
    63.       },
    64.       source: Cesium.Material.PolylineTrailLinkSource
    65.   },
    66.   translucent: function (material) {
    67.       return true;
    68.   }
    69. });
    70.  
    71. var redWall = viewer.entities.add({
    72.   name: "Red wall from surface with outline",
    73.   wall: {
    74.     positions: Cesium.Cartesian3.fromDegreesArray([
    75.       -107.0,
    76.       43.0,
    77.       -97.0,
    78.       43.0,
    79.       -97.0,
    80.       40.0,
    81.       -107.0,
    82.       40.0,
    83.       -107.0,
    84.       43.0,
    85.     ]),
    86.     maximumHeights: [10000, 10000, 10000, 10000, 10000],
    87.     minimumHeights: [43.9, 49.4, 38.7, 40, 54],
    88.     material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.RED, 3000, new Cesium.Cartesian2(2.0,1.0))
    89.   },
    90. });
    91.  
    92. viewer.zoomTo(viewer.entities)

    只是和上面流动线略有不同的设置方式。

    垂直流动墙效果：

    上面是在垂直方向重复两次的，下面是不重复的效果

     

    材质代码如下，和环绕墙材质很多代码一样，唯一不同的就是glsl语言略有不同，重复的方向从s的水平方向变成了t的垂直方向。

    1.  
    2. function PolylineTrailLinkMaterialProperty(color, duration, repeat) {
    3.   this._definitionChanged = new Cesium.Event();
    4.   this._color = undefined;
    5.   this._colorSubscription = undefined;
    6.   this.color = color;
    7.   this._repeat = undefined;
    8.   this.repeat = repeat;
    9.   this.duration = duration;
    10.   this._time = (new Date()).getTime();
    11. }
    12. Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
    13.   isConstant: {
    14.       get: function () {
    15.           return false;
    16.       }
    17.   },
    18.   definitionChanged: {
    19.       get: function () {
    20.           return this._definitionChanged;
    21.       }
    22.   },
    23.   color: Cesium.createPropertyDescriptor('color'),
    24.   repeat: Cesium.createPropertyDescriptor('repeat')
    25. });
    26. PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
    27.   return 'PolylineTrailLink';
    28. }
    29. PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
    30.   if (!Cesium.defined(result)) {
    31.       result = {};
    32.   }
    33.   result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    34.   result.repeat = Cesium.Property.getValueOrClonedDefault(this._repeat, time, new Cesium.Cartesian2(1.0,1.0), result.repeat);
    35.   result.image = Cesium.Material.PolylineTrailLinkImage;
    36.   result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    37.   return result;
    38. }
    39. PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
    40.   return this === other ||
    41.       (other instanceof PolylineTrailLinkMaterialProperty &&
    42.           Property.equals(this._color, other._color))
    43. }
    44. Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
    45. Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
    46. // Cesium.Material.PolylineTrailLinkImage = "./img/colors.png";
    47. Cesium.Material.PolylineTrailLinkImage = "./img/fence.png";
    48. // Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    49. //                                             {\n\
    50. //                                                  czm_material material = czm_getDefaultMaterial(materialInput);\n\
    51. //                                                  vec2 st = materialInput.st;\n\
    52. //                                                  vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
    53. //                                                  material.alpha = colorImage.a * color.a;\n\
    54. //                                                  material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
    55. //                                                  return material;\n\
    56. //                                              }";
    57. Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    58. {\n\
    59.   czm_material material = czm_getDefaultMaterial(materialInput);\n\
    60.   vec2 st = repeat * materialInput.st;\n\
    61.   vec4 colorImage = texture2D(image, vec2(fract((st.t - time)), st.t));\n\
    62.   vec4 fragColor;\n\
    63.   fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
    64.   fragColor = czm_gammaCorrect(fragColor);\n\
    65.   material.alpha = colorImage.a * color.a;\n\
    66.   material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
    67.   return material;\n\
    68. }";
    69.     // vec4 fragColor;\n\
    70.     // fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
    71.     // fragColor = czm_gammaCorrect(fragColor);\n\
    72. Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
    73.   fabric: {
    74.       type: Cesium.Material.PolylineTrailLinkType,
    75.       uniforms: {
    76.           color: new Cesium.Color(0.0, 0.0, 0.0, 1),
    77.           image: Cesium.Material.PolylineTrailLinkImage,
    78.           repeat: new Cesium.Cartesian2(1.0,1.0),
    79.           time: 0
    80.       },
    81.       source: Cesium.Material.PolylineTrailLinkSource
    82.   },
    83.   translucent: function (material) {
    84.       return true;
    85.   }
    86. });
    87.  
    88. var redWall = viewer.entities.add({
    89.   name: "Green wall from surface with outline",
    90.   wall: {
    91.     positions: Cesium.Cartesian3.fromDegreesArray([
    92.       -107.0,
    93.       43.0,
    94.       -97.0,
    95.       43.0,
    96.       -97.0,
    97.       40.0,
    98.       -107.0,
    99.       40.0,
    100.       -107.0,
    101.       43.0,
    102.     ]),
    103.     maximumHeights: [1000000, 1000000, 1000000, 1000000, 1000000],
    104.     material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.GREEN, 3000, new Cesium.Cartesian2(1.0,2.0))
    105.   },
    106. });
    107.  
    108. viewer.zoomTo(viewer.entities)

     传入new Cesium.Cartesian2(1.0,2.0)就是重复两次的效果了。

    如果对于glsl有了解，下面这个文档就很有帮助。它解释了cesium在渲染过程中使用到的glsl语言，以及哪些参数也传入了通道中。

    czm_material - Cesium Documentation

    如果对webgl渲染了解，并且对cesium的材质感兴趣，希望对你有帮助。

  • 相关阅读:
    ubuntu22.04 ssh 连不上
    什么是算子？
    时区的问题
    最近常用的几个【行操作】的Pandas函数
    Docker 镜像导出和导入
    使用Nginx进行负载均衡
    0数据结构-结构体struct与typedef
    面试官：告诉我为什么static和transient关键字修饰的变量不能被序列化？
    3D模型格式转换工具HOOPS Exchange协助Epic Games实现CAD数据轻松导入虚幻引擎
    idea工具配置隐藏文件及文件夹
  • 原文地址：https://blog.csdn.net/GhostPaints/article/details/126058256