autumnplot-gl 4.0.0 → 4.1.0

package/lib/Fill.js

@@ -1,9 +1,8 @@
-import { PlotComponent } from './PlotComponent';
+import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
 import { ColorMap, ColorMapGPUInterface } from './Colormap';
 import { WGLTexture } from 'autumn-wgl';
-import { RawScalarField } from './RawField';
 import { getRendererData } from './AutumnTypes';
-import { normalizeOptions } from './utils';
+import { applySamplerCodeScalar, normalizeOptions } from './utils';
 import { ShaderProgramManager } from './ShaderManager';
 const contourfill_vertex_shader_src = `#version 300 es
 
@@ -25,8 +24,6 @@ const contourfill_fragment_shader_src = `#version 300 es
 
 in highp vec2 v_tex_coord;
 
-uniform sampler2D u_fill_sampler;
-
 #ifdef MASK
 uniform sampler2D u_mask_sampler;
 #endif
@@ -39,7 +36,7 @@ uniform int u_mask_val;
 out highp vec4 fragColor;
 
 void main() {
-    highp float fill_val = texture(u_fill_sampler, v_tex_coord).r;
+    highp float fill_val = get_field_value(v_tex_coord);
 
     int draw_mask = 1;
 
@@ -89,20 +86,17 @@ class PlotComponentFill extends PlotComponent {
             return;
         const gl = this.gl_elems.gl;
         const map = this.gl_elems.map;
-        const fill_image = this.field.getWGLTextureSpec(gl, this.image_mag_filter);
-        if (this.fill_texture === null) {
-            this.fill_texture = new WGLTexture(gl, fill_image);
-        }
-        else {
-            this.fill_texture.setImageData(fill_image);
-        }
+        this.fill_texture = this.field.updateTexImageData(gl, this.image_mag_filter, this.fill_texture);
         if (mask !== undefined) {
             if (this.opts.cmap_mask === null) {
                 console.warn("A mask was passed to updateField on a Fill component that didn't have a mask. The updated mask will be ignored.");
                 return;
             }
-            const mask_field = new RawScalarField(this.field.grid, mask);
-            const mask_image = mask_field.getWGLTextureSpec(gl, gl.NEAREST);
+            const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, 'uint8');
+            const mask_image = { 'format': format, 'type': type,
+                'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': mask,
+                'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
+            };
             if (this.mask_texture === null) {
                 this.mask_texture = new WGLTexture(gl, mask_image);
             }
@@ -114,7 +108,7 @@ class PlotComponentFill extends PlotComponent {
     }
     async onAdd(map, gl) {
         // Basic procedure for the filled contours inspired by https://blog.mbq.me/webgl-weather-globe/
-        const { vertices: vertices, texcoords: texcoords } = await this.field.grid.getWGLBuffers(gl);
+        const { vertices: vertices, texcoords: texcoords } = await this.field.grid.getDomainBuffers(gl);
         this.cmap_gpu.forEach(cmg => {
             if (this.image_mag_filter === null || this.cmap_mag_filter === null) {
                 throw `Implement magnification filters in a subclass`;
@@ -125,7 +119,14 @@ class PlotComponentFill extends PlotComponent {
         if (this.opts.cmap_mask !== null) {
             shader_defines.push('MASK');
         }
-        const shader_manger = new ShaderProgramManager(contourfill_vertex_shader_src, ColorMapGPUInterface.applyShader(contourfill_fragment_shader_src), shader_defines);
+        if (this.image_mag_filter === null || this.cmap_mag_filter === null) {
+            throw `Implement magnification filters in a subclass`;
+        }
+        const sampler_keys = this.field.getSamplerIds();
+        const sampler_expression = this.field.getExpression();
+        const data_types = this.field.dtypes;
+        const frag_shader_src = applySamplerCodeScalar(ColorMapGPUInterface.applyShader(contourfill_fragment_shader_src), sampler_keys, sampler_expression, data_types);
+        const shader_manger = new ShaderProgramManager(contourfill_vertex_shader_src, frag_shader_src, shader_defines);
         this.gl_elems = {
             gl: gl, shader_manager: shader_manger, map: map, vertices: vertices, texcoords: texcoords,
         };
@@ -137,7 +138,8 @@ class PlotComponentFill extends PlotComponent {
         const gl_elems = this.gl_elems;
         const render_data = getRendererData(arg);
         const program = this.gl_elems.shader_manager.getShaderProgram(gl, render_data.shaderData);
-        program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_opacity': this.opts.opacity, ...this.gl_elems.shader_manager.getShaderUniforms(render_data) }, { 'u_fill_sampler': this.fill_texture });
+        const samplers = Object.fromEntries([...this.fill_texture.entries()]);
+        program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_opacity': this.opts.opacity, ...this.gl_elems.shader_manager.getShaderUniforms(render_data) }, samplers);
         this.cmap_gpu.forEach((cmg, icmg) => {
             program.setUniforms({ 'u_offset': 0 });
             if (this.opts.cmap_mask !== null && this.mask_texture !== null) {
@@ -161,6 +163,15 @@ class PlotComponentFill extends PlotComponent {
 }
 /**
  * A raster (i.e. pixel) plot
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :x:                `UnstructuredGrid`
+ * - :white_check_mark: `RadarSweepGrid`
+ * - :white_check_mark: `Geostationary`
+ *
  * @example
  * // Create a raster plot with the provided color map
  * const raster = new Raster(wind_speed_field, {cmap: color_map});
@@ -200,6 +211,15 @@ class Raster extends PlotComponentFill {
 }
 /**
  * A filled contoured field
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :x:                `UnstructuredGrid`
+ * - :white_check_mark: `RadarSweepGrid`
+ * - :white_check_mark: `Geostationary`
+ *
  * @example
  * // Create a field of filled contours with the provided color map
  * const fill = new ContourFill(wind_speed_field, {cmap: color_map});

package/lib/Hodographs.d.ts

@@ -3,7 +3,7 @@ import { MapLikeType } from "./Map";
 import { RawProfileField } from "./RawField";
 import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
-import { Grid } from "./Grid";
+import { AutoZoomGrid } from "./grids/AutoZoom";
 /** Options for {@link Hodographs} components */
 interface HodographOptions {
     /**
@@ -37,8 +37,18 @@ interface HodographOptions {
      */
     max_wind_speed_ring?: number;
 }
-/** A class representing a field of hodograph plots */
-declare class Hodographs<GridType extends Grid, MapType extends MapLikeType> extends PlotComponent<MapType> {
+/**
+ * A class representing a field of hodograph plots
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :white_check_mark: `UnstructuredGrid`
+ * - :x:                `RadarSweepGrid`
+ * - :x:                `Geostationary`
+ */
+declare class Hodographs<GridType extends AutoZoomGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private profile_field;
     readonly opts: Required<HodographOptions>;
     private gl_elems;

package/lib/Hodographs.js

@@ -56,7 +56,17 @@ const hodograph_opt_defaults = {
     height_cmap: HODO_CMAP,
     max_wind_speed_ring: 80
 };
-/** A class representing a field of hodograph plots */
+/**
+ * A class representing a field of hodograph plots
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :white_check_mark: `UnstructuredGrid`
+ * - :x:                `RadarSweepGrid`
+ * - :x:                `Geostationary`
+ */
 class Hodographs extends PlotComponent {
     /**
      * Create a field of hodographs

package/lib/Map.d.ts

@@ -29,14 +29,13 @@ interface RotateSphereParams {
 declare function rotateSphere(params: RotateSphereParams): (a: number, b: number, opts?: {
     inverse: boolean;
 }) => [number, number];
-interface VerticalPerspectiveParams {
-    lat_0: number;
+interface GeostationaryProjectionParams {
     lon_0: number;
     alt: number;
     a: number;
     b: number;
 }
-declare function verticalPerspective(params: VerticalPerspectiveParams): (a: number, b: number, opts?: {
+declare function geostationaryProjection(params: GeostationaryProjectionParams): (a: number, b: number, opts?: {
     inverse: boolean;
 }) => [number, number];
 /**
@@ -62,5 +61,5 @@ declare class LngLat {
     };
     static fromMercatorCoord(x: number, y: number): LngLat;
 }
-export { LngLat, lambertConformalConic, rotateSphere, verticalPerspective };
+export { LngLat, lambertConformalConic, rotateSphere, geostationaryProjection };
 export type { MapLikeType };

package/lib/Map.js

@@ -121,60 +121,51 @@ function rotateSphere(params) {
         return opts.inverse ? compute_rotation_inverse(a, b) : compute_rotation(a, b);
     };
 }
-function verticalPerspective(params) {
-    // WGS 84 spheroid
-    const semimajor = params.a;
-    const semiminor = params.b;
-    const eccen = Math.sqrt(1 - (semiminor * semiminor) / (semimajor * semimajor));
+// Changes to the geostationaryProjection to make sure the coastlines and satellite line up
+function geostationaryProjection(params) {
     const radians = Math.PI / 180;
-    let { lat_0, lon_0, alt } = params;
-    const alt_0 = 0;
-    const alt_00 = 0;
-    const eccen2 = eccen * eccen;
-    lat_0 *= radians;
-    lon_0 *= radians;
-    const sin_lat_0 = Math.sin(lat_0);
-    const cos_lat_0 = Math.cos(lat_0);
-    const N1 = semimajor / Math.sqrt(1 - (eccen * sin_lat_0) ** 2);
-    let lat_g = lat_0, P = 0;
-    for (let i = 0; i < 2; i++) {
-        P = Math.cos(lat_0) / Math.cos(lat_g) * (alt + N1 + alt_00) / semimajor;
-        lat_g = lat_0 - Math.asin(N1 * eccen * eccen * sin_lat_0 * cos_lat_0 / (P * semimajor));
-    }
-    const compute_perspective = (lon, lat) => {
+    const { lon_0, alt, a, b } = params;
+    const lambda_0 = lon_0 * radians;
+    const a2 = a * a;
+    const b2 = b * b;
+    const forward = (lon, lat) => {
         lon *= radians;
         lat *= radians;
-        const sin_lat = Math.sin(lat);
         const cos_lat = Math.cos(lat);
-        const N = semimajor / Math.sqrt(1 - (eccen * sin_lat) ** 2);
-        const C = (N + alt_0) / semimajor * cos_lat;
-        const S = ((N * (1 - eccen * eccen) + alt_0) / semimajor) * sin_lat;
-        const K = alt / (P * Math.cos(lat_0 - lat_g) - S * sin_lat_0 - C * cos_lat_0 * Math.cos(lon - lon_0));
-        const x = K * C * Math.sin(lon - lon_0);
-        const y = K * (P * Math.sin(lat_0 - lat_g) + S * cos_lat_0 - C * sin_lat_0 * Math.cos(lon - lon_0));
+        const sin_lat = Math.sin(lat);
+        const cos_lon = Math.cos(lon - lambda_0);
+        const sin_lon = Math.sin(lon - lambda_0);
+        const rc = b / Math.sqrt(1 - (1 - (b2 / a2)) * cos_lat * cos_lat);
+        const sx = rc * cos_lat * cos_lon;
+        const sy = rc * cos_lat * sin_lon;
+        const sz = rc * sin_lat;
+        const x = Math.atan(-sy / (alt - sx));
+        const y = Math.atan(sz / Math.sqrt((alt - sx) * (alt - sx) + sy * sy));
         return [x, y];
     };
-    const B = P * Math.cos(lat_0 - lat_g);
-    const D = P * Math.sin(lat_0 - lat_g);
-    const L = 1 - eccen2 * cos_lat_0 * cos_lat_0;
-    const G = 1 - eccen2 * sin_lat_0 * sin_lat_0;
-    const J = 2 * eccen2 * sin_lat_0 * cos_lat_0;
-    const E = 1; // If alt_0 = 0, set E = 1
-    const t = P * P * (1 - (eccen * Math.cos(lat_g)) ** 2) - E * (1 - eccen2);
-    const compute_perspective_inverse = (x, y) => {
-        const u = -2 * B * L * alt - 2 * D * G * y + B * J * y + D * J * alt;
-        const v = L * alt * alt + G * y * y - alt * J * y + (1 - eccen2) * x * x;
-        const K_prime = (-u + Math.sqrt(u * u - 4 * t * v)) / (2 * t);
-        const X = semimajor * ((B - alt / K_prime) * cos_lat_0 - (y / K_prime - D) * sin_lat_0);
-        const Y = semimajor * x / K_prime;
-        const S = (y / K_prime - D) * cos_lat_0 + (B - alt / K_prime) * sin_lat_0;
-        const lon = lon_0 + Math.atan2(Y, X);
-        const lat = Math.atan2(S, Math.sqrt((1 - eccen2) * (1 - eccen2 - S * S)));
+    const inverse = (x, y) => {
+        // x = E-W scan angle (radians), y = N-S scan angle (radians)
+        // GOES-R PUG-L1B-vol3 Section 4.2 / Table 4.2.8-1
+        const sin_x = Math.sin(x);
+        const cos_x = Math.cos(x);
+        const sin_y = Math.sin(y);
+        const cos_y = Math.cos(y);
+        const a_var = sin_x * sin_x + cos_x * cos_x * (cos_y * cos_y + (a2 / b2) * sin_y * sin_y);
+        const b_var = -2 * alt * cos_x * cos_y;
+        const c_var = alt * alt - a2;
+        const disc = b_var * b_var - 4 * a_var * c_var;
+        if (disc < 0)
+            return [NaN, NaN]; // off-Earth scan angle
+        const rs = (-b_var - Math.sqrt(disc)) / (2 * a_var);
+        const sx = rs * cos_x * cos_y;
+        const sy = -rs * sin_x; // no cos_y factor
+        const sz = rs * cos_x * sin_y; // needs cos_x factor
+        const lon = lambda_0 - Math.atan(sy / (alt - sx));
+        const lat = Math.atan((a2 / b2) * (sz / Math.sqrt((alt - sx) * (alt - sx) + sy * sy)));
         return [lon / radians, lat / radians];
     };
     return (a, b, opts) => {
-        opts = opts === undefined ? { inverse: false } : opts;
-        return opts.inverse ? compute_perspective_inverse(a, b) : compute_perspective(a, b);
+        return opts?.inverse ? inverse(a, b) : forward(a, b);
     };
 }
 function mercatorXfromLng(lng) {
@@ -207,19 +198,26 @@ function latFromMercatorY(y) {
 class LngLat {
     constructor(lng, lat) {
         if (isNaN(lng) || isNaN(lat)) {
-            throw new Error(`Invalid LngLat object: (${lng}, ${lat})`);
+            this.lng = NaN;
+            this.lat = NaN;
         }
-        this.lng = +lng;
-        this.lat = +lat;
-        if (this.lat > 90 || this.lat < -90) {
-            throw new Error('Invalid LngLat latitude value: must be between -90 and 90');
+        else {
+            this.lng = +lng;
+            this.lat = +lat;
+            if (this.lat > 90 || this.lat < -90) {
+                throw new Error('Invalid LngLat latitude value: must be between -90 and 90');
+            }
         }
     }
     toMercatorCoord() {
+        if (isNaN(this.lng) || isNaN(this.lng))
+            return { x: NaN, y: NaN };
         return { x: mercatorXfromLng(this.lng), y: mercatorYfromLat(this.lat) };
     }
     static fromMercatorCoord(x, y) {
+        if (isNaN(x) || isNaN(y))
+            return new LngLat(NaN, NaN);
         return new LngLat(lngFromMercatorX(x), latFromMercatorY(y));
     }
 }
-export { LngLat, lambertConformalConic, rotateSphere, verticalPerspective };
+export { LngLat, lambertConformalConic, rotateSphere, geostationaryProjection };

package/lib/Paintball.d.ts

@@ -1,8 +1,8 @@
 import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
-import { StructuredGrid } from "./Grid";
+import { DomainBufferGrid } from "./grids/DomainBuffer";
 import { MapLikeType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
-import { RawScalarField } from "./RawField";
+import { ExpressionScalarField } from "./RawField";
 /** Options for {@link Paintball} components */
 interface PaintballOptions {
     /**
@@ -21,8 +21,16 @@ interface PaintballOptions {
  * the data for the paintball plot is given as a single field with the objects from each member encoded as "bits" in the field. Because the field is made up
  * 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.)
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :x:                `UnstructuredGrid`
+ * - :white_check_mark: `RadarSweepGrid`
+ * - :white_check_mark: `Geostationary`
  */
-declare class Paintball<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
+declare class Paintball<ArrayType extends TypedArray, GridType extends DomainBufferGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private field;
     readonly opts: Required<PaintballOptions>;
     private readonly color_components;
@@ -35,12 +43,12 @@ declare class Paintball<ArrayType extends TypedArray, GridType extends Structure
      *               `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, GridType>, opts?: PaintballOptions);
+    constructor(field: ExpressionScalarField<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, GridType>): Promise<void>;
+    updateField(field: ExpressionScalarField<ArrayType, GridType>): Promise<void>;
     /**
      * @internal
      * Add the paintball plot to a map.

package/lib/Paintball.js

@@ -1,10 +1,20 @@
 import { getRendererData } from "./AutumnTypes";
 import { Color } from "./Color";
-import { PlotComponent } from "./PlotComponent";
+import { PlotComponent, getGLFormatTypeAlignment } from "./PlotComponent";
 import { ShaderProgramManager } from "./ShaderManager";
-import { normalizeOptions } from "./utils";
-import { WGLTexture } from "autumn-wgl";
-const paintball_vertex_shader_src = `#version 300 es
+import { applySamplerCodeScalar, normalizeOptions } from "./utils";
+import { WGLBuffer, WGLFramebuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+const paintball_step1_vertex_shader_src = `#version 300 es
+
+in vec2 a_pos;
+
+out highp vec2 v_tex_coord;
+
+void main() {
+    gl_Position = vec4(a_pos.xy, 0., 1.);
+    v_tex_coord = 0.5 * a_pos.xy + vec2(0.5, 0.5);
+}`
+const paintball_step2_vertex_shader_src = `#version 300 es
 
 uniform int u_offset;
 
@@ -20,15 +30,34 @@ void main() {
     gl_Position = projectTile(a_pos.xy + globe_offset);
     v_tex_coord = a_tex_coord;
 }`
-const paintball_fragment_shader_src = `#version 300 es
+const paintball_step1_fragment_shader_src = `#version 300 es
+
+in highp vec2 v_tex_coord;
+
+uniform int u_imem;
+
+out highp vec4 fragColor;
+
+void main() {
+    uint fill_val = uint(get_field_value(v_tex_coord));
+    
+    if (fill_val < uint(1)) {
+        discard;
+    }
 
-#define MAX_N_COLORS 24
+    lowp vec4 off_color = vec4(0., 0., 0., 1.);
+    lowp vec4 on_color = vec4(1., 1., 1., 1.);
+
+    uint mask = uint(1) << u_imem;
+    lowp float mem_active = float((fill_val & mask) > uint(0));
+    fragColor = mix(off_color, on_color, mem_active);
+}`
+const paintball_step2_fragment_shader_src = `#version 300 es
 
 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 lowp vec4 u_color;
 uniform highp float u_opacity;
 
 out highp vec4 fragColor;
@@ -36,19 +65,11 @@ out highp vec4 fragColor;
 void main() {
     highp float fill_val = texture(u_fill_sampler, v_tex_coord).r;
     
-    if (fill_val < 0.5) {
+    if (fill_val < 0.4) {
         discard;
     }
 
-    lowp vec4 color = vec4(0., 0., 0., 0.);
-
-    for (int nclr = 0; nclr < MAX_N_COLORS ; nclr++) {
-        if (nclr >= u_num_colors || fill_val < 0.99) { break; }
-
-        lowp float mem_active = mod(fill_val, 2.);
-        color = mix(color, u_colors[nclr], mem_active);
-        fill_val = floor(fill_val / 2.);
-    }
+    lowp vec4 color = u_color;
 
     color.a = color.a * u_opacity;
     fragColor = color;
@@ -63,6 +84,14 @@ const paintball_opt_defaults = {
  * the data for the paintball plot is given as a single field with the objects from each member encoded as "bits" in the field. Because the field is made up
  * 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.)
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :x:                `UnstructuredGrid`
+ * - :white_check_mark: `RadarSweepGrid`
+ * - :white_check_mark: `Geostationary`
  */
 class Paintball extends PlotComponent {
     /**
@@ -76,7 +105,7 @@ class Paintball extends PlotComponent {
         super();
         this.field = field;
         this.opts = normalizeOptions(opts, paintball_opt_defaults);
-        this.color_components = this.opts.colors.map(color => Color.fromHex(color).toRGBATuple()).flat();
+        this.color_components = this.opts.colors.map(color => Color.fromHex(color).toRGBATuple());
         this.gl_elems = null;
         this.fill_texture = null;
     }
@@ -90,13 +119,7 @@ class Paintball extends PlotComponent {
             return;
         const gl = this.gl_elems.gl;
         gl.pixelStorei(gl.UNPACK_ALIGNMENT, 2);
-        const fill_image = this.field.getWGLTextureSpec(gl, gl.NEAREST);
-        if (this.fill_texture === null) {
-            this.fill_texture = new WGLTexture(gl, fill_image);
-        }
-        else {
-            this.fill_texture.setImageData(fill_image);
-        }
+        this.fill_texture = this.field.updateTexImageData(gl, gl.NEAREST, this.fill_texture);
     }
     /**
      * @internal
@@ -104,12 +127,23 @@ class Paintball extends PlotComponent {
      */
     async onAdd(map, gl) {
         gl.getExtension('OES_texture_float');
-        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, []);
+        const vertices_step1 = new WGLBuffer(gl, new Float32Array([-1., -1., 1., -1., -1., 1., 1., 1.]), 2, gl.TRIANGLE_STRIP);
+        const { vertices: vertices_step2, texcoords: texcoords_step2 } = await this.field.grid.getDomainBuffers(gl);
+        const sampler_keys = this.field.getSamplerIds();
+        const sampler_expression = this.field.getExpression();
+        const dtypes = this.field.dtypes;
+        const step1_frag_shader_src = applySamplerCodeScalar(paintball_step1_fragment_shader_src, sampler_keys, sampler_expression, dtypes);
+        const shader_program_step1 = new WGLProgram(gl, paintball_step1_vertex_shader_src, step1_frag_shader_src);
+        const shader_manager_step2 = new ShaderProgramManager(paintball_step2_vertex_shader_src, paintball_step2_fragment_shader_src, []);
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, 'float16');
+        const fb_texture = new WGLTexture(gl, { format: format, type: type,
+            width: this.field.grid.ni, height: this.field.grid.nj, image: null,
+            mag_filter: gl.LINEAR, row_alignment: row_alignment });
+        const fb = new WGLFramebuffer(gl, fb_texture);
         this.gl_elems = {
-            gl: gl, shader_manager: shader_manager, vertices: vertices, texcoords: texcoords,
+            gl: gl, map: map, shader_program_1: shader_program_step1, shader_manager_2: shader_manager_step2,
+            vertices_step1: vertices_step1, vertices_step2: vertices_step2, texcoords_step2: texcoords_step2,
+            framebuffer: fb
         };
         this.updateField(this.field);
     }
@@ -121,22 +155,38 @@ class Paintball extends PlotComponent {
         if (this.gl_elems === null || this.fill_texture === null)
             return;
         const gl_elems = this.gl_elems;
+        const fill_texture = this.fill_texture;
+        const map = gl_elems.map;
+        const viewport_width = map.getCanvas().width;
+        const viewport_height = map.getCanvas().height;
         const render_data = getRendererData(arg);
-        const program = this.gl_elems.shader_manager.getShaderProgram(gl, render_data.shaderData);
-        // Render to framebuffer
-        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);
-        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();
-        }
+        const program_step1 = this.gl_elems.shader_program_1;
+        const program_step2 = this.gl_elems.shader_manager_2.getShaderProgram(gl, render_data.shaderData);
+        const samplers = Object.fromEntries([...this.fill_texture.entries()]);
+        this.color_components.forEach((color, icolor) => {
+            // Render to framebuffer to pull out an individual member from the packed field
+            program_step1.use({ 'a_pos': gl_elems.vertices_step1 }, { 'u_imem': icolor }, samplers);
+            gl_elems.framebuffer.clear([0, 0, 0, 1]);
+            gl_elems.framebuffer.renderTo(0, 0, this.field.grid.ni, this.field.grid.nj);
+            gl.enable(gl.BLEND);
+            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            program_step1.draw();
+            // Now render the framebuffer as a filled contour
+            program_step2.use({ 'a_pos': gl_elems.vertices_step2, 'a_tex_coord': gl_elems.texcoords_step2 }, { 'u_opacity': this.opts.opacity, 'u_color': color, 'u_offset': 0,
+                ...gl_elems.shader_manager_2.getShaderUniforms(render_data) }, { 'u_fill_sampler': gl_elems.framebuffer.texture });
+            WGLFramebuffer.screen(gl).renderTo(0, 0, viewport_width, viewport_height);
+            gl.enable(gl.BLEND);
+            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            program_step2.draw();
+            if (render_data.type != 'maplibre' || !render_data.shaderData.define.includes('GLOBE')) {
+                program_step2.setUniforms({ 'u_offset': -2 });
+                program_step2.draw();
+                program_step2.setUniforms({ 'u_offset': -1 });
+                program_step2.draw();
+                program_step2.setUniforms({ 'u_offset': 1 });
+                program_step2.draw();
+            }
+        });
     }
 }
 export default Paintball;

package/lib/PlotComponent.d.ts

@@ -1,6 +1,7 @@
 import * as Comlink from 'comlink';
 import { MapLikeType } from './Map';
 import { RenderMethodArg, TypedArrayStr, WebGLAnyRenderingContext } from './AutumnTypes';
+import { WorkerPool } from './WorkerPool';
 declare const layer_worker: Comlink.Remote<{
     makeBBElements: (field_lats: Float32Array, field_lons: Float32Array, min_zoom: Uint8Array, field_ni: number, field_nj: number, map_max_zoom: number) => {
         pts: Float32Array;
@@ -12,14 +13,18 @@ declare const layer_worker: Comlink.Remote<{
     };
     makePolyLines: (lines: import("./AutumnTypes").LineData[]) => import("./AutumnTypes").Polyline;
 }>;
+declare function getContourWorkerPool(wasm_base_url: string | undefined, n_workers: number): WorkerPool<{
+    contourCreator: (data: import("./AutumnTypes").ContourableTypedArray, grid_coords: import("./grids/Grid").GridCoords, opts: import("./ContourCreator.worker").FieldContourOpts) => Promise<import("./AutumnTypes").ContourData>;
+    init: (wasm_base_url: string | undefined) => Promise<void>;
+}>;
 /** Base class for all plot components */
 declare abstract class PlotComponent<MapType extends MapLikeType> {
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     abstract render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
 declare function getGLFormatTypeAlignment(gl: WebGLAnyRenderingContext, array_dtype: TypedArrayStr): {
-    format: 33321 | 33325 | 33326 | 6409;
-    type: 36193 | 5131 | 5121 | 5126;
+    format: 33321 | 33325 | 33326 | 33331 | 33332 | 33333 | 33334 | 6409;
+    type: 36193 | 5131 | 5121 | 5122 | 5123 | 5124 | 5125 | 5126;
     row_alignment: number;
 };
-export { PlotComponent, layer_worker, getGLFormatTypeAlignment };
+export { PlotComponent, layer_worker, getContourWorkerPool, getGLFormatTypeAlignment };