autumnplot-gl 4.0.0-beta → 4.1.0

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].reverse().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,13 +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 };

package/lib/PlotComponent.js

@@ -1,8 +1,23 @@
 import * as Comlink from 'comlink';
 import { getOS } from "./utils";
 import { isWebGL2Ctx } from './AutumnTypes';
+import { createWorkerPool } from './WorkerPool';
 const worker = new Worker(new URL('./PlotLayer.worker', import.meta.url));
 const layer_worker = Comlink.wrap(worker);
+let c_worker_pool = null;
+function getContourWorkerPool(wasm_base_url, n_workers) {
+    if (c_worker_pool !== null) {
+        return c_worker_pool;
+    }
+    const c_workers = [];
+    for (let iw = 0; iw < n_workers; iw++) {
+        c_workers.push(new Worker(new URL('./ContourCreator.worker', import.meta.url)));
+    }
+    const pool = createWorkerPool(c_workers, wkr => wkr.init(wasm_base_url));
+    c_worker_pool = pool;
+    return pool;
+}
+/** Base class for all plot components */
 class PlotComponent {
 }
 function getGLFormatTypeAlignment(gl, array_dtype) {
@@ -39,6 +54,26 @@ function getGLFormatTypeAlignment(gl, array_dtype) {
         type = gl.FLOAT;
         row_alignment = 4;
     }
+    else if (array_dtype == 'uint16') {
+        format = is_webgl2 ? gl.R16UI : gl.LUMINANCE;
+        type = gl.UNSIGNED_SHORT;
+        row_alignment = 2;
+    }
+    else if (array_dtype == 'uint32') {
+        format = is_webgl2 ? gl.R32UI : gl.LUMINANCE;
+        type = gl.UNSIGNED_INT;
+        row_alignment = 4;
+    }
+    else if (array_dtype == 'int16') {
+        format = is_webgl2 ? gl.R16I : gl.LUMINANCE;
+        type = gl.SHORT;
+        row_alignment = 2;
+    }
+    else if (array_dtype == 'int32') {
+        format = is_webgl2 ? gl.R32I : gl.LUMINANCE;
+        type = gl.INT;
+        row_alignment = 4;
+    }
     else {
         format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
         type = gl.UNSIGNED_BYTE;
@@ -46,4 +81,4 @@ function getGLFormatTypeAlignment(gl, array_dtype) {
     }
     return { format: format, type: type, row_alignment: row_alignment };
 }
-export { PlotComponent, layer_worker, getGLFormatTypeAlignment };
+export { PlotComponent, layer_worker, getContourWorkerPool, getGLFormatTypeAlignment };

package/lib/PlotLayer.d.ts

@@ -11,7 +11,7 @@ declare abstract class PlotLayerBase<MapType extends MapLikeType> {
     protected repaint(): void;
 }
 /**
- * A static map layer. The data are assumed to be static in time. If the data have a time component (e.g., a model forecast), an {@link MultiPlotLayer}
+ * A static map layer. The data are assumed to be static in time. If the data have a time component (e.g., a model forecast), a {@link MultiPlotLayer}
  * may be more appropriate.
  * @example
  * // Create map layers from provided fields
@@ -39,7 +39,7 @@ declare class PlotLayer<MapType extends MapLikeType> extends PlotLayerBase<MapTy
     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.
+ * A varying map layer. If the data don't have a varying component, such as over time, it might be easier to use a {@link PlotLayer} instead.
  * @example
  * // Create a varying map layer
  * height_layer = new MultiPlotLayer('height-contours');

package/lib/PlotLayer.js

@@ -11,7 +11,7 @@ class PlotLayerBase {
     }
 }
 /**
- * A static map layer. The data are assumed to be static in time. If the data have a time component (e.g., a model forecast), an {@link MultiPlotLayer}
+ * A static map layer. The data are assumed to be static in time. If the data have a time component (e.g., a model forecast), a {@link MultiPlotLayer}
  * may be more appropriate.
  * @example
  * // Create map layers from provided fields
@@ -46,7 +46,7 @@ class PlotLayer extends PlotLayerBase {
     }
 }
 /**
- * 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.
+ * A varying map layer. If the data don't have a varying component, such as over time, it might be easier to use a {@link PlotLayer} instead.
  * @example
  * // Create a varying map layer
  * height_layer = new MultiPlotLayer('height-contours');

package/lib/PlotLayer.worker.js

@@ -21,7 +21,10 @@ function makeBBElements(field_lats, field_lons, min_zoom, field_ni, field_nj, ma
             const pt_ll = new LngLat(lon, lat).toMercatorCoord();
             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
+            // Pack the min zoom in with the texture coordinates; only works because the min zoom is always an integer
+            // Another gotcha is that if the i texcoord is 1, then that bump up the zoom that gets unpacked on the GPU, which causes may cause the last column of billboards to
+            //  disappear. To fix this, cap the texcoord at 0.99999, which should be good for textures up to 10^5 pixels in size.
+            tex_coords[istart_tc + 0] = Math.min(ilon / (field_ni - 1), 0.99999) + zoom;
             tex_coords[istart_tc + 1] = ilat / (field_nj - 1);
             istart_pts += n_coords_per_pt_pts;
             istart_tc += n_coords_per_pt_tc;
@@ -204,7 +207,7 @@ function makePolylinesMiter(lines) {
 }
 */
 function makePolylines(lines) {
-    if (lines.length == 0) {
+    if (lines.length == 0 || lines[0].vertices.length == 0) {
         return { vertices: new Float32Array([]), extrusion: new Float32Array([]) };
     }
     const n_points_per_vert = Object.fromEntries(Object.entries(lines[0]).map(([k, v]) => {
@@ -252,6 +255,9 @@ function makePolylines(lines) {
             const v_ll = new LngLat(...v).toMercatorCoord();
             return [v_ll.x, v_ll.y];
         });
+        if (line.vertices.length == 0) {
+            return;
+        }
         const has_offsets = line.offsets !== undefined;
         const extrusion_verts = line.offsets !== undefined ? line.offsets : verts;
         let pt_prev, pt_this = verts[0], pt_next = verts[1];
@@ -342,6 +348,6 @@ function makePolylines(lines) {
 const ep_interface = {
     'makeBBElements': makeBBElements,
     'makeDomainVerticesAndTexCoords': makeDomainVerticesAndTexCoords,
-    'makePolyLines': makePolylines
+    'makePolyLines': makePolylines,
 };
 Comlink.expose(ep_interface);