@genome-spy/core 0.41.0 → 0.42.1

package/dist/src/gl/dataToVertices.js

@@ -6,9 +6,11 @@ import { SDF_PADDING } from "../fonts/bmFontMetrics.js";
 import { createBinningRangeIndexer } from "../utils/binnedIndex.js";
 import { isValueDef } from "../encoder/encoder.js";
 import {
+    dedupeEncodingFields,
     isHighPrecisionScale,
+    makeAttributeName,
     splitHighPrecision,
-} from "../scale/glslScaleGenerator.js";
+} from "./glslScaleGenerator.js";
 import { isContinuous } from "vega-scale";
 
 /**
@@ -41,6 +43,12 @@ export class GeometryBuilder {
             )
         );
 
+        const dedupedEncodingFields = [
+            ...dedupeEncodingFields(encoders).entries(),
+        ]
+            .filter(([key, channels]) => key[1] && channels.length > 1)
+            .map(([_key, channels]) => channels);
+
         this.allocatedVertices = numVertices;
 
         this.variableBuilder = new ArrayBuilder(numVertices);
@@ -49,6 +57,16 @@ export class GeometryBuilder {
         // 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)) {
+            // Only add the first of the shared channels as all the rest are same
+            // For example, if both x and x2 are using the same field, only x is
+            // added to the array builder with the name "x_x2".
+            const sharedChannels = dedupedEncodingFields.find((channels) =>
+                channels.find((c) => c == channel)
+            );
+            if (sharedChannels && channel != sharedChannels[0]) {
+                continue;
+            }
+
             const accessor = ce.accessor;
 
             const doubleArray = [0, 0];
@@ -69,7 +87,11 @@ export class GeometryBuilder {
                 ? (d) => splitHighPrecision(accessor(d), doubleArray)
                 : accessor;
 
-            this.variableBuilder.addConverter(channel, {
+            const attributeName = sharedChannels
+                ? makeAttributeName(sharedChannels)
+                : channel;
+
+            this.variableBuilder.addConverter(attributeName, {
                 f,
                 numComponents: hp ? 2 : 1,
                 arrayReference: hp ? doubleArray : undefined,
@@ -217,30 +239,14 @@ 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
      */
-    constructor({
-        encoders,
-        attributes,
-        tessellationThreshold = Infinity,
-        visibleRange = [-Infinity, Infinity],
-        numItems,
-    }) {
+    constructor({ encoders, attributes, numItems }) {
         super({
             encoders,
             attributes,
-            numVertices:
-                tessellationThreshold == Infinity ? numItems * 6 : undefined,
+            numVertices: numItems * 6,
         });
-
-        this.visibleRange = visibleRange;
-
-        this.tessellationThreshold = tessellationThreshold || Infinity;
-
-        this.updateFrac = this.variableBuilder.createUpdater("frac", 2);
     }
 
     /**
@@ -253,69 +259,23 @@ export class RectVertexBuilder extends GeometryBuilder {
             return;
         }
 
-        const e =
-            /** @type {Object.<string, import("../types/encoder.js").NumberEncoder>} */ (
-                this.encoders
-            );
-        const [lower, upper] = this.visibleRange;
-
-        /**
-         * @param {import("../types/encoder.js").Encoder} encoder
-         */
-        const a = (encoder) => encoder.accessor || ((x) => 0);
-
-        const xAccessor = a(e.x);
-        const x2Accessor = a(e.x2);
-
         this.prepareXIndexer(data, lo, hi);
 
-        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
+            // Six vertices per rect. The vertex shader is using gl_VertexID to
+            // determine the vertex position within the rect.
+            this.variableBuilder.pushAll();
+            this.variableBuilder.pushAll();
             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.variableBuilder.pushAll();
+            this.variableBuilder.pushAll();
+
             this.addToXIndex(d);
         }
 

package/dist/src/{scale → gl}/glslScaleGenerator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="external-typings/internmap.js" />
 /**
  *
  * @param {Channel} channel
@@ -9,8 +10,10 @@ export function generateValueGlsl(channel: Channel, value: number | number[] | s
  * @param {Channel} channel
  * @param {any} scale TODO: typing
  * @param {import("../spec/channel.js").ChannelDef} channelDef
+ * @param {Channel[]} [sharedQuantitativeChannels] Channels that share the same quantitative field
  */
-export function generateScaleGlsl(channel: Channel, scale: any, channelDef: import("../spec/channel.js").ChannelDef): {
+export function generateScaleGlsl(channel: Channel, scale: any, channelDef: import("../spec/channel.js").ChannelDef, sharedQuantitativeChannels?: Channel[]): {
+    attributeGlsl: string;
     glsl: string;
     domainUniform: string;
 };
@@ -28,6 +31,20 @@ export function splitHighPrecision(x: number, arr?: number[]): number[];
  * @param {number[]} domain
  */
 export function toHighPrecisionDomainUniform(domain: number[]): number[];
+/**
+ * @typedef {[string, boolean]} FieldKey Tuple: [channel, isQuantitative]]
+ */
+/**
+ * Finds duplicated quantitative fields in the encoding block.
+ * They need to be uploaded to the GPU only once.
+ *
+ * @param {Partial<Record<import("../spec/channel.js").Channel, import("../types/encoder.js").Encoder>>} encoders
+ */
+export function dedupeEncodingFields(encoders: Partial<Record<import("../spec/channel.js").Channel, import("../types/encoder.js").Encoder>>): InternMap<FieldKey, import("../spec/channel.js").Channel[]>;
+/**
+ * @param {import("../spec/channel.js").Channel | import("../spec/channel.js").Channel[]} channel
+ */
+export function makeAttributeName(channel: import("../spec/channel.js").Channel | import("../spec/channel.js").Channel[]): string;
 export const ATTRIBUTE_PREFIX: "attr_";
 export const DOMAIN_PREFIX: "uDomain_";
 export const RANGE_PREFIX: "range_";
@@ -42,4 +59,9 @@ export type VectorizedValue = string & {
     type: string;
     numComponents: number;
 };
+/**
+ * Tuple: [channel, isQuantitative]]
+ */
+export type FieldKey = [string, boolean];
+import { InternMap } from "internmap";
 //# sourceMappingURL=glslScaleGenerator.d.ts.map

package/dist/src/gl/glslScaleGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glslScaleGenerator.d.ts","sourceRoot":"","sources":["../../../src/gl/glslScaleGenerator.js"],"names":[],"mappings":";AAmDA;;;;GAIG;AACH,2CAHW,OAAO,SACP,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,UAsC9C;AAED;;;;;;GAMG;AAEH,2CANW,OAAO,SACP,GAAG,cACH,OAAO,oBAAoB,EAAE,UAAU,+BACvC,OAAO,EAAE;;;;EAmRnB;AA+FD;;;GAGG;AACH,2CAFW,MAAM,WAIhB;AAOD;;;GAGG;AACH,sCAHW,MAAM,QACN,MAAM,EAAE,YAYlB;AAYD;;GAEG;AACH,qDAFW,MAAM,EAAE,YAIlB;AAED;;GAEG;AAEH;;;;;GAKG;AACH,+CAFW,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CAAC,+DA0BtG;AAED;;GAEG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,GAAG,OAAO,oBAAoB,EAAE,OAAO,EAAE,UAIvF;AAvhBD,uCAAwC;AACxC,uCAAwC;AACxC,oCAAqC;AACrC,6CAA8C;AAC9C,kDAAmD;AACnD,oDAAqD;sBAMxC,OAAO,oBAAoB,EAAE,OAAO;;;;8BAsXpC,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;uBA8GhD,CAAC,MAAM,EAAE,OAAO,CAAC;0BAjfJ,WAAW"}

package/dist/src/{scale → gl}/glslScaleGenerator.js

@@ -14,8 +14,10 @@ import {
     isDiscreteChannel,
     getPrimaryChannel,
     isValueDef,
+    isFieldDef,
 } from "../encoder/encoder.js";
-import { peek } from "../utils/arrayUtils.js";
+import { asArray, peek } from "../utils/arrayUtils.js";
+import { InternMap } from "internmap";
 
 export const ATTRIBUTE_PREFIX = "attr_";
 export const DOMAIN_PREFIX = "uDomain_";
@@ -95,9 +97,15 @@ ${vec.type} ${SCALED_FUNCTION_PREFIX}${channel}() {
  * @param {Channel} channel
  * @param {any} scale TODO: typing
  * @param {import("../spec/channel.js").ChannelDef} channelDef
+ * @param {Channel[]} [sharedQuantitativeChannels] Channels that share the same quantitative field
  */
 // eslint-disable-next-line complexity
-export function generateScaleGlsl(channel, scale, channelDef) {
+export function generateScaleGlsl(
+    channel,
+    scale,
+    channelDef,
+    sharedQuantitativeChannels = [channel]
+) {
     if (isValueDef(channelDef)) {
         throw new Error(
             `Cannot create scale for "value": ${JSON.stringify(channelDef)}`
@@ -109,7 +117,8 @@ export function generateScaleGlsl(channel, scale, channelDef) {
     }
 
     const primary = getPrimaryChannel(channel);
-    const attributeName = ATTRIBUTE_PREFIX + channel;
+    const attributeName =
+        ATTRIBUTE_PREFIX + makeAttributeName(sharedQuantitativeChannels);
     const domainUniformName = DOMAIN_PREFIX + primary;
     const rangeName = RANGE_PREFIX + primary;
 
@@ -270,11 +279,9 @@ export function generateScaleGlsl(channel, scale, channelDef) {
         interpolate = `getDiscreteColor(${textureUniformName}, int(transformed)).r`;
     }
 
-    if (isDatumDef(channelDef)) {
-        glsl.push(`uniform highp ${attributeType} ${attributeName};`);
-    } else {
-        glsl.push(`in highp ${attributeType} ${attributeName};`);
-    }
+    const attributeGlsl = isDatumDef(channelDef)
+        ? `uniform highp ${attributeType} ${attributeName};`
+        : `in highp ${attributeType} ${attributeName};`;
 
     /** @type {string[]} Channel's scale function*/
     const scaleBody = [];
@@ -361,6 +368,7 @@ ${returnType} ${SCALED_FUNCTION_PREFIX}${channel}() {
     }
 
     return {
+        attributeGlsl,
         glsl: concatenated,
         domainUniform,
     };
@@ -504,3 +512,46 @@ function exactSplitHighPrecision(x) {
 export function toHighPrecisionDomainUniform(domain) {
     return [...exactSplitHighPrecision(domain[0]), domain[1] - domain[0]];
 }
+
+/**
+ * @typedef {[string, boolean]} FieldKey Tuple: [channel, isQuantitative]]
+ */
+
+/**
+ * Finds duplicated quantitative fields in the encoding block.
+ * They need to be uploaded to the GPU only once.
+ *
+ * @param {Partial<Record<import("../spec/channel.js").Channel, import("../types/encoder.js").Encoder>>} encoders
+ */
+export function dedupeEncodingFields(encoders) {
+    /**
+     * Value: an array of channels
+     * @type {InternMap<FieldKey, import("../spec/channel.js").Channel[]>}
+     */
+    const deduped = new InternMap([], JSON.stringify);
+
+    for (const [channel, encoder] of Object.entries(encoders)) {
+        const channelDef = encoder.channelDef;
+        if (isFieldDef(channelDef)) {
+            const field = channelDef.field;
+
+            /** @type {[string, boolean]} */
+            const key = [
+                field,
+                encoder.scale
+                    ? isContinuous(encoder.scale.type) ?? false
+                    : false,
+            ];
+
+            deduped.set(key, [...(deduped.get(key) ?? []), channel]);
+        }
+    }
+    return deduped;
+}
+
+/**
+ * @param {import("../spec/channel.js").Channel | import("../spec/channel.js").Channel[]} channel
+ */
+export function makeAttributeName(channel) {
+    return asArray(channel).join("_");
+}

package/dist/src/gl/webGLHelper.d.ts

@@ -32,16 +32,11 @@ export default class WebGLHelper {
     }, clearColor?: string);
     _container: HTMLElement;
     _sizeSource: () => {
-        width: number;
-        height: number;
+        width: any;
+        height: any;
     };
     /** @type {Map<string, WebGLShader>} */
     _shaderCache: Map<string, WebGLShader>;
-    /** @type {{ type: string, listener: function}[]} */
-    _listeners: {
-        type: string;
-        listener: Function;
-    }[];
     /** @type {WeakMap<import("../view/scaleResolution.js").default, WebGLTexture>} */
     rangeTextures: WeakMap<import("../view/scaleResolution.js").default, WebGLTexture>;
     canvas: HTMLCanvasElement;
@@ -49,13 +44,12 @@ export default class WebGLHelper {
     /** @type {import("twgl.js").AttachmentOptions[]} */
     _pickingAttachmentOptions: import("twgl.js").AttachmentOptions[];
     _pickingBufferInfo: import("twgl.js").FramebufferInfo;
-    _resizeObserver: ResizeObserver;
     /** @type {[number, number, number, number]} */
     _clearColor: [number, number, number, number];
     invalidateSize(): void;
     _logicalCanvasSize: {
-        width: number;
-        height: number;
+        width: any;
+        height: any;
     };
     _updateDpr(): void;
     dpr: number;
@@ -84,18 +78,9 @@ export default class WebGLHelper {
      * Returns the canvas size in logical pixels (without devicePixelRatio correction)
      */
     getLogicalCanvasSize(): {
-        width: number;
-        height: number;
+        width: any;
+        height: any;
     };
-    /**
-     * @param {"render"|"resize"} eventType
-     * @param {function} listener
-     */
-    addEventListener(eventType: "render" | "resize", listener: Function): void;
-    /**
-     * @param {string} eventType
-     */
-    _emit(eventType: string): void;
     /**
      *
      * @param {number} x

package/dist/src/gl/webGLHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA6bA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAleD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,EA2FhB;IAxFG,wBAA2B;IAC3B,mBAPa;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAOf;IAE7B,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,oDAAoD;IACpD,YADW;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,WAAU;KAAC,EAAE,CAC5B;IAEpB,kFAAkF;IAClF,eADW,QAAQ,OAAO,4BAA4B,EAAE,OAAO,EAAE,YAAY,CAAC,CAC5C;IAuClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAMD,gCAGE;IAQF,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAGC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MA0BC;IAED;;;OAGG;IACH,4BAHW,QAAQ,GAAC,QAAQ,4BAK3B;IAED;;OAEG;IACH,iBAFW,MAAM,QAQhB;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA4GjB;CACJ"}
+{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA8ZA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAncD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,EAmFhB;IAhFG,wBAA2B;IAC3B;;;MAKO;IAEP,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,kFAAkF;IAClF,eADW,QAAQ,OAAO,4BAA4B,EAAE,OAAO,EAAE,YAAY,CAAC,CAC5C;IAuClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAOD,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAEC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MAuBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA4GjB;CACJ"}

package/dist/src/gl/webGLHelper.js

@@ -20,7 +20,7 @@ import {
     createDiscreteTexture,
     createInterpolatedColorTexture,
     createSchemeTexture,
-} from "../scale/colorUtils.js";
+} from "./colorUtils.js";
 import {
     getDiscreteRangeMapper,
     isColorChannel,
@@ -39,14 +39,16 @@ export default class WebGLHelper {
      */
     constructor(container, sizeSource, clearColor) {
         this._container = container;
-        this._sizeSource = sizeSource;
+        this._sizeSource =
+            sizeSource ??
+            (() => ({
+                width: undefined,
+                height: undefined,
+            }));
 
         /** @type {Map<string, WebGLShader>} */
         this._shaderCache = new Map();
 
-        /** @type {{ type: string, listener: function}[]} */
-        this._listeners = [];
-
         /** @type {WeakMap<import("../view/scaleResolution.js").default, WebGLTexture>} */
         this.rangeTextures = new WeakMap();
 
@@ -108,16 +110,6 @@ export default class WebGLHelper {
 
         this.adjustGl();
 
-        // TODO: Size should be observed only if the content is not absolutely sized
-        this._resizeObserver = new ResizeObserver((entries) => {
-            this.invalidateSize();
-            this._emit("resize");
-        });
-        this._resizeObserver.observe(this._container);
-
-        // TODO: Observe devicePixelRatio
-        // https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes
-
         this._updateDpr();
 
         /** @type {[number, number, number, number]} */
@@ -188,7 +180,6 @@ export default class WebGLHelper {
     }
 
     finalize() {
-        this._resizeObserver.unobserve(this._container);
         this.canvas.remove();
     }
 
@@ -214,10 +205,7 @@ export default class WebGLHelper {
         }
 
         // TODO: The size should never be smaller than the minimum content size!
-        const contentSize = this._sizeSource?.() ?? {
-            width: undefined,
-            height: undefined,
-        };
+        const contentSize = this._sizeSource();
 
         const cs = window.getComputedStyle(this._container, null);
         const width =
@@ -236,25 +224,6 @@ export default class WebGLHelper {
         return this._logicalCanvasSize;
     }
 
-    /**
-     * @param {"render"|"resize"} eventType
-     * @param {function} listener
-     */
-    addEventListener(eventType, listener) {
-        this._listeners.push({ type: eventType, listener });
-    }
-
-    /**
-     * @param {string} eventType
-     */
-    _emit(eventType) {
-        for (const entry of this._listeners) {
-            if (entry.type === eventType) {
-                entry.listener();
-            }
-        }
-    }
-
     /**
      *
      * @param {number} x

package/dist/src/img/90-ring-with-bg.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}</style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/></svg>

package/dist/src/img/README.md

@@ -0,0 +1,5 @@
+# Image assets
+
+## Spinner svg
+
+Spinner: 90-ring-with-bg.svg, MIT License, https://github.com/n3r4zzurr0/svg-spinners

package/dist/src/marks/link.d.ts

@@ -1,4 +1,11 @@
 export default class LinkMark extends Mark {
+    /**
+     * Only available if "WebGL Draft Extensions" is enabled in chrome://flags
+     * But seems to work.
+     *
+     * @private
+     */
+    private _baseInstanceExt;
     arrays: {
         [k: string]: {
             data: any;

package/dist/src/marks/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAWA;IA+HQ;;;;;;MAKC;CA2DR;iBArMgB,WAAW"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAWA;IA+BQ;;;;;OAKG;IACH,yBAEC;IAkGD;;;;;;MAKC;CAoFR;iBAxOgB,WAAW"}

package/dist/src/marks/link.js

@@ -1,6 +1,6 @@
-import { drawBufferInfo, setBuffersAndAttributes } from "twgl.js";
-import VERTEX_SHADER from "../gl/link.vertex.glsl.js";
-import FRAGMENT_SHADER from "../gl/link.fragment.glsl.js";
+import { setBuffersAndAttributes } from "twgl.js";
+import VERTEX_SHADER from "./link.vertex.glsl.js";
+import FRAGMENT_SHADER from "./link.fragment.glsl.js";
 import { LinkVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
@@ -39,6 +39,16 @@ export default class LinkMark extends Mark {
                 orient: "vertical",
             })
         );
+
+        /**
+         * Only available if "WebGL Draft Extensions" is enabled in chrome://flags
+         * But seems to work.
+         *
+         * @private
+         */
+        this._baseInstanceExt = this.gl.getExtension(
+            "WEBGL_draw_instanced_base_vertex_base_instance"
+        );
     }
 
     getAttributes() {
@@ -154,6 +164,18 @@ export default class LinkMark extends Mark {
 
         ops.push(() => this.bindOrSetMarkUniformBlock());
 
+        if (this._baseInstanceExt) {
+            ops.push(() =>
+                setBuffersAndAttributes(
+                    this.gl,
+                    this.programInfo,
+                    this.vertexArrayInfo
+                )
+            );
+        } else {
+            ops.push(() => this.gl.bindVertexArray(null));
+        }
+
         return ops;
     }
 
@@ -163,42 +185,55 @@ export default class LinkMark extends Mark {
     render(options) {
         const gl = this.gl;
 
-        return this.createRenderCallback((offset, count) => {
-            // We are using instanced drawing here.
-            // However, WebGL does not provide glDrawArraysInstancedBaseInstance and thus,
-            // we have to hack with offsets in vertexAttribPointer
-            // TODO: Use VAOs more intelligently to reduce WebGL calls
-            // TODO: Explore multiDrawArraysInstancedWEBGL
-            // There's also a promising extension draft:
-            // https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/
-            // (and https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/)
-
-            this.gl.bindVertexArray(this.vertexArrayInfo.vertexArrayObject);
-
-            for (const attribInfoObject of Object.entries(
-                this.bufferInfo.attribs
-            )) {
-                const [attribute, attribInfo] = attribInfoObject;
-                if (
-                    attribInfo.buffer &&
-                    attribInfo.numComponents &&
-                    attribInfo.divisor
-                ) {
-                    attribInfo.offset =
-                        offset * this.arrays[attribute].numComponents * 4; // gl.FLOAT in bytes
-                }
-            }
-            setBuffersAndAttributes(gl, this.programInfo, this.bufferInfo);
-
-            drawBufferInfo(
-                gl,
-                this.bufferInfo,
-                gl.TRIANGLE_STRIP,
-                (this.properties.segments + 1) * 2, // number of vertices in a triangle strip
-                0,
-                count
-            );
-        }, options);
+        const arcVertexCount = (this.properties.segments + 1) * 2;
+
+        return this._baseInstanceExt
+            ? this.createRenderCallback((offset, count) => {
+                  // Using the following extension, which, however, is only a draft and
+                  // available if "WebGL Draft Extensions" is enabled in chrome://flags
+                  // https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/
+
+                  this._baseInstanceExt.drawArraysInstancedBaseInstanceWEBGL(
+                      gl.TRIANGLE_STRIP,
+                      0,
+                      arcVertexCount,
+                      count,
+                      offset
+                  );
+              }, options)
+            : this.createRenderCallback((offset, count) => {
+                  // Because vanilla WebGL 2 does not provide glDrawArraysInstancedBaseInstance,
+                  // we have to hack with offsets in vertexAttribPointer
+                  //
+                  // TODO: Use VAOs more intelligently to reduce WebGL calls. In other words,
+                  // reserve one VAO for each facet/sample.
+
+                  for (const attribInfoObject of Object.entries(
+                      this.bufferInfo.attribs
+                  )) {
+                      const [attribute, attribInfo] = attribInfoObject;
+                      if (
+                          attribInfo.buffer &&
+                          attribInfo.numComponents &&
+                          attribInfo.divisor
+                      ) {
+                          attribInfo.offset =
+                              offset * this.arrays[attribute].numComponents * 4; // gl.FLOAT in bytes
+                      }
+                  }
+                  setBuffersAndAttributes(
+                      gl,
+                      this.programInfo,
+                      this.bufferInfo
+                  );
+
+                  gl.drawArraysInstanced(
+                      gl.TRIANGLE_STRIP,
+                      0,
+                      arcVertexCount,
+                      count
+                  );
+              }, options);
     }
 }
 

package/dist/src/marks/mark.d.ts

@@ -125,8 +125,9 @@ export default class Mark {
      * @param {string} vertexShader
      * @param {string} fragmentShader
      * @param {string[]} [extraHeaders]
+     * @protected
      */
-    createAndLinkShaders(vertexShader: string, fragmentShader: string, extraHeaders?: string[]): void;
+    protected createAndLinkShaders(vertexShader: string, fragmentShader: string, extraHeaders?: string[]): void;
     /** @type {string[]} */
     domainUniforms: string[];
     programStatus: {