@react-fabric/graph 1.0.0-beta.58

package/src/programs/edge-curve/drawLabel.ts

@@ -0,0 +1,166 @@
+import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve/dist/declarations/src/utils";
+import { type Attributes } from "graphology-types";
+import { type EdgeLabelDrawingFunction } from "sigma/rendering";
+import { type Settings } from "sigma/settings";
+
+/* istanbul ignore file */
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+function getCurvePoint(t: number, p0: Point, p1: Point, p2: Point): Point {
+  const x = (1 - t) ** 2 * p0.x + 2 * (1 - t) * t * p1.x + t ** 2 * p2.x;
+  const y = (1 - t) ** 2 * p0.y + 2 * (1 - t) * t * p1.y + t ** 2 * p2.y;
+  return { x, y };
+}
+
+function getCurveLength(p0: Point, p1: Point, p2: Point): number {
+  const steps = 20;
+  let length = 0;
+  let lastPoint = p0;
+  for (let i = 0; i < steps; i++) {
+    const point = getCurvePoint((i + 1) / steps, p0, p1, p2);
+    length += Math.sqrt(
+      (lastPoint.x - point.x) ** 2 + (lastPoint.y - point.y) ** 2,
+    );
+    lastPoint = point;
+  }
+
+  return length;
+}
+
+export function createDrawCurvedEdgeLabel<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+  G extends Attributes = Attributes,
+>({
+  curvatureAttribute,
+  defaultCurvature,
+  keepLabelUpright = true,
+}: CreateEdgeCurveProgramOptions & {
+  keepLabelUpright?: boolean;
+}): EdgeLabelDrawingFunction<N, E, G> {
+  return (
+    context,
+    edgeData,
+    sourceData,
+    targetData,
+    settings: Settings<N, E, G>,
+  ): void => {
+    const size = settings.edgeLabelSize;
+    const curvature = edgeData[curvatureAttribute] || defaultCurvature;
+    const font = settings.edgeLabelFont;
+    const weight = settings.edgeLabelWeight;
+    let color = edgeData.color ?? settings.defaultEdgeColor;
+
+    if (edgeData.selected) color = "#f00";
+    if (edgeData.highlight) color = "#F54A4A";
+
+    let label = edgeData.label;
+
+    if (!label || edgeData.opacity < 1) return;
+
+    context.font = `${weight} ${size}px ${font}`;
+
+    // Computing positions without considering nodes sizes:
+    const ltr = !keepLabelUpright || sourceData.x < targetData.x;
+    let sourceX = ltr ? sourceData.x : targetData.x;
+    let sourceY = ltr ? sourceData.y : targetData.y;
+    let targetX = ltr ? targetData.x : sourceData.x;
+    let targetY = ltr ? targetData.y : sourceData.y;
+    const centerX = (sourceX + targetX) / 2;
+    const centerY = (sourceY + targetY) / 2;
+    const diffX = targetX - sourceX;
+    const diffY = targetY - sourceY;
+    const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
+    // Anchor point:
+    const orientation = ltr ? 1 : -1;
+    let anchorX = centerX + diffY * curvature * orientation;
+    let anchorY = centerY - diffX * curvature * orientation;
+
+    // Adapt curve points to edge thickness:
+    const offset = edgeData.size * 0.7 + 5;
+    const sourceOffsetVector = {
+      x: anchorY - sourceY,
+      y: -(anchorX - sourceX),
+    };
+    const sourceOffsetVectorLength = Math.sqrt(
+      sourceOffsetVector.x ** 2 + sourceOffsetVector.y ** 2,
+    );
+    const targetOffsetVector = {
+      x: targetY - anchorY,
+      y: -(targetX - anchorX),
+    };
+    const targetOffsetVectorLength = Math.sqrt(
+      targetOffsetVector.x ** 2 + targetOffsetVector.y ** 2,
+    );
+    sourceX += (offset * sourceOffsetVector.x) / sourceOffsetVectorLength;
+    sourceY += (offset * sourceOffsetVector.y) / sourceOffsetVectorLength;
+    targetX += (offset * targetOffsetVector.x) / targetOffsetVectorLength;
+    targetY += (offset * targetOffsetVector.y) / targetOffsetVectorLength;
+    // For anchor, the vector is simpler, so it is inlined:
+    anchorX += (offset * diffY) / diff;
+    anchorY -= (offset * diffX) / diff;
+
+    // Compute curve length:
+    const anchorPoint = { x: anchorX, y: anchorY };
+    const sourcePoint = { x: sourceX, y: sourceY };
+    const targetPoint = { x: targetX, y: targetY };
+    const curveLength = getCurveLength(sourcePoint, anchorPoint, targetPoint);
+
+    if (curveLength < sourceData.size + targetData.size) return;
+
+    // Handling ellipsis
+    let textLength = context.measureText(label).width;
+    const availableTextLength = curveLength - sourceData.size - targetData.size;
+    if (textLength > availableTextLength) {
+      const ellipsis = "…";
+      label = label + ellipsis;
+      textLength = context.measureText(label).width;
+
+      while (textLength > availableTextLength && label.length > 1) {
+        label = label.slice(0, -2) + ellipsis;
+        textLength = context.measureText(label).width;
+      }
+
+      if (label.length < 4) return;
+    }
+
+    // Measure each character:
+    const charactersLengthCache: Record<string, number> = {};
+    for (let i = 0, length = label.length; i < length; i++) {
+      const character = label[i];
+
+      if (!charactersLengthCache[character]) {
+        charactersLengthCache[character] =
+          context.measureText(character).width * (1 + curvature * 0.35);
+      }
+    }
+
+    // Draw each character:
+    let t = 0.5 - textLength / curveLength / 2;
+    for (let i = 0, length = label.length; i < length; i++) {
+      const character = label[i];
+      const point = getCurvePoint(t, sourcePoint, anchorPoint, targetPoint);
+
+      const tangentX =
+        2 * (1 - t) * (anchorX - sourceX) + 2 * t * (targetX - anchorX);
+      const tangentY =
+        2 * (1 - t) * (anchorY - sourceY) + 2 * t * (targetY - anchorY);
+      const angle = Math.atan2(tangentY, tangentX);
+
+      context.save();
+      context.translate(point.x, point.y);
+      context.rotate(angle);
+
+      context.fillStyle = color;
+      context.fillText(character, 0, 0);
+
+      context.restore();
+
+      t += charactersLengthCache[character] / curveLength;
+    }
+  };
+}

package/src/programs/edge-curve/frag.glsl.ts

@@ -0,0 +1,86 @@
+/* istanbul ignore file */
+
+// language=GLSL
+const SHADER = /* glsl */ `
+precision highp float;
+
+varying vec4 v_color;
+varying float v_opacity;
+varying float v_thickness;
+varying float v_feather;
+varying vec2 v_cpA;
+varying vec2 v_cpB;
+varying vec2 v_cpC;
+varying float v_sourceSize;
+varying vec2 v_sourcePoint;
+varying float v_targetSize;
+varying vec2 v_targetPoint;
+
+uniform float u_lengthToThicknessRatio;
+uniform float u_widenessToThicknessRatio;
+
+float det(vec2 a, vec2 b) {
+  return a.x * b.y - b.x * a.y;
+}
+
+vec2 getDistanceVector(vec2 b0, vec2 b1, vec2 b2) {
+  float a = det(b0, b2), b = 2.0 * det(b1, b0), d = 2.0 * det(b2, b1);
+  float f = b * d - a * a;
+  vec2 d21 = b2 - b1, d10 = b1 - b0, d20 = b2 - b0;
+  vec2 gf = 2.0 * (b * d21 + d * d10 + a * d20);
+  gf = vec2(gf.y, -gf.x);
+  vec2 pp = -f * gf / dot(gf, gf);
+  vec2 d0p = b0 - pp;
+  float ap = det(d0p, d20), bp = 2.0 * det(d10, d0p);
+  float t = clamp((ap + bp) / (2.0 * a + b + d), 0.0, 1.0);
+  return mix(mix(b0, b1, t), mix(b1, b2, t), t);
+}
+
+float distToQuadraticBezierCurve(vec2 p, vec2 b0, vec2 b1, vec2 b2) {
+  return length(getDistanceVector(b0 - p, b1 - p, b2 - p));
+}
+
+const float epsilon = 0.7;
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+
+void main(void) {
+  float dist = distToQuadraticBezierCurve(gl_FragCoord.xy, v_cpA, v_cpB, v_cpC);
+  float thickness = v_thickness;
+
+  if(v_sourceSize > 0.0) {
+    float distToSource = length(gl_FragCoord.xy - v_sourcePoint);
+    float sourceArrowLength = v_sourceSize + (thickness) * u_lengthToThicknessRatio;
+    if (distToSource < sourceArrowLength) {
+      thickness = (distToSource - v_sourceSize) / (sourceArrowLength - v_sourceSize) * u_widenessToThicknessRatio * thickness;
+    }
+  }
+
+  if(v_targetSize > 0.0) {
+    float distToTarget = length(gl_FragCoord.xy - v_targetPoint);
+    float targetArrowLength = v_targetSize + (thickness) * u_lengthToThicknessRatio;
+    if (distToTarget < targetArrowLength) {
+      thickness = (distToTarget - v_targetSize) / (targetArrowLength - v_targetSize) * u_widenessToThicknessRatio * thickness;
+    }
+  }
+
+  float halfThickness = thickness / 2.0;
+  if (dist < halfThickness) {
+    #ifdef PICKING_MODE
+    gl_FragColor = v_color;
+    #else
+    float t = smoothstep(
+      halfThickness - v_feather,
+      halfThickness,
+      dist
+    );
+
+    gl_FragColor = mix(v_color, transparent, t);
+    gl_FragColor = mix(transparent, gl_FragColor, v_opacity);
+    #endif
+  } else {
+    gl_FragColor = transparent;
+  }
+}
+`;
+
+export default SHADER;

package/src/programs/edge-curve/index.ts

@@ -0,0 +1,158 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { DEFAULT_EDGE_CURVATURE } from "@sigma/edge-curve";
+import { type Attributes } from "graphology-types";
+import {
+  createEdgeCompoundProgram,
+  EdgeProgram,
+  type ProgramInfo,
+} from "sigma/rendering";
+import {
+  type EdgeDisplayData,
+  type NodeDisplayData,
+  type RenderParams,
+} from "sigma/types";
+import { floatColor } from "sigma/utils";
+import { InternalEdgeAttributes } from "../../types";
+import { createDrawCurvedEdgeLabel } from "./drawLabel";
+import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
+import VERTEX_SHADER_SOURCE from "./vert.glsl";
+
+/* istanbul ignore file */
+
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
+
+const UNIFORMS = [
+  "u_matrix",
+  "u_sizeRatio",
+  "u_dimensions",
+  "u_pixelRatio",
+  "u_feather",
+  "u_minEdgeThickness",
+  "u_lengthToThicknessRatio",
+  "u_widenessToThicknessRatio",
+] as const;
+
+export class EdgeCurveProgramBase<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+  G extends Attributes = Attributes,
+> extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
+  getDefinition() {
+    return {
+      VERTICES: 6,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.TRIANGLES,
+      UNIFORMS,
+      ATTRIBUTES: [
+        { name: "a_source", size: 2, type: FLOAT },
+        { name: "a_target", size: 2, type: FLOAT },
+        { name: "a_thickness", size: 1, type: FLOAT },
+        { name: "a_curvature", size: 1, type: FLOAT },
+        { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
+        { name: "a_opacity", size: 1, type: FLOAT },
+        { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
+        { name: "a_sourceSize", size: 1, type: FLOAT },
+        { name: "a_targetSize", size: 1, type: FLOAT },
+      ],
+      CONSTANT_ATTRIBUTES: [
+        { name: "a_current", size: 1, type: FLOAT }, // TODO: could optimize to bool
+        { name: "a_direction", size: 1, type: FLOAT }, // TODO: could optimize to byte
+      ],
+      CONSTANT_DATA: [
+        [0, 1],
+        [0, -1],
+        [1, 1],
+        [0, -1],
+        [1, 1],
+        [1, -1],
+      ],
+    };
+  }
+
+  processVisibleItem(
+    edgeIndex: number,
+    startIndex: number,
+    sourceData: NodeDisplayData,
+    targetData: NodeDisplayData,
+    data: EdgeDisplayData & InternalEdgeAttributes,
+  ) {
+    let color = data.color ?? this.renderer.getSetting("defaultEdgeColor");
+    if (data.selected) color = "#f00";
+    if (data.highlight) color = "#F54A4A";
+
+    const thickness =
+      Math.min(data.size || 1, 0.5) *
+      (data.selected || data.highlight ? 16 : 8);
+    const x1 = sourceData.x;
+    const y1 = sourceData.y;
+    const x2 = targetData.x;
+    const y2 = targetData.y;
+    const curvature = data.curvature ?? DEFAULT_EDGE_CURVATURE;
+
+    const sourceRadius = sourceData.size || 1;
+    const targetRadius = targetData.size || 1;
+
+    const array = this.array;
+
+    // First point
+    array[startIndex++] = x1;
+    array[startIndex++] = y1;
+    array[startIndex++] = x2;
+    array[startIndex++] = y2;
+    array[startIndex++] = thickness;
+    array[startIndex++] = curvature;
+    array[startIndex++] = floatColor(color);
+    array[startIndex++] = data.opacity ?? 1;
+    array[startIndex++] = edgeIndex;
+    array[startIndex++] = ["both", "source"].includes(data.arrow ?? "")
+      ? sourceRadius
+      : 0;
+    array[startIndex++] = ["both", "target"].includes(data.arrow ?? "")
+      ? targetRadius
+      : 0;
+  }
+
+  setUniforms(
+    params: RenderParams,
+    { gl, uniformLocations }: ProgramInfo,
+  ): void {
+    const {
+      u_matrix,
+      u_pixelRatio,
+      u_feather,
+      u_sizeRatio,
+      u_dimensions,
+      u_minEdgeThickness,
+      u_lengthToThicknessRatio,
+      u_widenessToThicknessRatio,
+    } = uniformLocations;
+
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+    gl.uniform1f(u_pixelRatio, params.pixelRatio);
+    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniform1f(u_feather, params.antiAliasingFeather);
+    gl.uniform2f(
+      u_dimensions,
+      params.width * params.pixelRatio,
+      params.height * params.pixelRatio,
+    );
+    gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
+    gl.uniform1f(u_lengthToThicknessRatio, 2.5);
+    gl.uniform1f(u_widenessToThicknessRatio, 2);
+  }
+}
+
+export const EdgeCurveProgram = createEdgeCompoundProgram(
+  [
+    EdgeCurveProgramBase,
+    // createEdgeArrowHeadProgram({ extremity: "source" }),
+    // createEdgeArrowHeadProgram({ extremity: "target" }),
+  ],
+  createDrawCurvedEdgeLabel({
+    curvatureAttribute: "curvature",
+    defaultCurvature: DEFAULT_EDGE_CURVATURE,
+    arrowHead: null,
+  }) as any,
+);

package/src/programs/edge-curve/vert.glsl.ts

@@ -0,0 +1,110 @@
+/* istanbul ignore file */
+
+// language=GLSL
+const SHADER = /* glsl */ `
+attribute vec4 a_id;
+attribute vec4 a_color;
+attribute float a_direction;
+attribute float a_thickness;
+attribute float a_opacity;
+attribute vec2 a_source;
+attribute vec2 a_target;
+attribute float a_current;
+attribute float a_curvature;
+attribute float a_sourceSize;
+attribute float a_targetSize;
+
+uniform mat3 u_matrix;
+uniform float u_sizeRatio;
+uniform float u_pixelRatio;
+uniform vec2 u_dimensions;
+uniform float u_minEdgeThickness;
+uniform float u_feather;
+uniform float u_widenessToThicknessRatio;
+
+varying vec4 v_color;
+varying float v_opacity;
+varying float v_thickness;
+varying float v_feather;
+varying vec2 v_cpA;
+varying vec2 v_cpB;
+varying vec2 v_cpC;
+varying float v_sourceSize;
+varying vec2 v_sourcePoint;
+varying float v_targetSize;
+varying vec2 v_targetPoint;
+
+const float bias = 255.0 / 254.0;
+const float epsilon = 0.7;
+
+vec2 clipspaceToViewport(vec2 pos, vec2 dimensions) {
+  return vec2(
+    (pos.x + 1.0) * dimensions.x / 2.0,
+    (pos.y + 1.0) * dimensions.y / 2.0
+  );
+}
+
+vec2 viewportToClipspace(vec2 pos, vec2 dimensions) {
+  return vec2(
+    pos.x / dimensions.x * 2.0 - 1.0,
+    pos.y / dimensions.y * 2.0 - 1.0
+  );
+}
+
+void main() {
+  float minThickness = u_minEdgeThickness;
+  // Selecting the correct position
+  // Branchless "position = a_source if a_current == 1.0 else a_target"
+  vec2 position = a_source * max(0.0, a_current) + a_target * max(0.0, 1.0 - a_current);
+  position = (u_matrix * vec3(position, 1)).xy;
+
+  vec2 source = (u_matrix * vec3(a_source, 1)).xy;
+  vec2 target = (u_matrix * vec3(a_target, 1)).xy;
+
+  vec2 viewportPosition = clipspaceToViewport(position, u_dimensions);
+  vec2 viewportSource = clipspaceToViewport(source, u_dimensions);
+  vec2 viewportTarget = clipspaceToViewport(target, u_dimensions);
+
+  vec2 delta = viewportTarget.xy - viewportSource.xy;
+  float len = length(delta);
+  vec2 normal = vec2(-delta.y, delta.x) * a_direction;
+  vec2 unitNormal = normal / len;
+  float boundingBoxThickness = len * a_curvature;
+  float curveThickness = max(minThickness, a_thickness / 2.0 / u_sizeRatio * u_pixelRatio);
+
+  v_thickness = curveThickness;
+  v_feather = u_feather;
+
+  v_cpA = viewportSource;
+  v_cpB = 0.5 * (viewportSource + viewportTarget) + unitNormal * a_direction * boundingBoxThickness;
+  v_cpC = viewportTarget;
+
+  vec2 viewportOffsetPosition = (
+    viewportPosition +
+    unitNormal * (boundingBoxThickness / 2.0 + sign(boundingBoxThickness) * (curveThickness + epsilon)) *
+    max(0.0, a_direction) // NOTE: cutting the bounding box in half to avoid overdraw
+  );
+
+  position = viewportToClipspace(viewportOffsetPosition, u_dimensions);
+  gl_Position = vec4(position, 0, 1);
+
+  v_sourceSize = a_sourceSize * u_pixelRatio / u_sizeRatio;
+  v_sourcePoint = viewportSource;
+  
+  v_targetSize = a_targetSize * u_pixelRatio / u_sizeRatio;
+  v_targetPoint = viewportTarget;
+    
+  #ifdef PICKING_MODE
+  // For picking mode, we use the ID as the color:
+  v_color = a_id;
+  #else
+  // For normal mode, we use the color:
+  v_color = a_color;
+  v_opacity = a_opacity;
+  #endif
+
+  v_color.a *= bias;
+}
+`;
+
+export default SHADER;

package/src/programs/edge-line/drawLabel.ts

@@ -0,0 +1,113 @@
+import { type Attributes } from "graphology-types";
+import { type Settings } from "sigma/settings";
+import {
+  type EdgeDisplayData,
+  type NodeDisplayData,
+  type PartialButFor,
+} from "sigma/types";
+
+/* istanbul ignore file */
+
+export type EdgeLabelDrawingFunction<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+  G extends Attributes = Attributes,
+> = (
+  context: CanvasRenderingContext2D,
+  edgeData: PartialButFor<EdgeDisplayData, "label" | "color" | "size">,
+  sourceData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
+  targetData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
+  settings: Settings<N, E, G>,
+) => void;
+
+export function drawLineLabel<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+  G extends Attributes = Attributes,
+>(
+  context: CanvasRenderingContext2D,
+  edgeData: PartialButFor<EdgeDisplayData, "label" | "color" | "size">,
+  sourceData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
+  targetData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
+  settings: Settings<N, E, G>,
+): void {
+  const size = settings.edgeLabelSize;
+  const font = settings.edgeLabelFont;
+  const weight = settings.edgeLabelWeight;
+  let color = edgeData.color ?? settings.defaultEdgeColor;
+
+  if (edgeData.selected) color = "#f00";
+  if (edgeData.highlight) color = "#F54A4A";
+
+  let label = edgeData.label;
+
+  if (!label || edgeData.opacity < 1) return;
+
+  context.font = `${weight} ${size}px ${font}`;
+
+  // Computing positions without considering nodes sizes:
+  const sSize = sourceData.size;
+  const tSize = targetData.size;
+  let sx = sourceData.x;
+  let sy = sourceData.y;
+  let tx = targetData.x;
+  let ty = targetData.y;
+  let cx = (sx + tx) / 2;
+  let cy = (sy + ty) / 2;
+  let dx = tx - sx;
+  let dy = ty - sy;
+  let d = Math.sqrt(dx * dx + dy * dy);
+
+  if (d < sSize + tSize) return;
+
+  // Adding nodes sizes:
+  sx += (dx * sSize) / d;
+  sy += (dy * sSize) / d;
+  tx -= (dx * tSize) / d;
+  ty -= (dy * tSize) / d;
+  cx = (sx + tx) / 2;
+  cy = (sy + ty) / 2;
+  dx = tx - sx;
+  dy = ty - sy;
+  d = Math.sqrt(dx * dx + dy * dy);
+
+  // Handling ellipsis
+  let textLength = context.measureText(label).width;
+
+  if (textLength > d) {
+    const ellipsis = "…";
+    label = label + ellipsis;
+    textLength = context.measureText(label).width;
+
+    while (textLength > d && label.length > 1) {
+      label = label.slice(0, -2) + ellipsis;
+      textLength = context.measureText(label).width;
+    }
+
+    if (label.length < 4) return;
+  }
+
+  let angle;
+  if (dx > 0) {
+    if (dy > 0) angle = Math.acos(dx / d);
+    else angle = Math.asin(dy / d);
+  } else {
+    if (dy > 0) angle = Math.acos(dx / d) + Math.PI;
+    else angle = Math.asin(dx / d) + Math.PI / 2;
+  }
+
+  context.save();
+  context.translate(cx, cy);
+  context.rotate(angle);
+  context.fillStyle = settings.defaultNodeColor || "#fff";
+  context.fillRect(
+    -textLength / 2 - 4,
+    edgeData.size - size + 2,
+    textLength + 8,
+    size + 2,
+  );
+  context.fillStyle = color;
+  context.fillText(label, -textLength / 2, edgeData.size);
+
+  context.restore();
+}

package/src/programs/edge-line/frag.glsl.ts

@@ -0,0 +1,34 @@
+/* istanbul ignore file */
+
+// language=GLSL
+const SHADER_SOURCE = /* glsl */ `
+precision mediump float;
+
+varying vec4 v_color;
+varying vec2 v_normal;
+varying float v_opacity;
+varying float v_thickness;
+varying float v_feather;
+
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+
+void main(void) {
+  // We only handle antialiasing for normal mode:
+  #ifdef PICKING_MODE
+  gl_FragColor = v_color;
+  #else
+  float dist = length(v_normal) * v_thickness;
+
+  float t = smoothstep(
+    v_thickness - v_feather,
+    v_thickness,
+    dist
+  );
+
+  gl_FragColor = mix(v_color, transparent, t);
+  gl_FragColor = mix(transparent, gl_FragColor, v_opacity);
+  #endif
+}
+`;
+
+export default SHADER_SOURCE;