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.