world.ts 0.1.0

package/src/image-load-worker.ts

@@ -0,0 +1,32 @@
+export type Data = ["load" | "cancel", string];
+
+addEventListener("message", async event => {
+  const [action, url] = event.data as Data;
+  if (action !== "load") return;
+  const abortController = new AbortController();
+  const { signal } = abortController;
+  const handler = (event: MessageEvent) => {
+    const [action, thisUrl] = event.data as Data;
+    if (action === "cancel" && thisUrl === url) abortController.abort();
+  };
+  addEventListener("message", handler);
+  try {
+    const response = await fetch(url, { mode: "cors", signal });
+    if (!response.ok) {
+      postMessage({ url, image: undefined });
+      return;
+    }
+    const blob = await response.blob();
+    const image = await createImageBitmap(blob);
+    postMessage({ url, image });
+  } catch (error) {
+    if (
+      error instanceof Error &&
+      error.message === "The user aborted a request."
+    ) {
+      // Ignore
+    } else throw error;
+  } finally {
+    removeEventListener("message", handler);
+  }
+});

package/src/image-load.ts

@@ -0,0 +1,41 @@
+const worker = new Worker(new URL("./image-load-worker.ts", import.meta.url), {
+  type: "module",
+});
+
+export type ImageLoad = {
+  loaded: boolean;
+  cancel: () => void;
+};
+
+export const createImageLoad = ({
+  url,
+  onLoad,
+}: {
+  url: string;
+  onLoad: (image: ImageBitmap | undefined) => void;
+}) => {
+  let loaded = false;
+
+  const handler = ({ data }: MessageEvent) => {
+    if (canceled || url !== data.url) return;
+    worker.removeEventListener("message", handler);
+    loaded = true;
+    onLoad(data.image);
+  };
+  worker.addEventListener("message", handler);
+
+  let canceled = false;
+  const cancel = () => {
+    canceled = true;
+    worker.postMessage(["cancel", url]);
+  };
+
+  worker.postMessage(["load", url]);
+
+  return {
+    get loaded() {
+      return loaded;
+    },
+    cancel,
+  } satisfies ImageLoad;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./world";

package/src/layers/depth.glsl

@@ -0,0 +1,22 @@
+#version 300 es
+
+precision highp float;
+
+uniform int index;
+
+out vec4 result;
+
+vec2 pack_depth(in float depth) {
+    float value = depth * (256.f * 256.f - 1.f) / (256.f * 256.f);
+    vec3 encode = fract(value * vec3(1.f, 256.f, 256.f * 256.f));
+    return encode.xy - encode.yz / 256.f + 1.f / 512.f;
+}
+
+vec2 pack_index(in int index) {
+    float value = float(index) / 256.f;
+    return vec2(floor(value) / 255.f, fract(value) * 256.f / 255.f);
+}
+
+void main(void) {
+    result = vec4(pack_depth(gl_FragCoord.z), pack_index(index));
+}

package/src/layers/index.ts

@@ -0,0 +1,38 @@
+import type { quat, vec3, vec4 } from "gl-matrix";
+
+import type { Viewport } from "../viewport";
+import type { LineLayer } from "./line";
+import type { MeshLayer } from "./mesh";
+import type { TerrainLayer } from "./terrain";
+
+export type Terrain = {
+  readonly terrainUrl: string;
+  readonly imageryUrl: string;
+};
+
+export type Mesh = {
+  vertices: vec3[];
+  indices: vec3[];
+  position: vec3;
+  orientation: quat;
+  color: vec4;
+  size: number;
+  minSizePixels?: number;
+  maxSizePixels?: number;
+  pickable: boolean;
+};
+
+export type Line = {
+  points: vec3[];
+  color: vec4;
+  width: number;
+  minWidthPixels?: number | undefined;
+  maxWidthPixels?: number | undefined;
+};
+
+export type BaseLayer = {
+  render: (_: { viewport: Viewport; depth?: boolean; index?: number }) => void;
+  destroy: () => void;
+};
+
+export type Layer = TerrainLayer | MeshLayer | LineLayer;

package/src/layers/line/fragment.glsl

@@ -0,0 +1,10 @@
+#version 300 es
+
+precision highp float;
+
+in vec4 color_out;
+out vec4 result;
+
+void main() {
+    result = color_out;
+}

package/src/layers/line/index.ts

@@ -0,0 +1,261 @@
+import type { mat4, vec2, vec4 } from "gl-matrix";
+import { vec3 } from "gl-matrix";
+
+import type { Buffer } from "../../buffer";
+import { createBuffer } from "../../buffer";
+import { range } from "../../common";
+import { circumference } from "../../constants";
+import { mercator } from "../../math";
+import { createProgram } from "../../program";
+import type { Viewport } from "../../viewport";
+import type { BaseLayer, Line } from "../";
+import depthSource from "../depth.glsl";
+import { to } from "../utils";
+import fragmentSource from "./fragment.glsl";
+import vertexSource from "./vertex.glsl";
+
+export type LineLayer = BaseLayer & Line;
+
+export const createLineLayer = (
+  gl: WebGL2RenderingContext,
+  line: Partial<Line>,
+) => {
+  let { points, color, width, minWidthPixels, maxWidthPixels } = {
+    points: [],
+    color: [1, 1, 1, 1],
+    width: 1,
+    ...line,
+  } satisfies Line;
+
+  let count = 0;
+
+  let center: vec3 = [0, 0, 0];
+
+  const positionBuffer = createBuffer({ gl, type: "f32", target: "array" });
+  const indexBuffer = createBuffer({ gl, type: "u16", target: "element" });
+  const cornerBuffer = createBuffer({ gl, type: "f32", target: "array" });
+
+  const { renderProgram, depthProgram } = createPrograms(gl, {
+    positionBuffer,
+    indexBuffer,
+    cornerBuffer,
+  });
+
+  const render = ({
+    viewport: { projection, modelView, camera, screen },
+    depth = false,
+    index = 0,
+  }: {
+    viewport: Viewport;
+    depth?: boolean;
+    index?: number;
+  }) =>
+    (depth ? depthProgram : renderProgram).execute({
+      projection,
+      modelView,
+      camera: to(camera),
+      center: to(center),
+      screen,
+      count,
+      color,
+      width: width / circumference,
+      minWidthPixels: minWidthPixels || 0,
+      maxWidthPixels: maxWidthPixels || Number.MAX_VALUE,
+      index,
+    });
+
+  const destroy = () => {
+    positionBuffer.destroy();
+    indexBuffer.destroy();
+    cornerBuffer.destroy();
+    renderProgram.destroy();
+    depthProgram.destroy();
+  };
+
+  const updatePoints = (_: vec3[]) => {
+    points = _;
+    count = _.length;
+
+    const [first] = _;
+    const [last] = _.slice(-1);
+
+    if (!first || !last) return;
+
+    center = mercator(first);
+
+    const positionData = [first, ..._, last]
+      .map(_ => vec3.sub(vec3.create(), mercator(_), center))
+      .flatMap(_ => [..._, ..._, ..._, ..._]);
+    const indexData = range(0, count * 2).flatMap(i => {
+      const [a = 0, b = 0, c = 0, d = 0] = range(i * 2, i * 2 + 4);
+      return [
+        [a, b, c],
+        [a, c, d],
+      ].flat();
+    });
+    const cornerData = range(0, count + 1).flatMap(() =>
+      [
+        [-1, -1],
+        [-1, 1],
+        [1, 1],
+        [1, -1],
+      ].flat(),
+    );
+
+    positionBuffer.set(positionData);
+    indexBuffer.set(indexData);
+    cornerBuffer.set(cornerData);
+  };
+
+  updatePoints(points);
+
+  return {
+    render,
+    destroy,
+    get points() {
+      return points;
+    },
+    set points(_: vec3[]) {
+      updatePoints(_);
+    },
+    get color() {
+      return color;
+    },
+    set color(_: vec4) {
+      color = _;
+    },
+    get width() {
+      return width;
+    },
+    set width(_: number) {
+      width = _;
+    },
+    get minWidthPixels() {
+      return minWidthPixels;
+    },
+    set minWidthPixels(_: number | undefined) {
+      minWidthPixels = _;
+    },
+    get maxWidthPixels() {
+      return maxWidthPixels;
+    },
+    set maxWidthPixels(_: number | undefined) {
+      maxWidthPixels = _;
+    },
+  } satisfies LineLayer;
+};
+
+const createPrograms = (
+  gl: WebGL2RenderingContext,
+  {
+    positionBuffer,
+    indexBuffer,
+    cornerBuffer,
+  }: {
+    positionBuffer: Buffer;
+    indexBuffer: Buffer;
+    cornerBuffer: Buffer;
+  },
+) => {
+  const createRenderProgram = (depth = false) => {
+    const program = createProgram({
+      gl,
+      vertexSource,
+      fragmentSource: depth ? depthSource : fragmentSource,
+    });
+
+    const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
+
+    const previousAttribute = program.attribute3f("previous", positionBuffer, {
+      stride: 3 * FLOAT_BYTES,
+    });
+    const currentAttribute = program.attribute3f("current", positionBuffer, {
+      stride: 3 * FLOAT_BYTES,
+      offset: FLOAT_BYTES * 3 * 4,
+    });
+    const nextAttribute = program.attribute3f("next", positionBuffer, {
+      stride: 3 * FLOAT_BYTES,
+      offset: FLOAT_BYTES * 3 * 4 * 2,
+    });
+    const cornerAttribute = program.attribute2f("corner", cornerBuffer, {
+      stride: FLOAT_BYTES * 2,
+    });
+
+    const projectionUniform = program.uniformMatrix4f("projection");
+    const modelViewUniform = program.uniformMatrix4f("model_view");
+    const cameraUniform = program.uniform3i("camera");
+    const centerUniform = program.uniform3i("center");
+    const screenUniform = program.uniform2f("screen");
+    const colorUniform = program.uniform4f("color");
+    const widthUniform = program.uniform1f("width");
+    const maxWidthPixelsUniform = program.uniform1f("max_width_pixels");
+    const minWidthPixelsUniform = program.uniform1f("min_width_pixels");
+    const indexUniform = program.uniform1i("index");
+
+    const execute = ({
+      projection,
+      modelView,
+      camera,
+      center,
+      screen,
+      count,
+      color,
+      width,
+      minWidthPixels,
+      maxWidthPixels,
+      index,
+    }: {
+      projection: mat4;
+      modelView: mat4;
+      camera: vec3;
+      center: vec3;
+      screen: vec2;
+      count: number;
+      color: vec4;
+      width: number;
+      minWidthPixels: number;
+      maxWidthPixels: number;
+      index: number;
+    }) => {
+      if (count === 0) return;
+
+      gl.enable(gl.DEPTH_TEST);
+      if (depth) gl.disable(gl.BLEND);
+      else {
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      }
+
+      program.use();
+
+      previousAttribute.use();
+      currentAttribute.use();
+      nextAttribute.use();
+      cornerAttribute.use();
+
+      projectionUniform.set(projection);
+      modelViewUniform.set(modelView);
+      cameraUniform.set(camera);
+      centerUniform.set(center);
+      screenUniform.set(screen);
+      colorUniform.set(color);
+      widthUniform.set(width);
+      minWidthPixelsUniform.set(minWidthPixels);
+      maxWidthPixelsUniform.set(maxWidthPixels);
+      indexUniform.set(index);
+
+      indexBuffer.use();
+
+      gl.drawElements(gl.TRIANGLES, count * 3 * 4 - 4, gl.UNSIGNED_SHORT, 0);
+    };
+
+    const destroy = () => program.destroy();
+
+    return { execute, destroy };
+  };
+
+  const renderProgram = createRenderProgram();
+  const depthProgram = createRenderProgram(true);
+
+  return { renderProgram, depthProgram };
+};

package/src/layers/line/vertex.glsl

@@ -0,0 +1,63 @@
+#version 300 es
+
+precision highp float;
+
+uniform mat4 projection;
+uniform mat4 model_view;
+uniform ivec3 camera;
+uniform ivec3 center;
+uniform vec2 screen;
+uniform vec4 color;
+uniform float width;
+uniform float min_width_pixels;
+uniform float max_width_pixels;
+
+in vec3 previous;
+in vec3 current;
+in vec3 next;
+in vec2 corner;
+out vec4 color_out;
+
+const int ONE = 1073741824; // 2^30
+const float INV_ONE = 1.f / float(ONE);
+
+vec4 transform(vec3 v) {
+    return projection * model_view * vec4(vec3(ivec3(v * float(ONE)) + center - camera) * INV_ONE, 1.f);
+}
+
+void main(void) {
+    vec4 projected_previous = transform(previous);
+    vec4 projected_current = transform(current);
+    vec4 projected_next = transform(next);
+
+    vec2 screen_previous = projected_previous.xy / projected_previous.w * screen;
+    vec2 screen_current = projected_current.xy / projected_current.w * screen;
+    vec2 screen_next = projected_next.xy / projected_next.w * screen;
+
+    vec2 a = normalize(screen_current - screen_previous);
+    vec2 b = normalize(screen_next - screen_current);
+    if(screen_current == screen_previous)
+        a = b;
+    if(screen_next == screen_current)
+        b = a;
+    vec2 direction = normalize(a + b);
+    vec2 point = normalize(a - b);
+    vec2 normal = vec2(-direction.y, direction.x);
+    vec2 offset;
+
+    if(sign(corner.y * dot(normal, point)) > 0.0f) {
+        vec2 ap = vec2(-a.y, a.x);
+        vec2 bp = vec2(-b.y, b.x);
+        offset = 0.5f * corner.y * (corner.x * (bp - ap) + ap + bp);
+    } else {
+        float distance = clamp(1.f / dot(direction, a), 0.f, 10.f);
+        offset = normal * distance * corner.y;
+    }
+
+    float pixel_size = projected_current.w / screen.y;
+    float scale = clamp(width * -projection[1][1], min_width_pixels * pixel_size, max_width_pixels * pixel_size);
+
+    gl_Position = projected_current + vec4(scale * offset, 0.f, 0.f);
+
+    color_out = color;
+}

package/src/layers/mesh/fragment.glsl

@@ -0,0 +1,10 @@
+#version 300 es
+
+precision highp float;
+
+in vec4 color_out;
+out vec4 result;
+
+void main() {
+    result = color_out;
+}