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 time;
  • vec2 iResolution = vec2(1.0,1.0);
  • varying vec2 vUv;
  • #define AA 1
  • #define HEIGHT 12.
  • vec3 _col;
  • #define iTime time
  • #define PI 3.14159
  • #define TAU 6.28318
  • vec3 spunk(vec2 uv)
  • {
  • vec3 col = vec3(.55,0.35,1.225);
  • uv.x += sin(0.2+uv.y*0.8)*0.5;
  • uv.x = uv.x*50.0;
  • float dx = fract(uv.x);
  • uv.x = floor(uv.x);
  • float t = iTime*0.4;
  • uv.y *= 0.15;
  • float o=sin(uv.x*215.4);
  • float s=cos(uv.x*33.1)*.3 +.7;
  • float trail = mix(95.0,35.0,s);
  • float yv = fract(uv.y + t*s + o) * trail;
  • yv = 1.0/yv;
  • yv = smoothstep(0.0,1.0,yv*yv);
  • yv = sin(yv*PI)*(s*5.0);
  • float d2 = sin(dx*PI);
  • yv *= d2*d2;
  • col = col*yv;
  • return col;
  • }
  • voidmain(void)
  • {
  • float an = sin(iTime*64564.8);
  • //float dist = 36.0+sin(iTime)*7.0;
  • float dist = 200.0;
  • vec3 ro = vec3( dist*cos(an), sin(iTime*0.75)*14.0, dist*sin(an) );
  • vec3 ta = vec3( 0.0, 0.0, 0.0 );
  • // camera matrix
  • vec3 ww = normalize( ta - ro );
  • vec3 uu = normalize( cross(ww,vec3(0.0,1.0,0.0) ) );
  • vec3 vv = normalize( cross(uu,ww));
  • vec3 tot = vec3(0.0);
  • vec2 ppp = (-iResolution.xy + 2.*(gl_FragCoord.xy))/iResolution.y;
  • vec3 bbk = spunk(vUv.xy);
  • //vec2 p = (-iResolution.xy + 2.0*gl_FragCoord.xy)/iResolution.y;
  • vec2 p = (vUv -0.5) * 2.0 ;

Arcgis 与 Claygl 可视化 glsl 特效篇(三十四) - 小专栏

posted @ 2023-04-24 15:25  haibalai  阅读(10)  评论(0编辑  收藏  举报