autumnplot-gl 3.1.0 → 4.0.0-beta

package/lib/PlotLayer.worker.js

@@ -1,17 +1,11 @@
-import { getMinZoom } from "./utils";
 import * as Comlink from 'comlink';
 import { LngLat } from "./Map";
-function makeBBElements(field_lats, field_lons, field_ni, field_nj, thin_fac_base, max_zoom) {
-    const n_pts_per_poly = 6;
-    const n_coords_per_pt_pts = 3;
+function makeBBElements(field_lats, field_lons, min_zoom, field_ni, field_nj, map_max_zoom) {
+    const n_coords_per_pt_pts = 2;
     const n_coords_per_pt_tc = 2;
-    const n_density_tiers = Math.log2(thin_fac_base);
-    const n_inaccessible_tiers = Math.max(n_density_tiers + 1 - max_zoom, 0);
-    const trim_inaccessible = Math.pow(2, n_inaccessible_tiers);
-    const field_ni_access = Math.floor((field_ni - 1) / trim_inaccessible) + 1;
-    const field_nj_access = Math.floor((field_nj - 1) / trim_inaccessible) + 1;
-    const n_elems_pts = field_ni_access * field_nj_access * n_pts_per_poly * n_coords_per_pt_pts;
-    const n_elems_tc = field_ni_access * field_nj_access * n_pts_per_poly * n_coords_per_pt_tc;
+    const field_n_access = min_zoom.filter(mz => mz <= map_max_zoom).length;
+    const n_elems_pts = field_n_access * n_coords_per_pt_pts;
+    const n_elems_tc = field_n_access * n_coords_per_pt_tc;
     let pts = new Float32Array(n_elems_pts);
     let tex_coords = new Float32Array(n_elems_tc);
     let istart_pts = 0;
@@ -21,22 +15,16 @@ function makeBBElements(field_lats, field_lons, field_ni, field_nj, thin_fac_bas
             const idx = ilat * field_ni + ilon;
             const lat = field_lats[idx];
             const lon = field_lons[idx];
-            const zoom = getMinZoom(ilat, ilon, thin_fac_base);
-            if (zoom > max_zoom)
-                continue;
+            const zoom = min_zoom[idx];
+            if (zoom > map_max_zoom || lon === undefined || lat === undefined)
+                continue; // TAS: Adding the checks for lat/lon here may be a bug waiting to happen? Not sure.
             const pt_ll = new LngLat(lon, lat).toMercatorCoord();
-            // These contain a degenerate triangle on either end to imitate primitive restarting
-            //  (see https://groups.google.com/g/webgl-dev-list/c/KLfiwj4jax0/m/cKiezrhRz8MJ?pli=1)
-            for (let icrnr = 0; icrnr < n_pts_per_poly; icrnr++) {
-                const actual_icrnr = Math.max(0, Math.min(icrnr - 1, 3));
-                pts[istart_pts + icrnr * n_coords_per_pt_pts + 0] = pt_ll.x;
-                pts[istart_pts + icrnr * n_coords_per_pt_pts + 1] = pt_ll.y;
-                pts[istart_pts + icrnr * n_coords_per_pt_pts + 2] = zoom * 4 + actual_icrnr;
-                tex_coords[istart_tc + icrnr * n_coords_per_pt_tc + 0] = ilon / (field_ni - 1);
-                tex_coords[istart_tc + icrnr * n_coords_per_pt_tc + 1] = ilat / (field_nj - 1);
-            }
-            istart_pts += (n_pts_per_poly * n_coords_per_pt_pts);
-            istart_tc += (n_pts_per_poly * n_coords_per_pt_tc);
+            pts[istart_pts + 0] = pt_ll.x;
+            pts[istart_pts + 1] = pt_ll.y;
+            tex_coords[istart_tc + 0] = ilon / (field_ni - 1) + zoom; // Pack the min zoom in with the texture coordinates; only works because the min zoom is always an integer
+            tex_coords[istart_tc + 1] = ilat / (field_nj - 1);
+            istart_pts += n_coords_per_pt_pts;
+            istart_tc += n_coords_per_pt_tc;
         }
     }
     return { 'pts': pts, 'tex_coords': tex_coords };
@@ -44,7 +32,6 @@ function makeBBElements(field_lats, field_lons, field_ni, field_nj, thin_fac_bas
 function makeDomainVerticesAndTexCoords(field_lats, field_lons, field_ni, field_nj, texcoord_margin_r, texcoord_margin_s) {
     const verts = new Float32Array(2 * 2 * (field_ni - 1) * (field_nj + 1)).fill(0);
     const tex_coords = new Float32Array(2 * 2 * (field_ni - 1) * (field_nj + 1)).fill(0);
-    const grid_cell_size = new Float32Array(1 * 2 * (field_ni - 1) * (field_nj + 1)).fill(0);
     let ivert = 0;
     let itexcoord = 0;
     for (let i = 0; i < field_ni - 1; i++) {
@@ -83,29 +70,7 @@ function makeDomainVerticesAndTexCoords(field_lats, field_lons, field_ni, field_
             }
         }
     }
-    let igcs = 0;
-    for (let i = 0; i < field_ni - 1; i++) {
-        for (let j = 0; j < field_nj - 1; j++) {
-            const ivert = j == 0 ? 2 * (igcs + 1) : 2 * igcs;
-            const x_ll = verts[ivert], y_ll = verts[ivert + 1], x_lr = verts[ivert + 2], y_lr = verts[ivert + 3], x_ul = verts[ivert + 4], y_ul = verts[ivert + 5], x_ur = verts[ivert + 6], y_ur = verts[ivert + 7];
-            const area = 0.5 * Math.abs(x_ll * (y_lr - y_ul) + x_lr * (y_ul - y_ll) + x_ul * (y_ll - y_lr) +
-                x_ur * (y_ul - y_lr) + x_ul * (y_lr - y_ur) + x_lr * (y_ur - y_ul));
-            if (j == 0) {
-                grid_cell_size[igcs] = area;
-                igcs += 1;
-            }
-            grid_cell_size[igcs] = area;
-            grid_cell_size[igcs + 1] = area;
-            igcs += 2;
-            if (j == field_nj - 2) {
-                grid_cell_size[igcs] = area;
-                grid_cell_size[igcs + 1] = area;
-                grid_cell_size[igcs + 2] = area;
-                igcs += 3;
-            }
-        }
-    }
-    return { 'vertices': verts, 'tex_coords': tex_coords, 'grid_cell_size': grid_cell_size };
+    return { 'vertices': verts, 'tex_coords': tex_coords };
 }
 /*
 function makePolylinesMiter(lines) {
@@ -288,10 +253,10 @@ function makePolylines(lines) {
             return [v_ll.x, v_ll.y];
         });
         const has_offsets = line.offsets !== undefined;
-        const extrusion_verts = has_offsets ? line.offsets : verts;
+        const extrusion_verts = line.offsets !== undefined ? line.offsets : verts;
         let pt_prev, pt_this = verts[0], pt_next = verts[1];
         let ept_prev, ept_this = extrusion_verts[0], ept_next = extrusion_verts[1];
-        let len_prev, len_this = 0;
+        let len_prev, len_this = 0.0001;
         let [ext_x, ext_y] = compute_normal_vec(ept_this, ept_next, !has_offsets);
         ret.vertices[ilns.vertices++] = pt_this[0];
         ret.vertices[ilns.vertices++] = pt_this[1];
@@ -308,13 +273,13 @@ function makePolylines(lines) {
             len_this += Math.hypot(verts[ivt - 1][0] - verts[ivt][0], verts[ivt - 1][1] - verts[ivt][1]);
             ret.vertices[ilns.vertices++] = pt_prev[0];
             ret.vertices[ilns.vertices++] = pt_prev[1];
-            ret.vertices[ilns.vertices++] = len_prev;
+            ret.vertices[ilns.vertices++] = -len_prev;
             ret.vertices[ilns.vertices++] = pt_prev[0];
             ret.vertices[ilns.vertices++] = pt_prev[1];
             ret.vertices[ilns.vertices++] = len_prev;
             ret.vertices[ilns.vertices++] = pt_this[0];
             ret.vertices[ilns.vertices++] = pt_this[1];
-            ret.vertices[ilns.vertices++] = len_this;
+            ret.vertices[ilns.vertices++] = -len_this;
             ret.vertices[ilns.vertices++] = pt_this[0];
             ret.vertices[ilns.vertices++] = pt_this[1];
             ret.vertices[ilns.vertices++] = len_this;
@@ -332,7 +297,7 @@ function makePolylines(lines) {
         ret.vertices[ilns.vertices++] = len_this;
         ret.extrusion[ilns.extrusion++] = -ext_x;
         ret.extrusion[ilns.extrusion++] = -ext_y;
-        if ('offsets' in ret) {
+        if (ret.offsets !== undefined && line.offsets !== undefined) {
             const offsets = line.offsets;
             let off_prev, off_this = offsets[0];
             ret.offsets[ilns.offsets++] = off_this[0];
@@ -352,7 +317,7 @@ function makePolylines(lines) {
             ret.offsets[ilns.offsets++] = off_this[0];
             ret.offsets[ilns.offsets++] = off_this[1];
         }
-        if ('data' in ret) {
+        if (ret.data !== undefined && line.data !== undefined) {
             const data = line.data;
             let data_prev, data_this = data[0];
             ret.data[ilns.data++] = data_this;
@@ -366,7 +331,7 @@ function makePolylines(lines) {
             }
             ret.data[ilns.data++] = data_this;
         }
-        if ('zoom' in ret) {
+        if (ret.zoom !== undefined && line.zoom !== undefined) {
             for (let ivt = 0; ivt < verts.length * 4 - 2; ivt++) {
                 ret.zoom[ilns.zoom++] = line['zoom'];
             }

package/lib/PolylineCollection.d.ts

@@ -1,28 +1,37 @@
-import { LineData, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { LineData, WebGLAnyRenderingContext, RenderMethodArg } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
+/**
+ * A style to use to draw lines. The possible options are '-' for a solid line, '--' for a dashed line, ':' for a
+ *  dotted line, '-.' for a dash-dot line, or you could pass a list of numbers (e.g., [1, 1, 1, 0, 1, 0]) to
+ *  specify a custom dash scheme.
+ */
+type LineStyle = "-" | "--" | ":" | "-." | number[];
+declare function isLineStyle(obj: any): obj is LineStyle;
 interface PolylineCollectionOpts {
     offset_scale?: number;
+    offset_rotates_with_map?: boolean;
     color?: string;
     cmap?: ColorMap;
     line_width?: number;
+    line_style?: LineStyle | number[];
 }
 declare class PolylineCollection {
     readonly width: number;
     readonly scale: number | null;
-    private readonly program;
+    private readonly shader_manager;
     private readonly vertices;
     private readonly extrusion;
     private readonly offset;
     private readonly min_zoom;
     private readonly line_data;
-    private readonly line_texture;
     private readonly color;
-    private readonly cmap_min;
-    private readonly cmap_max;
-    private readonly index_map;
-    private readonly cmap_nonlin_texture;
+    private readonly cmap_gpu;
+    private readonly offset_rotates_with_map;
+    private readonly dash_texture;
+    private readonly n_dash;
     private constructor();
     static make(gl: WebGLAnyRenderingContext, lines: LineData[], opts?: PolylineCollectionOpts): Promise<PolylineCollection>;
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
-export { PolylineCollection };
+export { PolylineCollection, isLineStyle };
+export type { PolylineCollectionOpts, LineStyle };

package/lib/PolylineCollection.js

@@ -1,40 +1,46 @@
-import { Float16Array } from "@petamoriken/float16";
-import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
-import { makeIndexMap, makeTextureImage } from "./Colormap";
-import { getGLFormatTypeAlignment, layer_worker } from "./PlotComponent";
-import { hex2rgba } from "./utils";
-const polyline_vertex_src = `uniform mat4 u_matrix;
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
+import { isWebGL2Ctx, getRendererData } from "./AutumnTypes";
+import { ColorMap, ColorMapGPUInterface } from "./Colormap";
+import { Color } from "./Color";
+import { layer_worker } from "./PlotComponent";
+import { ShaderProgramManager } from "./ShaderManager";
+const polyline_vertex_src = `#version 300 es
+
 uniform int u_offset;
 
-attribute vec2 a_pos;
-attribute vec2 a_extrusion;
-attribute float a_data;
+in vec3 a_pos;
+in vec2 a_extrusion;
+in float a_data;
 
 #ifdef ZOOM
-attribute float a_min_zoom;
+in float a_min_zoom;
 #endif
 
 #ifdef OFFSET
-attribute vec2 a_offset;
+in vec2 a_offset;
 #endif
 
 uniform lowp float u_line_width;
 uniform lowp float u_map_width;
 uniform lowp float u_map_height;
-uniform highp float u_map_bearing;
+
 
 #ifdef ZOOM
 uniform lowp float u_zoom;
 #endif
 
 #ifdef OFFSET
+uniform int u_offset_rotates_with_map;
 uniform lowp float u_offset_scale;
 #endif
 
 #ifdef DATA
-varying highp float v_data;
+out highp float v_data;
 #endif
 
+out highp float v_dist;
+out lowp float v_cross;
+
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
     return mat4(x_scale, 0.0,     0.0,     0.0,
                 0.0,     y_scale, 0.0,     0.0,
@@ -66,23 +72,38 @@ void main() {
     float globe_width = 1.;
     vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
 
-    vec4 center_pos = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0);
+    v_dist = abs(a_pos.z);
+    v_cross = sign(a_pos.z);
+    vec4 center_pos = projectTile(a_pos.xy + globe_offset);
     vec4 offset = vec4(0.0, 0.0, 0.0, 0.0);
 
 #ifdef ZOOM
     if (u_zoom >= a_min_zoom) {
 #endif
 
-        vec2 offset_ext = u_line_width * 1.5 * a_extrusion;
+        vec2 offset_ext = u_line_width * 2. * a_extrusion;
 
         mat4 map_stretch_matrix = scalingMatrix(u_map_height / u_map_width, 1., 1.);
-        mat4 rotation_matrix = rotationZMatrix(radians(u_map_bearing));  
+        
+        vec4 center_pos_ihat = projectTile(a_pos.xy + globe_offset + vec2(1e-5, 0.));
+        
+        vec2 center_east = normalize((inverse(map_stretch_matrix) * (center_pos_ihat - center_pos)).xy);
+        float globe_rotation = atan(center_east.x, center_east.y) - 3.141592654 / 2.0;
+        mat4 rotation_matrix = rotationZMatrix(-globe_rotation);
+
         offset = map_stretch_matrix * rotation_matrix * vec4(offset_ext, 0., 0.);
 
 #ifdef OFFSET
-        map_stretch_matrix = scalingMatrix(1., u_map_width / u_map_height, 1.);
+        mat4 offset_matrix = scalingMatrix(1., u_map_width / u_map_height, 1.);
+        if (u_offset_rotates_with_map == 1) {
+            offset_matrix = offset_matrix * rotation_matrix;
+        }
+        else {
+            offset = map_stretch_matrix * vec4(offset_ext, 0., 0.);
+        }
+
         vec2 offset_offset = u_offset_scale * a_offset;
-        offset += map_stretch_matrix * rotation_matrix * vec4(offset_offset, 0., 0.);
+        offset += offset_matrix * vec4(offset_offset, 0., 0.);
 #endif
 
 #ifdef ZOOM
@@ -95,41 +116,72 @@ void main() {
     v_data = a_data;
 #endif
 }`
-const polyline_fragment_src = `#ifdef DATA
-varying highp float v_data;
-
-uniform sampler2D u_cmap_sampler;
-uniform sampler2D u_cmap_nonlin_sampler;
-uniform highp float u_cmap_min;
-uniform highp float u_cmap_max;
-uniform int u_n_index;
-#else
+const polyline_fragment_src = `#version 300 es
+
+uniform sampler2D u_dash_sampler;
+
+#ifndef DATA
 uniform lowp vec4 u_color;
 #endif
 
-void main() {
-    lowp vec4 color;
+uniform lowp float u_line_width;
+uniform lowp float u_zoom;
+uniform int u_dash_pattern_length;
+
 #ifdef DATA
-    lowp float index_buffer = 1. / (2. * float(u_n_index));
-    lowp float normed_val = (v_data - u_cmap_min) / (u_cmap_max - u_cmap_min);
+in highp float v_data;
+#endif
 
-    if (normed_val < 0.0 || normed_val > 1.0) {
-        discard;
-    }
+in highp float v_dist;
+in lowp float v_cross;
+
+out highp vec4 fragColor;
 
-    normed_val = index_buffer + normed_val * (1. - 2. * index_buffer); 
-    highp float nonlin_val = texture2D(u_cmap_nonlin_sampler, vec2(normed_val, 0.5)).r;
-    color = texture2D(u_cmap_sampler, vec2(nonlin_val, 0.5));
+void main() {
+    lowp float dash_x = fract(v_dist * 2e2 * pow(2., floor(u_zoom)) / float(u_dash_pattern_length));
+    lowp float dash = texture(u_dash_sampler, vec2(dash_x, 0.5)).r;
+
+    lowp vec4 color;
+#ifdef DATA
+    color = apply_colormap(v_data);
 #else
     color = u_color;
 #endif
-    gl_FragColor = color;
+
+    lowp float feather = clamp((1. - abs(v_cross)) * u_line_width, 0., 1.);
+    color.a *= (dash >= 1. ? 1. : 0.) * feather;
+
+    fragColor = color;
 }`
+const dash_arrays = {
+    "-": [1],
+    "--": [1, 1, 1, 1, 0, 0],
+    ":": [1, 0],
+    "-.": [1, 1, 1, 0, 1, 0],
+};
+function isLineStyle(obj) {
+    return obj in dash_arrays || Array.isArray(obj) && obj.length > 0 && obj.map(e => typeof e === 'number').reduce((a, b) => a && b, true);
+}
+function makeDashTexture(gl, line_style) {
+    const dash_array = Array.isArray(line_style) ? line_style : dash_arrays[line_style];
+    const is_webgl2 = isWebGL2Ctx(gl);
+    const format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
+    const type = gl.UNSIGNED_BYTE;
+    const row_alignment = 1;
+    const fill_image = { 'format': format, 'type': type,
+        'width': dash_array.length, 'height': 1, 'image': new Uint8Array(dash_array.map(d => d > 0 ? 255 : 0)),
+        'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
+    };
+    return [dash_array.length, new WGLTexture(gl, fill_image)];
+}
 class PolylineCollection {
     constructor(gl, polyline, opts) {
         opts = opts === undefined ? {} : opts;
-        this.color = opts.color === undefined ? [0., 0., 0., 1.] : hex2rgba(opts.color);
+        const color_hex = opts.color === undefined ? '#000000' : opts.color;
+        this.color = Color.fromHex(color_hex);
         const line_width = opts.line_width === undefined ? 1 : opts.line_width;
+        const line_style = opts.line_style === undefined ? '-' : opts.line_style;
+        this.offset_rotates_with_map = opts.offset_rotates_with_map === undefined ? true : opts.offset_rotates_with_map;
         this.width = line_width;
         const shader_defines = [];
         this.vertices = new WGLBuffer(gl, polyline['vertices'], 3, gl.TRIANGLE_STRIP);
@@ -150,81 +202,64 @@ class PolylineCollection {
         else {
             this.min_zoom = null;
         }
-        this.cmap_min = -3.40282347e+38;
-        this.cmap_max = 3.40282347e+38;
+        let fragment_src = polyline_fragment_src;
         if (polyline.data !== undefined) {
-            // TAS: this needs some cleanup (there's some repated code between here and the contour fills that should be combined?)
-            this.min_zoom = new WGLBuffer(gl, polyline.zoom, 1, gl.TRIANGLE_STRIP);
             shader_defines.push('DATA');
-            const { format: format_nonlin, type: type_nonlin, row_alignment: row_alignment_nonlin } = getGLFormatTypeAlignment(gl, true);
-            let tex_image;
-            if (opts.cmap === undefined) {
-                tex_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'width': 1, 'height': 1, 'image': new Uint8Array(this.color), 'mag_filter': gl.NEAREST };
-                this.index_map = new Float16Array([0., 1.]);
-            }
-            else {
-                tex_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': makeTextureImage(opts.cmap), 'mag_filter': gl.NEAREST };
-                this.cmap_min = opts.cmap.levels[0];
-                this.cmap_max = opts.cmap.levels[opts.cmap.levels.length - 1];
-                this.index_map = makeIndexMap(opts.cmap);
-            }
-            const cmap_nonlin_image = { 'format': format_nonlin, 'type': type_nonlin,
-                'width': this.index_map.length, 'height': 1,
-                'image': new Uint16Array(this.index_map.buffer),
-                'mag_filter': gl.LINEAR, 'row_alignment': row_alignment_nonlin,
-            };
-            this.cmap_nonlin_texture = new WGLTexture(gl, cmap_nonlin_image);
-            this.line_texture = new WGLTexture(gl, tex_image);
-            this.line_data = new WGLBuffer(gl, polyline['data'], 1, gl.TRIANGLE_STRIP);
+            this.line_data = new WGLBuffer(gl, polyline.data, 1, gl.TRIANGLE_STRIP);
+            const cmap = opts.cmap === undefined ? new ColorMap([0, 1], [color_hex], { overflow_color: color_hex, underflow_color: color_hex }) : opts.cmap;
+            this.cmap_gpu = new ColorMapGPUInterface(cmap);
+            this.cmap_gpu.setupShaderVariables(gl, gl.NEAREST);
+            fragment_src = ColorMapGPUInterface.applyShader(fragment_src);
         }
         else {
-            this.line_texture = null;
             this.line_data = null;
-            this.index_map = null;
+            this.cmap_gpu = null;
         }
-        this.program = new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src, { define: shader_defines });
+        [this.n_dash, this.dash_texture] = makeDashTexture(gl, line_style);
+        this.shader_manager = new ShaderProgramManager(polyline_vertex_src, fragment_src, shader_defines);
     }
     static async make(gl, lines, opts) {
         const polylines = await layer_worker.makePolyLines(lines);
         return new PolylineCollection(gl, polylines, opts);
     }
-    render(gl, matrix, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
+    render(gl, arg, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
+        const render_data = getRendererData(arg);
+        const program = this.shader_manager.getShaderProgram(gl, render_data.shaderData);
         const attributes = { 'a_pos': this.vertices, 'a_extrusion': this.extrusion };
         const uniforms = {
-            'u_matrix': matrix, 'u_line_width': this.width, 'u_map_width': map_width, 'u_map_height': map_height, 'u_map_bearing': map_bearing, 'u_offset': 0
+            'u_line_width': this.width, 'u_map_width': map_width, 'u_map_height': map_height, 'u_offset': 0, 'u_zoom': map_zoom,
+            'u_dash_pattern_length': this.n_dash, ...this.shader_manager.getShaderUniforms(render_data)
         };
-        const textures = {};
-        if (this.offset !== null) {
+        const textures = { 'u_dash_sampler': this.dash_texture };
+        if (this.offset !== null && this.scale !== null) {
             attributes['a_offset'] = this.offset;
             uniforms['u_offset_scale'] = this.scale * (map_height / map_width);
+            uniforms['u_offset_rotates_with_map'] = this.offset_rotates_with_map ? 1 : 0;
         }
         if (this.min_zoom !== null) {
             attributes['a_min_zoom'] = this.min_zoom;
-            uniforms['u_zoom'] = map_zoom;
         }
-        if (this.line_data !== null && this.line_texture !== null) {
+        if (this.line_data !== null) {
             attributes['a_data'] = this.line_data;
-            textures['u_cmap_sampler'] = this.line_texture;
-            textures['u_cmap_nonlin_sampler'] = this.cmap_nonlin_texture;
-            uniforms['u_cmap_min'] = this.cmap_min;
-            uniforms['u_cmap_max'] = this.cmap_max;
-            uniforms['u_n_index'] = this.index_map.length;
         }
         else {
-            uniforms['u_color'] = this.color;
+            uniforms['u_color'] = this.color.toRGBATuple();
+        }
+        program.use(attributes, uniforms, textures);
+        if (this.cmap_gpu !== null) {
+            this.cmap_gpu.bindShaderVariables(program);
         }
-        this.program.use(attributes, uniforms, textures);
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-        this.program.draw();
-        this.program.setUniforms({ 'u_offset': -2 });
-        this.program.draw();
-        this.program.setUniforms({ 'u_offset': -1 });
-        this.program.draw();
-        this.program.setUniforms({ 'u_offset': 1 });
-        this.program.draw();
+        program.draw();
+        if (render_data.type != 'maplibre' || !render_data.shaderData.define.includes('GLOBE')) {
+            program.setUniforms({ 'u_offset': -2 });
+            program.draw();
+            program.setUniforms({ 'u_offset': -1 });
+            program.draw();
+            program.setUniforms({ 'u_offset': 1 });
+            program.draw();
+        }
     }
 }
-export { PolylineCollection };
+export { PolylineCollection, isLineStyle };

package/lib/RawField.d.ts

@@ -1,11 +1,12 @@
 import { Float16Array } from "@petamoriken/float16";
-import { ContourData, TypedArray, WindProfile } from "./AutumnTypes";
+import { ContourData, TypedArray, WebGLAnyRenderingContext, WindProfile } from "./AutumnTypes";
 import { FieldContourOpts } from "./ContourCreator";
 import { Grid } from "./Grid";
-type TextureDataType<ArrayType> = ArrayType extends Float32Array ? Float32Array : Uint16Array;
+import { WGLTextureSpec } from "autumn-wgl";
+type TextureDataType<ArrayType> = ArrayType extends Float32Array ? Float32Array : (ArrayType extends Uint8Array ? Uint8Array : Uint16Array);
 /** A class representing a raw 2D field of gridded data, such as height or u wind. */
-declare class RawScalarField<ArrayType extends TypedArray> {
-    readonly grid: Grid;
+declare class RawScalarField<ArrayType extends TypedArray, GridType extends Grid> {
+    readonly grid: GridType;
     readonly data: ArrayType;
     private readonly contour_cache;
     /**
@@ -13,9 +14,15 @@ declare class RawScalarField<ArrayType extends TypedArray> {
      * @param grid - The grid on which the data are defined
      * @param data - The data, which should be given as a 1D array in row-major order, with the first element being at the lower-left corner of the grid.
      */
-    constructor(grid: Grid, data: ArrayType);
+    constructor(grid: GridType, data: ArrayType);
     /** @internal */
-    getTextureData(): TextureDataType<ArrayType>;
+    private getTextureData;
+    getWGLTextureSpec(gl: WebGLAnyRenderingContext, image_mag_filter: number): WGLTextureSpec;
+    /**
+     * Get contour data as an object with each contour level being a separate property.
+     * @param opts - Options for doing the contouring
+     * @returns contour data as an object
+     */
     getContours(opts: FieldContourOpts): Promise<ContourData>;
     /**
      * Create a new field by aggregating a number of fields using a specific function
@@ -26,7 +33,8 @@ declare class RawScalarField<ArrayType extends TypedArray> {
      * // Compute wind speed from u and v
      * wind_speed_field = RawScalarField.aggreateFields(Math.hypot, u_field, v_field);
      */
-    static aggregateFields<ArrayType extends TypedArray>(func: (...args: number[]) => number, ...args: RawScalarField<ArrayType>[]): RawScalarField<ArrayType>;
+    static aggregateFields<ArrayType extends TypedArray, GridType extends Grid>(func: (...args: number[]) => number, ...args: RawScalarField<ArrayType, GridType>[]): RawScalarField<ArrayType, GridType>;
+    sampleField(lon: number, lat: number): number;
 }
 type VectorRelativeTo = 'earth' | 'grid';
 interface RawVectorFieldOptions {
@@ -37,9 +45,9 @@ interface RawVectorFieldOptions {
     relative_to?: VectorRelativeTo;
 }
 /** A class representing a 2D gridded field of vectors */
-declare class RawVectorField<ArrayType extends TypedArray> {
-    readonly u: RawScalarField<ArrayType>;
-    readonly v: RawScalarField<ArrayType>;
+declare class RawVectorField<ArrayType extends TypedArray, GridType extends Grid> {
+    readonly u: RawScalarField<ArrayType, GridType>;
+    readonly v: RawScalarField<ArrayType, GridType>;
     readonly relative_to: VectorRelativeTo;
     /**
      * Create a vector field.
@@ -48,26 +56,71 @@ declare class RawVectorField<ArrayType extends TypedArray> {
      * @param v    - The v (north/south) component of the vectors, which should be given as a 1D array in row-major order, with the first element being at the lower-left corner of the grid
      * @param opts - Options for creating the vector field.
      */
-    constructor(grid: Grid, u: ArrayType, v: ArrayType, opts?: RawVectorFieldOptions);
-    getTextureData(): {
-        u: TextureDataType<ArrayType>;
-        v: TextureDataType<ArrayType>;
+    constructor(grid: GridType, u: ArrayType, v: ArrayType, opts?: RawVectorFieldOptions);
+    /** @internal */
+    private getTextureData;
+    getWGLTextureSpecs(gl: WebGLAnyRenderingContext, mag_filter: number): {
+        u: WGLTextureSpec;
+        v: WGLTextureSpec;
     };
-    getThinnedField(thin_x: number, thin_y: number): RawVectorField<ArrayType>;
-    get grid(): Grid;
+    /** @internal */
+    getThinnedField(thin_fac: number, map_max_zoom: number): RawVectorField<ArrayType, Grid>;
+    /** @internal */
+    get grid(): GridType;
+    sampleField(lon: number, lat: number): [number, number];
 }
 /** A class grid of wind profiles */
-declare class RawProfileField {
+declare class RawProfileField<GridType extends Grid> {
     readonly profiles: WindProfile[];
-    readonly grid: Grid;
+    readonly grid: GridType;
     /**
      * Create a grid of wind profiles
      * @param grid     - The grid on which the profiles are defined
      * @param profiles - The wind profiles themselves, which should be given as a 1D array in row-major order, with the first profile being at the lower-left corner of the grid
      */
-    constructor(grid: Grid, profiles: WindProfile[]);
-    /** Get the gridded storm motion vector field (internal method) */
-    getStormMotionGrid(): RawVectorField<Float16Array>;
+    constructor(grid: GridType, profiles: WindProfile[]);
+    /**
+     * @internal
+     * Get the gridded storm motion vector field
+     */
+    getStormMotionGrid(): RawVectorField<Float16Array, GridType>;
+    /** @internal */
+    getProfileCoords(): {
+        lats: Float32Array;
+        lons: Float32Array;
+    };
+}
+/**
+ * Type for an observation data point
+ * @example
+ * const obs : ObsRawData<'t' | 'td'> = {'t': 71, 'td': 66};
+ */
+type ObsRawData<ObsFieldName extends string> = Record<ObsFieldName, string | number | [number, number] | null>;
+/** Raw observation data, given as a list of objects */
+declare class RawObsField<GridType extends Grid, ObsFieldName extends string> {
+    readonly grid: GridType;
+    readonly data: ObsRawData<ObsFieldName>[];
+    /**
+     * Create a field of observations
+     * @param grid - The grid on which the obs are defined (can be either a structured or unstructured grid)
+     * @param data - The observation data. Conceptually, obs are given as a list of individual observations.
+     */
+    constructor(grid: GridType, data: ObsRawData<ObsFieldName>[]);
+    /**
+     * @internal
+     * Get observation element as a list of scalar numbers
+     */
+    getScalar(key: ObsFieldName): (number | null)[];
+    /**
+     * @internal
+     * Get observed element as a list of strings (internal method)
+     */
+    getStrings(key: ObsFieldName): (string | null)[];
+    /**
+     * @internal
+     * Get observed element as a list of vectors (internal method)
+     */
+    getVector(key: ObsFieldName): RawVectorField<Float16Array, GridType>;
 }
-export { RawScalarField, RawVectorField, RawProfileField };
-export type { RawVectorFieldOptions, VectorRelativeTo, TextureDataType };
+export { RawScalarField, RawVectorField, RawProfileField, RawObsField };
+export type { RawVectorFieldOptions, VectorRelativeTo, TextureDataType, ObsRawData };