autumnplot-gl 2.1.0 → 2.2.1

package/README.md

@@ -19,7 +19,7 @@ npm i autumnplot-gl
 Additionally, pre-built autumnplot-gl javascript files area available [here](https://tsupinie.github.io/autumnplot-gl/dist/). Adding them to your page exposes the API via the `apgl` global variable (e.g., instead of `new PlateCarreeGrid(...)` in the examples, you'd call `new apgl.PlateCarreeGrid(...)`). 
 
 ### A basic contour plot
-The first step in plotting data is to create a grid. Currently, the only supported grids are PlateCarree (a.k.a. Lat/Lon) and Lambert Conformal Conic.
+The first step in plotting data is to create a grid. Currently, the only supported grids are PlateCarreeGrid (a.k.a. Lat/Lon), RotatedPlateCarreeGrid, and LambertGrid (a.k.a. Lambert Conformal Conic).
 
 ```javascript
 // Create a grid object that covers the continental United States
@@ -27,7 +27,7 @@ const nx = 121, ny = 61;
 const grid = new PlateCarreeGrid(nx, ny, -130, 20, -65, 55);
 ```
 
-Next, create a RawScalarField with the data. autumnplot-gl doesn't care about how data get to the browser, but it should end up in a Float32Array in row-major order with the first element being at the southwest corner of the grid. A future version might include support for reading from, say, a Zarr file. Once you have your data in that format, to create the raw data field:
+Next, create a RawScalarField with the data. autumnplot-gl doesn't care about how data get to the browser, but it should end up in a `Float32Array` or `Float16Array` in row-major order with the first element being at the southwest corner of the grid. If you're using [zarr.js](https://github.com/gzuidhof/zarr.js/), you can use the `getRaw()` function on a `ZarrArray` to get data in the correct format. Also, `Float16Array`s are not in the Javascript standard library (for now), so for the time being, you'll need to use [this library](https://github.com/petamoriken/float16). However, the nice part about using a `Float16Array` is that your data will be stored as float16s in VRAM, so they'll take up half the space as the same data as float32s. Once you have your data in that format, to create the raw data field:
 
 ```javascript
 // Create the raw data field
@@ -81,7 +81,7 @@ map.on('load', () => {
 
 The wind barbs are automatically rotated based on the grid projection. Also, the density of the wind barbs is automatically varied based on the map zoom level. The `'thin_fac': 16` option means to plot every 16th wind barb in the i and j directions, and this is defined at zoom level 1. So at zoom level 2, it will plot every 8th wind barb, and at zoom level 3 every 4th wind barb, and so on. Because it divides in 2 for every deeper zoom level, `'thin_fac'` should be a power of 2.
 
-### Filled contours
+### Filled contours or raster plots
 
 Plotting filled contours is also similar to plotting regular contours, but there's some additional steps for the color map. A couple color maps are available by default (see [here](#built-in-color-maps) for more details), but if you have the colors you want, creating your own is (relatively) painless (hopefully). First, set up the colormap. Here, we'll just use the bluered colormap included by default.
 
@@ -96,7 +96,13 @@ map.on('load', () => {
 });
 ```
 
-Normally, when you have color-filled contours, you have a color bar on the plot. To create an SVG color bar:
+Making a raster plot is very similar (the two classes support the same options):
+
+```javascript
+const raster = new Raster(height, {cmap: colormap});
+```
+
+Normally, when you have a color fill, you have a color bar on the plot. To create an SVG color bar:
 
 ```javascript
 const colorbar_svg = makeColorBar(colormap, {label: "Height Perturbation (m)", 
@@ -154,7 +160,7 @@ The above exmple uses map tiles from [Maptiler](https://www.maptiler.com/). Map
 So, I've created some [less-detailed map tiles](https://tsupinie.github.io/autumnplot-gl/tiles/) that are small enough that they can be hosted without dedicated hardware. However the tradeoff is that they're only useful down to zoom level 8 or 9 on the map, such that the viewport is somewhere between half a US state and a few counties in size. If that's good enough for you, then these tiles could be useful.
 
 ## Conspicuous absences
-A few capabilities are missing from this library as of v2.0.
+A few capabilities are missing from this library as of v2.2.
 * Helper functions for reading from specific data formats. For instance, I'd like to add support for reading from a zarr file.
 * A whole bunch of little things that ought to be fairly straightforward like tweaking the size of the wind barbs and contour thicknesses.
 * Support for contour labeling. I'd like to add it, but I'm not really sure how I'd do it with the contours as I've implemented them. Any WebGL gurus, get in touch.

package/lib/AutumnTypes.d.ts

@@ -1,3 +1,4 @@
+import { Float16Array } from "@petamoriken/float16";
 interface WindProfile {
     lat: number;
     lon: number;
@@ -33,5 +34,6 @@ interface LineSpec {
 }
 type WebGLAnyRenderingContext = WebGLRenderingContext | WebGL2RenderingContext;
 declare function isWebGL2Ctx(gl: WebGLAnyRenderingContext): gl is WebGL2RenderingContext;
+type TypedArray = Float16Array | Float32Array;
 export { isWebGL2Ctx };
-export type { WindProfile, BillboardSpec, PolylineSpec, LineSpec, WebGLAnyRenderingContext };
+export type { WindProfile, BillboardSpec, PolylineSpec, LineSpec, WebGLAnyRenderingContext, TypedArray };

package/lib/Barbs.d.ts

@@ -1,8 +1,7 @@
 import { PlotComponent } from "./PlotComponent";
-import { BillboardCollection } from './BillboardCollection';
 import { RawVectorField } from "./RawField";
 import { MapType } from "./Map";
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 interface BarbsOptions {
     /**
      * The color to use for the barbs as a hex color string;.
@@ -16,10 +15,6 @@ interface BarbsOptions {
      */
     thin_fac?: number;
 }
-interface BarbsGLElems {
-    map: MapType | null;
-    barb_billboards: BillboardCollection | null;
-}
 /**
  * A class representing a field of wind barbs. The barbs are automatically thinned based on the zoom level on the map; the user only has to provide a
  * thinning factor at zoom level 1.
@@ -28,19 +23,18 @@ interface BarbsGLElems {
  * const vector_field = new RawVectorField(grid, u_data, v_data);
  * const barbs = new Barbs(vector_field, {color: '#000000', thin_fac: 16});
  */
-declare class Barbs extends PlotComponent {
+declare class Barbs<ArrayType extends TypedArray> extends PlotComponent {
     /** The vector field */
-    readonly fields: RawVectorField;
+    private readonly fields;
     readonly color: [number, number, number];
     readonly thin_fac: number;
-    /** @private */
-    gl_elems: BarbsGLElems | null;
+    private gl_elems;
     /**
      * Create a field of wind barbs
      * @param fields - The vector field to plot as barbs
      * @param opts   - Options for creating the wind barbs
      */
-    constructor(fields: RawVectorField, opts: BarbsOptions);
+    constructor(fields: RawVectorField<ArrayType>, opts: BarbsOptions);
     /**
      * @internal
      * Add the barb field to a map
@@ -50,7 +44,7 @@ declare class Barbs extends PlotComponent {
      * @internal
      * Render the barb field
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 export default Barbs;
 export type { BarbsOptions };

package/lib/BillboardCollection.d.ts

@@ -1,17 +1,17 @@
-import { BillboardSpec, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { BillboardSpec, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { RawVectorField } from "./RawField";
-import { WGLBuffer, WGLProgram, WGLTexture, WGLTextureSpec } from "autumn-wgl";
-declare class BillboardCollection {
+import { WGLTextureSpec } from "autumn-wgl";
+declare class BillboardCollection<ArrayType extends TypedArray> {
     readonly spec: BillboardSpec;
     readonly color: [number, number, number];
     readonly size_multiplier: number;
-    readonly program: WGLProgram;
-    vertices: WGLBuffer | null;
-    texcoords: WGLBuffer | null;
-    readonly texture: WGLTexture;
-    readonly u_texture: WGLTexture;
-    readonly v_texture: WGLTexture;
-    constructor(gl: WebGLAnyRenderingContext, field: RawVectorField, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_color: [number, number, number], billboard_size_mult: number);
-    render(gl: WebGLAnyRenderingContext, matrix: number[], [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
+    private readonly program;
+    private vertices;
+    private texcoords;
+    private readonly texture;
+    private readonly u_texture;
+    private readonly v_texture;
+    constructor(gl: WebGLAnyRenderingContext, field: RawVectorField<ArrayType>, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_color: [number, number, number], billboard_size_mult: number);
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
 export { BillboardCollection };

package/lib/BillboardCollection.js

@@ -1,6 +1,7 @@
-import { isWebGL2Ctx } from "./AutumnTypes";
+import { getGLFormatTypeAlignment } from "./PlotComponent";
 import { WGLProgram, WGLTexture } from "autumn-wgl";
 const billboard_vertex_shader_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec3 a_pos;    
 attribute vec2 a_tex_coord;
@@ -47,7 +48,10 @@ mat4 rotationXMatrix(float angle) {
 }
 
 void main() {
-    vec4 pivot_pos = u_matrix * vec4(a_pos.xy, 0.0, 1.0);
+    float globe_width = 1.;
+    vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
+
+    vec4 pivot_pos = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0);
     highp float zoom_corner = a_pos.z;
     lowp float min_zoom = floor(zoom_corner / 4.0);
     lowp float corner = mod(zoom_corner, 4.0);
@@ -56,7 +60,7 @@ void main() {
     highp float v = texture2D(u_v_sampler, a_tex_coord).r;
 
     lowp float bb_aspect = u_bb_width / u_bb_height;
-    lowp float ang = atan(v, u) - 3.141592654 / 2.0;
+    lowp float ang = (abs(u) < 1e-6 && abs(v) < 1e-6) ? 0. : atan(v, u) - 3.141592654 / 2.0;
     highp float mag = length(vec2(u, v));
     mag = floor(mag / u_bb_mag_bin_size + 0.5) * u_bb_mag_bin_size;
 
@@ -119,14 +123,14 @@ class BillboardCollection {
             this.vertices = vertices;
             this.texcoords = texcoords;
         })();
-        const format = isWebGL2Ctx(gl) ? gl.R32F : gl.LUMINANCE;
-        const u_image = { 'format': format, 'type': gl.FLOAT,
-            'width': u_thin.grid.ni, 'height': u_thin.grid.nj, 'image': u_thin.data,
-            'mag_filter': gl.NEAREST,
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, u_thin.isFloat16());
+        const u_image = { 'format': format, 'type': type,
+            'width': u_thin.grid.ni, 'height': u_thin.grid.nj, 'image': u_thin.getTextureData(),
+            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
         };
-        const v_image = { 'format': format, 'type': gl.FLOAT,
-            'width': v_thin.grid.ni, 'height': v_thin.grid.nj, 'image': v_thin.data,
-            'mag_filter': gl.NEAREST,
+        const v_image = { 'format': format, 'type': type,
+            'width': v_thin.grid.ni, 'height': v_thin.grid.nj, 'image': v_thin.getTextureData(),
+            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
         };
         this.texture = new WGLTexture(gl, billboard_image);
         this.u_texture = new WGLTexture(gl, u_image);
@@ -135,15 +139,23 @@ class BillboardCollection {
     render(gl, matrix, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
         if (this.vertices === null || this.texcoords === null)
             return;
+        if (matrix instanceof Float32Array)
+            matrix = [...matrix];
         const bb_size = this.spec.BB_HEIGHT * (map_height / map_width) * this.size_multiplier;
         const bb_width = this.spec.BB_WIDTH / this.spec.BB_TEX_WIDTH;
         const bb_height = this.spec.BB_HEIGHT / this.spec.BB_TEX_HEIGHT;
         this.program.use({ 'a_pos': this.vertices, 'a_tex_coord': this.texcoords }, { 'u_bb_size': bb_size, 'u_bb_width': bb_width, 'u_bb_height': bb_height,
-            'u_bb_mag_bin_size': this.spec.BB_MAG_BIN_SIZE, 'u_bb_mag_wrap': this.spec.BB_MAG_WRAP,
+            'u_bb_mag_bin_size': this.spec.BB_MAG_BIN_SIZE, 'u_bb_mag_wrap': this.spec.BB_MAG_WRAP, 'u_offset': 0,
             'u_bb_color': this.color, 'u_matrix': matrix, 'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_map_bearing': map_bearing }, { 'u_sampler': this.texture, 'u_u_sampler': this.u_texture, 'u_v_sampler': this.v_texture });
         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();
     }
 }
 export { BillboardCollection };

package/lib/Contour.d.ts

@@ -1,8 +1,7 @@
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
 import { MapType } from './Map';
 import { PlotComponent } from './PlotComponent';
 import { RawScalarField } from './RawField';
-import { WGLBuffer, WGLProgram, WGLTexture } from 'autumn-wgl';
 interface ContourOptions {
     /**
      * The color of the contours as a hex color string
@@ -26,14 +25,6 @@ interface ContourOptions {
      */
     thinner?: (zoom: number) => number;
 }
-interface ContourGLElems {
-    map: MapType;
-    program: WGLProgram;
-    vertices: WGLBuffer;
-    grid_cell_size: WGLBuffer;
-    fill_texture: WGLTexture;
-    texcoords: WGLBuffer;
-}
 /**
  * A field of contoured data. The contours can optionally be thinned based on map zoom level.
  * @example
@@ -42,20 +33,19 @@ interface ContourGLElems {
  * const contours = new Contour(height_field, {color: '#000000', interval: 30,
  *                                                  thinner: zoom => zoom < 5 ? 2 : 1});
  */
-declare class Contour extends PlotComponent {
-    readonly field: RawScalarField;
+declare class Contour<ArrayType extends TypedArray> extends PlotComponent {
+    private readonly field;
     readonly color: [number, number, number];
     readonly interval: number;
     readonly levels: number[];
     readonly thinner: (zoom: number) => number;
-    /** @private */
-    gl_elems: ContourGLElems | null;
+    private gl_elems;
     /**
      * Create a contoured field
      * @param field - The field to contour
      * @param opts  - Options for creating the contours
      */
-    constructor(field: RawScalarField, opts: ContourOptions);
+    constructor(field: RawScalarField<ArrayType>, opts: ContourOptions);
     /**
      * @internal
      * Add the contours to a map
@@ -65,7 +55,7 @@ declare class Contour extends PlotComponent {
      * @internal
      * Render the contours
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 export default Contour;
 export type { ContourOptions };

package/lib/Contour.js

@@ -1,8 +1,8 @@
-import { isWebGL2Ctx } from './AutumnTypes';
-import { PlotComponent } from './PlotComponent';
+import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
 import { hex2rgba } from './utils';
 import { WGLProgram, WGLTexture } from 'autumn-wgl';
 const contour_vertex_shader_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec2 a_pos;
 attribute float a_grid_cell_size;
@@ -13,7 +13,10 @@ varying highp float v_grid_cell_size;
 varying highp float v_map_scale_fac;
 
 void main() {
-    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
+    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);
     v_tex_coord = a_tex_coord;
     v_grid_cell_size = a_grid_cell_size;
 
@@ -40,16 +43,20 @@ uniform lowp float u_zoom_fac;
 void main() {
     highp float field_val = texture2D(u_fill_sampler, v_tex_coord).r;
 
-    
+    lowp vec2 grid_point = fract(v_tex_coord / u_step_size + vec2(0.5, 0.5));
+    highp vec2 grid_sw = v_tex_coord - grid_point * u_step_size;
+
     lowp vec2 ihat = vec2(u_step_size.x, 0.0);
     lowp vec2 jhat = vec2(0.0, u_step_size.y);
-    highp float fv_xp1 = texture2D(u_fill_sampler, v_tex_coord + ihat).r;
-    highp float fv_xm1 = texture2D(u_fill_sampler, v_tex_coord - ihat).r;
-    highp float fv_yp1 = texture2D(u_fill_sampler, v_tex_coord + jhat).r;
-    highp float fv_ym1 = texture2D(u_fill_sampler, v_tex_coord - jhat).r;
-    highp float fwidth_field = sqrt(((fv_xp1 - fv_xm1) * (fv_xp1 - fv_xm1) + (fv_yp1 - fv_ym1) * (fv_yp1 - fv_ym1)) / (5e5 * v_grid_cell_size));
+    highp float fv_sw = texture2D(u_fill_sampler, grid_sw).r;
+    highp float fv_se = texture2D(u_fill_sampler, grid_sw + ihat).r;
+    highp float fv_nw = texture2D(u_fill_sampler, grid_sw + jhat).r;
+    highp float fv_ne = texture2D(u_fill_sampler, grid_sw + ihat + jhat).r;
+
+    highp float dfdx = mix(fv_se, fv_ne, grid_point.y) - mix(fv_sw, fv_nw, grid_point.y);
+    highp float dfdy = mix(fv_nw, fv_ne, grid_point.x) - mix(fv_sw, fv_se, grid_point.x);
+    highp float fwidth_field = sqrt((dfdx * dfdx + dfdy * dfdy) / (5e5 * v_grid_cell_size));
 
-    
     lowp float plot_val;
 
     if (u_num_contours > 0) {
@@ -99,7 +106,7 @@ void main() {
 }`
 /**
  * A field of contoured data. The contours can optionally be thinned based on map zoom level.
- * &example
+ * @example
  * // Create a contoured height field, with black contours every 30 m (assuming the height field is in
  * // meters) and only using every other contour when the map zoom level is less than 5.
  * const contours = new Contour(height_field, {color: '#000000', interval: 30,
@@ -108,8 +115,8 @@ void main() {
 class Contour extends PlotComponent {
     /**
      * Create a contoured field
-     * &param field - The field to contour
-     * &param opts  - Options for creating the contours
+     * @param field - The field to contour
+     * @param opts  - Options for creating the contours
      */
     constructor(field, opts) {
         super();
@@ -122,23 +129,21 @@ class Contour extends PlotComponent {
         this.gl_elems = null;
     }
     /**
-     * &internal
+     * @internal
      * Add the contours to a map
      */
     async onAdd(map, gl) {
         // Basic procedure for these contours from https://www.shadertoy.com/view/lltBWM
-        gl.getExtension('OES_texture_float');
-        gl.getExtension('OES_texture_float_linear');
-        gl.getExtension('OES_standard_derivatives');
+        gl.getExtension("OES_standard_derivatives");
         const program = new WGLProgram(gl, contour_vertex_shader_src, contour_fragment_shader_src);
         const { vertices: verts_buf, texcoords: tex_coords_buf, cellsize: cellsize_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
         const texcoords = tex_coords_buf;
         const grid_cell_size = cellsize_buf;
-        const format = isWebGL2Ctx(gl) ? gl.R32F : gl.LUMINANCE;
-        const fill_image = { 'format': format, 'type': gl.FLOAT,
-            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.data,
-            'mag_filter': gl.LINEAR,
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, this.field.isFloat16());
+        const fill_image = { 'format': format, 'type': type,
+            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.getTextureData(),
+            'mag_filter': gl.LINEAR, 'row_alignment': row_alignment,
         };
         const fill_texture = new WGLTexture(gl, fill_image);
         this.gl_elems = {
@@ -146,20 +151,22 @@ class Contour extends PlotComponent {
         };
     }
     /**
-     * &internal
+     * @internal
      * Render the contours
      */
     render(gl, matrix) {
         if (this.gl_elems === null)
             return;
         const gl_elems = this.gl_elems;
+        if (matrix instanceof Float32Array)
+            matrix = [...matrix];
         const zoom = gl_elems.map.getZoom();
         const intv = this.thinner(zoom) * this.interval;
-        const cutoff = 0.5 / intv;
-        const step_size = [0.25 / this.field.grid.ni, 0.25 / this.field.grid.nj];
+        const cutoff = 0.3 / intv;
+        const step_size = [1 / this.field.grid.ni, 1 / this.field.grid.nj];
         const zoom_fac = Math.pow(2, zoom);
         let uniforms = { 'u_contour_interval': intv, 'u_line_cutoff': cutoff, 'u_color': this.color, 'u_step_size': step_size, 'u_zoom_fac': zoom_fac,
-            'u_matrix': matrix, 'u_num_contours': 0, 'u_contour_levels': [0] };
+            'u_matrix': matrix, 'u_num_contours': 0, 'u_contour_levels': [0], 'u_offset': 0 };
         if (this.levels.length > 0) {
             uniforms = { ...uniforms, 'u_num_contours': this.levels.length, 'u_contour_levels': this.levels };
         }
@@ -167,6 +174,12 @@ class Contour extends PlotComponent {
         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();
     }
 }
 export default Contour;

package/lib/Fill.d.ts

@@ -1,9 +1,8 @@
 import { PlotComponent } from './PlotComponent';
 import { ColorMap } from './Colormap';
-import { WGLBuffer, WGLProgram, WGLTexture } from 'autumn-wgl';
 import { RawScalarField } from './RawField';
 import { MapType } from './Map';
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
 interface ContourFillOptions {
     /** The color map to use when creating the fills */
     cmap: ColorMap;
@@ -22,29 +21,18 @@ interface RasterOptions {
      */
     opacity?: number;
 }
-interface PlotComponentFillGLElems {
-    program: WGLProgram;
-    vertices: WGLBuffer;
-    fill_texture: WGLTexture;
-    texcoords: WGLBuffer;
-    cmap_texture: WGLTexture;
-    cmap_nonlin_texture: WGLTexture;
-}
-declare class PlotComponentFill extends PlotComponent {
-    readonly field: RawScalarField;
+declare class PlotComponentFill<ArrayType extends TypedArray> extends PlotComponent {
+    private readonly field;
     readonly cmap: ColorMap;
     readonly opacity: number;
-    /** @private */
-    readonly cmap_image: HTMLCanvasElement;
-    /** @private */
-    readonly index_map: Float32Array;
-    /** @private */
-    gl_elems: PlotComponentFillGLElems | null;
-    image_mag_filter: number | null;
-    cmap_mag_filter: number | null;
-    constructor(field: RawScalarField, opts: ContourFillOptions);
+    private readonly cmap_image;
+    private readonly index_map;
+    private gl_elems;
+    protected image_mag_filter: number | null;
+    protected cmap_mag_filter: number | null;
+    constructor(field: RawScalarField<ArrayType>, opts: ContourFillOptions);
     onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 /**
  * A raster (i.e. pixel) plot
@@ -52,13 +40,13 @@ declare class PlotComponentFill extends PlotComponent {
  * // Create a raster plot with the provided color map
  * const raster = new Raster(wind_speed_field, {cmap: color_map});
  */
-declare class Raster extends PlotComponentFill {
+declare class Raster<ArrayType extends TypedArray> extends PlotComponentFill<ArrayType> {
     /**
      * Create a raster plot
      * @param field - The field to create the raster plot from
      * @param opts  - Options for creating the raster plot
      */
-    constructor(field: RawScalarField, opts: RasterOptions);
+    constructor(field: RawScalarField<ArrayType>, opts: RasterOptions);
     /**
      * @internal
      * Add the raster plot to a map
@@ -68,7 +56,7 @@ declare class Raster extends PlotComponentFill {
      * @internal
      * Render the raster plot
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 /**
  * A filled contoured field
@@ -76,13 +64,13 @@ declare class Raster extends PlotComponentFill {
  * // Create a field of filled contours with the provided color map
  * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
  */
-declare class ContourFill extends PlotComponentFill {
+declare class ContourFill<ArrayType extends TypedArray> extends PlotComponentFill<ArrayType> {
     /**
      * Create a filled contoured field
      * @param field - The field to create filled contours from
      * @param opts  - Options for creating the filled contours
      */
-    constructor(field: RawScalarField, opts: ContourFillOptions);
+    constructor(field: RawScalarField<ArrayType>, opts: ContourFillOptions);
     /**
      * @internal
      * Add the filled contours to a map
@@ -92,7 +80,7 @@ declare class ContourFill extends PlotComponentFill {
      * @internal
      * Render the filled contours
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 export { ContourFill, Raster };
 export type { ContourFillOptions, RasterOptions };