Merge pull request #209 from MetaCell/feat/skeleton-node-border

feat: add node outline

Author: seankmartin

src/skeleton/frontend.ts

@@ -208,6 +208,12 @@ const SELECTED_NODE_OUTLINE_MAX_WIDTH_3D = "7.0";
 // the min for typical nodes and scales up the ring for larger nodes.
 const SELECTED_NODE_OUTLINE_DIAMETER_FRACTION = "0.5";
 
+const NODE_BORDER_OUTLINE_DIAMETER_FRACTION = "0.15";
+const NODE_BORDER_OUTLINE_MIN_WIDTH_2D = "1.0";
+const NODE_BORDER_OUTLINE_MAX_WIDTH_2D = "2.5";
+const NODE_BORDER_OUTLINE_MIN_WIDTH_3D = "1.0";
+const NODE_BORDER_OUTLINE_MAX_WIDTH_3D = "2.0";
+
 interface VertexAttributeRenderInfo extends VertexAttributeInfo {
   name: string;
   webglDataType: number;
@@ -767,6 +773,7 @@ void emitDefault() {
           );
           builder.addUniform("highp float", "uNodeDiameter");
           let selectedOutlineWidthExpression = "0.0";
+          let borderOutlineWidthExpression = "0.0";
           if (this.nodeIdAttributeIndex !== undefined) {
             builder.addUniform("highp vec3", "uSelectedNodeOutlineColor");
             builder.addUniform("highp int", "uSelectedNodeId");
@@ -781,6 +788,13 @@ void emitDefault() {
               ? SELECTED_NODE_OUTLINE_MAX_WIDTH_2D
               : SELECTED_NODE_OUTLINE_MAX_WIDTH_3D;
             selectedOutlineWidthExpression = `(max(vSelectedNode, vHighlightedNode) * clamp(${SELECTED_NODE_OUTLINE_DIAMETER_FRACTION} * uNodeDiameter, ${selectedOutlineMinWidth}, ${selectedOutlineMaxWidth}))`;
+            const borderOutlineMinWidth = this.targetIsSliceView
+              ? NODE_BORDER_OUTLINE_MIN_WIDTH_2D
+              : NODE_BORDER_OUTLINE_MIN_WIDTH_3D;
+            const borderOutlineMaxWidth = this.targetIsSliceView
+              ? NODE_BORDER_OUTLINE_MAX_WIDTH_2D
+              : NODE_BORDER_OUTLINE_MAX_WIDTH_3D;
+            borderOutlineWidthExpression = `(max(vSelectedNode, vHighlightedNode) * clamp(${NODE_BORDER_OUTLINE_DIAMETER_FRACTION} * uNodeDiameter, ${borderOutlineMinWidth}, ${borderOutlineMaxWidth}))`;
           }
           let vertexMain = `
 highp uint vertexIndex = uint(gl_InstanceID);
@@ -805,7 +819,8 @@ highp vec3 vertexPosition = readAttribute0(vertexIndex);
 emitCircle(
   uProjection * vec4(vertexPosition, 1.0),
   uNodeDiameter,
-  ${selectedOutlineWidthExpression}
+  ${selectedOutlineWidthExpression},
+  ${borderOutlineWidthExpression}
 );
 `;
           const segmentColorExpression = this.getSegmentColorExpression();
@@ -823,6 +838,9 @@ emitCircle(
             const borderColorExpression = hasNodeIdSelection
               ? `mix(mix(renderColor, vec4(uSelectedNodeOutlineColor, renderColor.a), vSelectedNode), vec4(uHighlightedNodeOutlineColor, renderColor.a), vHighlightedNode)`
               : "renderColor";
+            const borderOutlineColorExpression = hasNodeIdSelection
+              ? `mix(mix(renderColor, vec4(1.0, 1.0, 1.0, renderColor.a), vSelectedNode), vec4(0.0, 0.0, 0.0, renderColor.a), vHighlightedNode)`
+              : "renderColor";
             builder.addFragmentCode(`
 vec4 segmentColor() {
   return getSegmentAppearance(${segmentExpression});
@@ -833,7 +851,8 @@ void emitRGBA(vec4 color) {
   if (alpha <= 0.0) discard;
   vec4 renderColor = vec4(color.rgb, alpha);
   vec4 borderColor = ${borderColorExpression};
-  vec4 circleColor = getCircleColor(renderColor, borderColor);
+  vec4 borderOutlineColor = ${borderOutlineColorExpression};
+  vec4 circleColor = getCircleColor(renderColor, borderColor, borderOutlineColor);
   emit(vec4(circleColor.rgb * circleColor.a, circleColor.a), vPickID);
 }
 void emitRGB(vec3 color) {
@@ -871,14 +890,18 @@ void emitDefault() {
             const borderColorExpression = hasNodeIdSelection
               ? `mix(mix(renderColor, vec4(uSelectedNodeOutlineColor, renderColor.a), vSelectedNode), vec4(uHighlightedNodeOutlineColor, renderColor.a), vHighlightedNode)`
               : "renderColor";
+            const borderOutlineColorExpression = hasNodeIdSelection
+              ? `mix(mix(renderColor, vec4(1.0, 1.0, 1.0, renderColor.a), vSelectedNode), vec4(0.0, 0.0, 0.0, renderColor.a), vHighlightedNode)`
+              : "renderColor";
             builder.addFragmentCode(`
 vec4 segmentColor() {
   return ${segmentColorExpression};
 }
 void emitRGBA(vec4 color) {
   vec4 renderColor = color;
   vec4 borderColor = ${borderColorExpression};
-  vec4 circleColor = getCircleColor(renderColor, borderColor);
+  vec4 borderOutlineColor = ${borderOutlineColorExpression};
+  vec4 circleColor = getCircleColor(renderColor, borderColor, borderOutlineColor);
   emit(vec4(circleColor.rgb * circleColor.a, circleColor.a), vPickID);
 }
 void emitRGB(vec3 color) {

src/webgl/circles.ts

@@ -39,22 +39,29 @@ export function defineCircleShader(
 
   // 2-D position within circle quad, ranging from [-1, -1] to [1, 1].
   builder.addVarying("highp vec4", "vCircleCoord");
+  // Normalized radius where the first border ends and the border outline begins.
+  builder.addVarying("highp float", "vCircleBorderFraction");
   builder.addVertexCode(`
-void emitCircle(vec4 position, float diameter, float borderWidth) {
+void emitCircle(vec4 position, float diameter, float borderWidth, float borderOutlineWidth) {
   gl_Position = position;
-  float totalDiameter = diameter + 2.0 * (borderWidth + uCircleParams.z);
+  float totalDiameter = diameter + 2.0 * (borderWidth + borderOutlineWidth + uCircleParams.z);
   if (diameter == 0.0) totalDiameter = 0.0;
   vec2 circleCornerOffset = getQuadVertexPosition(vec2(-1.0, -1.0), vec2(1.0, 1.0));
   gl_Position.xy += circleCornerOffset * uCircleParams.xy * gl_Position.w * totalDiameter;
   vCircleCoord.xy = circleCornerOffset;
-  if (borderWidth == 0.0) {
+  if (borderWidth == 0.0 && borderOutlineWidth == 0.0) {
     vCircleCoord.z = totalDiameter;
     vCircleCoord.w = 1e-6;
+    vCircleBorderFraction = totalDiameter;
   } else {
     vCircleCoord.z = diameter / totalDiameter;
+    vCircleBorderFraction = (diameter + 2.0 * borderWidth) / totalDiameter;
     vCircleCoord.w = uCircleParams.z / totalDiameter;
   }
 }
+void emitCircle(vec4 position, float diameter, float borderWidth) {
+  emitCircle(position, diameter, borderWidth, 0.0);
+}
 `);
   if (crossSectionFade) {
     builder.addFragmentCode(`
@@ -70,18 +77,23 @@ float getCircleAlphaMultiplier() {
 `);
   }
   builder.addFragmentCode(`
-vec4 getCircleColor(vec4 interiorColor, vec4 borderColor) {
+vec4 getCircleColor(vec4 interiorColor, vec4 borderColor, vec4 borderOutlineColor) {
   float radius = length(vCircleCoord.xy);
   if (radius > 1.0) {
     discard;
   }
 
   float borderColorFraction = clamp((radius - vCircleCoord.z) / vCircleCoord.w, 0.0, 1.0);
+  float outlineColorFraction = clamp((radius - vCircleBorderFraction) / vCircleCoord.w, 0.0, 1.0);
   float feather = clamp((1.0 - radius) / vCircleCoord.w, 0.0, 1.0);
   vec4 color = mix(interiorColor, borderColor, borderColorFraction);
+  color = mix(color, borderOutlineColor, outlineColorFraction);
 
   return vec4(color.rgb, color.a * feather * getCircleAlphaMultiplier());
 }
+vec4 getCircleColor(vec4 interiorColor, vec4 borderColor) {
+  return getCircleColor(interiorColor, borderColor, borderColor);
+}
 `);
 }