§ examples · shader
Custom WGSL Layer

Name: MapGPU
Author: Mustafa Gurbuz
Write your own WGSL vertex + fragment; animated flow field over a raster basemap.
slugwgsl-shader
source245 lines
statuslive
tsexamples-src/wgsl-shader.ts
1/**
* Custom WGSL Layer — animated polyline trails rendered with a
* user-supplied WGSL vertex + fragment shader. The shader receives the
* library's camera / frame uniforms (mercator projection, viewport,
* frame time) and a small custom uniform block (halfWidth, trailSpeed,
* trailLength, trailCycle). We build a triangle-list vertex buffer on
* the client side: each segment of the polyline expands into 4 vertices
* with side / distance attributes that drive the trail effect.
*/
10 
11import { MapView, lonLatToMercator } from "mapgpu";
12import { RasterTileLayer, WGSLLayer } from "mapgpu/layers";
13import { RenderEngine } from "mapgpu/render";
14 
15import type { RunResultObject } from "@/components/examples/ExampleCanvas";
16 
17// Local GPUBuffer shim so the example doesn't need @webgpu/types installed.
18type LocalGPUBuffer = { destroy?: () => void };
19type LocalGPUDevice = {
createBuffer(d: { label?: string; size: number; usage: number }): LocalGPUBuffer;
queue: { writeBuffer(b: LocalGPUBuffer, offset: number, data: ArrayBufferView): void };
22};
23const VERTEX_USAGE = 0x20;
24const COPY_DST_USAGE = 0x08;
25 
26const VERTEX_SHADER = /* wgsl */ `
27struct CustomUniforms {
halfWidth: f32,
trailSpeed: f32,
trailLength: f32,
trailCycle: f32,
32};
33struct VertexOutput {
@builtin(position) position: vec4<f32>,
@location(0) vColor: vec4<f32>,
@location(1) vDistSide: vec2<f32>,
37};
38@vertex
39fn vs_main(
@location(0) pos: vec2<f32>,
@location(1) offset: vec2<f32>,
@location(2) distSide: vec2<f32>,
@location(3) color: vec4<f32>,
44) -> VertexOutput {
var out: VertexOutput;
let clip = projectMercator(pos);
if (clip.w < 0.0001) {
  out.position = vec4<f32>(0,0,0.5,1);
  out.vColor = vec4<f32>(0);
  out.vDistSide = vec2<f32>(0, 100);
  return out;
}
let clipOff = projectMercator(pos + offset * 50000.0);
let sc = clip.xy / clip.w;
let so = clipOff.xy / clipOff.w;
let dir = normalize((so - sc) * camera.viewport) / camera.viewport * custom.halfWidth * 2.0;
out.position = vec4<f32>(clip.xy + dir * clip.w * distSide.y, clip.z, clip.w);
out.vColor = color;
out.vDistSide = distSide;
return out;
61}
62`;
63 
64const FRAGMENT_SHADER = /* wgsl */ `
65@fragment
66fn fs_main(
@location(0) vColor: vec4<f32>,
@location(1) vDistSide: vec2<f32>,
69) -> @location(0) vec4<f32> {
let phase = vDistSide.x - frame.time * custom.trailSpeed;
let t = phase - custom.trailCycle * floor(phase / custom.trailCycle);
let head = 1.0 - smoothstep(0.0, custom.trailLength, t);
let edge = exp(-abs(vDistSide.y) * 3.0);
let alpha = min(head * edge * frame.opacity * vColor.a, 0.85);
if (alpha < 0.01) { discard; }
return vec4<f32>(vColor.rgb * alpha, alpha);
77}
78`;
79 
80const STRIDE = 28; // 2 + 2 + 2 f32 + 4 u8 = 28 bytes
81 
82// Three great-circle-sampled flight tracks. Coordinates in [lon, lat].
83const TRACKS: Array<{ path: [number, number][]; color: [number, number, number, number] }> = [
{
  path: buildGreatCircle([29.0, 41.0], [-0.127, 51.507], 40),
  color: [255, 92, 26, 255],
},
{
  path: buildGreatCircle([29.0, 41.0], [139.767, 35.681], 60),
  color: [67, 176, 255, 255],
},
{
  path: buildGreatCircle([29.0, 41.0], [-73.779, 40.642], 50),
  color: [120, 220, 120, 255],
},
96];
97 
98function buildGreatCircle(a: [number, number], b: [number, number], steps: number): [number, number][] {
const rad = Math.PI / 180;
const lon1 = a[0] * rad, lat1 = a[1] * rad;
const lon2 = b[0] * rad, lat2 = b[1] * rad;
const p1 = [Math.cos(lat1) * Math.cos(lon1), Math.cos(lat1) * Math.sin(lon1), Math.sin(lat1)];
const p2 = [Math.cos(lat2) * Math.cos(lon2), Math.cos(lat2) * Math.sin(lon2), Math.sin(lat2)];
const d = Math.max(-1, Math.min(1, p1[0] * p2[0] + p1[1] * p2[1] + p1[2] * p2[2]));
const omega = Math.acos(d);
const sinO = Math.sin(omega) || 1e-6;
const out: [number, number][] = [];
for (let i = 0; i <= steps; i++) {
  const t = i / steps;
  const s1 = Math.sin((1 - t) * omega) / sinO;
  const s2 = Math.sin(t * omega) / sinO;
  const x = s1 * p1[0] + s2 * p2[0];
  const y = s1 * p1[1] + s2 * p2[1];
  const z = s1 * p1[2] + s2 * p2[2];
  out.push([Math.atan2(y, x) / rad, Math.asin(z) / rad]);
}
return out;
118}
119 
120/** Build a triangle-list vertex buffer from a list of tracks. */
121function buildBuffer(): { data: ArrayBuffer; count: number } {
let segCount = 0;
for (const t of TRACKS) segCount += t.path.length - 1;
const vertCount = segCount * 6;
const data = new ArrayBuffer(vertCount * STRIDE);
const fv = new Float32Array(data);
const bv = new Uint8Array(data);
128 
let vi = 0; // vertex index
for (const { path, color } of TRACKS) {
  // Precompute cumulative mercator distance for the trail uniform.
  const merc = path.map((c) => lonLatToMercator(c[0], c[1]));
  const dist: number[] = [0];
  for (let i = 1; i < merc.length; i++) {
    const dx = merc[i]![0] - merc[i - 1]![0];
    const dy = merc[i]![1] - merc[i - 1]![1];
    dist.push(dist[i - 1]! + Math.hypot(dx, dy));
  }
139 
  for (let i = 0; i < merc.length - 1; i++) {
    const a = merc[i]!;
    const b = merc[i + 1]!;
    const dx = b[0] - a[0];
    const dy = b[1] - a[1];
    const len = Math.hypot(dx, dy) || 1;
    // Perpendicular unit vector for width offset.
    const nx = -dy / len;
    const ny = dx / len;
    // Two triangles: (aL, aR, bL), (aR, bR, bL).
    const writeVertex = (pos: [number, number], side: number, d: number) => {
      const base = vi * STRIDE;
      fv[base / 4] = pos[0];
      fv[base / 4 + 1] = pos[1];
      fv[base / 4 + 2] = nx;
      fv[base / 4 + 3] = ny;
      fv[base / 4 + 4] = d;
      fv[base / 4 + 5] = side;
      bv[base + 24] = color[0];
      bv[base + 25] = color[1];
      bv[base + 26] = color[2];
      bv[base + 27] = color[3];
      vi++;
    };
    writeVertex(a, -1, dist[i]!);
    writeVertex(a,  1, dist[i]!);
    writeVertex(b, -1, dist[i + 1]!);
    writeVertex(a,  1, dist[i]!);
    writeVertex(b,  1, dist[i + 1]!);
    writeVertex(b, -1, dist[i + 1]!);
  }
}
return { data, count: vertCount };
173}
174 
175export async function run(container: HTMLElement): Promise<RunResultObject> {
const view = new MapView({
  container,
  renderEngine: new RenderEngine(),
  mode: "2d",
  center: [30, 40],
  zoom: 3,
  minZoom: 2,
  maxZoom: 12,
  backgroundColor: "transparent",
});
186 
view.map.add(
  new RasterTileLayer({
    id: "carto-dark",
    urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
    subdomains: ["a", "b", "c", "d"],
    maxZoom: 19,
    attribution: "© CARTO · © OpenStreetMap contributors",
  }),
);
196 
const shaderLayer = new WGSLLayer({
  id: "animated-lines",
  vertexShader: VERTEX_SHADER,
  fragmentShader: FRAGMENT_SHADER,
  vertexBufferLayouts: [
    {
      arrayStride: STRIDE,
      stepMode: "vertex",
      attributes: [
        { shaderLocation: 0, offset: 0,  format: "float32x2" },
        { shaderLocation: 1, offset: 8,  format: "float32x2" },
        { shaderLocation: 2, offset: 16, format: "float32x2" },
        { shaderLocation: 3, offset: 24, format: "unorm8x4" },
      ],
    },
  ],
  animated: true,
  topology: "triangle-list",
  blendState: {
    color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
    alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
  },
});
view.map.add(shaderLayer);
221 
await view.when();
223 
// halfWidth (px), trailSpeed (m/s), trailLength (m), trailCycle (m)
shaderLayer.setCustomUniforms(new Float32Array([4, 500000, 200000, 800000]));
226 
const { data, count } = buildBuffer();
const device = view.device as unknown as LocalGPUDevice | null;
if (device) {
  const buf = device.createBuffer({
    label: "animated-lines-vertex",
    size: data.byteLength,
    usage: VERTEX_USAGE | COPY_DST_USAGE,
  });
  device.queue.writeBuffer(buf, 0, new Uint8Array(data));
  shaderLayer.setVertexBuffer(0, buf as unknown as never);
  shaderLayer.setDrawParams({ vertexCount: count });
}
239 
return {
  dispose: () => view.destroy(),
  controls: [],
};
244}