How to realize specified geometry glow effect

CesiumJS
1

hi，Community
I want to realize glow effect in cesium like three.js does , to data visualization on the globe map

I think PostProcessStage should OK ,but cesium have not layer . so bloom or other effect will effect globe map too, bloom postStage and BlurStage can’t use czm_selected()

i tried below code ，failed

var bstage = Cesium.PostProcessStageLibrary.createBlurStage() ;

    // Shade selected model with highlight.

    var fragmentShaderSource =

      "uniform sampler2D colorTexture;\n" +

      "uniform sampler2D bloomTexture;\n" +

      "varying vec2 v_textureCoordinates;\n" +

      "uniform vec4 highlight;\n" +

      "void main() {\n" +

      "    vec4 color = texture2D(colorTexture, v_textureCoordinates);\n" +

      "vec4 bloom = texture2D(bloomTexture, v_textureCoordinates);\n" +

      

      "    if (czm_selected()) {\n" +

      "        vec3 highlighted = highlight.a * highlight.rgb + (1.0 - highlight.a) * color.rgb;\n" +

      "        gl_FragColor = vec4(highlighted, 1.0);\n" +

      // "        gl_FragColor = vec4(1.0);\n" +

          // " gl_FragColor = bloom + color;\n" +

      "    } else { \n" +

      "        gl_FragColor = color;\n" +

      "    }\n" +

      "}\n";

    var highlightStage = new Cesium.PostProcessStage({

        fragmentShader: fragmentShaderSource,

        uniforms: {

          highlight: function () {

            return new Cesium.Color(1.0, 0.0, 0.0, 0.5);

          },

        },

      });

    

    var stage = scene.postProcessStages.add(

      new Cesium.PostProcessStageComposite({

          stages : [highlightStage]

      })

    );

    // scene.postProcessStages.bloom.enabled = true;

    

    stage.selected = [ ];

can somebody help me reliaze the effect ,thanks a lot

2

Just to confirm, are you trying to add a bloom effect to an individual entity (for instance, a cube) and not the entire map?

There is an example of bloom for the entire map here: Cesium Sandcastle

Another example of glow for individual polygons using the PolylineGlowMaterialProperty here: Cesium Sandcastle

3

sure that is my mean, as the title says.
I think the bloom effect acts on entire sceen, is no use for data visualize and is counterproductive.

normal
normal1358×969 132 KB
bloomed
bloomed1344×984 159 KB

4

Have you taken a look at the second example I linked: Cesium Sandcastle?

5

Of course, I’ve studied Cesium Materials a lot recently.
and i made an another demo. show Stripe, RimLighting, PolylineGlow three materials every uniform combination. Although the glow effect still doesn’t satisfy me, But it still gave me some surprises. I think you can add the demo to the sandbox, as best practice for beginner :sweat_smile:

3 Likes
6

Thank you for sharing the example. It looks great!

What about the glow effect that still doesn’t satisfy you? We would love to hear your feedback.

You can also try to write a custom shader with fabric: You can create a custom polyline fabric. Here is an example of someone using fabric to create a dashed arrow: sandcastle. Please visit our wiki on Fabric here .