How to create nodes with a border with the webgl renderer in sigmajs

I have a rather large graph so it is necessary to use webgl instead of canvas. I tried to change the webgl node renderer by trying to trick it to draw two circles with the outer one being a little bit bigger, thus creating an border. Unfortunately this didn't work. In the data array the extra code is completely ignored. If someone has an idea it would be appreciated! Below is the code that renders the nodes for the webgl renderer.

sigma.webgl.nodes.def = {
POINTS: 3,
ATTRIBUTES: 5,
addNode: function(node, data, i, prefix, settings) {
var color = sigma.utils.floatColor(
node.color || settings('defaultNodeColor')
);

data[i++] = node[prefix + 'x'];
data[i++] = node[prefix + 'y'];
data[i++] = node[prefix + 'size'];
data[i++] = 7864320;
data[i++] = 0;

data[i++] = node[prefix + 'x'];
data[i++] = node[prefix + 'y'];
data[i++] = node[prefix + 'size'];
data[i++] = 7864320;
data[i++] = 2 * Math.PI / 3;

data[i++] = node[prefix + 'x'];
data[i++] = node[prefix + 'y'];
data[i++] = node[prefix + 'size'];
data[i++] = 7864320;
data[i++] = 4 * Math.PI / 3;

/* This below was my idea to create another node which is slightly bigger
and white. The parameters for that are not the issue. The issue is that the
log seems to skip this after 12 indexes of the array data for every node. I
wasn't able to find how they define this. */
data[i++] = node[prefix + 'x'];
data[i++] = node[prefix + 'y'];
data[i++] = node[prefix + 'size'];
data[i++] = color;
data[i++] = 0;

data[i++] = node[prefix + 'x'];
data[i++] = node[prefix + 'y'];
data[i++] = node[prefix + 'size'];
data[i++] = color;
data[i++] = 2 * Math.PI / 3;

data[i++] = node[prefix + 'x'];
data[i++] = node[prefix + 'y'];
data[i++] = node[prefix + 'size'];
data[i++] = color;
data[i++] = 4 * Math.PI / 3;
*/
//The log is in the picture below
console.log(data);
},
render: function(gl, program, data, params) {
var buffer;

// Define attributes:


// I guess they define the location and the attributes here.
var positionLocation =
gl.getAttribLocation(program, 'a_position'),
sizeLocation =
gl.getAttribLocation(program, 'a_size'),
colorLocation =
gl.getAttribLocation(program, 'a_color'),
angleLocation =
gl.getAttribLocation(program, 'a_angle'),
resolutionLocation =
gl.getUniformLocation(program, 'u_resolution'),
matrixLocation =
gl.getUniformLocation(program, 'u_matrix'),
ratioLocation =
gl.getUniformLocation(program, 'u_ratio'),
scaleLocation =
gl.getUniformLocation(program, 'u_scale');

buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);

// I don't know what happens here

gl.enableVertexAttribArray(positionLocation);
gl.enableVertexAttribArray(sizeLocation);
gl.enableVertexAttribArray(colorLocation);
gl.enableVertexAttribArray(angleLocation);

gl.vertexAttribPointer(
positionLocation,
2,
gl.FLOAT,
false,
this.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT,
0
);
gl.vertexAttribPointer(
sizeLocation,
1,
gl.FLOAT,
false,
this.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT,
8
);
gl.vertexAttribPointer(
colorLocation,
1,
gl.FLOAT,
false,
this.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT,
12
);
gl.vertexAttribPointer(
angleLocation,
1,
gl.FLOAT,
false,
this.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT,
16
);

gl.drawArrays(
gl.TRIANGLES,
params.start || 0,
params.count || (data.length / this.ATTRIBUTES)
);
},


From Without Border

To with Border(I did this with the canvas renderer, where it was really easy)

This is the log. You can see that only the first 3 blocks are looped(only the ones with the color value 7864320

If any of you know another method to achieve the border I would love to know.

You should post a code sample. Try to format it nicely and make sure it contains the bare minimum code required to demonstrate the problem.
– gburton
Jun 28 at 16:36

Additionally, you didn't provide an example of how your program should behave.
– Oighea
Jun 28 at 17:47

Yes, sorry, I have updated it.
– Cpt. Curt
Jun 28 at 20:13

1 Answer
1

Please note if you use SVG render you can use some CSS properties to style the graph.
To add a border you can use

circle {
stroke: red
}


I have to use webgl. Otherwise I would just use the canvas renderer!
– Cpt. Curt
2 days ago

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.