@genome-spy/core 0.14.0

package/src/gl/includes/fp64-arithmetic.glsl

@@ -0,0 +1,187 @@
+// Adapted from luma.gl - https://github.com/uber/luma.gl
+
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+uniform float ONE;
+
+/*
+About LUMA_FP64_CODE_ELIMINATION_WORKAROUND
+
+The purpose of this workaround is to prevent shader compilers from
+optimizing away necessary arithmetic operations by swapping their sequences
+or transform the equation to some 'equivalent' from.
+
+The method is to multiply an artifical variable, ONE, which will be known to
+the compiler to be 1 only at runtime. The whole expression is then represented
+as a polynomial with respective to ONE. In the coefficients of all terms, only one a
+and one b should appear
+
+err = (a + b) * ONE^6 - a * ONE^5 - (a + b) * ONE^4 + a * ONE^3 - b - (a + b) * ONE^2 + a * ONE
+*/
+
+// Divide float number to high and low floats to extend fraction bits
+vec2 split(float a) {
+  const float SPLIT = 4097.0;
+  float t = a * SPLIT;
+#if defined(LUMA_FP64_CODE_ELIMINATION_WORKAROUND)
+  float a_hi = t * ONE - (t - a);
+  float a_lo = a * ONE - a_hi;
+#else
+  float a_hi = t - (t - a);
+  float a_lo = a - a_hi;
+#endif
+  return vec2(a_hi, a_lo);
+}
+
+// Divide float number again when high float uses too many fraction bits
+vec2 split2(vec2 a) {
+  vec2 b = split(a.x);
+  b.y += a.y;
+  return b;
+}
+
+// Special sum operation when a > b
+vec2 quickTwoSum(float a, float b) {
+#if defined(LUMA_FP64_CODE_ELIMINATION_WORKAROUND)
+  float sum = (a + b) * ONE;
+  float err = b - (sum - a) * ONE;
+#else
+  float sum = a + b;
+  float err = b - (sum - a);
+#endif
+  return vec2(sum, err);
+}
+
+// General sum operation
+vec2 twoSum(float a, float b) {
+  float s = (a + b);
+#if defined(LUMA_FP64_CODE_ELIMINATION_WORKAROUND)
+  float v = (s * ONE - a) * ONE;
+  float err = (a - (s - v) * ONE) * ONE * ONE * ONE + (b - v);
+#else
+  float v = s - a;
+  float err = (a - (s - v)) + (b - v);
+#endif
+  return vec2(s, err);
+}
+
+vec2 twoSub(float a, float b) {
+  float s = (a - b);
+#if defined(LUMA_FP64_CODE_ELIMINATION_WORKAROUND)
+  float v = (s * ONE - a) * ONE;
+  float err = (a - (s - v) * ONE) * ONE * ONE * ONE - (b + v);
+#else
+  float v = s - a;
+  float err = (a - (s - v)) - (b + v);
+#endif
+  return vec2(s, err);
+}
+
+vec2 twoSqr(float a) {
+  float prod = a * a;
+  vec2 a_fp64 = split(a);
+#if defined(LUMA_FP64_CODE_ELIMINATION_WORKAROUND)
+  float err = ((a_fp64.x * a_fp64.x - prod) * ONE + 2.0 * a_fp64.x *
+    a_fp64.y * ONE * ONE) + a_fp64.y * a_fp64.y * ONE * ONE * ONE;
+#else
+  float err = ((a_fp64.x * a_fp64.x - prod) + 2.0 * a_fp64.x * a_fp64.y) + a_fp64.y * a_fp64.y;
+#endif
+  return vec2(prod, err);
+}
+
+vec2 twoProd(float a, float b) {
+  float prod = a * b;
+  vec2 a_fp64 = split(a);
+  vec2 b_fp64 = split(b);
+  float err = ((a_fp64.x * b_fp64.x - prod) + a_fp64.x * b_fp64.y +
+    a_fp64.y * b_fp64.x) + a_fp64.y * b_fp64.y;
+  return vec2(prod, err);
+}
+
+vec2 sum_fp64(vec2 a, vec2 b) {
+  vec2 s, t;
+  s = twoSum(a.x, b.x);
+  t = twoSum(a.y, b.y);
+  s.y += t.x;
+  s = quickTwoSum(s.x, s.y);
+  s.y += t.y;
+  s = quickTwoSum(s.x, s.y);
+  return s;
+}
+
+vec2 sub_fp64(vec2 a, vec2 b) {
+  vec2 s, t;
+  s = twoSub(a.x, b.x);
+  t = twoSub(a.y, b.y);
+  s.y += t.x;
+  s = quickTwoSum(s.x, s.y);
+  s.y += t.y;
+  s = quickTwoSum(s.x, s.y);
+  return s;
+}
+
+vec2 mul_fp64(vec2 a, vec2 b) {
+  vec2 prod = twoProd(a.x, b.x);
+  // y component is for the error
+  prod.y += a.x * b.y;
+#if defined(LUMA_FP64_HIGH_BITS_OVERFLOW_WORKAROUND)
+  prod = split2(prod);
+#endif
+  prod = quickTwoSum(prod.x, prod.y);
+  prod.y += a.y * b.x;
+#if defined(LUMA_FP64_HIGH_BITS_OVERFLOW_WORKAROUND)
+  prod = split2(prod);
+#endif
+  prod = quickTwoSum(prod.x, prod.y);
+  return prod;
+}
+
+vec2 div_fp64(vec2 a, vec2 b) {
+  float xn = 1.0 / b.x;
+#if defined(LUMA_FP64_HIGH_BITS_OVERFLOW_WORKAROUND)
+  vec2 yn = mul_fp64(a, vec2(xn, 0));
+#else
+  vec2 yn = a * xn;
+#endif
+  float diff = (sub_fp64(a, mul_fp64(b, yn))).x;
+  vec2 prod = twoProd(xn, diff);
+  return sum_fp64(yn, prod);
+}
+
+vec2 sqrt_fp64(vec2 a) {
+  if (a.x == 0.0 && a.y == 0.0) return vec2(0.0, 0.0);
+  if (a.x < 0.0) return vec2(0.0 / 0.0, 0.0 / 0.0);
+
+  float x = 1.0 / sqrt(a.x);
+  float yn = a.x * x;
+#if defined(LUMA_FP64_CODE_ELIMINATION_WORKAROUND)
+  vec2 yn_sqr = twoSqr(yn) * ONE;
+#else
+  vec2 yn_sqr = twoSqr(yn);
+#endif
+  float diff = sub_fp64(a, yn_sqr).x;
+  vec2 prod = twoProd(x * 0.5, diff);
+#if defined(LUMA_FP64_HIGH_BITS_OVERFLOW_WORKAROUND)
+  return sum_fp64(split(yn), prod);
+#else
+  return sum_fp64(vec2(yn, 0.0), prod);
+#endif
+}

package/src/gl/includes/fp64-utils.js

@@ -0,0 +1,132 @@
+// Adapted from luma.gl - https://github.com/visgl/luma.gl
+
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+/**
+ * Calculate WebGL 64 bit float
+ *
+ * @param {number} a the input float number
+ * @param {number[]} [out] the output array. If not supplied, a new array is created.
+ * @param {number} [startIndex] the index in the output array to fill from. Default 0.
+ * @returns {number[]} the fp64 representation of the input number
+ */
+export function fp64ify(a, out = [], startIndex = 0) {
+    const hiPart = Math.fround(a);
+    out[startIndex] = hiPart;
+    out[startIndex + 1] = isFinite(hiPart) ? a - hiPart : 0;
+    return out;
+}
+
+/**
+ * Calculate the low part of a WebGL 64 bit float
+ *
+ * @param {number} a the input float number
+ * @returns {number} the lower 32 bit of the number
+ */
+export function fp64LowPart(a) {
+    return a - Math.fround(a);
+}
+
+export function getPlatformShaderDefines(gl) {
+    const debugInfo = getContextInfo(gl);
+
+    switch (debugInfo.gpuVendor.toLowerCase()) {
+        case "nvidia":
+            return `\
+  #define NVIDIA_GPU
+  // Nvidia optimizes away the calculation necessary for emulated fp64
+  #define LUMA_FP64_CODE_ELIMINATION_WORKAROUND 1
+  `;
+
+        case "intel":
+            return `\
+  #define INTEL_GPU
+  // Intel optimizes away the calculation necessary for emulated fp64
+  #define LUMA_FP64_CODE_ELIMINATION_WORKAROUND 1
+  // Intel's built-in 'tan' function doesn't have acceptable precision
+  #define LUMA_FP32_TAN_PRECISION_WORKAROUND 1
+  // Intel GPU doesn't have full 32 bits precision in same cases, causes overflow
+  #define LUMA_FP64_HIGH_BITS_OVERFLOW_WORKAROUND 1
+  `;
+
+        case "amd":
+            // AMD Does not eliminate fp64 code
+            return `\
+  #define AMD_GPU
+  `;
+
+        default:
+            // We don't know what GPU it is, could be that the GPU driver or
+            // browser is not implementing UNMASKED_RENDERER constant and not
+            // reporting a correct name
+            return `\
+  #define DEFAULT_GPU
+  // Prevent driver from optimizing away the calculation necessary for emulated fp64
+  #define LUMA_FP64_CODE_ELIMINATION_WORKAROUND 1
+  // Intel's built-in 'tan' function doesn't have acceptable precision
+  #define LUMA_FP32_TAN_PRECISION_WORKAROUND 1
+  // Intel GPU doesn't have full 32 bits precision in same cases, causes overflow
+  #define LUMA_FP64_HIGH_BITS_OVERFLOW_WORKAROUND 1
+  `;
+    }
+}
+
+const GL_VENDOR = 0x1f00;
+const GL_RENDERER = 0x1f01;
+const GL_VERSION = 0x1f02;
+const GL_SHADING_LANGUAGE_VERSION = 0x8b8c;
+
+export function getContextInfo(gl) {
+    const info = gl.getExtension("WEBGL_debug_renderer_info");
+    const vendor = gl.getParameter(
+        (info && info.UNMASKED_VENDOR_WEBGL) || GL_VENDOR
+    );
+    const renderer = gl.getParameter(
+        (info && info.UNMASKED_RENDERER_WEBGL) || GL_RENDERER
+    );
+    const gpuVendor = identifyGPUVendor(vendor, renderer);
+    const gpuInfo = {
+        gpuVendor,
+        vendor,
+        renderer,
+        version: gl.getParameter(GL_VERSION),
+        shadingLanguageVersion: gl.getParameter(GL_SHADING_LANGUAGE_VERSION),
+    };
+    return gpuInfo;
+}
+
+function identifyGPUVendor(vendor, renderer) {
+    if (vendor.match(/NVIDIA/i) || renderer.match(/NVIDIA/i)) {
+        return "NVIDIA";
+    }
+    if (vendor.match(/INTEL/i) || renderer.match(/INTEL/i)) {
+        return "INTEL";
+    }
+    if (
+        vendor.match(/AMD/i) ||
+        renderer.match(/AMD/i) ||
+        vendor.match(/ATI/i) ||
+        renderer.match(/ATI/i)
+    ) {
+        return "AMD";
+    }
+    return "UNKNOWN GPU";
+}

package/src/gl/includes/picking.fragment.glsl

@@ -0,0 +1,3 @@
+uniform bool uPickingEnabled;
+
+flat in highp vec4 vPickingColor;

package/src/gl/includes/picking.vertex.glsl

@@ -0,0 +1,29 @@
+/*
+ * Based on concepts presented at:
+ * https://webglfundamentals.org/webgl/lessons/webgl-picking.html
+ * https://deck.gl/docs/developer-guide/custom-layers/picking
+ */
+
+uniform bool uPickingEnabled;
+
+flat out highp vec4 vPickingColor;
+
+/**
+ * Passes the unique id to the fragment shader as a color if picking is enabled.
+ * Returns true if picking is enabled.
+ */
+bool setupPicking() {
+    if (uPickingEnabled) {
+#ifdef uniqueId_DEFINED
+        int id = int(getScaled_uniqueId());
+        // TODO: Take the sign bit into account
+        vPickingColor = vec4(
+            ivec4(id >> 0, id >> 8, id >> 16, 0xFF) & 0xFF
+        ) / float(0xFF);
+#else
+        vPickingColor = vec4(1.0);
+#endif
+        return true;
+    }
+    return false;
+}

package/src/gl/includes/sampleFacet.glsl

@@ -0,0 +1,107 @@
+
+/**
+ * Describes where a sample facet should be shown. Interpolating between the
+ * current and target positions/heights allows for transitioning between facet
+ * configurations.
+ */
+struct SampleFacetPosition {
+    float pos;
+    float height;
+    float targetPos;
+    float targetHeight;
+};
+
+/**
+ * Trasition fraction [0, 1] between the current and target configurations.
+ */
+uniform float uTransitionOffset;
+
+
+// ----------------------------------------------------------------------------
+
+#if !defined(SAMPLE_FACET_UNIFORM) && !defined(SAMPLE_FACET_TEXTURE)
+
+SampleFacetPosition getSampleFacetPos() {
+    return SampleFacetPosition(0.0, 1.0, 0.0, 1.0);
+}
+
+#elif defined(SAMPLE_FACET_UNIFORM)
+
+/**
+ * Location and height of the band on the Y axis on a normalized [0, 1] scale.
+ * Elements: curr pos, curr height, target pos, target height
+ */
+uniform vec4 uSampleFacet;
+
+SampleFacetPosition getSampleFacetPos() {
+    return SampleFacetPosition(
+        1.0 - uSampleFacet.x - uSampleFacet.y,
+        uSampleFacet.y,
+        1.0 - uSampleFacet.z - uSampleFacet.w,
+        uSampleFacet.w
+    );
+}
+
+#elif defined(SAMPLE_FACET_TEXTURE)
+
+uniform sampler2D uSampleFacetTexture;
+
+SampleFacetPosition getSampleFacetPos() {
+    vec4 texel = texelFetch(uSampleFacetTexture, ivec2(int(attr_facetIndex), 0), 0);
+    return SampleFacetPosition(
+        1.0 - texel.r - texel.g,
+        texel.g,
+        1.0 - texel.r - texel.g,
+        texel.g);
+}
+
+#endif
+
+// ----------------------------------------------------------------------------
+
+bool isFacetedSamples(SampleFacetPosition facetPos) {
+    return facetPos != SampleFacetPosition(0.0, 1.0, 0.0, 1.0);
+}
+
+bool isFacetedSamples() {
+    return isFacetedSamples(getSampleFacetPos());
+}
+
+bool isInTransit() {
+    return uTransitionOffset > 0.0;
+}
+
+float getTransitionFraction(float xPos) {
+    return smoothstep(0.0, 0.7 + uTransitionOffset, (xPos - uTransitionOffset) * 2.0);
+}
+
+vec2 applySampleFacet(vec2 pos) {
+    SampleFacetPosition facetPos = getSampleFacetPos();
+
+    if (!isFacetedSamples(facetPos)) {
+        return pos;
+    } else if (isInTransit()) {
+        vec2 interpolated = mix(
+            vec2(facetPos.pos, facetPos.height),
+            vec2(facetPos.targetPos, facetPos.targetHeight),
+            getTransitionFraction(pos.x));
+        return vec2(pos.x, interpolated[0] + pos.y * interpolated[1]);
+    } else {
+        return vec2(pos.x, facetPos.pos + pos.y * facetPos.height);
+    }
+}
+
+float getSampleFacetHeight(vec2 pos) {
+    SampleFacetPosition facetPos = getSampleFacetPos();
+
+    if (!isFacetedSamples(facetPos)) {
+        return 1.0;
+    } else if (isInTransit()) {
+        return mix(
+            facetPos.height,
+            facetPos.targetHeight,
+            getTransitionFraction(pos.x));
+    } else {
+        return facetPos.height;
+    }
+}

package/src/gl/includes/scales.glsl

@@ -0,0 +1,79 @@
+// Utils ------------
+
+vec3 getDiscreteColor(sampler2D s, int index) {
+    return texelFetch(s, ivec2(index % textureSize(s, 0).x, 0), 0).rgb;
+}
+
+vec3 getInterpolatedColor(sampler2D s, float unitValue) {
+    return texture(s, vec2(unitValue, 0.0)).rgb;
+}
+
+float clampToRange(float value, vec2 range) {
+    return clamp(value, min(range[0], range[1]), max(range[0], range[1]));
+}
+
+// Scales ------------
+// Based on d3 scales: https://github.com/d3/d3-scale
+
+float scaleIdentity(float value) {
+    return value;
+}
+
+float scaleLinear(float value, vec2 domain, vec2 range) {
+    float domainSpan = domain[1] - domain[0];
+    float rangeSpan = range[1] - range[0];
+    return (value - domain[0]) / domainSpan * rangeSpan + range[0];
+}
+
+float scaleLog(float value, vec2 domain, vec2 range, float base) {
+    // y = m log(x) + b 
+    // TODO: Perf optimization: precalculate log domain in js.
+    // TODO: Reversed domain, etc
+    return scaleLinear(log(value) / log(base), log(domain) / log(base), range);
+}
+
+float symlog(float value, float constant) {
+    // WARNING: emulating log1p with log(x + 1). Small numbers are likely to
+    // have significant precision problems.
+    return sign(value) * log(abs(value / constant) + 1.0);
+}
+
+float scaleSymlog(float value, vec2 domain, vec2 range, float constant) {
+    return scaleLinear(
+        symlog(value, constant),
+        vec2(symlog(domain[0], constant), symlog(domain[1], constant)),
+        range
+    );
+}
+
+float scalePow(float value, vec2 domain, vec2 range, float exponent) {
+    // y = mx^k + b
+    // TODO: Perf optimization: precalculate pow domain in js.
+    // TODO: Reversed domain, etc
+    return scaleLinear(
+        pow(abs(value), exponent) * sign(value),
+        pow(abs(domain), vec2(exponent)) * sign(domain),
+        range
+    );
+}
+
+// TODO: scaleThreshold
+// TODO: scaleQuantile (special case of threshold scale)
+
+float scaleBand(float value, vec2 domainExtent, vec2 range,
+                float paddingInner, float paddingOuter,
+                float align, float band) {
+
+    // TODO: reverse
+    float start = range[0];
+    float stop = range[1];
+
+    float n = domainExtent[1] - domainExtent[0];
+
+    // Adapted from: https://github.com/d3/d3-scale/blob/master/src/band.js
+    float step = (stop - start) / max(1.0, n - paddingInner + paddingOuter * 2.0);
+    start += (stop - start - step * (n - paddingInner)) * align;
+    float bandwidth = step * (1.0 - paddingInner);
+
+    return start + (value - domainExtent[0]) * step + bandwidth * band;
+}

package/src/gl/includes/scales_fp64.glsl

@@ -0,0 +1,30 @@
+float scaleIdentityFp64(vec2 value) {
+    return value[0];
+}
+
+float scaleLinearFp64(vec2 value, vec4 domain, vec2 range) {
+    vec2 domainSpan = sub_fp64(domain.zw, domain.xy);
+    float rangeSpan = range[1] - range[0];
+
+    float unitValue = div_fp64(sub_fp64(value, domain.xy), domainSpan).x;
+    return unitValue * rangeSpan + range[0];
+}
+
+float scaleBandFp64(vec2 value, vec4 domainExtent, vec2 range,
+                float paddingInner, float paddingOuter,
+                float align, float band) {
+
+    // TODO: reverse
+    float start = range[0];
+    float stop = range[1];
+
+    vec2 domainSpan = sub_fp64(domainExtent.zw, domainExtent.xy);
+    float n = domainSpan.x;
+
+    // Based on: https://github.com/d3/d3-scale/blob/master/src/band.js
+    float step = (stop - start) / max(1.0, n - paddingInner + paddingOuter * 2.0);
+    start += (stop - start - step * (n - paddingInner)) * align;
+    float bandwidth = step * (1.0 - paddingInner);
+
+    return start + sub_fp64(value, domainExtent.xy).x * step + bandwidth * band;
+}

package/src/gl/link.fragment.glsl

@@ -0,0 +1,18 @@
+in lowp vec4 vColor;
+in float vSize;
+in float vNormalLengthInPixels;
+
+out lowp vec4 fragColor;
+
+void main(void) {
+    float dpr = uDevicePixelRatio;
+
+    float distance = abs(vNormalLengthInPixels);
+    float opacity = clamp(((vSize / 2.0 - distance) * dpr), 0.0, 1.0);
+
+    fragColor = vColor * opacity;
+
+    if (uPickingEnabled) {
+        fragColor = vPickingColor;
+    }
+}

package/src/gl/link.vertex.glsl

@@ -0,0 +1,111 @@
+uniform float uSagittaScaleFactor;
+
+/** Make very small arcs visible */
+uniform float uMinSagittaLength;
+
+in vec2 strip;
+
+out vec4 vColor;
+
+/** Stroke width */
+out float vSize;
+
+/** The distance from the line center to the direction of normal in pixels */
+out float vNormalLengthInPixels;
+
+void main(void) {
+    float pixelSize = 1.0 / uDevicePixelRatio;
+    float opacity = getScaled_opacity() * uViewOpacity;
+
+    vec2 a = vec2(getScaled_x(), getScaled_y()) * uViewportSize;
+    vec2 b = vec2(getScaled_x2(), getScaled_y2()) * uViewportSize;
+    
+    vec2 chordVector = b - a;
+    vec2 unitChordVector = normalize(chordVector);
+    vec2 chordNormal = vec2(-unitChordVector.y, unitChordVector.x);
+
+    float sagitta = max(
+        length(chordVector) / 2.0 * uSagittaScaleFactor,
+        uMinSagittaLength
+    );
+
+    bool compress = false;
+    if (compress) {
+        // Work in progres...
+        float maxSagittaLen = length(chordNormal * uViewportSize);
+        float maxChordLen = length(unitChordVector * uViewportSize);
+
+        float threshold = maxSagittaLen * 0.5;
+        if (sagitta > threshold) {
+            float m = (maxSagittaLen - threshold) / (maxChordLen - threshold);
+            sagitta = (sagitta - threshold) * m + threshold;
+        }
+    }
+
+    vec2 controlOffset = chordNormal * sagitta / 0.75;
+
+    vec2 p1 = a;
+    vec2 p2 = a + controlOffset;
+    vec2 p3 = b + controlOffset;
+    vec2 p4 = b;
+
+    // Make segments shorter near the endpoints to make the tightly bent attachment points smoother
+    float t = smoothstep(0.0, 1.0, strip.x);
+
+    // https://stackoverflow.com/a/31317254/1547896
+    vec2 C1 = p4 - 3.0 * p3 + 3.0 * p2 - p1;
+    vec2 C2 = 3.0 * p3 - 6.0 * p2 + 3.0 * p1;
+    vec2 C3 = 3.0 * p2 - 3.0 * p1;
+    vec2 C4 = p1;
+
+    vec2 p;
+    // Skip computation at endpoints to maintain precision
+    if (t == 0.0) {
+        p = p1;
+    } else if (t == 1.0) {
+        p = p4;
+    } else {
+        p = C1*t*t*t + C2*t*t + C3*t + C4;
+    }
+
+    vec2 tangent = normalize(3.0*C1*t*t + 2.0*C2*t + C3);
+    vec2 normal = vec2(-tangent.y, tangent.x);
+
+    //p = applySampleFacet(p);
+
+#ifdef size2_DEFINED
+    float mixedSize = mix(getScaled_size(), getScaled_size2(), t);
+#else
+    float mixedSize = getScaled_size();
+#endif
+
+    // Avoid artifacts in very thin lines by clamping the size and adjusting opacity respectively
+    if (mixedSize < pixelSize) {
+        opacity *= mixedSize / pixelSize;
+        mixedSize = pixelSize;
+    }
+
+    // Add an extra pixel to stroke width to accommodate edge antialiasing
+    float paddedSize = mixedSize + pixelSize;
+
+    vNormalLengthInPixels = strip.y * paddedSize;
+    
+    // Extrude
+    p += normal * vNormalLengthInPixels;
+
+    gl_Position = pixelsToNdc(p);
+
+#ifdef color2_DEFINED
+    // Yuck, RGB interpolation in gamma space!
+    // TODO: linear space: https://unlimited3d.wordpress.com/2020/01/08/srgb-color-space-in-opengl/
+    vec3 color = mix(getScaled_color(), getScaled_color2(), t);
+#else 
+    vec3 color = getScaled_color();
+#endif
+
+    vColor = vec4(color * opacity, opacity);
+
+    vSize = paddedSize;
+
+    setupPicking();
+}