autumnplot-gl 3.1.0 → 4.0.0-beta

package/lib/Hodographs.js

@@ -1,9 +1,10 @@
 import { PlotComponent } from "./PlotComponent";
 import { PolylineCollection } from "./PolylineCollection";
 import { BillboardCollection } from "./BillboardCollection";
-import { getMinZoom, hex2rgb, normalizeOptions } from './utils';
+import { getMinZoom, normalizeOptions } from './utils';
 import { ColorMap } from "./Colormap";
-const LINE_WIDTH = 4;
+import { Color } from "./Color";
+const LINE_WIDTH_MULTIPLIER = 2.5;
 const BG_MAX_RING_MAG = 40;
 const HODO_BG_DIMS = {
     BB_WIDTH: 256,
@@ -14,7 +15,7 @@ const HODO_BG_DIMS = {
     BB_MAG_WRAP: 1000,
     BB_MAG_BIN_SIZE: 1000,
 };
-function _createHodoBackgroundTexture() {
+function _createHodoBackgroundTexture(line_width) {
     let canvas = document.createElement('canvas');
     canvas.width = HODO_BG_DIMS.BB_TEX_WIDTH;
     canvas.height = HODO_BG_DIMS.BB_TEX_HEIGHT;
@@ -22,10 +23,10 @@ function _createHodoBackgroundTexture() {
     if (ctx === null) {
         throw "Could not get rendering context for the hodograph background canvas";
     }
-    ctx.lineWidth = LINE_WIDTH;
+    ctx.lineWidth = line_width;
     for (let irng = HODO_BG_DIMS.BB_TEX_WIDTH / 4; irng <= HODO_BG_DIMS.BB_TEX_WIDTH / 2; irng += HODO_BG_DIMS.BB_TEX_WIDTH / 4) {
         ctx.beginPath();
-        ctx.arc(HODO_BG_DIMS.BB_TEX_WIDTH / 2, HODO_BG_DIMS.BB_TEX_WIDTH / 2, irng - LINE_WIDTH / 2, 0, 2 * Math.PI);
+        ctx.arc(HODO_BG_DIMS.BB_TEX_WIDTH / 2, HODO_BG_DIMS.BB_TEX_WIDTH / 2, irng - line_width / 2, 0, 2 * Math.PI);
         ctx.stroke();
     }
     const ctr_x = HODO_BG_DIMS.BB_TEX_WIDTH / 2, ctr_y = HODO_BG_DIMS.BB_TEX_WIDTH / 2;
@@ -39,13 +40,15 @@ function _createHodoBackgroundTexture() {
     return canvas;
 }
 ;
-let HODO_BG_TEXTURE = null;
 const HODO_CMAP = new ColorMap([0, 1, 3, 6, 9], ['#ffffcc', '#a1dab4', '#41b6c4', '#225ea8']);
 const hodograph_opt_defaults = {
     bgcolor: '#000000',
-    thin_fac: 1
+    thin_fac: 1,
+    hodo_line_width: 2.5,
+    background_line_width: 1.5,
+    height_cmap: HODO_CMAP
 };
-/** A class representing a a field of hodograph plots */
+/** A class representing a field of hodograph plots */
 class Hodographs extends PlotComponent {
     /**
      * Create a field of hodographs
@@ -56,7 +59,8 @@ class Hodographs extends PlotComponent {
         super();
         this.profile_field = profile_field;
         this.opts = normalizeOptions(opts, hodograph_opt_defaults);
-        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - LINE_WIDTH / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
+        this.hodo_bg_texture = _createHodoBackgroundTexture(this.opts.background_line_width * LINE_WIDTH_MULTIPLIER);
+        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - this.opts.background_line_width / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
         this.bg_size = 140;
         this.gl_elems = null;
         this.line_elems = null;
@@ -73,17 +77,19 @@ class Hodographs extends PlotComponent {
         const gl = this.gl_elems.gl;
         this.gl_elems.bg_billboard.updateField(field.getStormMotionGrid());
         const profiles = this.profile_field.profiles;
-        const hodo_polyline = profiles.map(prof => {
+        const { lats, lons } = this.profile_field.getProfileCoords();
+        const hodo_polyline = profiles.map((prof, iprof) => {
             const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
             return {
                 'offsets': [...prof['u']].map((u, ipt) => [u - prof['smu'], prof['v'][ipt] - prof['smv']]),
-                'vertices': [...prof['u']].map(u => [prof['lon'], prof['lat']]),
+                'vertices': [...prof['u']].map(u => [lons[iprof], lats[iprof]]),
                 'zoom': zoom,
                 'data': [...prof['z']],
             };
         });
-        const hodo_line = await PolylineCollection.make(gl, hodo_polyline, { line_width: 2.5, cmap: HODO_CMAP, offset_scale: this.hodo_scale * this.bg_size });
-        const sm_polyline = profiles.map(prof => {
+        const hodo_line = await PolylineCollection.make(gl, hodo_polyline, { line_width: this.opts.hodo_line_width, cmap: this.opts.height_cmap,
+            offset_scale: this.hodo_scale * this.bg_size, offset_rotates_with_map: false });
+        const sm_polyline = profiles.map((prof, iprof) => {
             const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
             const sm_mag = Math.hypot(prof['smu'], prof['smv']);
             const sm_ang = Math.PI / 2 - Math.atan2(-prof['smv'], -prof['smu']);
@@ -91,11 +97,12 @@ class Hodographs extends PlotComponent {
             return {
                 'offsets': [[buffer * Math.sin(sm_ang), buffer * Math.cos(sm_ang)],
                     [sm_mag * Math.sin(sm_ang), sm_mag * Math.cos(sm_ang)]],
-                'vertices': [[prof['lon'], prof['lat']], [prof['lon'], prof['lat']]],
+                'vertices': [[lons[iprof], lats[iprof]], [lons[iprof], lats[iprof]]],
                 'zoom': zoom
             };
         });
-        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: 1.5, color: this.opts.bgcolor, offset_scale: this.hodo_scale * this.bg_size });
+        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: this.opts.background_line_width, color: this.opts.bgcolor,
+            offset_scale: this.hodo_scale * this.bg_size, offset_rotates_with_map: false });
         this.line_elems = {
             hodo_line: hodo_line, sm_line: sm_line
         };
@@ -105,12 +112,9 @@ class Hodographs extends PlotComponent {
      * Add the hodographs to a map
      */
     async onAdd(map, gl) {
-        if (HODO_BG_TEXTURE === null) {
-            HODO_BG_TEXTURE = _createHodoBackgroundTexture();
-        }
-        const bg_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': HODO_BG_TEXTURE, 'mag_filter': gl.NEAREST };
+        const bg_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': this.hodo_bg_texture, 'mag_filter': gl.NEAREST };
         const max_zoom = map.getMaxZoom();
-        const bg_billboard = new BillboardCollection(this.profile_field.getStormMotionGrid(), this.opts.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, hex2rgb(this.opts.bgcolor), this.bg_size * 0.004);
+        const bg_billboard = new BillboardCollection(this.profile_field.getStormMotionGrid(), this.opts.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, this.bg_size * 0.004, { color: Color.fromHex(this.opts.bgcolor), rotate_with_map: false });
         await bg_billboard.setup(gl);
         this.gl_elems = {
             gl: gl, map: map, bg_billboard: bg_billboard
@@ -121,7 +125,7 @@ class Hodographs extends PlotComponent {
      * @internal
      * Render the hodographs
      */
-    render(gl, matrix) {
+    render(gl, arg) {
         if (this.gl_elems === null || this.line_elems === null)
             return;
         const gl_elems = this.gl_elems;
@@ -131,9 +135,9 @@ class Hodographs extends PlotComponent {
         const map_height = gl_elems.map.getCanvas().height;
         const bearing = gl_elems.map.getBearing();
         const pitch = gl_elems.map.getPitch();
-        line_elems.hodo_line.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
-        line_elems.sm_line.render(gl, matrix, [map_width, map_height], zoom, bearing, bearing);
-        gl_elems.bg_billboard.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
+        line_elems.hodo_line.render(gl, arg, [map_width, map_height], zoom, bearing, pitch);
+        line_elems.sm_line.render(gl, arg, [map_width, map_height], zoom, bearing, bearing);
+        gl_elems.bg_billboard.render(gl, arg, [map_width, map_height], zoom, bearing, pitch);
     }
 }
 export default Hodographs;

package/lib/Map.js

@@ -130,7 +130,7 @@ function lngFromMercatorX(x) {
 function mercatorYfromLat(lat) {
     const sin_lat = Math.sin(lat * Math.PI / 180);
     const y = (180 - (90 / Math.PI * Math.log((1 + sin_lat) / (1 - sin_lat)))) / 360;
-    return Math.min(2, Math.max(-2, y));
+    return Math.min(1.5, Math.max(-0.5, y));
 }
 function latFromMercatorY(y) {
     return Math.atan(Math.sinh((180 - y * 360) * Math.PI / 180)) * 180 / Math.PI;

package/lib/Paintball.d.ts

@@ -1,4 +1,5 @@
-import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { StructuredGrid } from "./Grid";
 import { MapLikeType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
 import { RawScalarField } from "./RawField";
@@ -20,7 +21,7 @@ interface PaintballOptions {
  * of single-precision floats, this works for up to 24 members. (Technically speaking, I don't need the quotes around "bits", as they're bits of the
  * significand of an IEEE 754 float.)
  */
-declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+declare class Paintball<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private field;
     readonly opts: Required<PaintballOptions>;
     private readonly color_components;
@@ -33,12 +34,12 @@ declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeTyp
      *               `M2` is the same thing for member 2, and `M3` and `M4` and up to `Mn` are the same thing for the rest of the members.
      * @param opts  - Options for creating the paintball plot
      */
-    constructor(field: RawScalarField<ArrayType>, opts?: PaintballOptions);
+    constructor(field: RawScalarField<ArrayType, GridType>, opts?: PaintballOptions);
     /**
      * Update the field displayed as a paintball plot
      * @param field - The new field to display as a paintball plot
      */
-    updateField(field: RawScalarField<ArrayType>): Promise<void>;
+    updateField(field: RawScalarField<ArrayType, GridType>): Promise<void>;
     /**
      * @internal
      * Add the paintball plot to a map.
@@ -48,7 +49,7 @@ declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeTyp
      * @internal
      * Render the paintball plot
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
 export default Paintball;
 export type { PaintballOptions };

package/lib/Paintball.js

@@ -1,32 +1,40 @@
-import { PlotComponent, getGLFormatTypeAlignment } from "./PlotComponent";
-import { hex2rgba, normalizeOptions } from "./utils";
-import { WGLProgram, WGLTexture } from "autumn-wgl";
-const paintball_vertex_shader_src = `uniform mat4 u_matrix;
+import { getRendererData } from "./AutumnTypes";
+import { Color } from "./Color";
+import { PlotComponent } from "./PlotComponent";
+import { ShaderProgramManager } from "./ShaderManager";
+import { normalizeOptions } from "./utils";
+import { WGLTexture } from "autumn-wgl";
+const paintball_vertex_shader_src = `#version 300 es
+
 uniform int u_offset;
 
-attribute vec2 a_pos;
-attribute vec2 a_tex_coord;
+in vec2 a_pos;
+in vec2 a_tex_coord;
 
-varying highp vec2 v_tex_coord;
+out highp vec2 v_tex_coord;
 
 void main() {
     float globe_width = 1.;
     vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
 
-    gl_Position = u_matrix * vec4(a_pos + globe_offset, 0.0, 1.0);
+    gl_Position = projectTile(a_pos.xy + globe_offset);
     v_tex_coord = a_tex_coord;
 }`
-const paintball_fragment_shader_src = `#define MAX_N_COLORS 24
+const paintball_fragment_shader_src = `#version 300 es
+
+#define MAX_N_COLORS 24
 
-varying highp vec2 v_tex_coord;
+in highp vec2 v_tex_coord;
 
 uniform sampler2D u_fill_sampler;
 uniform lowp vec4 u_colors[MAX_N_COLORS];
 uniform int u_num_colors;
 uniform highp float u_opacity;
 
+out highp vec4 fragColor;
+
 void main() {
-    highp float fill_val = texture2D(u_fill_sampler, v_tex_coord).r;
+    highp float fill_val = texture(u_fill_sampler, v_tex_coord).r;
     
     if (fill_val < 0.5) {
         discard;
@@ -43,7 +51,7 @@ void main() {
     }
 
     color.a = color.a * u_opacity;
-    gl_FragColor = color;
+    fragColor = color;
 }`
 const paintball_opt_defaults = {
     colors: ['#000000'],
@@ -68,7 +76,7 @@ class Paintball extends PlotComponent {
         super();
         this.field = field;
         this.opts = normalizeOptions(opts, paintball_opt_defaults);
-        this.color_components = [...this.opts.colors].reverse().map(color => hex2rgba(color)).flat();
+        this.color_components = [...this.opts.colors].reverse().map(color => Color.fromHex(color).toRGBATuple()).flat();
         this.gl_elems = null;
         this.fill_texture = null;
     }
@@ -82,12 +90,7 @@ class Paintball extends PlotComponent {
             return;
         const gl = this.gl_elems.gl;
         gl.pixelStorei(gl.UNPACK_ALIGNMENT, 2);
-        const tex_data = this.field.getTextureData();
-        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, !(tex_data instanceof Float32Array));
-        const fill_image = { 'format': format, 'type': type,
-            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': tex_data,
-            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
-        };
+        const fill_image = this.field.getWGLTextureSpec(gl, gl.NEAREST);
         if (this.fill_texture === null) {
             this.fill_texture = new WGLTexture(gl, fill_image);
         }
@@ -101,12 +104,12 @@ class Paintball extends PlotComponent {
      */
     async onAdd(map, gl) {
         gl.getExtension('OES_texture_float');
-        const program = new WGLProgram(gl, paintball_vertex_shader_src, paintball_fragment_shader_src);
         const { vertices: verts_buf, texcoords: tex_coords_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
         const texcoords = tex_coords_buf;
+        const shader_manager = new ShaderProgramManager(paintball_vertex_shader_src, paintball_fragment_shader_src, []);
         this.gl_elems = {
-            gl: gl, program: program, vertices: vertices, texcoords: texcoords,
+            gl: gl, shader_manager: shader_manager, vertices: vertices, texcoords: texcoords,
         };
         this.updateField(this.field);
     }
@@ -114,23 +117,26 @@ class Paintball extends PlotComponent {
      * @internal
      * Render the paintball plot
      */
-    render(gl, matrix) {
+    render(gl, arg) {
         if (this.gl_elems === null || this.fill_texture === null)
             return;
         const gl_elems = this.gl_elems;
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
+        const render_data = getRendererData(arg);
+        const program = this.gl_elems.shader_manager.getShaderProgram(gl, render_data.shaderData);
         // Render to framebuffer
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opts.opacity, 'u_colors': this.color_components, 'u_num_colors': this.opts.colors.length, 'u_offset': 0 }, { 'u_fill_sampler': this.fill_texture });
+        program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_opacity': this.opts.opacity, 'u_colors': this.color_components, 'u_num_colors': this.opts.colors.length, 'u_offset': 0,
+            ...this.gl_elems.shader_manager.getShaderUniforms(render_data) }, { 'u_fill_sampler': this.fill_texture });
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': -2 });
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': -1 });
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': 1 });
-        gl_elems.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 default Paintball;

package/lib/ParticleTracer.d.ts

@@ -0,0 +1,19 @@
+import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { Grid } from "./Grid";
+import { MapLikeType } from "./Map";
+import { PlotComponent } from "./PlotComponent";
+import { RawVectorField } from "./RawField";
+interface ParticleTracerOptions {
+}
+declare class ParticleTracer<ArrayType extends TypedArray, GridType extends Grid, MapType extends MapLikeType> extends PlotComponent<MapType> {
+    field: RawVectorField<ArrayType, GridType>;
+    readonly opts: Required<ParticleTracerOptions>;
+    private gl_elems;
+    private wind_textures;
+    constructor(fields: RawVectorField<ArrayType, GridType>, opts?: ParticleTracerOptions);
+    updateField(field: RawVectorField<ArrayType, GridType>): void;
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    onRemove(map: MapType, gl: WebGLAnyRenderingContext): void;
+    render(gl: WebGLAnyRenderingContext, args: RenderMethodArg): void;
+}
+export { ParticleTracer };

package/lib/ParticleTracer.js

@@ -0,0 +1,37 @@
+import { WGLTexture } from "autumn-wgl";
+import { PlotComponent } from "./PlotComponent";
+import { normalizeOptions } from "./utils";
+const particle_tracer_opt_defaults = {};
+class ParticleTracer extends PlotComponent {
+    constructor(fields, opts) {
+        super();
+        this.field = fields;
+        this.opts = normalizeOptions(opts, particle_tracer_opt_defaults);
+        this.gl_elems = null;
+        this.wind_textures = null;
+    }
+    updateField(field) {
+        this.field = field;
+        if (this.gl_elems === null)
+            return;
+        const gl = this.gl_elems.gl;
+        const { u: u_image, v: v_image } = this.field.getWGLTextureSpecs(gl, gl.NEAREST);
+        if (this.wind_textures === null) {
+            this.wind_textures = { u: new WGLTexture(gl, u_image), v: new WGLTexture(gl, v_image) };
+        }
+        else {
+            this.wind_textures.u.setImageData(u_image);
+            this.wind_textures.v.setImageData(v_image);
+        }
+    }
+    async onAdd(map, gl) {
+        const { rotation: proj_rotation_tex } = this.field.grid.getVectorRotationTexture(gl, this.field.relative_to == 'earth');
+        this.gl_elems = { gl: gl, proj_rot_texture: proj_rotation_tex };
+        this.updateField(this.field);
+    }
+    onRemove(map, gl) {
+    }
+    render(gl, args) {
+    }
+}
+export { ParticleTracer };

package/lib/PlotComponent.d.ts

@@ -1,25 +1,24 @@
 import * as Comlink from 'comlink';
 import { MapLikeType } from './Map';
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { RenderMethodArg, TypedArrayStr, WebGLAnyRenderingContext } from './AutumnTypes';
 declare const layer_worker: Comlink.Remote<{
-    makeBBElements: (field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, thin_fac_base: number, max_zoom: number) => {
+    makeBBElements: (field_lats: Float32Array, field_lons: Float32Array, min_zoom: Uint8Array, field_ni: number, field_nj: number, map_max_zoom: number) => {
         pts: Float32Array;
         tex_coords: Float32Array;
     };
     makeDomainVerticesAndTexCoords: (field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, texcoord_margin_r: number, texcoord_margin_s: number) => {
         vertices: Float32Array;
         tex_coords: Float32Array;
-        grid_cell_size: Float32Array;
     };
     makePolyLines: (lines: import("./AutumnTypes").LineData[]) => import("./AutumnTypes").Polyline;
 }>;
 declare abstract class PlotComponent<MapType extends MapLikeType> {
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
-    abstract render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    abstract render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
-declare function getGLFormatTypeAlignment(gl: WebGLAnyRenderingContext, is_float16: boolean): {
-    format: 33325 | 33326 | 6409;
-    type: 36193 | 5131 | 5126;
+declare function getGLFormatTypeAlignment(gl: WebGLAnyRenderingContext, array_dtype: TypedArrayStr): {
+    format: 33321 | 33325 | 33326 | 6409;
+    type: 36193 | 5131 | 5121 | 5126;
     row_alignment: number;
 };
 export { PlotComponent, layer_worker, getGLFormatTypeAlignment };

package/lib/PlotComponent.js

@@ -5,20 +5,25 @@ const worker = new Worker(new URL('./PlotLayer.worker', import.meta.url));
 const layer_worker = Comlink.wrap(worker);
 class PlotComponent {
 }
-function getGLFormatTypeAlignment(gl, is_float16) {
+function getGLFormatTypeAlignment(gl, array_dtype) {
     let format, type, row_alignment;
     const is_webgl2 = isWebGL2Ctx(gl);
-    if (is_float16) {
+    if (array_dtype == 'float16') {
         const ext = gl.getExtension('OES_texture_half_float');
         const ext_lin = gl.getExtension('OES_texture_half_float_linear');
-        if ((!is_webgl2 && ext === null) || (!is_webgl2 && ext_lin === null)) {
-            throw "Float16 data are not supported on this hardware. Try Float32 data instead.";
+        if (is_webgl2) {
+            format = gl.R16F;
+            type = gl.HALF_FLOAT;
+        }
+        else {
+            if (ext === null || ext_lin === null)
+                throw "Float16 data are not supported on this hardware. Try Float32 data instead.";
+            format = gl.LUMINANCE;
+            type = ext.HALF_FLOAT_OES;
         }
-        format = is_webgl2 ? gl.R16F : gl.LUMINANCE;
-        type = is_webgl2 ? gl.HALF_FLOAT : ext.HALF_FLOAT_OES;
         row_alignment = 2;
     }
-    else {
+    else if (array_dtype == 'float32') {
         const ext = gl.getExtension('OES_texture_float');
         const ext_lin = gl.getExtension('OES_texture_float_linear');
         // As of 11/3/2023, Safari/WebKit on iOS reports as supporting float textures,
@@ -34,6 +39,11 @@ function getGLFormatTypeAlignment(gl, is_float16) {
         type = gl.FLOAT;
         row_alignment = 4;
     }
+    else {
+        format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
+        type = gl.UNSIGNED_BYTE;
+        row_alignment = 1;
+    }
     return { format: format, type: type, row_alignment: row_alignment };
 }
 export { PlotComponent, layer_worker, getGLFormatTypeAlignment };

package/lib/PlotLayer.d.ts

@@ -1,10 +1,10 @@
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { RenderMethodArg, WebGLAnyRenderingContext } from './AutumnTypes';
 import { MapLikeType } from './Map';
 import { PlotComponent } from './PlotComponent';
 declare abstract class PlotLayerBase<MapType extends MapLikeType> {
     readonly type: 'custom';
     readonly id: string;
-    protected map: MapType;
+    protected map: MapType | null;
     constructor(id: string);
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): void;
     abstract render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
@@ -36,7 +36,7 @@ declare class PlotLayer<MapType extends MapLikeType> extends PlotLayerBase<MapTy
      * @internal
      * Render this layer
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, matrix: RenderMethodArg): void;
 }
 /**
  * A varying map layer. If the data don't have a varying component, such as over time, it might be easier to use an {@link PlotLayer} instead.
@@ -70,7 +70,7 @@ declare class MultiPlotLayer<MapType extends MapLikeType> extends PlotLayerBase<
      * @internal
      * Render this layer
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, matrix: RenderMethodArg): void;
     /**
      * Set the active key
      * @param key - The new key. The field with that key is plotted immediately.

package/lib/PlotLayer.worker.d.ts

@@ -1,12 +1,11 @@
 import { LineData, Polyline } from "./AutumnTypes";
-declare function makeBBElements(field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, thin_fac_base: number, max_zoom: number): {
+declare function makeBBElements(field_lats: Float32Array, field_lons: Float32Array, min_zoom: Uint8Array, field_ni: number, field_nj: number, map_max_zoom: number): {
     pts: Float32Array;
     tex_coords: Float32Array;
 };
 declare function makeDomainVerticesAndTexCoords(field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, texcoord_margin_r: number, texcoord_margin_s: number): {
     vertices: Float32Array;
     tex_coords: Float32Array;
-    grid_cell_size: Float32Array;
 };
 declare function makePolylines(lines: LineData[]): Polyline;
 declare const ep_interface: {