[storybook] Updates custom-rendering example

Since @sigma/node-border is now working, to get a custom node program
that is not already implemented elsewhere for the custom-rendering
story, the local node.border.ts program is replaced by a new
node.gradient.ts program.

It's basically the same, but with the fragment shader modified so that
it draws a gradient instead of a border.

packages/storybook/stories/custom-rendering/index.ts

@@ -9,25 +9,26 @@
  * but you can add your own.
  *
  * Here in this example, some nodes are drawn with images in them using the
- * the getNodeProgramImage provided by Sigma. Some others are drawn as white
- * disc with a border, and the custom program to draw them is in this directory:
- * - "./node.border.ts" is the node program. It tells sigma what data to give to
- *   the GPU and how.
- * - "./node.border.vert.glsl" is the vertex shader. It tells the GPU how to
+ * createNodeImageProgram provided by @sigma/node-image. Some others are drawn
+ * as white disc with a border, and the custom program to draw them is in this
+ * directory:
+ * - "./node.gradient.ts" is the node program. It tells sigma what data to give
+ *   to the GPU and how.
+ * - "./node.gradient.vert.glsl" is the vertex shader. It tells the GPU how to
  *   interpret the data provided by the program to obtain a node position,
  *   mostly.
- * - "./node.border.frag.glsl" is the fragment shader. It tells for each pixel
- *   what color it should get, relatively to data given by the program and its
- *   position inside the shape. Basically, the GPU wants to draw a square, but
- *   we "carve" a disc in it.
+ * - "./node.gradient.frag.glsl" is the fragment shader. It tells for each
+ *   pixel what color it should get, relatively to data given by the program
+ *   and its position inside the shape. Basically, the GPU wants to draw a
+ *   square, but we "carve" a disc in it.
  */
 import { createNodeImageProgram } from "@sigma/node-image";
 import Graph from "graphology";
 import ForceSupervisor from "graphology-layout-force/worker";
 import Sigma from "sigma";
 
 import { onStoryDown } from "../utils";
-import NodeBorderProgram from "./node.border";
+import NodeGradientProgram from "./node.gradient";
 
 export default () => {
   const container = document.getElementById("sigma-container") as HTMLElement;
@@ -43,9 +44,9 @@ export default () => {
   graph.addNode("Suzan", { size: 15, label: "Suzan", type: "image", image: "./user.svg", color: RED });
   graph.addNode("Nantes", { size: 15, label: "Nantes", type: "image", image: "./city.svg", color: BLUE });
   graph.addNode("New-York", { size: 15, label: "New-York", type: "image", image: "./city.svg", color: BLUE });
-  graph.addNode("Sushis", { size: 7, label: "Sushis", type: "border", color: GREEN });
-  graph.addNode("Falafels", { size: 7, label: "Falafels", type: "border", color: GREEN });
-  graph.addNode("Kouign Amann", { size: 7, label: "Kouign Amann", type: "border", color: GREEN });
+  graph.addNode("Sushis", { size: 7, label: "Sushis", type: "gradient", color: GREEN });
+  graph.addNode("Falafels", { size: 7, label: "Falafels", type: "gradient", color: GREEN });
+  graph.addNode("Kouign Amann", { size: 7, label: "Kouign Amann", type: "gradient", color: GREEN });
 
   graph.addEdge("John", "Mary", { type: "line", label: "works with", size: 5 });
   graph.addEdge("Mary", "Suzan", { type: "line", label: "works with", size: 5 });
@@ -66,7 +67,7 @@ export default () => {
     // We don't have to declare edgeProgramClasses here, because we only use the default ones ("line" and "arrow")
     nodeProgramClasses: {
       image: createNodeImageProgram(),
-      border: NodeBorderProgram,
+      gradient: NodeGradientProgram,
     },
     renderEdgeLabels: true,
   });

packages/storybook/stories/custom-rendering/node.border.frag.glsl.ts → packages/storybook/stories/custom-rendering/node.gradient.frag.glsl.ts

@@ -20,17 +20,12 @@ void main(void) {
     gl_FragColor = transparent;
   #else
   // For normal mode, we use the color:
-  float t = 0.0;
-  if (distToCenter < halfRadius - v_border)
-    gl_FragColor = white;
-  else if (distToCenter < halfRadius)
-    gl_FragColor = mix(v_color, white, (halfRadius - distToCenter) / v_border);
-  else if (distToCenter < radius - v_border)
-    gl_FragColor = v_color;
-  else if (distToCenter < radius)
+  if (distToCenter > radius)
+    gl_FragColor = transparent;
+  else if (distToCenter > radius - v_border)
     gl_FragColor = mix(transparent, v_color, (radius - distToCenter) / v_border);
   else
-    gl_FragColor = transparent;
+    gl_FragColor = mix(v_color, white, (radius - distToCenter) / radius);
   #endif
 }
 `;

packages/storybook/stories/custom-rendering/node.border.ts → packages/storybook/stories/custom-rendering/node.gradient.ts

@@ -1,30 +1,15 @@
-/**
- * This class copies sigma/rendering/programs/node-circle, but with a tiny
- * difference: The fragment shader ("./node.border.frag.glsl") draws a white
- * disc with a colored border.
- */
-
-/**
- * Sigma.js WebGL Renderer Node Program
- * =====================================
- *
- * Simple program rendering nodes using GL_POINTS. This is faster than the
- * three triangle option but has some quirks and is not supported equally by
- * every GPU.
- * @module
- */
 import { NodeProgram, ProgramInfo } from "sigma/rendering";
 import { NodeDisplayData, RenderParams } from "sigma/types";
 import { floatColor } from "sigma/utils";
 
-import FRAGMENT_SHADER_SOURCE from "./node.border.frag.glsl";
-import VERTEX_SHADER_SOURCE from "./node.border.vert.glsl";
+import FRAGMENT_SHADER_SOURCE from "./node.gradient.frag.glsl";
+import VERTEX_SHADER_SOURCE from "./node.gradient.vert.glsl";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix"] as const;
 
-export default class NodeBorderProgram extends NodeProgram<(typeof UNIFORMS)[number]> {
+export default class NodeGradientProgram extends NodeProgram<(typeof UNIFORMS)[number]> {
   getDefinition() {
     return {
       VERTICES: 1,