@genome-spy/core 0.40.0 → 0.42.0

package/dist/src/marks/link.js

@@ -1,4 +1,4 @@
-import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import { setBuffersAndAttributes } from "twgl.js";
 import VERTEX_SHADER from "../gl/link.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/link.fragment.glsl.js";
 import { LinkVertexBuilder } from "../gl/dataToVertices.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() {
@@ -97,17 +107,22 @@ export default class LinkMark extends Mark {
 
         const props = this.properties;
 
-        // TODO: Use uniform block.
-        setUniforms(this.programInfo, {
-            uArcHeightFactor: props.arcHeightFactor,
-            uMinArcHeight: props.minArcHeight,
-            uMinPickingSize: props.minPickingSize,
-            uShape: LINK_SHAPES.indexOf(props.linkShape),
-            uOrient: ORIENTS.indexOf(props.orient),
-            uClampApex: !!props.clampApex,
-            uMaxChordLength: props.maxChordLength,
-            uArcFadingDistance: props.arcFadingDistance || [0, 0],
-        });
+        this.registerMarkUniform(
+            "uArcFadingDistance",
+            props.arcFadingDistance,
+            (x) => x || /** @type {[number, number]} */ ([0, 0])
+        );
+        this.registerMarkUniform("uArcHeightFactor", props.arcHeightFactor);
+        this.registerMarkUniform("uMinArcHeight", props.minArcHeight);
+        this.registerMarkUniform("uMinPickingSize", props.minPickingSize);
+        this.registerMarkUniform("uShape", props.linkShape, (linkShape) =>
+            LINK_SHAPES.indexOf(linkShape)
+        );
+        this.registerMarkUniform("uOrient", props.orient, (orient) =>
+            ORIENTS.indexOf(orient)
+        );
+        this.registerMarkUniform("uClampApex", props.clampApex, (x) => !!x);
+        this.registerMarkUniform("uMaxChordLength", props.maxChordLength);
     }
 
     updateGraphicsData() {
@@ -141,50 +156,84 @@ export default class LinkMark extends Mark {
         this.updateBufferInfo(vertexData);
     }
 
+    /**
+     * @param {import("../types/rendering.js").GlobalRenderingOptions} options
+     */
+    prepareRender(options) {
+        const ops = super.prepareRender(options);
+
+        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;
+    }
+
     /**
      * @param {import("./mark.js").MarkRenderingOptions} options
      */
     render(options) {
         const gl = this.gl;
 
-        // TODO: Vertical clipping in faceted view
-
-        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

@@ -1,4 +1,9 @@
 /// <reference types="external-typings/internmap.js" />
+/**
+ * @param {any} x
+ * @returns {x is import("../spec/mark.js").ExprRef}
+ */
+export function isExprRef(x: any): x is import("../spec/mark.js").ExprRef;
 export const SAMPLE_FACET_UNIFORM: "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE: "SAMPLE_FACET_TEXTURE";
 /**
@@ -20,6 +25,7 @@ export default class Mark {
      * @typedef {import("../spec/channel.js").Channel} Channel
      * @typedef {import("../spec/channel.js").Encoding} Encoding
      * @typedef {import("../spec/channel.js").ValueDef} ValueDef
+     * @typedef {import("../spec/mark.js").ExprRef} ExprRef
      */
     /**
      * @param {import("../view/unitView.js").default} unitView
@@ -40,6 +46,18 @@ export default class Mark {
     domainUniformInfo: import("twgl.js").UniformBlockInfo;
     /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
     viewUniformInfo: import("twgl.js").UniformBlockInfo;
+    /**
+     * Uniforms related to the specific mark type.
+     * @type {import("twgl.js").UniformBlockInfo}
+     */
+    markUniformInfo: import("twgl.js").UniformBlockInfo;
+    /**
+     * Indicates whether the mark's uniforms have been altered since the last rendering.
+     * If set to true, the uniforms will be sent to the GPU before rendering the next frame.
+
+     * @protected
+     */
+    protected markUniformsAltered: boolean;
     /** @type {RangeMap<any>} keep track of facet locations within the vertex array */
     rangeMap: RangeMap<any>;
     /** @type {MarkConfig} */
@@ -123,6 +141,18 @@ export default class Mark {
      * initialization.
      */
     finalizeGraphicsInitialization(): void;
+    /**
+     * Set a uniform based on a mark property. If the property is an expression,
+     * register a listener to update the uniform when the params referenced by the
+     * expression change.
+     *
+     * @protected
+     * @template T
+     * @param {string} uniformName
+     * @param {T} propValue
+     * @param {(x: Exclude<T, ExprRef>) => any} adjuster
+     */
+    protected registerMarkUniform<T>(uniformName: string, propValue: T, adjuster?: (x: Exclude<T, import("../spec/mark.js").ExprRef>) => any): void;
     _setDatums(): void;
     /**
      * Delete WebGL buffers etc.
@@ -147,6 +177,10 @@ export default class Mark {
      * TODO: Check if selection (when it's implemented) is enabled
      */
     isPickingParticipant(): boolean;
+    /**
+     * @protected
+     */
+    protected bindOrSetMarkUniformBlock(): void;
     /**
      * Configures the WebGL state for rendering the mark instances.
      * A separate preparation stage allows for efficient rendering of faceted

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

@@ -1 +1 @@
-{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":";AAwCA,0DAA2D;AAC3D,0DAA2D;AAE3D;;;;;;;;;;;;GAYG;AACH;IACI;;;;;OAKG;IAEH;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EAoE/C;IAjEG,gDAAwB;IAExB,oEAAoE;IACpE,UADW,OAAO,MAAM,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CACvC;IAIzB,0FAA0F;IAC1F,YADW,OAAO,SAAS,EAAE,UAAU,GAAG;QAAE,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAAE,CAC7C;IAE3B,0DAA0D;IAC1D,aADW,OAAO,SAAS,EAAE,WAAW,CACZ;IAE5B,8DAA8D;IAC9D,iBADW,OAAO,SAAS,EAAE,eAAe,CACZ;IAEhC,+DAA+D;IAC/D,mBADW,OAAO,SAAS,EAAE,gBAAgB,CACX;IAElC,+DAA+D;IAC/D,iBADW,OAAO,SAAS,EAAE,gBAAgB,CACb;IAEhC,kFAAkF;IAClF,UADW,SAAS,GAAG,CAAC,CACM;IAG9B,yBAAyB;IACzB,wDAqBC;IAED;;;;;;;;OAQG;IACH,mEAKC;IAGL,sBAEC;IAED;;;;;;;OAOG;IACH,iBAFa,MAAM,EAAE,CAKpB;IAED;;OAEG;IACH,+DAWC;IAED;;OAEG;IACH,oEAcC;IAED;;;;;OAKG;IACH,oHAEC;IAED;;;;OAIG;IACH,8DAyCC;IAED,wDAEC;IAED,8CAEC;IAED,uBAEC;IAED;;;OAGG;IACH,2BAEC;IAED;;OAEG;IACH,oCAEC;IAED;;OAEG;IACH,2BAEC;IAED,sEAeC;IAED;;;;;OAKG;IACH,mCAJW,MAAM,kBACN,MAAM,iBACN,MAAM,EAAE,QA+FlB;IAtFG,uBAAuB;IACvB,gBADW,MAAM,EAAE,CACK;IAgFxB;;;;;;MAIC;IAGL;;;OAGG;IACH,uCA4CC;IAED,mBAgBC;IAED;;OAEG;IACH,2BAiBC;IAED;;;OAGG;IACH,6BAFW,GAAG,QAoCb;IAED,yBAAyB;IACzB,uDAEC;IAED,yBAAyB;IACzB,iCAEC;IAED,gCAEC;IAED,+BAEC;IAED,yCAEC;IAED;;;;;OAKG;IACH,gCAcC;IAED;;;;;;;;OAQG;IAEH,uBAJW,OAAO,uBAAuB,EAAE,sBAAsB,GACpD,CAAC,MAAM,IAAI,CAAC,EAAE,CA+H1B;IAED;;;;;;OAMG;IACH,qCAJW,oBAAoB,GAClB,OAAO,CAqCnB;IAED;;;;;;;OAOG;IACH,gBAJW,oBAAoB,SACP,IAAI,CAM3B;IAED;;;OAGG;IACH,2BAHW,YAAY,WACZ,OAAO,WAAW,EAAE,oBAAoB,cAiElD;IAED;;;;;;OAMG;IACH,oBAJW,OAAO,6BAA6B,EAAE,OAAO,aAC7C,OAAO,6BAA6B,EAAE,OAAO,GAC3C,OAAO,CAuHnB;IAED;;;;;;;;;OASG;IACH,qBAJW,MAAM,KACN,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAIf;CACJ;+BA95BY,OAAO,uBAAuB,EAAE,gBAAgB;;;;;;wBAEnD,OAAO;;mCAEJ,gBAAgB,GAAG,qBAAqB;oCAG1C,MAAM,SACN,MAAM;AAw5BjB;;;GAGG;AACH;IACI,cAEC;IAkBD;;;OAGG;IACH,2BAFW,IAAI,CAAC,EAAE,OAAO,yBAAyB,EAAE,UAAU,CAAC,QAM9D;CACJ;0BA38ByB,WAAW"}
+{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":"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"}

package/dist/src/marks/mark.js

@@ -1,4 +1,5 @@
 import {
+    bindUniformBlock,
     createBufferInfoFromArrays,
     createProgramInfoFromProgram,
     createUniformBlockInfo,
@@ -37,6 +38,7 @@ import { isScalar } from "../utils/variableTools.js";
 import { InternMap } from "internmap";
 import scaleNull from "../utils/scaleNull.js";
 import ViewError from "../view/viewError.js";
+import { isString } from "vega-util";
 
 export const SAMPLE_FACET_UNIFORM = "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
@@ -60,6 +62,7 @@ export default class Mark {
      * @typedef {import("../spec/channel.js").Channel} Channel
      * @typedef {import("../spec/channel.js").Encoding} Encoding
      * @typedef {import("../spec/channel.js").ValueDef} ValueDef
+     * @typedef {import("../spec/mark.js").ExprRef} ExprRef
      */
 
     /**
@@ -88,6 +91,20 @@ export default class Mark {
         /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
         this.viewUniformInfo = undefined;
 
+        /**
+         * Uniforms related to the specific mark type.
+         * @type {import("twgl.js").UniformBlockInfo}
+         */
+        this.markUniformInfo = undefined;
+
+        /**
+         * Indicates whether the mark's uniforms have been altered since the last rendering.
+         * If set to true, the uniforms will be sent to the GPU before rendering the next frame.
+
+         * @protected
+         */
+        this.markUniformsAltered = true;
+
         /** @type {RangeMap<any>} keep track of facet locations within the vertex array */
         this.rangeMap = new RangeMap();
 
@@ -304,7 +321,7 @@ export default class Mark {
         const attributes = this.getAttributes();
 
         // For debugging
-        extraHeaders.push("// view: " + this.unitView.getPathString());
+        const debugHeader = "// view: " + this.unitView.getPathString();
 
         // TODO: This is a temporary variable, don't store it in the mark object
         /** @type {string[]} */
@@ -366,6 +383,7 @@ export default class Mark {
 
         const vertexParts = [
             vertexPrecision,
+            debugHeader,
             ...extraHeaders,
             GLSL_COMMON,
             GLSL_SCALES,
@@ -377,6 +395,7 @@ export default class Mark {
         ];
 
         const fragmentParts = [
+            debugHeader,
             ...extraHeaders,
             GLSL_COMMON,
             GLSL_PICKING_FRAGMENT,
@@ -433,6 +452,12 @@ export default class Mark {
             "View"
         );
 
+        this.markUniformInfo = createUniformBlockInfo(
+            this.gl,
+            this.programInfo,
+            "Mark"
+        );
+
         this.gl.useProgram(this.programInfo.program);
 
         this._setDatums();
@@ -445,6 +470,42 @@ export default class Mark {
         });
     }
 
+    /**
+     * Set a uniform based on a mark property. If the property is an expression,
+     * register a listener to update the uniform when the params referenced by the
+     * expression change.
+     *
+     * @protected
+     * @template T
+     * @param {string} uniformName
+     * @param {T} propValue
+     * @param {(x: Exclude<T, ExprRef>) => any} adjuster
+     */
+    registerMarkUniform(uniformName, propValue, adjuster = (x) => x) {
+        const uniformSetter = this.markUniformInfo.setters[uniformName];
+
+        if (isExprRef(propValue)) {
+            const fn = this.unitView.context.paramBroker.createExpression(
+                propValue.expr
+            );
+
+            const set = () => {
+                uniformSetter(adjuster(fn(null)));
+                this.markUniformsAltered = true;
+            };
+
+            // Register a listener ...
+            fn.addListener(set);
+            // ... and set the initial value
+            set();
+        } else {
+            uniformSetter(
+                adjuster(/** @type {Exclude<T, ExprRef>} */ (propValue))
+            );
+            this.markUniformsAltered = true;
+        }
+    }
+
     _setDatums() {
         for (const [channel, channelDef] of Object.entries(this.encoding)) {
             if (isDatumDef(channelDef)) {
@@ -569,6 +630,18 @@ export default class Mark {
         return true;
     }
 
+    /**
+     * @protected
+     */
+    bindOrSetMarkUniformBlock() {
+        if (this.markUniformsAltered) {
+            setUniformBlock(this.gl, this.programInfo, this.markUniformInfo);
+            this.markUniformsAltered = false;
+        } else {
+            bindUniformBlock(this.gl, this.programInfo, this.markUniformInfo);
+        }
+    }
+
     /**
      * Configures the WebGL state for rendering the mark instances.
      * A separate preparation stage allows for efficient rendering of faceted
@@ -1006,3 +1079,12 @@ class RangeMap extends InternMap {
         }
     }
 }
+
+// TODO: Find a better place for this function
+/**
+ * @param {any} x
+ * @returns {x is import("../spec/mark.js").ExprRef}
+ */
+export function isExprRef(x) {
+    return typeof x === "object" && "expr" in x && isString(x.expr);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"pointMark.d.ts","sourceRoot":"","sources":["../../../src/marks/pointMark.js"],"names":[],"mappings":"AAaA;IAsGY,oCAMC;IAwCT,mCAQC;IAED;;OAEG;IACH,wDASC;IAED,+BAoBC;CA6CJ;iBApPgB,WAAW"}
+{"version":3,"file":"pointMark.d.ts","sourceRoot":"","sources":["../../../src/marks/pointMark.js"],"names":[],"mappings":"AAkBA;IAsGY,oCAMC;IA2CT,mCAQC;IAED;;OAEG;IACH,wDASC;IAED,+BAoBC;CAiDJ;iBA3PgB,WAAW"}

package/dist/src/marks/pointMark.js

@@ -1,8 +1,13 @@
-import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import {
+    drawBufferInfo,
+    setBlockUniforms,
+    setBuffersAndAttributes,
+} from "twgl.js";
 import { quantileSorted } from "d3-array";
 import { PointVertexBuilder } from "../gl/dataToVertices.js";
 import VERTEX_SHADER from "../gl/point.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/point.fragment.glsl.js";
+import COMMON_SHADER from "../gl/point.common.glsl.js";
 
 import Mark from "./mark.js";
 import { sampleIterable } from "../data/transforms/sample.js";
@@ -126,7 +131,9 @@ export default class PointMark extends Mark {
 
     async initializeGraphics() {
         await super.initializeGraphics();
-        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -135,9 +142,10 @@ export default class PointMark extends Mark {
         this.gl.useProgram(this.programInfo.program);
 
         const props = this.properties;
-        setUniforms(this.programInfo, {
-            uInwardStroke: props.inwardStroke,
-            uGradientStrength: props.fillGradientStrength,
+
+        setBlockUniforms(this.markUniformInfo, {
+            uInwardStroke: !!props.inwardStroke,
+            uGradientStrength: +props.fillGradientStrength,
             uMaxRelativePointDiameter: 1 - 2 * props.sampleFacetPadding,
         });
     }
@@ -211,13 +219,17 @@ export default class PointMark extends Mark {
     prepareRender(options) {
         const ops = super.prepareRender(options);
 
-        ops.push(() =>
-            setUniforms(this.programInfo, {
+        ops.push(() => {
+            // TODO: Use bindUniformBlock if none of the uniform has changed
+            setBlockUniforms(this.markUniformInfo, {
                 uMaxPointSize: this._getMaxPointSize(),
                 uScaleFactor: this._getGeometricScaleFactor(),
                 uSemanticThreshold: this.getSemanticThreshold(),
-            })
-        );
+            });
+            this.markUniformsAltered = true;
+        });
+
+        ops.push(() => this.bindOrSetMarkUniformBlock());
 
         ops.push(() =>
             setBuffersAndAttributes(

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

@@ -1,6 +1,4 @@
 export default class RectMark extends Mark {
-    _isRoundedCorners(): number;
-    _isStroked(): boolean;
     /**
      * Finds a datum that overlaps the given value on the x domain.
      * The result is unspecified if multiple data are found.
@@ -13,6 +11,7 @@ export default class RectMark extends Mark {
      * @override
      */
     override findDatumAt(facetId: any, x: import("../spec/channel.js").Scalar): any;
+    #private;
 }
 import Mark from "./mark.js";
 //# sourceMappingURL=rectMark.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"rectMark.d.ts","sourceRoot":"","sources":["../../../src/marks/rectMark.js"],"names":[],"mappings":"AAYA;IAsGI,4BASC;IAED,sBAGC;IA4FD;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;CACJ;iBAzPgB,WAAW"}
+{"version":3,"file":"rectMark.d.ts","sourceRoot":"","sources":["../../../src/marks/rectMark.js"],"names":[],"mappings":"AAYA;IA2NI;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;;CACJ;iBApQgB,WAAW"}

package/dist/src/marks/rectMark.js

@@ -1,4 +1,4 @@
-import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import { drawBufferInfo, setBuffersAndAttributes } from "twgl.js";
 import VERTEX_SHADER from "../gl/rect.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/rect.fragment.glsl.js";
 import { RectVertexBuilder } from "../gl/dataToVertices.js";
@@ -76,8 +76,8 @@ export default class RectMark extends Mark {
                 this,
                 "opaque",
                 () =>
-                    !this._isRoundedCorners() &&
-                    !this._isStroked() &&
+                    !this.#isRoundedCorners() &&
+                    !this.#isStroked() &&
                     isValueDef(this.encoding.fillOpacity) &&
                     this.encoding.fillOpacity.value == 1.0 &&
                     this.properties.minOpacity == 1.0
@@ -112,7 +112,7 @@ export default class RectMark extends Mark {
         // TODO: Pop the previous buffers
     }
 
-    _isRoundedCorners() {
+    #isRoundedCorners() {
         const p = this.properties;
         return (
             p.cornerRadius ||
@@ -123,7 +123,7 @@ export default class RectMark extends Mark {
         );
     }
 
-    _isStroked() {
+    #isStroked() {
         const sw = this.encoding.strokeWidth;
         return !(isValueDef(sw) && !sw.value);
     }
@@ -133,10 +133,10 @@ export default class RectMark extends Mark {
 
         /** @type {string[]} */
         const defines = [];
-        if (this._isRoundedCorners()) {
+        if (this.#isRoundedCorners()) {
             defines.push("ROUNDED_CORNERS");
         }
-        if (this._isStroked()) {
+        if (this.#isStroked()) {
             defines.push("STROKED");
         }
 
@@ -154,16 +154,25 @@ export default class RectMark extends Mark {
 
         const props = this.properties;
 
-        setUniforms(this.programInfo, {
-            uMinSize: [props.minWidth, props.minHeight], // in pixels
-            uMinOpacity: props.minOpacity,
-            uCornerRadii: [
-                props.cornerRadiusTopRight ?? props.cornerRadius,
-                props.cornerRadiusBottomRight ?? props.cornerRadius,
-                props.cornerRadiusTopLeft ?? props.cornerRadius,
-                props.cornerRadiusBottomLeft ?? props.cornerRadius,
-            ],
-        });
+        this.registerMarkUniform("uMinWidth", props.minWidth);
+        this.registerMarkUniform("uMinHeight", props.minHeight);
+        this.registerMarkUniform("uMinOpacity", props.minOpacity);
+        this.registerMarkUniform(
+            "uCornerRadiusTopRight",
+            props.cornerRadiusTopRight ?? props.cornerRadius ?? 0
+        );
+        this.registerMarkUniform(
+            "uCornerRadiusBottomRight",
+            props.cornerRadiusBottomRight ?? props.cornerRadius ?? 0
+        );
+        this.registerMarkUniform(
+            "uCornerRadiusTopLeft",
+            props.cornerRadiusTopLeft ?? props.cornerRadius ?? 0
+        );
+        this.registerMarkUniform(
+            "uCornerRadiusBottomLeft",
+            props.cornerRadiusBottomLeft ?? props.cornerRadius ?? 0
+        );
     }
 
     updateGraphicsData() {
@@ -190,6 +199,8 @@ export default class RectMark extends Mark {
     prepareRender(options) {
         const ops = super.prepareRender(options);
 
+        ops.push(() => this.bindOrSetMarkUniformBlock());
+
         ops.push(() =>
             setBuffersAndAttributes(
                 this.gl,

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

@@ -1 +1 @@
-{"version":3,"file":"rule.d.ts","sourceRoot":"","sources":["../../../src/marks/rule.js"],"names":[],"mappings":"AAYA;IAOQ,wBAAwB;IA4GpB,0BAOE;CAmFb;iBAzNgB,WAAW"}
+{"version":3,"file":"rule.d.ts","sourceRoot":"","sources":["../../../src/marks/rule.js"],"names":[],"mappings":"AAcA;IAOQ,wBAAwB;IA4GpB,0BAOE;CA4Fb;iBApOgB,WAAW"}

package/dist/src/marks/rule.js

@@ -2,11 +2,13 @@ import Mark from "./mark.js";
 import {
     createTexture,
     drawBufferInfo,
+    setBlockUniforms,
     setBuffersAndAttributes,
     setUniforms,
 } from "twgl.js";
 import VERTEX_SHADER from "../gl/rule.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/rule.fragment.glsl.js";
+import COMMON_SHADER from "../gl/rule.common.glsl.js";
 import { RuleVertexBuilder } from "../gl/dataToVertices.js";
 import { isChannelDefWithScale } from "../encoder/encoder.js";
 
@@ -136,7 +138,9 @@ export default class RuleMark extends Mark {
             this.dashTextureSize = textureData.length; // Not needed with WebGL2
         }
 
-        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -146,11 +150,17 @@ export default class RuleMark extends Mark {
 
         const props = this.properties;
 
-        setUniforms(this.programInfo, {
-            uMinLength: props.minLength,
-            uDashTextureSize: this.dashTextureSize,
-            uStrokeCap: ["butt", "square", "round"].indexOf(props.strokeCap),
+        this.registerMarkUniform("uMinLength", props.minLength);
+        this.registerMarkUniform(
+            "uStrokeCap",
+            props.strokeCap ?? "butt",
+            (cap) => ["butt", "square", "round"].indexOf(cap)
+        );
+
+        setBlockUniforms(this.markUniformInfo, {
+            uDashTextureSize: +this.dashTextureSize,
         });
+        this.markUniformsAltered = true;
     }
 
     updateGraphicsData() {
@@ -177,11 +187,12 @@ export default class RuleMark extends Mark {
     prepareRender(options) {
         const ops = super.prepareRender(options);
 
+        ops.push(() => this.bindOrSetMarkUniformBlock());
+
         if (this.dashTexture) {
             ops.push(() =>
                 setUniforms(this.programInfo, {
                     uDashTexture: this.dashTexture,
-                    uStrokeDashOffset: this.properties.strokeDashOffset,
                 })
             );
         }

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AA0BA;;;;;;;GAOG;AACH;IAsDQ,oDAMmD;CAwL1D;iBA/QgB,WAAW"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;GAOG;AACH;IAsDQ,oDAMmD;CAgM1D;iBAvRgB,WAAW"}