autumnplot-gl 2.2.3 → 3.1.0

package/lib/TextCollection.js

@@ -0,0 +1,295 @@
+import { isWebGL2Ctx } from "./AutumnTypes";
+import { LngLat } from "./Map";
+import { Cache, normalizeOptions } from "./utils";
+import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+import Protobuf from 'pbf';
+import potpack from "potpack";
+const text_vertex_shader_src = `
+uniform mat4 u_matrix;
+uniform int u_offset;
+uniform highp float u_map_width;
+uniform highp float u_map_height;
+uniform highp float u_map_zoom;
+uniform highp float u_font_size;
+
+attribute vec3 a_pos;
+attribute vec2 a_offset;
+attribute vec2 a_tex_coord;
+
+varying highp vec2 v_tex_coord;
+
+mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
+    return mat4(x_scale, 0.0,     0.0,     0.0,
+                0.0,     y_scale, 0.0,     0.0,
+                0.0,     0.0,     z_scale, 0.0,
+                0.0,     0.0,     0.0,     1.0);
+}
+
+void main() {
+    float min_zoom = a_pos.z;
+
+    vec2 offset = a_offset;
+    if (u_map_zoom < min_zoom)
+        offset = vec2(0., 0.);
+
+    float globe_width = 1.;
+    vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
+
+    mat4 map_stretch_matrix = scalingMatrix(u_map_height / u_map_width, 1., 1.);
+
+    gl_Position = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0) + u_font_size / 12. * 1.5 * map_stretch_matrix * vec4(offset, 0., 0.);
+    v_tex_coord = a_tex_coord;
+}`
+const text_fragment_shader_src = `
+varying highp vec2 v_tex_coord;
+uniform sampler2D u_sdf_sampler;
+uniform int u_is_halo;
+
+uniform lowp vec3 u_text_color;
+uniform lowp vec3 u_halo_color;
+
+#define SDF_FILL 0.75
+#define SDF_HALO 0.45
+
+void main() {
+    highp float sdf_val = texture2D(u_sdf_sampler, v_tex_coord).r;
+
+    lowp float step_width = 0.08;
+    lowp float alpha = smoothstep(SDF_FILL - step_width, SDF_FILL + step_width, sdf_val);
+
+    lowp vec3 color = u_is_halo == 1 ? u_halo_color : u_text_color;
+
+    if (u_is_halo == 1) {
+        alpha = min(smoothstep(SDF_HALO - step_width, SDF_HALO + step_width, sdf_val), 1.0 - alpha);
+    }
+
+    gl_FragColor = vec4(color, alpha);
+}`
+const program_cache = new Cache((gl) => new WGLProgram(gl, text_vertex_shader_src, text_fragment_shader_src));
+const PADDING = 3;
+function parseFontPBF(data) {
+    const readGlyph = (tag, glyph, pbf) => {
+        switch (tag) {
+            case 1:
+                glyph.id = pbf.readVarint();
+                break;
+            case 2:
+                glyph.data = pbf.readBytes();
+                break;
+            case 3:
+                glyph.width = pbf.readVarint() + 2 * PADDING;
+                break;
+            case 4:
+                glyph.height = pbf.readVarint() + 2 * PADDING;
+                break;
+            case 5:
+                glyph.left = pbf.readSVarint();
+                break;
+            case 6:
+                glyph.top = pbf.readSVarint();
+                break;
+            case 7:
+                glyph.advance = pbf.readVarint();
+                break;
+        }
+    };
+    const readFontStack = (tag, glyphs, pbf) => {
+        if (tag == 3) {
+            const glyph = pbf.readMessage(readGlyph, {});
+            glyphs.push(glyph);
+        }
+    };
+    const readFontStacks = (tag, glyphs, pbf) => {
+        if (tag == 1) {
+            pbf.readMessage(readFontStack, glyphs);
+        }
+    };
+    return new Protobuf(data).readFields(readFontStacks, []);
+}
+function createAtlas(pbf_glyphs) {
+    const pbf_glyphs_filtered = pbf_glyphs.filter(glyph => glyph.data !== undefined);
+    const glyph_bins = [];
+    const bins = pbf_glyphs_filtered.map(glyph => {
+        const bin = { x: 0, y: 0, w: glyph.width, h: glyph.height };
+        glyph_bins.push({ glyph: glyph, bin: bin });
+        return bin;
+    });
+    const { w: img_width, h: img_height } = potpack(bins);
+    const atlas_data = new Uint8Array(img_width * img_height);
+    const glyphs = {};
+    glyph_bins.forEach(glyph_bin => {
+        const { bin, glyph } = glyph_bin;
+        glyphs[glyph.id] = {
+            id: glyph.id, width: glyph.width, height: glyph.height, left: glyph.left, top: glyph.top,
+            atlas_i: bin.x, atlas_j: bin.y, advance: glyph.advance
+        };
+        for (let i = 0; i < glyph.width; i++) {
+            for (let j = 0; j < glyph.height; j++) {
+                const glyph_idx = i + glyph.width * j;
+                const atlas_idx = (i + bin.x) + img_width * (j + bin.y);
+                atlas_data[atlas_idx] = glyph.data[glyph_idx];
+            }
+        }
+    });
+    const glyph_M = glyphs['M'.charCodeAt(0)];
+    const baseline = glyph_M.height - glyph_M.top;
+    const top = -glyph_M.top;
+    return { atlas: atlas_data, atlas_width: img_width, atlas_height: img_height, baseline: baseline, top: top, glyph_info: glyphs };
+}
+async function getFontAtlas(url) {
+    const resp = await fetch(url);
+    const blob = await resp.blob();
+    const data_buffer = await blob.arrayBuffer();
+    // Parse the PBF and get the glyph data
+    const glyphs = parseFontPBF(new Uint8Array(data_buffer));
+    // Create an atlas for the glyphs
+    return createAtlas(glyphs);
+}
+const text_collection_opt_defaults = {
+    horizontal_align: 'left',
+    vertical_align: 'baseline',
+    font_size: 12,
+    text_color: [0, 0, 0],
+    halo_color: [0, 0, 0],
+    halo: false
+};
+class TextCollection {
+    constructor(gl, text_locs, font_atlas, opts) {
+        this.program = program_cache.getValue(gl);
+        this.opts = normalizeOptions(opts, text_collection_opt_defaults);
+        const is_webgl2 = isWebGL2Ctx(gl);
+        const format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
+        const type = gl.UNSIGNED_BYTE;
+        const row_alignment = 1;
+        const image = {
+            'format': format, 'type': type, 'width': font_atlas.atlas_width, 'height': font_atlas.atlas_height,
+            'image': font_atlas.atlas, 'row_alignment': row_alignment, 'mag_filter': gl.LINEAR
+        };
+        this.texture = new WGLTexture(gl, image);
+        const n_verts = text_locs.map(tl => tl.text.length).reduce((a, b) => a + b, 0) * 6;
+        const anchor_data = new Float32Array(n_verts * 3);
+        const offset_data = new Float32Array(n_verts * 2);
+        const tc_data = new Float32Array(n_verts * 2);
+        let i_anch = 0, i_off = 0, i_tc = 0;
+        text_locs.forEach(loc => {
+            const { lat, lon, text } = loc;
+            const min_zoom = loc.min_zoom === undefined ? 0 : loc.min_zoom;
+            const { x: anchor_x, y: anchor_y } = new LngLat(lon, lat).toMercatorCoord();
+            let x_offset = 0;
+            const init_i_off = i_off;
+            for (let i = 0; i < text.length; i++) {
+                const glyph_code = text.charCodeAt(i);
+                const glyph_info = font_atlas.glyph_info[glyph_code];
+                if (glyph_info === undefined) {
+                    x_offset += 7;
+                    continue;
+                }
+                x_offset += glyph_info.left;
+                anchor_data[i_anch++] = anchor_x;
+                anchor_data[i_anch++] = anchor_y;
+                anchor_data[i_anch++] = min_zoom;
+                anchor_data[i_anch++] = anchor_x;
+                anchor_data[i_anch++] = anchor_y;
+                anchor_data[i_anch++] = min_zoom;
+                anchor_data[i_anch++] = anchor_x;
+                anchor_data[i_anch++] = anchor_y;
+                anchor_data[i_anch++] = min_zoom;
+                anchor_data[i_anch++] = anchor_x;
+                anchor_data[i_anch++] = anchor_y;
+                anchor_data[i_anch++] = min_zoom;
+                anchor_data[i_anch++] = anchor_x;
+                anchor_data[i_anch++] = anchor_y;
+                anchor_data[i_anch++] = min_zoom;
+                anchor_data[i_anch++] = anchor_x;
+                anchor_data[i_anch++] = anchor_y;
+                anchor_data[i_anch++] = min_zoom;
+                offset_data[i_off++] = x_offset;
+                offset_data[i_off++] = font_atlas.baseline + glyph_info.top - glyph_info.height;
+                offset_data[i_off++] = x_offset;
+                offset_data[i_off++] = font_atlas.baseline + glyph_info.top - glyph_info.height;
+                offset_data[i_off++] = x_offset + glyph_info.width;
+                offset_data[i_off++] = font_atlas.baseline + glyph_info.top - glyph_info.height;
+                offset_data[i_off++] = x_offset;
+                offset_data[i_off++] = font_atlas.baseline + glyph_info.top;
+                offset_data[i_off++] = x_offset + glyph_info.width;
+                offset_data[i_off++] = font_atlas.baseline + glyph_info.top;
+                offset_data[i_off++] = x_offset + glyph_info.width;
+                offset_data[i_off++] = font_atlas.baseline + glyph_info.top;
+                tc_data[i_tc++] = glyph_info.atlas_i / font_atlas.atlas_width;
+                tc_data[i_tc++] = (glyph_info.atlas_j + glyph_info.height) / font_atlas.atlas_height;
+                tc_data[i_tc++] = glyph_info.atlas_i / font_atlas.atlas_width;
+                tc_data[i_tc++] = (glyph_info.atlas_j + glyph_info.height) / font_atlas.atlas_height;
+                tc_data[i_tc++] = (glyph_info.atlas_i + glyph_info.width) / font_atlas.atlas_width;
+                tc_data[i_tc++] = (glyph_info.atlas_j + glyph_info.height) / font_atlas.atlas_height;
+                tc_data[i_tc++] = glyph_info.atlas_i / font_atlas.atlas_width;
+                tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
+                tc_data[i_tc++] = (glyph_info.atlas_i + glyph_info.width) / font_atlas.atlas_width;
+                tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
+                tc_data[i_tc++] = (glyph_info.atlas_i + glyph_info.width) / font_atlas.atlas_width;
+                tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
+                x_offset += glyph_info.advance - glyph_info.left;
+            }
+            if (opts.horizontal_align == 'center') {
+                for (let i = init_i_off; i < init_i_off + text.length * 12; i += 2) {
+                    offset_data[i] -= x_offset / 2;
+                }
+            }
+            else if (opts.horizontal_align == 'right') {
+                for (let i = init_i_off; i < init_i_off + text.length * 12; i += 2) {
+                    offset_data[i] -= x_offset;
+                }
+            }
+            if (opts.vertical_align == 'top') {
+                for (let i = init_i_off + 1; i < init_i_off + text.length * 12; i += 2) {
+                    offset_data[i] -= (font_atlas.baseline - font_atlas.top);
+                }
+            }
+            else if (opts.vertical_align == 'middle') {
+                for (let i = init_i_off + 1; i < init_i_off + text.length * 12; i += 2) {
+                    offset_data[i] -= (font_atlas.baseline - font_atlas.top) / 2;
+                }
+            }
+        });
+        this.anchors = new WGLBuffer(gl, anchor_data, 3, gl.TRIANGLE_STRIP);
+        this.offsets = new WGLBuffer(gl, offset_data, 2, gl.TRIANGLE_STRIP);
+        this.texcoords = new WGLBuffer(gl, tc_data, 2, gl.TRIANGLE_STRIP);
+    }
+    static async make(gl, text_locs, fontstack_url, opts) {
+        const atlas = await getFontAtlas(fontstack_url);
+        return new TextCollection(gl, text_locs, atlas, opts);
+    }
+    render(gl, matrix, [map_width, map_height], map_zoom) {
+        const uniforms = {
+            'u_matrix': matrix, 'u_map_width': map_width, 'u_map_height': map_height, 'u_map_zoom': map_zoom, 'u_font_size': this.opts.font_size,
+            'u_text_color': this.opts.text_color, 'u_halo_color': this.opts.halo_color, 'u_offset': 0
+        };
+        uniforms['u_is_halo'] = this.opts.halo ? 1 : 0;
+        this.program.use({ 'a_pos': this.anchors, 'a_offset': this.offsets, 'a_tex_coord': this.texcoords }, uniforms, { 'u_sdf_sampler': this.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();
+        if (this.opts.halo) {
+            this.program.setUniforms({ 'u_is_halo': 0 });
+            this.program.draw();
+        }
+        this.program.setUniforms({ 'u_offset': -2, 'u_is_halo': this.opts.halo ? 1 : 0 });
+        this.program.draw();
+        if (this.opts.halo) {
+            this.program.setUniforms({ 'u_is_halo': 0 });
+            this.program.draw();
+        }
+        this.program.setUniforms({ 'u_offset': -1, 'u_is_halo': this.opts.halo ? 1 : 0 });
+        this.program.draw();
+        if (this.opts.halo) {
+            this.program.setUniforms({ 'u_is_halo': 0 });
+            this.program.draw();
+        }
+        this.program.setUniforms({ 'u_offset': 1, 'u_is_halo': this.opts.halo ? 1 : 0 });
+        this.program.draw();
+        if (this.opts.halo) {
+            this.program.setUniforms({ 'u_is_halo': 0 });
+            this.program.draw();
+        }
+    }
+}
+export { TextCollection };

package/lib/cpp/marchingsquares.d.ts

@@ -0,0 +1,6 @@
+import { type MainModule } from "./marchingsquares_embind";
+
+export type MarchingSquaresModule = MainModule & EmscriptenModule;
+
+declare const Module: EmscriptenModuleFactory<MarchingSquaresModule>;
+export default Module;