Mapbox 与 Babylon.js 可视化 glsl 特效篇（二十八）
我决定不从Babylonjs 基础来讲了 直接整合mapbox与babylonjs可视化来讲
我整合一个类库 后续不断更新中
- npm i @haibalai/mapbox-babylonjs
初始化mapbox-babylonjs 类库， map 是mapbox.gl 的map 对象
- import { BabylonMapManager } from "@haibalai/mapbox-babylonjs";
- BabylonMapManager.init(map);
添加特效
- import { BabylonMapManager } from "@haibalai/mapbox-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);
