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 = `
 uniform float iTime;
 const vec2 iResolution = vec2(1.0,1.0);
 varying vec2 vUv;
 voidmain(void) {
 vec2 p = (vUv - 0.5 ) * 2.0;
 // vec2 p = (2.0fragCoord-iResolution.xy)/min(iResolution.y,iResolution.x);
 // background color
 vec3 bcol = vec3(1.0,0.8,0.7-0.07p.y)(1.0-0.25length§);
 // animate
 float tt = mod(iTime,1.5)/1.5;
 float ss = pow(tt,.2)0.5 + 0.5;
 ss = 1.0 + ss0.5sin(tt6.28313.0 + p.y0.5)exp(-tt4.0);
 p = vec2(0.5,1.5) + ssvec2(0.5,-0.5);
 // shape
 #if 0
 p = 0.8;
 p.y = -0.1 - p.y1.2 + abs(p.x)(1.0-abs(p.x));
 float r = length§;
 float d = 0.5;
 #else
 p.y -= 0.25;
 float a = atan(p.x,p.y)/3.141593;
 float r = length§;
 float h = abs(a);
 float d = (13.0h - 22.0hh + 10.0hhh)/(6.0-5.0h);
 #endif
 // color
 float s = 0.75 + 0.75p.x;
 s = 1.0-0.4r;
 s = 0.3 + 0.7s;
 s = 0.5+0.5pow( 1.0-clamp(r/d, 0.0, 1.0 ), 0.1 );
 vec3 hcol = vec3(1.0,0.4*r,0.3)*s;

Arcgis 与 Claygl 可视化 glsl 特效篇（二十二） － 小专栏