@sigma/layer-webgl
v3.0.0-beta.1
Published
A package to help drawing custom WebGL layers with sigma.js
Downloads
23
Readme
Sigma.js - WebGL layers
This package enables adding custom WebGL layers in sigma.js:
WebGLLayerProgram
is a tweaked version of theProgram
abstract class from sigma.js, and it facilitates writing custom programs;bindWebGLLayer
allows binding aWebGLLayerProgram
to an existing sigma instance, and it returns a cleanup function.
This package also exports some preexisting layers, that render various shapes:
createContoursProgram
allows rendering contour lines as a background layer, around a set of given nodes, with one or multiple levels, and with of without fixed width levels separations.
How to use
Within your application that uses sigma.js, you can use @sigma/layer-webgl
as following:
import { createContoursProgram } from "@sigma/layer-webgl";
const graph = new Graph();
graph.addNode("john", {
x: 0,
y: 0,
size: 4,
label: "John",
});
graph.addNode("jack", {
x: 10,
y: 20,
size: 8,
label: "Jack",
});
graph.addEdge("jack", "john");
const renderer = new Sigma(graph, container);
// Bind a custom layer to the renderer:
bindWebGLLayer("metaballs", renderer, createContoursProgram(graph.nodes()));
Please check the related Storybook for more advanced examples.