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);

Mapbox 与 Babylon.js 可视化 glsl 特效篇（二十八） － 小专栏