world.ts 0.1.0

package/dist/layers/index.d.ts

@@ -0,0 +1,36 @@
+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/dist/layers/line/index.d.ts

@@ -0,0 +1,18 @@
+import type { vec4 } from "gl-matrix";
+import { vec3 } from "gl-matrix";
+import type { Viewport } from "../../viewport";
+import type { BaseLayer, Line } from "../";
+export type LineLayer = BaseLayer & Line;
+export declare const createLineLayer: (gl: WebGL2RenderingContext, line: Partial<Line>) => {
+    render: ({ viewport: { projection, modelView, camera, screen }, depth, index, }: {
+        viewport: Viewport;
+        depth?: boolean | undefined;
+        index?: number | undefined;
+    }) => void;
+    destroy: () => void;
+    points: vec3[];
+    color: vec4;
+    width: number;
+    minWidthPixels: number | undefined;
+    maxWidthPixels: number | undefined;
+};

package/dist/layers/mesh/index.d.ts

@@ -0,0 +1,4 @@
+import type { Mesh } from "../../layers";
+import type { BaseLayer } from "..";
+export type MeshLayer = BaseLayer & Mesh;
+export declare const createMeshLayer: (gl: WebGL2RenderingContext, mesh: Partial<Mesh>) => MeshLayer;

package/dist/layers/terrain/image-texture.d.ts

@@ -0,0 +1,11 @@
+export type ImageTexture = {
+    loaded: boolean;
+    use: () => void;
+    attach: () => void;
+    destroy: () => void;
+};
+export declare const createImageTexture: (_: {
+    gl: WebGL2RenderingContext;
+    url: string;
+    onLoad?: () => void;
+}) => ImageTexture;

package/dist/layers/terrain/index.d.ts

@@ -0,0 +1,13 @@
+import type { Viewport } from "../../viewport";
+import type { BaseLayer, Terrain } from "..";
+export type TerrainLayer = BaseLayer & Terrain;
+export declare const createTerrainLayer: (gl: WebGL2RenderingContext, terrain: Partial<Terrain>) => {
+    terrainUrl: string;
+    imageryUrl: string;
+    render: ({ viewport, depth, index, }: {
+        viewport: Viewport;
+        depth?: boolean | undefined;
+        index?: number | undefined;
+    }) => void;
+    destroy: () => void;
+};

package/dist/layers/terrain/texture.d.ts

@@ -0,0 +1,10 @@
+export type Texture = {
+    use: () => void;
+    attach: () => void;
+    destroy: () => void;
+};
+export declare const createTexture: (gl: WebGL2RenderingContext) => {
+    use: () => void;
+    attach: () => void;
+    destroy: () => void;
+};

package/dist/layers/terrain/tile-cache.d.ts

@@ -0,0 +1,14 @@
+import type { vec3 } from "gl-matrix";
+import type { Texture } from "./texture";
+export type TileCache = {
+    get: (xyz: vec3) => Texture | undefined;
+    destroy: () => void;
+};
+export declare const createTileCache: ({ gl, urlPattern, onLoad, }: {
+    gl: WebGL2RenderingContext;
+    urlPattern: string;
+    onLoad?: (() => void) | undefined;
+}) => {
+    get: (xyz: vec3) => Texture | undefined;
+    destroy: () => void;
+};

package/dist/layers/terrain/tile-downsampler.d.ts

@@ -0,0 +1,16 @@
+import type { vec3 } from "gl-matrix";
+import type { Texture } from "./texture";
+import type { TileCache } from "./tile-cache";
+export type DownsampledTile = {
+    texture: Texture;
+    downsample: number;
+};
+export type TileDownsampler = {
+    get: (xyz: vec3) => DownsampledTile | undefined;
+};
+export declare const createTileDownsampler: (cache: TileCache, initialDownsample?: number) => {
+    get: ([x, y, z]: vec3) => {
+        texture: Texture;
+        downsample: number;
+    } | undefined;
+};

package/dist/layers/terrain/tile-index-cache.d.ts

@@ -0,0 +1,21 @@
+import type { vec3 } from "gl-matrix";
+import LRUCache from "lru-cache";
+export type TileIndexCache<T> = {
+    get: (xyz: vec3) => T | undefined;
+    set: (xyz: vec3, value: T) => void;
+    delete: (xyz: vec3) => void;
+    clear: () => void;
+    purgeStale: () => void;
+};
+export type CreateTileIndexCacheOptions<T> = {
+    max: number;
+    ttl?: number;
+    dispose?: (value: T, key: vec3) => void;
+};
+export declare const createTileIndexCache: <T>(options: CreateTileIndexCacheOptions<T>) => {
+    get: (xyz: vec3) => T | undefined;
+    set: (xyz: vec3, value: T) => LRUCache<number, T>;
+    delete: (xyz: vec3) => boolean;
+    clear: () => void;
+    purgeStale: () => boolean;
+};

package/dist/layers/terrain/tile-shapes.d.ts

@@ -0,0 +1,8 @@
+import { vec3 } from "gl-matrix";
+import type { Elevation } from "../../elevation";
+export type TileShapes = {
+    get: (xyz: vec3) => vec3[];
+};
+export declare const createTileShapes: (elevation: Elevation) => {
+    get: (xyz: vec3) => vec3[];
+};

package/dist/layers/utils.d.ts

@@ -0,0 +1,3 @@
+import type { vec3 } from "gl-matrix";
+export declare const one: number;
+export declare const to: ([x, y, z]: vec3) => vec3;

package/dist/math.d.ts

@@ -0,0 +1,7 @@
+import { vec3 } from "gl-matrix";
+export declare const radians: (_: number) => number;
+export declare const degrees: (_: number) => number;
+export declare const quadratic: (a: number, b: number, c: number) => number[];
+export declare const mercator: ([lng, lat, alt]: vec3, out?: vec3) => vec3;
+export declare const geodetic: ([x, y, z]: vec3, out?: vec3) => vec3;
+export declare const tileToMercator: ([x, y, z]: vec3, out?: vec3) => vec3;

package/dist/program.d.ts

@@ -0,0 +1,76 @@
+import type { mat4, vec2, vec3, vec4 } from "gl-matrix";
+import type { Buffer } from "./buffer";
+export type Program = {
+    use: () => void;
+    uniform1f: (name: string) => Uniform<number>;
+    uniform1i: (name: string) => Uniform<number>;
+    uniform2f: (name: string) => Uniform<vec2>;
+    uniform2i: (name: string) => Uniform<vec2>;
+    uniform3f: (name: string) => Uniform<vec3>;
+    uniform3i: (name: string) => Uniform<vec3>;
+    uniform4f: (name: string) => Uniform<vec4>;
+    uniform4i: (name: string) => Uniform<vec4>;
+    uniformMatrix4f: (name: string) => Uniform<mat4>;
+    attribute3f: (name: string, buffer: Buffer, _?: {
+        stride?: number;
+        offset?: number;
+    }) => Attribute;
+    attribute2f: (name: string, buffer: Buffer, _?: {
+        stride?: number;
+        offset?: number;
+    }) => Attribute;
+    destroy: () => void;
+};
+export type Uniform<T> = {
+    set: (value: T) => void;
+};
+export type Attribute = {
+    use: () => void;
+};
+export declare const createProgram: ({ gl, vertexSource, fragmentSource, }: {
+    gl: WebGL2RenderingContext;
+    vertexSource: string;
+    fragmentSource: string;
+}) => {
+    use: () => void;
+    uniform1f: (name: string) => {
+        set: (value: number) => void;
+    };
+    uniform1i: (name: string) => {
+        set: (value: number) => void;
+    };
+    uniform2f: (name: string) => {
+        set: (value: vec2) => void;
+    };
+    uniform2i: (name: string) => {
+        set: (value: vec2) => void;
+    };
+    uniform3f: (name: string) => {
+        set: (value: vec3) => void;
+    };
+    uniform3i: (name: string) => {
+        set: (value: vec3) => void;
+    };
+    uniform4f: (name: string) => {
+        set: (value: vec4) => void;
+    };
+    uniform4i: (name: string) => {
+        set: (value: vec4) => void;
+    };
+    uniformMatrix4f: (name: string) => {
+        set: (value: mat4) => void;
+    };
+    attribute2f: (name: string, buffer: Buffer, options?: {
+        stride?: number;
+        offset?: number;
+    }) => {
+        use: () => void;
+    };
+    attribute3f: (name: string, buffer: Buffer, options?: {
+        stride?: number;
+        offset?: number;
+    }) => {
+        use: () => void;
+    };
+    destroy: () => void;
+};

package/dist/subscriber.d.ts

@@ -0,0 +1 @@
+export declare const createSubscriber: <T>() => readonly [(handler: (msg: T) => void) => () => void, (msg: T) => void];

package/dist/viewport.d.ts

@@ -0,0 +1,24 @@
+import { mat4, vec2, vec3, vec4 } from "gl-matrix";
+export type Orientation = [pitch: number, roll: number, yaw: number];
+export type View = {
+    target: vec3;
+    center?: vec2;
+    screen: vec2;
+    distance: number;
+    orientation: Orientation;
+    fieldOfView?: number;
+};
+export type Viewport = {
+    camera: vec3;
+    screen: vec2;
+    projection: mat4;
+    modelView: mat4;
+    scale: (_: number) => Viewport;
+    screenToClip: (_: vec2, out?: vec4) => vec4;
+    clipToScreen: (_: vec4, out?: vec2) => vec2;
+    clipToLocal: (_: vec4, out?: vec3) => vec3;
+    localToClip: (_: vec3, out?: vec4) => vec4;
+    localToWorld: (_: vec3, out?: vec3) => vec3;
+    worldToLocal: (_: vec3, out?: vec3) => vec3;
+};
+export declare const createViewport: (view: View) => Viewport;

package/dist/world.d.ts

@@ -0,0 +1,59 @@
+import type { vec2 } from "gl-matrix";
+import { vec3 } from "gl-matrix";
+import type { Layer, Line, Mesh, Terrain } from "./layers";
+import type { View } from "./viewport";
+type Pick = {
+    position: vec3;
+    layer: Layer | undefined;
+};
+type PickHandler = (_: Pick) => void;
+export type World = {
+    set view(_: View);
+    get view(): View;
+    addTerrain: (_: Partial<Terrain>) => Terrain;
+    addMesh: (_: Partial<Mesh>) => Mesh;
+    addLine: (_: Partial<Line>) => Line;
+    recenter: ([x, y]: [number, number]) => void;
+    pick: ([x, y]: [number, number]) => Pick;
+    onMouseDown: (_: PickHandler) => void;
+    onMouseUp: (_: PickHandler) => void;
+    onMouseMove: (_: PickHandler) => void;
+    destroy: () => void;
+};
+export declare const createWorld: (canvas: HTMLCanvasElement) => {
+    view: View;
+    addTerrain: (terrain: Partial<Terrain>) => {
+        terrainUrl: string;
+        imageryUrl: string;
+        render: ({ viewport, depth, index, }: {
+            viewport: import("./viewport").Viewport;
+            depth?: boolean | undefined;
+            index?: number | undefined;
+        }) => void;
+        destroy: () => void;
+    };
+    addMesh: (mesh: Partial<Mesh>) => import("./layers/mesh").MeshLayer;
+    addLine: (line: Partial<Line>) => {
+        render: ({ viewport: { projection, modelView, camera, screen }, depth, index, }: {
+            viewport: import("./viewport").Viewport;
+            depth?: boolean | undefined;
+            index?: number | undefined;
+        }) => void;
+        destroy: () => void;
+        points: vec3[];
+        color: import("gl-matrix").vec4;
+        width: number;
+        minWidthPixels: number | undefined;
+        maxWidthPixels: number | undefined;
+    };
+    recenter: (center: vec2) => void;
+    pick: ([screenX, screenY]: vec2) => {
+        position: vec3;
+        layer: Layer | undefined;
+    };
+    onMouseDown: (handler: (msg: Pick) => void) => () => void;
+    onMouseUp: (handler: (msg: Pick) => void) => () => void;
+    onMouseMove: (handler: (msg: Pick) => void) => () => void;
+    destroy: () => void;
+};
+export {};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "world.ts",
+  "type": "module",
+  "main": "dist/world.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint --max-warnings 0 --cache --cache-strategy content src"
+  },
+  "devDependencies": {
+    "@types/lru-cache": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-no-async-without-await": "^1.2.0",
+    "eslint-plugin-prettier": "^5.1.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.0",
+    "vite-plugin-dts": "^3.7.2",
+    "vite-plugin-glsl": "^1.2.1"
+  },
+  "dependencies": {
+    "gl-matrix": "^3.4.3",
+    "lru-cache": "^7.6.0"
+  },
+  "version": "0.1.0"
+}

package/src/buffer.ts

@@ -0,0 +1,36 @@
+export type Buffer = {
+  set: (value: number[]) => void;
+  use: () => void;
+  destroy: () => void;
+};
+
+export const createBuffer = ({
+  gl,
+  type,
+  target,
+}: {
+  gl: WebGL2RenderingContext;
+  type: "f32" | "u16";
+  target: "array" | "element";
+}) => {
+  const buffer = gl.createBuffer();
+  if (!buffer) throw new Error("Buffer creation failed");
+
+  const glTarget =
+    target === "array" ? gl.ARRAY_BUFFER : gl.ELEMENT_ARRAY_BUFFER;
+
+  const use = () => gl.bindBuffer(glTarget, buffer);
+
+  return {
+    set: value => {
+      use();
+      gl.bufferData(
+        glTarget,
+        type === "u16" ? new Uint16Array(value) : new Float32Array(value),
+        gl.DYNAMIC_DRAW,
+      );
+    },
+    use,
+    destroy: () => gl.deleteBuffer(buffer),
+  } satisfies Buffer;
+};

package/src/common.ts

@@ -0,0 +1,13 @@
+export const debounce = <F extends (...args: unknown[]) => void>(
+  f: F,
+  delay: number,
+) => {
+  let timeout: number;
+  return (...args: Parameters<F>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => f(args), delay);
+  };
+};
+
+export const range = (start: number, end: number) =>
+  Array.from({ length: end - start }, (_, k) => k + start);

package/src/constants.ts

@@ -0,0 +1 @@
+export const circumference = 40075017;

package/src/control.ts

@@ -0,0 +1,83 @@
+import { debounce } from "./common";
+import { circumference } from "./constants";
+import type { Orientation } from "./viewport";
+import type { World } from "./world";
+
+const minimumDistance = 2;
+
+export const createMouseControl = (canvas: HTMLCanvasElement, world: World) => {
+  let enabled = true;
+  let zooming = false;
+
+  const onMouseDown = ({ x, y }: MouseEvent) => {
+    if (!enabled) return;
+    world.recenter([x, y]);
+  };
+
+  const onMouseMove = ({ buttons, movementX, movementY, x, y }: MouseEvent) => {
+    if (!enabled) return;
+    if (buttons === 1)
+      world.view = {
+        ...world.view,
+        center: [x, y],
+      };
+    else if (buttons === 2) {
+      const {
+        screen: [width = 0, height = 0],
+        orientation: [pitch, roll, yaw],
+      } = world.view;
+      const orientation = [
+        pitch - (movementY / height) * Math.PI,
+        roll,
+        yaw - (movementX / width) * Math.PI,
+      ] satisfies Orientation;
+      world.view = {
+        ...world.view,
+        orientation,
+      };
+    }
+  };
+
+  const clearZooming = debounce(() => (zooming = false), 100);
+
+  const onWheel = ({ x, y, deltaY }: WheelEvent) => {
+    if (!enabled) return;
+    if (!zooming) {
+      world.recenter([x, y]);
+      zooming = true;
+    }
+    const distance = Math.min(
+      Math.max(world.view.distance * Math.exp(deltaY * 0.001), minimumDistance),
+      circumference,
+    );
+    world.view = {
+      ...world.view,
+      distance,
+    };
+    clearZooming();
+  };
+
+  const onContextMenu = (event: MouseEvent) => event.preventDefault();
+
+  canvas.addEventListener("mousedown", onMouseDown);
+  canvas.addEventListener("mousemove", onMouseMove);
+  canvas.addEventListener("wheel", onWheel, { passive: true });
+  canvas.addEventListener("contextmenu", onContextMenu);
+
+  const destroy = () => {
+    canvas.removeEventListener("mousedown", onMouseDown);
+    canvas.removeEventListener("mousemove", onMouseMove);
+    canvas.removeEventListener("wheel", onWheel);
+    canvas.removeEventListener("contextmenu", onContextMenu);
+  };
+
+  return {
+    get enabled() {
+      return enabled;
+    },
+    set enabled(_: boolean) {
+      enabled = _;
+    },
+    destroy,
+  };
+};

package/src/depth-buffer.ts

@@ -0,0 +1,92 @@
+import type { vec2 } from "gl-matrix";
+
+export type DepthBuffer = {
+  use: () => void;
+  resize: (size: vec2) => void;
+  read: (pixel: vec2) => readonly [z: number, n: number];
+  destroy: () => void;
+};
+
+export const createDepthBuffer = (gl: WebGL2RenderingContext) => {
+  const targetTexture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+  const renderbuffer = gl.createRenderbuffer();
+  gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
+
+  const framebuffer = gl.createFramebuffer();
+
+  const use = () => gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+
+  use();
+  gl.framebufferTexture2D(
+    gl.FRAMEBUFFER,
+    gl.COLOR_ATTACHMENT0,
+    gl.TEXTURE_2D,
+    targetTexture,
+    0,
+  );
+  gl.framebufferRenderbuffer(
+    gl.FRAMEBUFFER,
+    gl.DEPTH_ATTACHMENT,
+    gl.RENDERBUFFER,
+    renderbuffer,
+  );
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+  let height = 0;
+  const resize = ([width = 0, _height = 0]: vec2) => {
+    height = _height;
+    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      width,
+      height,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      null,
+    );
+
+    gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
+    gl.renderbufferStorage(
+      gl.RENDERBUFFER,
+      gl.DEPTH_COMPONENT16,
+      width,
+      height,
+    );
+  };
+
+  const buffer = new Uint8Array(4);
+  const read = ([x = 0, y = 0]: vec2) => {
+    use();
+    gl.readPixels(x, height - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buffer);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+    const [r = 0, g = 0, b = 0, a = 0] = buffer;
+    const zo = (r * 256 + g) / (256 * 256 - 1);
+    const z = 2 * zo - 1;
+    const n = b * 256 + a;
+
+    return [z, n] as const;
+  };
+
+  const destroy = () => {
+    gl.deleteTexture(targetTexture);
+    gl.deleteFramebuffer(framebuffer);
+    gl.deleteRenderbuffer(renderbuffer);
+  };
+
+  return {
+    use,
+    resize,
+    read,
+    destroy,
+  } satisfies DepthBuffer;
+};

package/src/elevation.ts

@@ -0,0 +1,75 @@
+import type { vec2, vec3 } from "gl-matrix";
+
+import type { TileCache } from "./layers/terrain/tile-cache";
+import { createTileDownsampler } from "./layers/terrain/tile-downsampler";
+import { createTileIndexCache } from "./layers/terrain/tile-index-cache";
+import { mercator } from "./math";
+
+const defaultZ = 15;
+const size = 256;
+
+export type Elevation = {
+  get: ([lng, lat]: vec2, z?: number) => number;
+  destroy: () => void;
+};
+
+export const createElevation = ({
+  gl,
+  terrainCache,
+}: {
+  gl: WebGL2RenderingContext;
+  terrainCache: TileCache;
+}) => {
+  const tileCache = createTileIndexCache<Uint8Array>({
+    max: 1000,
+  });
+
+  const downsampler = createTileDownsampler(terrainCache);
+
+  const framebuffer = gl.createFramebuffer();
+  if (!framebuffer) throw new Error("Framebuffer creation failed");
+
+  const downsampleBuffer = ([x = 0, y = 0, z = 0]: vec3) => {
+    const tile = downsampler.get([x, y, z]);
+    if (!tile) return undefined;
+    const { texture, downsample } = tile;
+    const k = 2 ** downsample;
+    const xyz: vec3 = [Math.floor(x / k), Math.floor(y / k), z - downsample];
+    const cached = tileCache.get(xyz);
+    if (cached) return { buffer: cached, downsample };
+
+    const buffer = new Uint8Array(4 * size * size);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    texture.attach();
+    gl.readPixels(0, 0, size, size, gl.RGBA, gl.UNSIGNED_BYTE, buffer);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+    tileCache.set(xyz, buffer);
+    return { buffer, downsample };
+  };
+
+  const get = ([lng = 0, lat = 0]: vec2, z = defaultZ) => {
+    const k = 2 ** z;
+    const p = mercator([lng, lat, 0]).map(_ => _ * k);
+    const [x = 0, y = 0] = p.map(_ => Math.floor(_ % k));
+    let [px = 0, py = 0] = p.map(_ => _ % 1);
+    const downsampled = downsampleBuffer([x, y, z]);
+    if (!downsampled) return 0;
+    const { buffer, downsample } = downsampled;
+    const k2 = 2 ** downsample;
+    [px, py] = [((x % k2) + px) / k2, ((y % k2) + py) / k2];
+
+    const q = 4 * size * Math.floor(py * size) + 4 * Math.floor(px * size);
+    const [r = 0, g = 0, b = 0] = buffer.slice(q, q + 4);
+
+    const value = (r * 65536 + g * 256 + b) / 10 - 10000;
+
+    return value;
+  };
+
+  const destroy = () => {
+    gl.deleteFramebuffer(framebuffer);
+  };
+
+  return { get, destroy } satisfies Elevation;
+};

package/src/glsl.d.ts

@@ -0,0 +1,4 @@
+declare module "*.glsl" {
+  const source: string;
+  export default source;
+}