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

我决定不从claygl基础来讲了直接整合arcgis与claygl可视化来讲
关于整合clagyl 有兴趣看我这篇文章 arcgis 与 claygl 引擎结合做地图可视化

我整合一个类库后续不断更新中

初始化gismap4-claygl 类库， view是arcgis的sceneView对象

添加特效

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 iMouse;
varying vec2 vUv;
uniform sampler2D iChannel0;
vec2 rotate(vec2 p, float a)
{
return vec2(p.x * cos(a) - p.y * sin(a), p.x * sin(a) + p.y * cos(a));
}
// 1D random numbers
floatrand(float n)
{
return fract(sin(n) * 43758.5453123);
}
// 2D random numbers
vec2 rand2(in vec2 p)
{
return fract(vec2(sin(p.x * 591.32 + p.y * 154.077), cos(p.x * 391.32 + p.y * 49.077)));
}
// 1D noise
floatnoise1(float p)
{
float fl = floor(p);
float fc = fract(p);
return mix(rand(fl), rand(fl + 1.0), fc);
}
// voronoi distance noise, based on iq's articles
floatvoronoi(in vec2 x)
{
vec2 p = floor(x);
vec2 f = fract(x);
vec2 res = vec2(8.0);
for(int j = -1; j <= 1; j ++)
{
for(int i = -1; i <= 1; i ++)
{
vec2 b = vec2(i, j);
vec2 r = vec2(b) - f + rand2(p + b);
// chebyshev distance, one of many ways to do this
float d = max(abs(r.x), abs(r.y));
if(d < res.x)
{
res.y = res.x;
res.x = d;
}
elseif(d < res.y)
{
res.y = d;
}
}
}
return res.y - res.x;
}
voidmain(void) {
float flicker = noise1(iTime * 2.0) * 0.8 + 0.4;
vec2 uv = vUv;
uv = (uv - 0.5) * 3.0;
vec2 suv = uv;
uv.x *= iResolution.x / iResolution.y;