@genome-spy/core 0.14.0

package/src/gl/dataToVertices.js

@@ -0,0 +1,621 @@
+import { InternMap } from "internmap";
+import { format } from "d3-format";
+import { isString } from "vega-util";
+import { fp64ify } from "./includes/fp64-utils";
+import ArrayBuilder from "./arrayBuilder";
+import { SDF_PADDING } from "../fonts/bmFontMetrics";
+import { peek } from "../utils/arrayUtils";
+import createBinningRangeIndexer from "../utils/binnedRangeIndex";
+
+/**
+ * @typedef {object} RangeEntry Represents a location of a vertex subset
+ * @prop {number} offset in vertices
+ * @prop {number} count in vertices
+ * @prop {import("../utils/binnedRangeIndex").Lookup} xIndex
+ *
+ * @typedef {import("./arraybuilder").ConverterMetadata} Converter
+ * @typedef {import("../encoder/encoder").Encoder} Encoder
+ */
+export class GeometryBuilder {
+    /**
+     *
+     * @param {object} object
+     * @param {Record<string, Encoder>} object.encoders
+     * @param {string[]} [object.attributes]
+     * @param {number} [object.numVertices] If the number of data items is known, a
+     *      preallocated TypedArray is used
+     * @param {boolean} [object.buildXIndex] True if data are sorted by the field mapped to x channel and should be indexed
+     */
+    constructor({
+        encoders,
+        numVertices = undefined,
+        attributes = [],
+        buildXIndex = false,
+    }) {
+        this.encoders = encoders;
+        this._buildXIndex = buildXIndex;
+
+        // Encoders for variable channels
+        this.variableEncoders = Object.fromEntries(
+            Object.entries(encoders).filter(
+                ([channel, e]) =>
+                    attributes.includes(channel) && e && e.scale && !e.constant
+            )
+        );
+
+        this.allocatedVertices = numVertices;
+
+        this.variableBuilder = new ArrayBuilder(numVertices);
+
+        // Create converters and updaters for all variable channels.
+        // TODO: If more than one channels use the same field with the same data type, convert the field only once.
+
+        for (const [channel, ce] of Object.entries(this.variableEncoders)) {
+            const accessor = ce.accessor;
+
+            const doubleArray = [0, 0];
+            const fp64 = ce.scale.fp64;
+
+            /**
+             * Discrete variables both numeric and strings must be "indexed",
+             * 64 bit floats must be converted to vec2.
+             * 32 bit continuous variables go to GPU as is.
+             *
+             * @type {function(any):(number | number[])}
+             */
+            const f = ce.indexer
+                ? ce.indexer
+                : fp64
+                ? (d) => fp64ify(accessor(d), doubleArray)
+                : accessor;
+
+            this.variableBuilder.addConverter(channel, {
+                f,
+                numComponents: fp64 ? 2 : 1,
+                arrayReference: fp64 ? doubleArray : undefined,
+            });
+        }
+
+        this.lastOffset = 0;
+
+        /** @type {Map<any, RangeEntry>} keep track of sample locations within the vertex array */
+        this.rangeMap = new InternMap([], JSON.stringify);
+    }
+
+    /**
+     * Must be called at the end of `addBatch`
+     *
+     * @param {any} key
+     */
+    registerBatch(key) {
+        const offset = this.lastOffset;
+        const index = this.variableBuilder.vertexCount;
+        const size = index - offset;
+        if (size) {
+            this.rangeMap.set(key, {
+                offset,
+                count: size,
+                xIndex: this.xIndexer?.getIndex(),
+            });
+        }
+        this.lastOffset = index;
+    }
+
+    /**
+     * @param {Map<any, object[]>} batches
+     */
+    addBatches(batches) {
+        for (const [key, data] of batches) {
+            this.addBatch(key, data);
+        }
+    }
+
+    /**
+     * @param {any} key The facet id, for example
+     * @param {object[]} data
+     */
+    addBatch(key, data, lo = 0, hi = data.length) {
+        for (let i = lo; i < hi; i++) {
+            this.variableBuilder.pushFromDatum(data[i]);
+        }
+
+        this.registerBatch(key);
+    }
+
+    /**
+     * @param {any[]} data
+     */
+    prepareXIndexer(data) {
+        if (!this._buildXIndex) {
+            return;
+        }
+
+        const xe = this.variableEncoders.x;
+        const x2e = this.variableEncoders.x2;
+
+        if (xe && x2e) {
+            const xa = xe.accessor;
+            const x2a = x2e.accessor;
+
+            this.xIndexer = createBinningRangeIndexer(50, [
+                xa(data[0]),
+                x2a(peek(data)),
+            ]);
+
+            let lastVertexCount = this.variableBuilder.vertexCount;
+
+            /**
+             * @param {any} datum
+             */
+            this.addToXIndex = (datum) => {
+                let currentVertexCount = this.variableBuilder.vertexCount;
+                this.xIndexer(
+                    xa(datum),
+                    x2a(datum),
+                    lastVertexCount,
+                    currentVertexCount
+                );
+                lastVertexCount = currentVertexCount;
+            };
+        } else {
+            this.xIndexer = undefined;
+            /**
+             * @param {any} datum
+             */
+            this.addToXIndex = (datum) => {
+                //
+            };
+        }
+    }
+
+    /**
+     * Add the datum to an index, which allows for efficient rendering of ranges
+     * on the x axis. Must be called after a datum has been pushed to the ArrayBuilder.
+     *
+     * @param {any} datum
+     */
+    addToXIndex(datum) {
+        //
+    }
+
+    toArrays() {
+        return {
+            /** @type {Record<string, {data: number[] | Float32Array, numComponents: number, divisor?: number}>} */
+            arrays: this.variableBuilder.arrays,
+            /** Number of vertices used */
+            vertexCount: this.variableBuilder.vertexCount,
+            /** Number of vertices allocated in buffers */
+            allocatedVertices: this.allocatedVertices,
+            rangeMap: this.rangeMap,
+        };
+    }
+}
+
+export class RectVertexBuilder extends GeometryBuilder {
+    /**
+     *
+     * @param {Object} object
+     * @param {Record<string, Encoder>} object.encoders
+     * @param {string[]} object.attributes
+     * @param {number} [object.tessellationThreshold]
+     *     If the rect is wider than the threshold, tessellate it into pieces
+     * @param {number[]} [object.visibleRange]
+     * @param {number} [object.numItems] Number of data items
+     * @param {boolean} [object.buildXIndex] True if data are sorted by the field mapped to x channel and should be indexed
+     */
+    constructor({
+        encoders,
+        attributes,
+        tessellationThreshold = Infinity,
+        visibleRange = [-Infinity, Infinity],
+        numItems,
+        buildXIndex = false,
+    }) {
+        super({
+            encoders,
+            attributes,
+            numVertices:
+                tessellationThreshold == Infinity ? numItems * 6 : undefined,
+            buildXIndex,
+        });
+
+        this.visibleRange = visibleRange;
+
+        this.tessellationThreshold = tessellationThreshold || Infinity;
+
+        this.updateFrac = this.variableBuilder.createUpdater("frac", 2);
+    }
+
+    /**
+     *
+     * @param {any} key
+     * @param {object[]} data
+     */
+    addBatch(key, data, lo = 0, hi = data.length) {
+        if (hi <= lo) {
+            return;
+        }
+
+        const e =
+            /** @type {Object.<string, import("../encoder/encoder").NumberEncoder>} */ (
+                this.encoders
+            );
+        const [lower, upper] = this.visibleRange;
+
+        /**
+         * @param {import("../encoder/encoder").Encoder} encoder
+         */
+        const a = (encoder) => encoder.accessor || ((x) => 0);
+
+        const xAccessor = a(e.x);
+        const x2Accessor = a(e.x2);
+
+        this.prepareXIndexer(data);
+
+        const frac = [0, 0];
+        this.updateFrac(frac);
+
+        for (let i = lo; i < hi; i++) {
+            const d = data[i];
+
+            let x = xAccessor(d),
+                x2 = x2Accessor(d);
+
+            if (x > x2) {
+                [x, x2] = [x2, x];
+            }
+
+            // Skip rects that fall outside the visible range. TODO: Optimize by using binary search / interval tree
+            if (x2 < lower || x > upper) {
+                continue;
+            }
+
+            // Truncate to prevent tessellation of parts that are outside the viewport
+            if (x < lower) x = lower;
+            if (x2 > upper) x2 = upper;
+
+            // Start a new segment.
+            this.variableBuilder.updateFromDatum(d);
+
+            frac[0] = 0;
+            frac[1] = 0;
+
+            // Tessellate segments
+            const tileCount = 1;
+            //    width < Infinity
+            //        ? Math.ceil(width / this.tessellationThreshold)
+            //        : 1;
+
+            // Duplicate the first vertex to produce degenerate triangles
+            this.variableBuilder.pushAll();
+
+            for (let i = 0; i <= tileCount; i++) {
+                frac[0] = i / tileCount;
+                frac[1] = 0;
+                this.variableBuilder.pushAll();
+                frac[1] = 1;
+                this.variableBuilder.pushAll();
+            }
+
+            // Duplicate the last vertex to produce a degenerate triangle between the segments
+            this.variableBuilder.pushAll();
+            this.addToXIndex(d);
+        }
+
+        this.registerBatch(key);
+    }
+}
+
+export class RuleVertexBuilder extends GeometryBuilder {
+    /**
+     *
+     * @param {Object} object
+     * @param {Record<string, Encoder>} object.encoders
+     * @param {string[]} object.attributes
+     * @param {number} [object.tessellationThreshold]
+     *     If the rule is wider than the threshold, tessellate it into pieces
+     * @param {number[]} [object.visibleRange]
+     * @param {number} [object.numItems] Number of data items
+     * @param {boolean} [object.buildXIndex] True if data are sorted by the field mapped to x channel and should be indexed
+     */
+    constructor({
+        encoders,
+        attributes,
+        tessellationThreshold = Infinity,
+        visibleRange = [-Infinity, Infinity],
+        numItems,
+        buildXIndex,
+    }) {
+        super({
+            encoders,
+            attributes,
+            numVertices:
+                tessellationThreshold == Infinity ? numItems * 6 : undefined,
+            buildXIndex,
+        });
+
+        this.visibleRange = visibleRange;
+
+        this.tessellationThreshold = tessellationThreshold || Infinity;
+
+        this.updateSide = this.variableBuilder.createUpdater("side", 1);
+        this.updatePos = this.variableBuilder.createUpdater("pos", 1);
+    }
+
+    /* eslint-disable complexity */
+    /**
+     *
+     * @param {any} key
+     * @param {object[]} data
+     */
+    addBatch(key, data, lo = 0, hi = data.length) {
+        //const [lower, upper] = this.visibleRange; // TODO
+
+        this.prepareXIndexer(data);
+
+        for (let i = lo; i < hi; i++) {
+            const d = data[i];
+
+            // Start a new rule. Duplicate the first vertex to produce degenerate triangles
+            this.variableBuilder.updateFromDatum(d);
+            this.updateSide(-0.5);
+            this.updatePos(0);
+            this.variableBuilder.pushAll();
+
+            // Tesselate segments
+            const tileCount = 1;
+            //    width < Infinity
+            //        ? Math.ceil(width / this.tessellationThreshold)
+            //        : 1;
+            for (let i = 0; i <= tileCount; i++) {
+                this.updatePos(i / tileCount);
+                this.updateSide(-0.5);
+                this.variableBuilder.pushAll();
+                this.updateSide(0.5);
+                this.variableBuilder.pushAll();
+            }
+
+            // Duplicate the last vertex to produce a degenerate triangle between the rules
+            this.variableBuilder.pushAll();
+            this.addToXIndex(d);
+        }
+
+        this.registerBatch(key);
+    }
+}
+
+export class PointVertexBuilder extends GeometryBuilder {
+    /**
+     *
+     * @param {object} object
+     * @param {Record<string, Encoder>} object.encoders
+     * @param {string[]} object.attributes
+     * @param {number} [object.numItems] Number of points if known, uses TypedArray
+     */
+    constructor({ encoders, attributes, numItems = undefined }) {
+        super({
+            encoders,
+            attributes,
+            numVertices: numItems,
+        });
+    }
+}
+
+export class ConnectionVertexBuilder extends GeometryBuilder {
+    /**
+     * @param {object} object
+     * @param {Record<string, Encoder>} object.encoders
+     * @param {string[]} object.attributes
+     * @param {number} [object.numItems ] Number of points if known, uses TypedArray
+     */
+    constructor({ encoders, attributes, numItems = undefined }) {
+        super({
+            encoders,
+            attributes,
+            numVertices: numItems,
+        });
+    }
+
+    toArrays() {
+        const arrays = this.variableBuilder.arrays;
+
+        // Prepare for instanced rendering
+        for (let a of Object.values(arrays)) {
+            a.divisor = 1;
+        }
+
+        return super.toArrays();
+    }
+}
+
+export class TextVertexBuilder extends GeometryBuilder {
+    /**
+     *
+     * @param {object} object
+     * @param {Record<string, Encoder>} object.encoders
+     * @param {string[]} object.attributes
+     * @param {import("../fonts/bmFontMetrics").BMFontMetrics} object.fontMetrics
+     * @param {Record<string, any>} object.properties
+     * @param {number} [object.numCharacters] number of characters
+     * @param {boolean} [object.buildXIndex] True if data are sorted by the field mapped to x channel and should be indexed
+     * @param {boolean} [object.logoLetters]
+     */
+    constructor({
+        encoders,
+        attributes,
+        fontMetrics,
+        properties,
+        numCharacters = undefined,
+        buildXIndex = false,
+    }) {
+        super({
+            encoders,
+            attributes,
+            numVertices: numCharacters * 6, // six vertices per quad (character)
+            buildXIndex,
+        });
+
+        this.metadata = fontMetrics;
+        this.metrics = fontMetrics;
+
+        this.properties = properties;
+
+        const e = encoders;
+
+        /** @type {function(any):any} */
+        this.numberFormat = e.text.channelDef.format
+            ? format(e.text.channelDef.format)
+            : (d) => d;
+
+        this.updateVertexCoord = this.variableBuilder.createUpdater(
+            "vertexCoord",
+            2
+        );
+        this.updateTextureCoord = this.variableBuilder.createUpdater(
+            "textureCoord",
+            2
+        );
+
+        this.updateWidth = this.variableBuilder.createUpdater("width", 1);
+    }
+
+    /**
+     *
+     * @param {any} key
+     * @param {object[]} data
+     */
+    addBatch(key, data, lo = 0, hi = data.length) {
+        const align = this.properties.align || "left";
+        const logoLetters = this.properties.logoLetters ?? false;
+
+        const base = this.metadata.common.base;
+        const scale = this.metadata.common.scaleH; // Assume square textures
+
+        let baseline = -SDF_PADDING;
+        switch (this.properties.baseline) {
+            case "top":
+                baseline += this.metrics.capHeight;
+                break;
+            case "middle":
+                baseline += this.metrics.capHeight / 2;
+                break;
+            case "bottom":
+                baseline -= this.metrics.descent;
+                break;
+            default:
+            // alphabetic
+        }
+
+        const accessor = this.encoders.text.accessor || this.encoders.text; // accessor or constant value
+
+        const vertexCoord = [0, 0];
+        this.updateVertexCoord(vertexCoord);
+        const textureCoord = [0, 0];
+        this.updateTextureCoord(textureCoord);
+
+        this.prepareXIndexer(data);
+
+        for (let i = lo; i < hi; i++) {
+            const d = data[i];
+
+            const value = this.numberFormat(accessor(d));
+            const str = isString(value)
+                ? value
+                : value === null
+                ? ""
+                : "" + value;
+            if (str.length == 0) continue;
+
+            this.variableBuilder.updateFromDatum(d);
+
+            const textWidth = logoLetters
+                ? str.length
+                : this.metrics.measureWidth(str);
+
+            this.updateWidth(textWidth); // TODO: Check if one letter space should be reduced
+
+            let x =
+                align == "right"
+                    ? -textWidth
+                    : align == "center"
+                    ? -textWidth / 2
+                    : 0;
+
+            if (!logoLetters) {
+                const firstChar = this.metrics.getCharByCode(str.charCodeAt(0));
+                x -= (firstChar.width - firstChar.xadvance) / base / 2; // TODO: Fix, this is a bit off..
+            }
+
+            let bottom = -0.5,
+                height = 1,
+                normalWidth = 1;
+
+            for (let i = 0; i < str.length; i++) {
+                const c = this.metrics.getCharByCode(str.charCodeAt(i));
+
+                const advance = logoLetters ? 1 : c.xadvance / base;
+
+                if (c.id == 32) {
+                    x += advance;
+                    continue;
+                }
+
+                if (!logoLetters) {
+                    height = c.height / base;
+                    bottom = -(c.height + c.yoffset + baseline) / base;
+                    normalWidth = c.width / base;
+                } else {
+                    normalWidth = (c.width + SDF_PADDING * 2) / c.width;
+                    x = -normalWidth / 2;
+                    height = (c.height + SDF_PADDING * 2) / c.height;
+                    bottom = -0.5 - SDF_PADDING / c.height;
+                }
+
+                const tx = c.x;
+                const ty = c.y;
+
+                vertexCoord[0] = x;
+                vertexCoord[1] = bottom + height;
+                textureCoord[0] = tx / scale;
+                textureCoord[1] = ty / scale;
+                this.variableBuilder.pushAll();
+
+                vertexCoord[0] = x + normalWidth;
+                vertexCoord[1] = bottom + height;
+                textureCoord[0] = (tx + c.width) / scale;
+                textureCoord[1] = ty / scale;
+                this.variableBuilder.pushAll();
+
+                vertexCoord[0] = x;
+                vertexCoord[1] = bottom;
+                textureCoord[0] = tx / scale;
+                textureCoord[1] = (ty + c.height) / scale;
+                this.variableBuilder.pushAll();
+
+                vertexCoord[0] = x + normalWidth;
+                vertexCoord[1] = bottom + height;
+                textureCoord[0] = (tx + c.width) / scale;
+                textureCoord[1] = ty / scale;
+                this.variableBuilder.pushAll();
+
+                vertexCoord[0] = x;
+                vertexCoord[1] = bottom;
+                textureCoord[0] = tx / scale;
+                textureCoord[1] = (ty + c.height) / scale;
+                this.variableBuilder.pushAll();
+
+                vertexCoord[0] = x + normalWidth;
+                vertexCoord[1] = bottom;
+                textureCoord[0] = (tx + c.width) / scale;
+                textureCoord[1] = (ty + c.height) / scale;
+                this.variableBuilder.pushAll();
+
+                x += advance;
+            }
+
+            this.addToXIndex(data);
+        }
+
+        this.registerBatch(key);
+    }
+}

package/src/gl/includes/common.glsl

@@ -0,0 +1,63 @@
+#define PI 3.141593
+
+/** Offset in "unit" units */
+uniform vec2 uViewOffset;
+
+uniform vec2 uViewScale;
+
+/** Size of the logical viewport in pixels, i.e., the view */
+uniform vec2 uViewportSize;
+
+uniform lowp float uDevicePixelRatio;
+
+// TODO: Views with opacity less than 1.0 should be rendered into a texture
+// that is rendered with the specified opacity.
+uniform lowp float uViewOpacity;
+
+/**
+ * Maps a coordinate on the unit scale to a normalized device coordinate.
+ * (0, 0) is at the bottom left corner.
+ */
+vec4 unitToNdc(vec2 coord) {
+    return vec4((coord * uViewScale + uViewOffset) * 2.0 - 1.0, 0.0, 1.0);
+}
+
+vec4 unitToNdc(float x, float y) {
+    return unitToNdc(vec2(x, y));
+}
+
+vec4 pixelsToNdc(vec2 coord) {
+    return unitToNdc(coord / uViewportSize);
+}
+
+vec4 pixelsToNdc(float x, float y) {
+    return pixelsToNdc(vec2(x, y));
+}
+
+float linearstep(float edge0, float edge1, float x) {
+    return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+// Fragment shader stuff ////////////////////////////////////////////////////////
+
+// TODO: include the following only in fragment shaders
+
+/**
+ * Specialized linearstep for doing antialiasing
+ */
+float distanceToRatio(float d) {
+	return clamp(d * uDevicePixelRatio + 0.5, 0.0, 1.0);
+}
+
+vec4 distanceToColor(float d, vec4 fill, vec4 stroke, float halfStrokeWidth) {
+    if (halfStrokeWidth > 0.0) {
+        // Distance to stroke's edge. Negative inside the stroke.
+        float sd = abs(d) - halfStrokeWidth;
+        return mix(
+            stroke,
+            d <= 0.0 ? fill : vec4(0.0),
+            distanceToRatio(sd));
+    } else {
+        return fill * distanceToRatio(-d);
+    }
+}