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

Skip to first unread message

Chen Zhenyu

Jun 4, 2019, 11:15:56 PM6/4/19
to cesium-dev
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:

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
                                   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

Jun 12, 2019, 2:41:59 PM6/12/19
to cesium-dev
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:

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

Hope this helps a bit.
Reply all
Reply to author
0 new messages