WebKnossos: Make commented nodes red

make_commented_nodes_red.js

modifiedShader = `
#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives : enable
#endif
precision highp float;
uniform float viewMode;
varying vec3 color;
varying float v_isHighlightedCommented;
varying float v_isActiveNode;
varying float v_innerPointSize;
varying float v_outerPointSize;
void main()
{
    gl_FragColor = vec4(color, 1.0);
    // Add border to nodes with comments
    vec2 centerDistance = abs(gl_PointCoord - vec2(0.5));
    bool isWithinBorder = centerDistance.x < 0.20 && centerDistance.y < 0.20;
    if (v_isHighlightedCommented > 0.0) {
      gl_FragColor  = vec4(1.0, 0.0, 0.0, 1.0);
      return;
    };
    // Give active node a "halo"
    if (v_isActiveNode > 0.0) {
      float r = 0.0, delta = 0.0, alphaInner = 1.0, alphaOuter = 1.0;
      bool isOrthogonalMode = viewMode == 0.0;
      // cxy is between -1.0 and +1.0
      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
      // r is the length from the center of the point to the active texel
      r = dot(cxy, cxy);
      float relativeInnerNodeRadius = 0.5 * v_innerPointSize / v_outerPointSize;
      #ifdef GL_OES_standard_derivatives
        delta = fwidth(r);
        if (isOrthogonalMode) {
          // Make the inner node a square so that it looks exactly as a non-active node. The halo
          // will ensure that the active node is recognizable.
          float maxCenterDistance = max(centerDistance.x, centerDistance.y);
          alphaInner = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, maxCenterDistance / relativeInnerNodeRadius);
          alphaOuter = 1.0 - smoothstep(0.0, delta, abs(1.0 - delta - r));
        } else {
          // In non-ortho mode, we do not show a halo. Therefore, make the active node round
          // to give at least a slight clue, which node is active.
          alphaInner = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r / relativeInnerNodeRadius);
          alphaOuter = 0.0;
        }
        alphaOuter = max(0.0, alphaOuter - alphaInner);
      #endif
      vec4 inner = vec4(color, alphaInner);
      vec4 outer = vec4(color, alphaOuter);
      gl_FragColor = mix(inner, outer, alphaOuter);
      if (gl_FragColor.a == 0.0) {
        // Discard that texel to avoid that the transparent halo content
        // overwrites other nodes.
        discard;
      }
    }
}`;
window.materials["nodeFragment"]["fragmentShader"] = modifiedShader;
window.materials["nodeFragment"].needsUpdate = true;
window.needsRerender = true;