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 = `
#define SMOOTH(r,R) (1.0-smoothstep(R-1.0,R+1.0, r))
#define RANGE(a,b,x) ( step(a,x)(1.0-step(b,x)) )
#define RS(a,b,x) ( smoothstep(a-1.0,a+1.0,x)(1.0-smoothstep(b-1.0,b+1.0,x)) )
#define M_PI 3.1415926535897932384626433832795
#define blue1 vec3(0.74,0.95,1.00)
#define blue2 vec3(0.87,0.98,1.00)
#define blue3 vec3(0.35,0.76,0.83)
#define blue4 vec3(0.953,0.969,0.89)
#define red vec3(1.00,0.38,0.227)
#define MOV(a,b,c,d,t) (vec2(acos(t)+bcos(0.1*(t)), csin(t)+dcos(0.1*(t))))
constfloat ratio = 1.0;
float PI = 3.1415926;
uniform float iTime;
const vec2 iResolution = vec2(1200.0,1200.0);
varying vec2 vUv;
floatmovingLine(vec2 uv, vec2 center, float radius)
{
//angle of the line
float theta0 = 90.0 * iTime;
vec2 d = uv - center;
float r = sqrt( dot( d, d ) );
if(r<radius)
{
//compute the distance to
Mapbox 与 Babylon.js 可视化 glsl 特效篇（八） － 小专栏