CircleRippleMaterialProperty.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /*
  2. * @Description: 波纹圆效果(和水波纹扩散类似,参考开源代码)
  3. * @Version: 1.0
  4. * @Author: Julian
  5. * @Date: 2022-03-03 21:59:17
  6. * @LastEditors: Julian
  7. * @LastEditTime: 2022-03-03 23:09:02
  8. */
  9. class CircleRippleMaterialProperty {
  10. constructor(options) {
  11. this._definitionChanged = new Cesium.Event();
  12. this._color = undefined;
  13. this._speed = undefined;
  14. this.color = options.color;
  15. this.speed = options.speed;
  16. this.count = options.count;
  17. this.gradient = options.gradient;
  18. };
  19. get isConstant() {
  20. return false;
  21. }
  22. get definitionChanged() {
  23. return this._definitionChanged;
  24. }
  25. getType(time) {
  26. return Cesium.Material.CircleRippleMaterialType;
  27. }
  28. getValue(time, result) {
  29. if (!Cesium.defined(result)) {
  30. result = {};
  31. }
  32. result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);
  33. result.speed = Cesium.Property.getValueOrDefault(this._speed, time, 10, result.speed);
  34. result.count = this.count;
  35. result.gradient = this.gradient;
  36. return result
  37. }
  38. equals(other) {
  39. return (this === other ||
  40. (other instanceof CircleRippleMaterialProperty &&
  41. Cesium.Property.equals(this._color, other._color) &&
  42. Cesium.Property.equals(this._speed, other._speed) &&
  43. Cesium.Property.equals(this.count, other.count) &&
  44. Cesium.Property.equals(this.gradient, other.gradient))
  45. )
  46. }
  47. }
  48. Object.defineProperties(CircleRippleMaterialProperty.prototype, {
  49. color: Cesium.createPropertyDescriptor('color'),
  50. speed: Cesium.createPropertyDescriptor('speed'),
  51. count: Cesium.createPropertyDescriptor('count'),
  52. gradient: Cesium.createPropertyDescriptor('gradient')
  53. })
  54. Cesium.CircleRippleMaterialProperty = CircleRippleMaterialProperty;
  55. Cesium.Material.CircleRippleMaterialProperty = 'CircleRippleMaterialProperty';
  56. Cesium.Material.CircleRippleMaterialType = 'CircleRippleMaterialType';
  57. Cesium.Material.CircleRippleMaterialSource = `
  58. uniform vec4 color;
  59. uniform float speed;
  60. uniform float count;
  61. uniform float gradient;
  62. czm_material czm_getMaterial(czm_materialInput materialInput)
  63. {
  64. czm_material material = czm_getDefaultMaterial(materialInput);
  65. material.diffuse = 1.5 * color.rgb;
  66. vec2 st = materialInput.st;
  67. float dis = distance(st, vec2(0.5, 0.5));
  68. float per = fract(czm_frameNumber * speed / 1000.0);
  69. if(count == 1.0){
  70. if(dis > per * 0.5){
  71. discard;
  72. }else {
  73. material.alpha = color.a * dis / per / 2.0;
  74. }
  75. } else {
  76. vec3 str = materialInput.str;
  77. if(abs(str.z) > 0.001){
  78. discard;
  79. }
  80. if(dis > 0.5){
  81. discard;
  82. } else {
  83. float perDis = 0.5 / count;
  84. float disNum;
  85. float bl = 0.0;
  86. for(int i = 0; i <= 999; i++){
  87. if(float(i) <= count){
  88. disNum = perDis * float(i) - dis + per / count;
  89. if(disNum > 0.0){
  90. if(disNum < perDis){
  91. bl = 1.0 - disNum / perDis;
  92. }
  93. else if(disNum - perDis < perDis){
  94. bl = 1.0 - abs(1.0 - disNum / perDis);
  95. }
  96. material.alpha = pow(bl,(1.0 + 10.0 * (1.0 - gradient)));
  97. }
  98. }
  99. }
  100. }
  101. }
  102. return material;
  103. }
  104. `
  105. Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleRippleMaterialType, {
  106. fabric: {
  107. type: Cesium.Material.CircleRippleMaterialType,
  108. uniforms: {
  109. color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
  110. speed: 3.0,
  111. count: 4,
  112. gradient: 0.2
  113. },
  114. source: Cesium.Material.CircleRippleMaterialSource
  115. },
  116. translucent: function(material) {
  117. return true;
  118. }
  119. })
  120. export default CircleRippleMaterialProperty;