Stroke width and opacity

Author: jeffbaumes

src/App.vue

@@ -45,6 +45,8 @@ let colorScale: (value: number | string) => string = () => 'rgba(0,0,0,0.5)';
 let program: WebGLProgram | null = null;
 let uMatrixLocation: WebGLUniformLocation | null = null;
 let uScreenWidthPixelsLocation: WebGLUniformLocation | null = null;
+let uStrokeWidthLocation: WebGLUniformLocation | null = null;
+let uStrokeOpacityLocation: WebGLUniformLocation | null = null;
 let positionBuffer: WebGLBuffer | null = null;
 let offsetBuffer: WebGLBuffer | null = null;
 let colorBuffer: WebGLBuffer | null = null;
@@ -71,6 +73,8 @@ const sendToWorker = (name: string, reference: Ref<any>) => {
 
 const edgeWidth = ref(5.0);
 const edgeOpacity = ref(0.5);
+const strokeWidth = ref(1.0);
+const strokeOpacity = ref(0.5);
 const nodeOpacity = ref(0.5);
 const size = ref(0.5);
 const sizeField = ref('degree');
@@ -466,6 +470,8 @@ const drawScene = (gl: WebGL2RenderingContext) => {
 
   gl.uniformMatrix3fv(uMatrixLocation, false, matrix);
   gl.uniform1f(uScreenWidthPixelsLocation, gl.canvas.width);
+  gl.uniform1f(uStrokeWidthLocation, strokeWidth.value);
+  gl.uniform1f(uStrokeOpacityLocation, strokeOpacity.value);
   gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, positions.length / 2, graph.nodes.length || 0);
 };
 
@@ -596,6 +602,8 @@ onMounted(() => {
 
   uMatrixLocation = gl.getUniformLocation(program, 'uMatrix');
   uScreenWidthPixelsLocation = gl.getUniformLocation(program, 'uScreenWidthPixels');
+  uStrokeWidthLocation = gl.getUniformLocation(program, 'uStrokeWidth');
+  uStrokeOpacityLocation = gl.getUniformLocation(program, 'uStrokeOpacity');
 
   setupBuffersAndAttributes(gl, program);
 
@@ -781,7 +789,15 @@ const showLayoutControls = ref(true);
       <input type="range" v-model.number="edgeOpacity" :min="0" :max="1" :step="epsilon" class="w-full mt-1">
     </div>
     <div class="mt-2">
-      <label class="block text-sm font-medium text-gray-300">Node Opacity</label>
+      <label class="block text-sm font-medium text-gray-300">Stroke Width</label>
+      <input type="range" v-model.number="strokeWidth" :min="0" :max="50" :step="epsilon" class="w-full mt-1">
+    </div>
+    <div class="mt-2">
+      <label class="block text-sm font-medium text-gray-300">Stroke Opacity</label>
+      <input type="range" v-model.number="strokeOpacity" :min="0" :max="1" :step="epsilon" class="w-full mt-1">
+    </div>
+    <div class="mt-2">
+      <label class="block text-sm font-medium text-gray-300">Fill Opacity</label>
       <input type="range" v-model.number="nodeOpacity" :min="0" :max="1" :step="epsilon" class="w-full mt-1">
     </div>
     <div class="mt-2">

src/shaders/node.frag

@@ -5,15 +5,31 @@ in vec4 vColor;
 in vec2 vPosition;
 
 in float vAntialiasDistance;
+in highp float vStrokePosition;
+
+uniform highp float uStrokeWidth;
+uniform float uStrokeOpacity;
 
 out vec4 outColor;
 
 void main() {
   float dist = length(vPosition);
-  float radius = 1.0;
-  if (dist > radius + vAntialiasDistance / 2.0) {
-    discard;
+  if (uStrokeOpacity > 0.0 && uStrokeWidth > 0.0) {
+    float radius = 1.0;
+    if (dist > radius + vAntialiasDistance / 2.0) {
+      discard;
+    }
+    float alpha = 1.0 - smoothstep(radius - vAntialiasDistance / 2.0, radius + vAntialiasDistance / 2.0, dist);
+    vec3 strokeColor = vec3(0.0, 0.0, 0.0);
+    float colorBlend = smoothstep(vStrokePosition - vAntialiasDistance / 2.0, vStrokePosition + vAntialiasDistance / 2.0, dist);
+    outColor = vec4(mix(vColor.rgb, strokeColor, colorBlend), mix(vColor.a, uStrokeOpacity, colorBlend) * alpha);
+  } else {
+    // Extend node fill to center of stroke if no stroke
+    float radius = (1.0 + vStrokePosition) / 2.0;
+    if (dist > radius + vAntialiasDistance / 2.0) {
+      discard;
+    }
+    float alpha = 1.0 - smoothstep(radius - vAntialiasDistance / 2.0, radius + vAntialiasDistance / 2.0, dist);
+    outColor = vec4(vColor.rgb, vColor.a * alpha);
   }
-  float alpha = 1.0 - smoothstep(radius - vAntialiasDistance / 2.0, radius + vAntialiasDistance / 2.0, dist);
-  outColor = vec4(vColor.rgb, vColor.a * alpha);
 }

src/shaders/node.vert

@@ -6,13 +6,16 @@ in float aRadius;
 
 uniform mat3 uMatrix;
 uniform float uScreenWidthPixels;
+uniform float uStrokeWidth;
 
 out vec4 vColor;
 out vec2 vPosition;
 out float vAntialiasDistance;
+out float vStrokePosition;
 
 void main() {
-  vec2 position = aPosition * aRadius + aOffset;
+  float fullRadius = aRadius + uStrokeWidth / 2.0;
+  vec2 position = aPosition * fullRadius + aOffset;
   position = (uMatrix * vec3(position, 1.0)).xy;
   vPosition = aPosition;
   gl_Position = vec4(position, 0.0, 1.0);
@@ -27,5 +30,6 @@ void main() {
   // position / pixel = (position / screen) * (screen / pixel)
   //                  = (1 / (aRadius * uMatrix[0][0])) * (2 / uScreenWidthPixels)
   //                  = 2 / (aRadius * uMatrix[0][0] * uScreenWidthPixels)
-  vAntialiasDistance = 2.0 / (aRadius * uMatrix[0][0] * uScreenWidthPixels);
+  vAntialiasDistance = 2.0 / (fullRadius * uMatrix[0][0] * uScreenWidthPixels);
+  vStrokePosition = (aRadius - uStrokeWidth / 2.0) / fullRadius;
 }

src/worker.ts

@@ -111,8 +111,6 @@ onmessage = function(e) {
   } else if (e.data.type === 'chargeStrength') {
     simulation.force('charge', e.data.value ? charge : null);
     charge.strength(-e.data.value);
-  } else if (e.data.type === 'chargeFactor') {
-    console.log('Use chargeStrength to change charge');
   } else if (e.data.type === 'collideFactor') {
     simulation.force('collide', e.data.value ? collide : null);
     collide.strength(e.data.value);