Cesium 与 Babylon.js 可视化 glsl 特效篇(二十八)

我决定不从Babylonjs 基础来讲了 直接整合cesium与babylonjs可视化来讲

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

  • npm i @haibalai/cesium-babylonjs

 

初始化cesium -babylonjs 类库, map 是cesium 的viewer对象

  • import { BabylonMapManager } from "@haibalai/cesium-babylonjs";
  • BabylonMapManager.init(map);

 

添加特效

  • import { BabylonMapManager } from "@haibalai/cesium-babylonjs";
  • const fragmentShader = `
  • uniform float iTime;
  • const vec2 iResolution = vec2(1.0,1.0);
  • varying vec2 vUv;
  • #define TAU 6.28318530718
  • #define TILING_FACTOR 1.0
  • #define MAX_ITER 8
  • floatwaterHighlight(vec2 p, float time, float foaminess)
  • {
  • vec2 i = vec2(p);
  • float c = 0.0;
  • float foaminess_factor = mix(1.0, 6.0, foaminess);
  • float inten = .005 * foaminess_factor;
  • for (int n = 0; n < MAX_ITER; n++)
  • {
  • float t = time * (1.0 - (3.5 / float(n+1)));
  • i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
  • c += 1.0/length(vec2(p.x / (sin(i.x+t)),p.y / (cos(i.y+t))));
  • }
  • c = 0.2 + c / (inten * float(MAX_ITER));
  • c = 1.17-pow(c, 1.4);
  • c = pow(abs(c), 8.0);
  • return c / sqrt(foaminess_factor);
  • }
  • voidmain(void) {
  • vec2 uv = vUv;
  • float time = iTime * 0.1+23.0;
  • // vec2 uv = fragCoord.xy / iResolution.xy;

Cesium 与 Babylon.js 可视化 glsl 特效篇(二十八) - 小专栏

posted @ 2023-03-15 11:14  haibalai  阅读(21)  评论(0编辑  收藏  举报