我決定不從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;
• floatsdSphere(vec3 pos, float size)
• {
• return length(pos) - size;
• }
• floatsdBox(vec3 pos, vec3 size)
• {
• pos = abs(pos) - vec3(size);
• return max(max(pos.x, pos.y), pos.z);
• }
• floatsdOctahedron(vec3 p, float s)
• {
• p = abs(p);
• float m = p.x+p.y+p.z-s;
• vec3 q;
• if( 3.0*p.x < m ) q = p.xyz;
• elseif( 3.0*p.y < m ) q = p.yzx;
• elseif( 3.0*p.z < m ) q = p.zxy;
• elsereturn m*0.57735027;
• float k = clamp(0.5*(q.z-q.y+s),0.0,s);
• return length(vec3(q.x,q.y-s+k,q.z-k));
• }
• floatsdPlane(vec3 pos)
• {
• return pos.y;

Mapbox 與 Babylon.js 視覺化 glsl 特效篇（二十五） － 小專欄