Arcgis 与 Claygl 可视化 glsl 特效篇（八）

我决定不从claygl基础来讲了 直接整合arcgis与claygl可视化来讲
 关于整合clagyl 有兴趣看我这篇文章 arcgis 与 claygl 引擎结合做地图可视化我整合一个类库 后续不断更新中
npm i @haibalai/gismap4-claygl
初始化gismap4-claygl 类库， view是arcgis的sceneView对象
import { ClayglMapManager} from “@haibalai/gismap4-claygl”;
 ClayglMapManager.init(view);添加特效
import { ClayglMapManager} from “@haibalai/gismap4-claygl”;
 import * as clay from “claygl”;
 const fragmentShader = `
 #define SMOOTH(r,R) (1.0-smoothstep(R-1.0,R+1.0, r))
 #define RANGE(a,b,x) ( step(a,x)(1.0-step(b,x)) )
 #define RS(a,b,x) ( smoothstep(a-1.0,a+1.0,x)(1.0-smoothstep(b-1.0,b+1.0,x)) )
 #define M_PI 3.1415926535897932384626433832795
 #define blue1 vec3(0.74,0.95,1.00)
 #define blue2 vec3(0.87,0.98,1.00)
 #define blue3 vec3(0.35,0.76,0.83)
 #define blue4 vec3(0.953,0.969,0.89)
 #define red vec3(1.00,0.38,0.227)
 #define MOV(a,b,c,d,t) (vec2(acos(t)+bcos(0.1*(t)), csin(t)+dcos(0.1*(t))))
 constfloat ratio = 1.0;
 float PI = 3.1415926;
 uniform float iTime;
 const vec2 iResolution = vec2(1200.0,1200.0);
 varying vec2 vUv;
 floatmovingLine(vec2 uv, vec2 center, float radius)
 {
 //angle of the line
 float theta0 = 90.0 * iTime;
 vec2 d = uv - center;
 float r = sqrt( dot( d, d ) );
 if(r<radius)
 {
 //compute the distance to the line theta=theta0
 vec2 p = radiusvec2(cos(theta0M_PI/180.0),
 -sin(theta0M_PI/180.0));
 float l = length( d - pclamp( dot(d,p)/dot(p,p), 0.0, 1.0) );
 d = normalize(d);
 //compute gradient based on angle difference to theta0
 float theta = mod(180.0atan(d.y,d.x)/M_PI+theta0,360.0);
 float gradient = clamp(1.0-theta/90.0,0.0,1.0);
 return SMOOTH(l,1.0)+0.5gradient;
 }
 elsereturn 0.0;
 }
 floatcircle(vec2 uv, vec2 center, float radius, float width)
 {
 float r = length(uv - center);
 return SMOOTH(r-width/2.0,radius)-SMOOTH(r+width/2.0,radius);
 }Arcgis 与 Claygl 可视化 glsl 特效篇（八） － 小专栏