Skyline.js 4.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. ; (function (Cesium) {
  2. checkSkyScenery(Cesium);
  3. function Skyline(viewer, opt) {
  4. this.stages = viewer.scene.postProcessStages;
  5. let edgeDetection = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
  6. let postProccessStage = new Cesium.PostProcessStage({
  7. //此后处理阶段的唯一名称,供组合中其他阶段参考,如果未提供名称,将自动生成GUID
  8. // name:name,
  9. //unform着色器对象 textureScale
  10. fragmentShader: 'uniform sampler2D colorTexture;' +
  11. 'uniform sampler2D depthTexture;' +
  12. 'varying vec2 v_textureCoordinates;' +
  13. 'uniform vec4 customColor;' +
  14. 'void main(void)' +
  15. '{' +
  16. 'float depth = czm_readDepth(depthTexture, v_textureCoordinates);' +
  17. 'vec4 color = texture2D(colorTexture, v_textureCoordinates);' +
  18. 'if(depth<1.0 - 0.000001){' +
  19. 'gl_FragColor = color;' +
  20. '}' +
  21. 'else{' +
  22. 'gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
  23. // 'gl_FragColor = vec4(customColor.rgb, customColor.a);' +
  24. '}' +
  25. '}',
  26. // uniforms: {
  27. // customColor: () => {
  28. // return Cesium.Color.fromCssColorString("#ffeb3b")
  29. // }
  30. // }
  31. })
  32. //PostProcessStage:要使用的片段着色器。默认sampler2D制服是colorTexture和depthTexture。
  33. let postProccesStage_1 = new Cesium.PostProcessStage({
  34. // name:obj.name+'_1',
  35. fragmentShader: 'uniform sampler2D colorTexture;' +
  36. 'uniform sampler2D redTexture;' +
  37. 'uniform sampler2D silhouetteTexture;' +
  38. 'varying vec2 v_textureCoordinates;' +
  39. 'void main(void)' +
  40. '{' +
  41. 'vec4 redcolor=texture2D(redTexture, v_textureCoordinates);' +
  42. 'vec4 silhouetteColor = texture2D(silhouetteTexture, v_textureCoordinates);' +
  43. 'vec4 color = texture2D(colorTexture, v_textureCoordinates);' +
  44. 'if(redcolor.r == 1.0){' +
  45. 'gl_FragColor = mix(color, vec4(5.0,0.0,0.0,1.0), silhouetteColor.a);' +
  46. '}' +
  47. 'else{' +
  48. 'gl_FragColor = color;' +
  49. '}' +
  50. '}',
  51. //uniform着色器对象
  52. uniforms: {
  53. redTexture: postProccessStage.name,
  54. silhouetteTexture: edgeDetection.name
  55. }
  56. });
  57. //如果inputPreviousStageTexture 是 true,则每个阶段输入是场景渲染到的输出纹理或之前执行阶段的输出纹理
  58. //如果inputPreviousStageTexture是false,则合成中每个阶段的输入纹理都是相同的
  59. this.skylineObj = new Cesium.PostProcessStageComposite({
  60. //PostProcessStage要按顺序执行 的 s 或组合的数组。
  61. stages: [edgeDetection, postProccessStage, postProccesStage_1],
  62. //是否执行每个后处理阶段,其中一个阶段的输入是前一个阶段的输出。否则每个包含阶段的输入是组合之前执行的阶段的输出
  63. inputPreviousStageTexture: false,
  64. //后处理阶段制服的别名
  65. uniforms: edgeDetection.uniforms
  66. })
  67. this.stages.add(this.skylineObj);
  68. this._enabled = Cesium.defaultValue(opt.enabled, true);
  69. this._color = Cesium.defaultValue(opt.color, "#FF0000");
  70. this.skylineObj.uniforms.color = Cesium.Color.fromCssColorString(this._color);
  71. // this.skylineObj.enabled = Cesium.defaultValue(opt.enabled, true);
  72. Object.defineProperties(this, {
  73. // 是否开启
  74. enabled: {
  75. get: function () {
  76. return this._enabled
  77. },
  78. set: function (e) {
  79. this._enabled = e
  80. this.skylineObj.enabled = e
  81. }
  82. },
  83. color: {
  84. get: function () {
  85. return this._color
  86. },
  87. set: function (e) {
  88. this._color = e
  89. this.skylineObj.uniforms.color = Cesium.Color.fromCssColorString(e);
  90. }
  91. }
  92. })
  93. }
  94. Skyline.prototype.remove = function () {
  95. this.stages.remove(this.skylineObj);
  96. }
  97. Cesium.Skyline = Skyline;
  98. }(SkyScenery));