How does cesium be combined with the shader on shadertoy for programming?

[Chen Zhenyu]

I don't have a shader base, but I can combine shadertoy with threejs. I don't know how to use it when I switch to cesium,and I don't know how to apply the shadexShaderSource shader of appearance.

I want to achieve the effect：

The effect achieved on shadertoy:

My current practice:

Shadertoy shader code address:https://www.shadertoy.com/view/3djSDD

my cesium code:

var ellipse = new Cesium.EllipseGeometry({

           center: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),

           semiMajorAxis: 500000.0,

           semiMinorAxis: 300000.0,

           rotation: Cesium.Math.toRadians(60.0)

       });

       var geometry = Cesium.EllipseGeometry.createGeometry(ellipse);

        var instance = new Cesium.GeometryInstance({

           geometry: geometry,

           id: 'ellipse'

       });

        viewer.scene.primitives.add(new Cesium.Primitive({

           geometryInstances : instance,

           appearance : new Cesium.EllipsoidSurfaceAppearance({

               // material : Cesium.Material.fromType('Checkerboard'),

               vertexShaderSource: ``,

               fragmentShaderSource: `

                               //Free to use as you wish. Have fun

                               #define green vec3(0.0,1.0,0.0)

                                // 时间

                               uniform float iTime;

                               // 分辨率

                               uniform vec2 iResolution;

                               // 鼠标位置

                               uniform vec2 iMouse;

                                // returns a vec3 color from every pixel requested.

                               // Generates a BnW Ping on normalized 2d coordinate system

                               vec3 RadarPing(in vec2 uv, in vec2 center, in float innerTail,

                                              in float frontierBorder, in float timeResetSeconds,

                                              in float radarPingSpeed, in float fadeDistance)

                               {

                                   vec2 diff = center-uv;

                                   float r = length(diff);

                                   float time = mod(iTime, timeResetSeconds) * radarPingSpeed;

                                    float circle;

                                   // r is the distance to the center.

                                   // circle = BipCenter---//---innerTail---time---frontierBorder

                                   //illustration

                                   //https://sketch.io/render/sk-14b54f90080084bad1602f81cadd4d07.jpeg

                                   circle += smoothstep(time - innerTail, time, r) * smoothstep(time + frontierBorder,time, r);

                                   circle *= smoothstep(fadeDistance, 0.0, r); // fade to 0 after fadeDistance

                                    return vec3(circle);

                               }

                                void main()

                               {

                                   //normalize coordinates

                                   vec2 uv = gl_FragCoord.xy / iResolution.xy; //move coordinates to 0..1

                                   uv = uv.xy*2.; // translate to the center

                                   uv += vec2(-1.0, -1.0);

                                   uv.x *= iResolution.x/iResolution.y; //correct the aspect ratio

                                    vec3 color;

                                   // generate some radar pings

                                   float fadeDistance = 1.0;

                                   float resetTimeSec = 4.0;

                                   float radarPingSpeed = 0.3;

                                   vec2 greenPing = vec2(0.0, 0.0);

                                   color += RadarPing(uv, greenPing, 0.25, 0.025, resetTimeSec, radarPingSpeed, fadeDistance) * green;

                                    //return the new color

                                   gl_FragColor = vec4(color,1.0);

                               }

                               `,

           })

       }));

I just want to figure out some questions, is there a tutorial for cesium and shader?，how should I coder vertexShaderSource?

Thanks in advance to the developers.

[Omar Shehata]

There really isn't a good API for doing this kind of thing in CesiumJS right now. There's been some discussions of adding support for it here:

https://github.com/AnalyticalGraphicsInc/cesium/issues/7652

This blog post also has some good tips on doing this even though it requires using some private/undocumented parts of Cesium:

https://cesium.com/blog/2019/04/29/gpu-powered-wind/

Hope this helps a bit.