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

77 views
Skip to first unread message

Chen Zhenyu

unread,
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:

randar.gif



The effect achieved on shadertoy:

shadertoy_rander.gif



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

unread,
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
Forward
0 new messages