From 107787a774457dc296aebd9d928ad1a5596834e6 Mon Sep 17 00:00:00 2001 From: Alexis Jacomy Date: Mon, 25 Mar 2024 17:21:21 +0100 Subject: [PATCH] [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. --- .../stories/custom-rendering/index.ts | 29 ++++++++++--------- ...rag.glsl.ts => node.gradient.frag.glsl.ts} | 13 +++------ .../{node.border.ts => node.gradient.ts} | 21 ++------------ ...ert.glsl.ts => node.gradient.vert.glsl.ts} | 0 4 files changed, 22 insertions(+), 41 deletions(-) rename packages/storybook/stories/custom-rendering/{node.border.frag.glsl.ts => node.gradient.frag.glsl.ts} (68%) rename packages/storybook/stories/custom-rendering/{node.border.ts => node.gradient.ts} (67%) rename packages/storybook/stories/custom-rendering/{node.border.vert.glsl.ts => node.gradient.vert.glsl.ts} (100%) diff --git a/packages/storybook/stories/custom-rendering/index.ts b/packages/storybook/stories/custom-rendering/index.ts index d2fbb0e03..2e3aae6b4 100644 --- a/packages/storybook/stories/custom-rendering/index.ts +++ b/packages/storybook/stories/custom-rendering/index.ts @@ -9,17 +9,18 @@ * 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"; @@ -27,7 +28,7 @@ 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, }); diff --git a/packages/storybook/stories/custom-rendering/node.border.frag.glsl.ts b/packages/storybook/stories/custom-rendering/node.gradient.frag.glsl.ts similarity index 68% rename from packages/storybook/stories/custom-rendering/node.border.frag.glsl.ts rename to packages/storybook/stories/custom-rendering/node.gradient.frag.glsl.ts index 4f9c13c0e..e066ddfa0 100644 --- a/packages/storybook/stories/custom-rendering/node.border.frag.glsl.ts +++ b/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 } `; diff --git a/packages/storybook/stories/custom-rendering/node.border.ts b/packages/storybook/stories/custom-rendering/node.gradient.ts similarity index 67% rename from packages/storybook/stories/custom-rendering/node.border.ts rename to packages/storybook/stories/custom-rendering/node.gradient.ts index edf797198..4fe23984a 100644 --- a/packages/storybook/stories/custom-rendering/node.border.ts +++ b/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, diff --git a/packages/storybook/stories/custom-rendering/node.border.vert.glsl.ts b/packages/storybook/stories/custom-rendering/node.gradient.vert.glsl.ts similarity index 100% rename from packages/storybook/stories/custom-rendering/node.border.vert.glsl.ts rename to packages/storybook/stories/custom-rendering/node.gradient.vert.glsl.ts