Skip to content

P
purescript-gargantext
Verified Commit e37f3237 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[sigma.js] refactoring of triangle/square/diamond node renderers

parent d9d082ad
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 625 deletions
src/Gargantext/Hooks/Sigmax/Sigma.js
View file @ e37f3237
...@@ -9,6 +9,8 @@ import TriangleNodeProgram from '../../src/external-deps/sigmajs-triangle.js'; ...@@ -9,6 +9,8 @@ import TriangleNodeProgram from '../../src/external-deps/sigmajs-triangle.js';
import ContourTriangleNodeProgram from '../../src/external-deps/sigmajs-triangle-with-contour.js'; import ContourTriangleNodeProgram from '../../src/external-deps/sigmajs-triangle-with-contour.js';
import SquareNodeProgram from '../../src/external-deps/sigmajs-square.js'; import SquareNodeProgram from '../../src/external-deps/sigmajs-square.js';
import ContourSquareNodeProgram from '../../src/external-deps/sigmajs-square-with-contour.js'; import ContourSquareNodeProgram from '../../src/external-deps/sigmajs-square-with-contour.js';
import DiamondNodeProgram from '../../src/external-deps/sigmajs-diamond.js';
import ContourDiamondNodeProgram from '../../src/external-deps/sigmajs-diamond-with-contour.js';
let sigma = Sigma.Sigma; let sigma = Sigma.Sigma;
console.log('imported sigma', Sigma); console.log('imported sigma', Sigma);
...@@ -200,7 +202,9 @@ function _sigma(left, right, el, opts) { ...@@ -200,7 +202,9 @@ function _sigma(left, right, el, opts) {
triangle: TriangleNodeProgram, triangle: TriangleNodeProgram,
ctriangle: ContourTriangleNodeProgram, ctriangle: ContourTriangleNodeProgram,
square: SquareNodeProgram, square: SquareNodeProgram,
csquare: ContourSquareNodeProgram csquare: ContourSquareNodeProgram,
diamond: DiamondNodeProgram,
cdiamond: ContourDiamondNodeProgram
}, },
...opts.settings ...opts.settings
}; };
......
src/external-deps/sigmajs-diamond-with-contour.js 0 → 100644
View file @ e37f3237
/**
* Sigma.js WebGL Renderer Node Program
* =====================================
*
* Simple program rendering nodes as triangles.
* It does not extend AbstractNodeProgram, which works very differently, and
* really targets the gl.POINTS drawing methods.
* @module
*/
import { NodeDisplayData } from "sigma/types";
import { floatColor } from "sigma/utils";
import TriangleProgram from "./sigmajs-triangle-abstract";
const POINTS = 12;
const ATTRIBUTES = 5;
const ANGLE_1_1 = (0 * Math.PI) / 4;
const ANGLE_1_2 = (2 * Math.PI) / 4;
const ANGLE_1_3 = (4 * Math.PI) / 4;
const ANGLE_2_1 = (4 * Math.PI) / 4;
const ANGLE_2_2 = (6 * Math.PI) / 4;
const ANGLE_2_3 = (8 * Math.PI) / 4;
export default class NodeProgram extends TriangleProgram {
constructor(gl) {
super(gl, POINTS, ATTRIBUTES);
}
triangleDefinitions(data) {
const gray = '#aaa';
const size = data.size / 1.7; // experimental...
const contourSize = size + 0.8; // experimental...
return [ { x: data.x, y: data.y, size: contourSize, color: gray, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
{ x: data.x, y: data.y, size: contourSize, color: gray, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] },
{ x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
{ x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] } ];
}
}
src/external-deps/sigmajs-diamond.js 0 → 100644
View file @ e37f3237
/**
* Sigma.js WebGL Renderer Node Program
* =====================================
*
* Simple program rendering nodes as triangles.
* It does not extend AbstractNodeProgram, which works very differently, and
* really targets the gl.POINTS drawing methods.
* @module
*/
import { NodeDisplayData } from "sigma/types";
import { floatColor } from "sigma/utils";
import TriangleProgram from "./sigmajs-triangle-abstract";
const POINTS = 6;
const ATTRIBUTES = 5;
const ANGLE_1_1 = (0 * Math.PI) / 4;
const ANGLE_1_2 = (2 * Math.PI) / 4;
const ANGLE_1_3 = (4 * Math.PI) / 4;
const ANGLE_2_1 = (4 * Math.PI) / 4;
const ANGLE_2_2 = (6 * Math.PI) / 4;
const ANGLE_2_3 = (8 * Math.PI) / 4;
export default class NodeProgram extends TriangleProgram {
constructor(gl) {
super(gl, POINTS, ATTRIBUTES);
}
triangleDefinitions(data) {
const size = data.size / 1.7; // experimental...
return [ { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
{ x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] } ];
}
}
src/external-deps/sigmajs-square-with-contour.js
View file @ e37f3237
...@@ -10,72 +10,7 @@ ...@@ -10,72 +10,7 @@
import { NodeDisplayData } from "sigma/types"; import { NodeDisplayData } from "sigma/types";
import { floatColor } from "sigma/utils"; import { floatColor } from "sigma/utils";
import { AbstractProgram, RenderParams } from "sigma/rendering/webgl/programs/common/program"; import TriangleProgram from "./sigmajs-triangle-abstract";
const vertexShaderSource = `
attribute vec2 a_position;
attribute float a_size;
attribute float a_angle;
attribute vec4 a_color;
uniform mat3 u_matrix;
uniform float u_sqrtZoomRatio;
uniform float u_correctionRatio;
varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;
const float bias = 255.0 / 254.0;
const float marginRatio = 1.05;
void main() {
float size = a_size * u_correctionRatio * u_sqrtZoomRatio * 4.0;
vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
vec2 position = a_position + diffVector * marginRatio;
gl_Position = vec4(
(u_matrix * vec3(position, 1)).xy,
0,
1
);
v_border = u_correctionRatio * u_sqrtZoomRatio * u_sqrtZoomRatio;
v_diffVector = diffVector;
//v_radius = size / 2.0 / marginRatio;
v_radius = 1.0;
v_color = a_color;
v_color.a *= bias;
}
`;
const fragmentShaderSource = `
precision mediump float;
varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;
const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
void main(void) {
float dist = length(v_diffVector) - v_radius;
// Originally, a triangle is drawn. This code paints it in such a
// way that a circle is rendered.
//float t = 0.0;
//if (dist > v_border) {
// t = 1.0;
//} else if (dist > 0.0) {
// t = dist / v_border;
//}
//gl_FragColor = mix(v_color, transparent, t);
gl_FragColor = v_color;
}
`;
const POINTS = 12; const POINTS = 12;
const ATTRIBUTES = 5; const ATTRIBUTES = 5;
...@@ -87,182 +22,19 @@ const ANGLE_2_1 = (3 * Math.PI) / 4; ...@@ -87,182 +22,19 @@ const ANGLE_2_1 = (3 * Math.PI) / 4;
const ANGLE_2_2 = (5 * Math.PI) / 4; const ANGLE_2_2 = (5 * Math.PI) / 4;
const ANGLE_2_3 = (7 * Math.PI) / 4; const ANGLE_2_3 = (7 * Math.PI) / 4;
export default class NodeProgram extends AbstractProgram { export default class NodeProgram extends TriangleProgram {
constructor(gl) { constructor(gl) {
super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES); super(gl, POINTS, ATTRIBUTES);
// Locations
this.positionLocation = gl.getAttribLocation(this.program, "a_position");
this.sizeLocation = gl.getAttribLocation(this.program, "a_size");
this.colorLocation = gl.getAttribLocation(this.program, "a_color");
this.angleLocation = gl.getAttribLocation(this.program, "a_angle");
// Uniform Location
const matrixLocation = gl.getUniformLocation(this.program, "u_matrix");
if (matrixLocation === null) throw new Error("AbstractNodeProgram: error while getting matrixLocation");
this.matrixLocation = matrixLocation;
const sqrtZoomRatioLocation = gl.getUniformLocation(this.program, "u_sqrtZoomRatio");
if (sqrtZoomRatioLocation === null) throw new Error("NodeProgram: error while getting sqrtZoomRatioLocation");
this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
const correctionRatioLocation = gl.getUniformLocation(this.program, "u_correctionRatio");
if (correctionRatioLocation === null) throw new Error("NodeProgram: error while getting correctionRatioLocation");
this.correctionRatioLocation = correctionRatioLocation;
this.bind();
}
bind() {
const gl = this.gl;
gl.enableVertexAttribArray(this.positionLocation);
gl.enableVertexAttribArray(this.sizeLocation);
gl.enableVertexAttribArray(this.colorLocation);
gl.enableVertexAttribArray(this.angleLocation);
gl.vertexAttribPointer(
this.positionLocation,
2,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
0,
);
gl.vertexAttribPointer(
this.sizeLocation,
1,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
8
);
gl.vertexAttribPointer(
this.colorLocation,
4,
gl.UNSIGNED_BYTE,
true,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
12,
);
gl.vertexAttribPointer(
this.angleLocation,
1,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
16,
);
} }
process(data, hidden, offset) { triangleDefinitions(data) {
const array = this.array; const gray = '#aaa';
let i = offset * POINTS * ATTRIBUTES;
if (hidden) {
for (let l = i + POINTS * ATTRIBUTES; i < l; i++) array[i] = 0;
return;
}
const gray = floatColor('#aaa')
const size = data.size / 1.7; // experimental... const size = data.size / 1.7; // experimental...
const contourSize = size + 0.8; // experimental... const contourSize = size + 0.8; // experimental...
// first the contour return [ { x: data.x, y: data.y, size: contourSize, color: gray, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
{ x: data.x, y: data.y, size: contourSize, color: gray, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] },
// first triangle (upper-right) { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
array[i++] = data.x; { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] } ];
array[i++] = data.y;
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_1_1;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_1_2;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_1_3;
// second triangle (lower-left)
array[i++] = data.x;
array[i++] = data.y;
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_2_1;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_2_2;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_2_3;
// now the inside triangle
const color = floatColor(data.color);
// first triangle (upper-right)
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_1_1;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_1_2;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_1_3;
// second triangle (lower-left)
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_2_1;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_2_2;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i] = ANGLE_2_3;
}
render(params) {
if (this.hasNothingToRender()) return;
const gl = this.gl;
const program = this.program;
gl.useProgram(program);
gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
gl.drawArrays(gl.TRIANGLES, 0, this.array.length / ATTRIBUTES);
} }
} }
src/external-deps/sigmajs-square.js
View file @ e37f3237
...@@ -10,72 +10,7 @@ ...@@ -10,72 +10,7 @@
import { NodeDisplayData } from "sigma/types"; import { NodeDisplayData } from "sigma/types";
import { floatColor } from "sigma/utils"; import { floatColor } from "sigma/utils";
import { AbstractProgram, RenderParams } from "sigma/rendering/webgl/programs/common/program"; import TriangleProgram from "./sigmajs-triangle-abstract";
const vertexShaderSource = `
attribute vec2 a_position;
attribute float a_size;
attribute float a_angle;
attribute vec4 a_color;
uniform mat3 u_matrix;
uniform float u_sqrtZoomRatio;
uniform float u_correctionRatio;
varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;
const float bias = 255.0 / 254.0;
const float marginRatio = 1.05;
void main() {
float size = a_size * u_correctionRatio * u_sqrtZoomRatio * 4.0;
vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
vec2 position = a_position + diffVector * marginRatio;
gl_Position = vec4(
(u_matrix * vec3(position, 1)).xy,
0,
1
);
v_border = u_correctionRatio * u_sqrtZoomRatio * u_sqrtZoomRatio;
v_diffVector = diffVector;
//v_radius = size / 2.0 / marginRatio;
v_radius = 1.0;
v_color = a_color;
v_color.a *= bias;
}
`;
const fragmentShaderSource = `
precision mediump float;
varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;
const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
void main(void) {
float dist = length(v_diffVector) - v_radius;
// Originally, a triangle is drawn. This code paints it in such a
// way that a circle is rendered.
//float t = 0.0;
//if (dist > v_border) {
// t = 1.0;
//} else if (dist > 0.0) {
// t = dist / v_border;
//}
//gl_FragColor = mix(v_color, transparent, t);
gl_FragColor = v_color;
}
`;
const POINTS = 6; const POINTS = 6;
const ATTRIBUTES = 5; const ATTRIBUTES = 5;
...@@ -87,137 +22,15 @@ const ANGLE_2_1 = (3 * Math.PI) / 4; ...@@ -87,137 +22,15 @@ const ANGLE_2_1 = (3 * Math.PI) / 4;
const ANGLE_2_2 = (5 * Math.PI) / 4; const ANGLE_2_2 = (5 * Math.PI) / 4;
const ANGLE_2_3 = (7 * Math.PI) / 4; const ANGLE_2_3 = (7 * Math.PI) / 4;
export default class NodeProgram extends AbstractProgram { export default class NodeProgram extends TriangleProgram {
constructor(gl) { constructor(gl) {
super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES); super(gl, POINTS, ATTRIBUTES);
// Locations
this.positionLocation = gl.getAttribLocation(this.program, "a_position");
this.sizeLocation = gl.getAttribLocation(this.program, "a_size");
this.colorLocation = gl.getAttribLocation(this.program, "a_color");
this.angleLocation = gl.getAttribLocation(this.program, "a_angle");
// Uniform Location
const matrixLocation = gl.getUniformLocation(this.program, "u_matrix");
if (matrixLocation === null) throw new Error("AbstractNodeProgram: error while getting matrixLocation");
this.matrixLocation = matrixLocation;
const sqrtZoomRatioLocation = gl.getUniformLocation(this.program, "u_sqrtZoomRatio");
if (sqrtZoomRatioLocation === null) throw new Error("NodeProgram: error while getting sqrtZoomRatioLocation");
this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
const correctionRatioLocation = gl.getUniformLocation(this.program, "u_correctionRatio");
if (correctionRatioLocation === null) throw new Error("NodeProgram: error while getting correctionRatioLocation");
this.correctionRatioLocation = correctionRatioLocation;
this.bind();
}
bind() {
const gl = this.gl;
gl.enableVertexAttribArray(this.positionLocation);
gl.enableVertexAttribArray(this.sizeLocation);
gl.enableVertexAttribArray(this.colorLocation);
gl.enableVertexAttribArray(this.angleLocation);
gl.vertexAttribPointer(
this.positionLocation,
2,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
0,
);
gl.vertexAttribPointer(
this.sizeLocation,
1,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
8
);
gl.vertexAttribPointer(
this.colorLocation,
4,
gl.UNSIGNED_BYTE,
true,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
12,
);
gl.vertexAttribPointer(
this.angleLocation,
1,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
16,
);
} }
process(data, hidden, offset) { triangleDefinitions(data) {
const array = this.array;
let i = offset * POINTS * ATTRIBUTES;
if (hidden) {
for (let l = i + POINTS * ATTRIBUTES; i < l; i++) array[i] = 0;
return;
}
const color = floatColor(data.color);
const size = data.size / 1.7; // experimental... const size = data.size / 1.7; // experimental...
// first triangle (upper-right) return [ { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
array[i++] = data.x; { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] }];
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_1_1;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_1_2;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_1_3;
// second triangle (lower-left)
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_2_1;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_2_2;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i] = ANGLE_2_3;
}
render(params) {
if (this.hasNothingToRender()) return;
const gl = this.gl;
const program = this.program;
gl.useProgram(program);
gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
gl.drawArrays(gl.TRIANGLES, 0, this.array.length / ATTRIBUTES);
} }
} }
src/external-deps/sigmajs-triangle-abstract.js 0 → 100644
View file @ e37f3237
/**
* Sigma.js WebGL Renderer Node Program
* =====================================
*
* Simple program rendering nodes as triangles.
* It does not extend AbstractNodeProgram, which works very differently, and
* really targets the gl.POINTS drawing methods.
* @module
*/
import { NodeDisplayData } from "sigma/types";
import { floatColor } from "sigma/utils";
import { AbstractProgram, RenderParams } from "sigma/rendering/webgl/programs/common/program";
const vertexShaderSource = `
attribute vec2 a_position;
attribute float a_size;
attribute float a_angle;
attribute vec4 a_color;
uniform mat3 u_matrix;
uniform float u_sqrtZoomRatio;
uniform float u_correctionRatio;
varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;
const float bias = 255.0 / 254.0;
const float marginRatio = 1.05;
void main() {
float size = a_size * u_correctionRatio * u_sqrtZoomRatio * 4.0;
vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
vec2 position = a_position + diffVector * marginRatio;
gl_Position = vec4(
(u_matrix * vec3(position, 1)).xy,
0,
1
);
v_border = u_correctionRatio * u_sqrtZoomRatio * u_sqrtZoomRatio;
v_diffVector = diffVector;
//v_radius = size / 2.0 / marginRatio;
v_radius = 1.0;
v_color = a_color;
v_color.a *= bias;
}
`;
const fragmentShaderSource = `
precision mediump float;
varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;
const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
void main(void) {
float dist = length(v_diffVector) - v_radius;
// Originally, a triangle is drawn. This code paints it in such a
// way that a circle is rendered.
//float t = 0.0;
//if (dist > v_border) {
// t = 1.0;
//} else if (dist > 0.0) {
// t = dist / v_border;
//}
//gl_FragColor = mix(v_color, transparent, t);
gl_FragColor = v_color;
}
`;
const POINTS = 3;
const ATTRIBUTES = 5;
const ANGLE_1 = - (0.5 * Math.PI) / 3;
const ANGLE_2 = (1.5 * Math.PI) / 3;
const ANGLE_3 = (3.5 * Math.PI) / 3;
export default class NodeProgram extends AbstractProgram {
constructor(gl, points, attributes) {
let pts = points || POINTS;
let attribs = attributes || ATTRIBUTES;
super(gl, vertexShaderSource, fragmentShaderSource, pts, attribs);
// Locations
this.positionLocation = gl.getAttribLocation(this.program, "a_position");
this.sizeLocation = gl.getAttribLocation(this.program, "a_size");
this.colorLocation = gl.getAttribLocation(this.program, "a_color");
this.angleLocation = gl.getAttribLocation(this.program, "a_angle");
// Uniform Location
const matrixLocation = gl.getUniformLocation(this.program, "u_matrix");
if (matrixLocation === null) throw new Error("AbstractNodeProgram: error while getting matrixLocation");
this.matrixLocation = matrixLocation;
const sqrtZoomRatioLocation = gl.getUniformLocation(this.program, "u_sqrtZoomRatio");
if (sqrtZoomRatioLocation === null) throw new Error("NodeProgram: error while getting sqrtZoomRatioLocation");
this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
const correctionRatioLocation = gl.getUniformLocation(this.program, "u_correctionRatio");
if (correctionRatioLocation === null) throw new Error("NodeProgram: error while getting correctionRatioLocation");
this.correctionRatioLocation = correctionRatioLocation;
this.bind();
}
bind() {
const gl = this.gl;
gl.enableVertexAttribArray(this.positionLocation);
gl.enableVertexAttribArray(this.sizeLocation);
gl.enableVertexAttribArray(this.colorLocation);
gl.enableVertexAttribArray(this.angleLocation);
gl.vertexAttribPointer(
this.positionLocation,
2,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
0,
);
gl.vertexAttribPointer(
this.sizeLocation,
1,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
8
);
gl.vertexAttribPointer(
this.colorLocation,
4,
gl.UNSIGNED_BYTE,
true,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
12,
);
gl.vertexAttribPointer(
this.angleLocation,
1,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
16,
);
}
process(data, hidden, offset) {
const array = this.array;
let i = offset * this.points * this.attributes;
if (hidden) {
for (let l = i + this.points * this.attributes; i < l; i++) array[i] = 0;
return;
}
let definitions = this.triangleDefinitions(data);
for(let l = 0; l < definitions.length; l++) {
this.renderTriangle(i + l * 3*this.attributes, definitions[l]);
}
}
// overwrite this function
triangleDefinitions(data) {
const size = data.size / 1.7; // experimental...
return [ { x: data.x, y: data.y, size: data.size, color: data.color, angles: [ANGLE_1, ANGLE_2, ANGLE_3] } ];
}
renderTriangle(i, { x, y, size, color, angles }) {
const array = this.array;
const fColor = floatColor(color);
array[i++] = x;
array[i++] = y;
array[i++] = size;
array[i++] = fColor;
array[i++] = angles[0];
array[i++] = x;
array[i++] = y;
array[i++] = size;
array[i++] = fColor;
array[i++] = angles[1];
array[i++] = x;
array[i++] = y;
array[i++] = size;
array[i++] = fColor;
array[i] = angles[2];
}
render(params) {
if (this.hasNothingToRender()) return;
const gl = this.gl;
const program = this.program;
gl.useProgram(program);
gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
gl.drawArrays(gl.TRIANGLES, 0, this.array.length / this.attributes);
}
}
src/external-deps/sigmajs-triangle-with-contour.js
View file @ e37f3237
...@@ -10,72 +10,7 @@ ...@@ -10,72 +10,7 @@
import { NodeDisplayData } from "sigma/types"; import { NodeDisplayData } from "sigma/types";
import { floatColor } from "sigma/utils"; import { floatColor } from "sigma/utils";
import { AbstractProgram, RenderParams } from "sigma/rendering/webgl/programs/common/program"; import TriangleProgram from "./sigmajs-triangle-abstract";
const vertexShaderSource = `
attribute vec2 a_position;
attribute float a_size;
attribute float a_angle;
attribute vec4 a_color;
uniform mat3 u_matrix;
uniform float u_sqrtZoomRatio;
uniform float u_correctionRatio;
varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;
const float bias = 255.0 / 254.0;
const float marginRatio = 1.05;
void main() {
float size = a_size * u_correctionRatio * u_sqrtZoomRatio * 4.0;
vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
vec2 position = a_position + diffVector * marginRatio;
gl_Position = vec4(
(u_matrix * vec3(position, 1)).xy,
0,
1
);
v_border = u_correctionRatio * u_sqrtZoomRatio * u_sqrtZoomRatio;
v_diffVector = diffVector;
//v_radius = size / 2.0 / marginRatio;
v_radius = 1.0;
v_color = a_color;
v_color.a *= bias;
}
`;
const fragmentShaderSource = `
precision mediump float;
varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;
const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
void main(void) {
float dist = length(v_diffVector) - v_radius;
// Originally, a triangle is drawn. This code paints it in such a
// way that a circle is rendered.
//float t = 0.0;
//if (dist > v_border) {
// t = 1.0;
//} else if (dist > 0.0) {
// t = dist / v_border;
//}
//gl_FragColor = mix(v_color, transparent, t);
gl_FragColor = v_color;
}
`;
const POINTS = 6; const POINTS = 6;
const ATTRIBUTES = 5; const ATTRIBUTES = 5;
...@@ -84,140 +19,17 @@ const ANGLE_1 = - (0.5 * Math.PI) / 3; ...@@ -84,140 +19,17 @@ const ANGLE_1 = - (0.5 * Math.PI) / 3;
const ANGLE_2 = (1.5 * Math.PI) / 3; const ANGLE_2 = (1.5 * Math.PI) / 3;
const ANGLE_3 = (3.5 * Math.PI) / 3; const ANGLE_3 = (3.5 * Math.PI) / 3;
export default class NodeProgram extends AbstractProgram { export default class NodeProgram extends TriangleProgram {
constructor(gl) { constructor(gl) {
super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES); super(gl, POINTS, ATTRIBUTES);
// Locations
this.positionLocation = gl.getAttribLocation(this.program, "a_position");
this.sizeLocation = gl.getAttribLocation(this.program, "a_size");
this.colorLocation = gl.getAttribLocation(this.program, "a_color");
this.angleLocation = gl.getAttribLocation(this.program, "a_angle");
// Uniform Location
const matrixLocation = gl.getUniformLocation(this.program, "u_matrix");
if (matrixLocation === null) throw new Error("AbstractNodeProgram: error while getting matrixLocation");
this.matrixLocation = matrixLocation;
const sqrtZoomRatioLocation = gl.getUniformLocation(this.program, "u_sqrtZoomRatio");
if (sqrtZoomRatioLocation === null) throw new Error("NodeProgram: error while getting sqrtZoomRatioLocation");
this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
const correctionRatioLocation = gl.getUniformLocation(this.program, "u_correctionRatio");
if (correctionRatioLocation === null) throw new Error("NodeProgram: error while getting correctionRatioLocation");
this.correctionRatioLocation = correctionRatioLocation;
this.bind();
}
bind() {
const gl = this.gl;
gl.enableVertexAttribArray(this.positionLocation);
gl.enableVertexAttribArray(this.sizeLocation);
gl.enableVertexAttribArray(this.colorLocation);
gl.enableVertexAttribArray(this.angleLocation);
gl.vertexAttribPointer(
this.positionLocation,
2,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
0,
);
gl.vertexAttribPointer(
this.sizeLocation,
1,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
8
);
gl.vertexAttribPointer(
this.colorLocation,
4,
gl.UNSIGNED_BYTE,
true,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
12,
);
gl.vertexAttribPointer(
this.angleLocation,
1,
gl.FLOAT,
false,
this.attributes * Float32Array.BYTES_PER_ELEMENT,
16,
);
} }
process(data, hidden, offset) { triangleDefinitions(data) {
const array = this.array;
let i = offset * POINTS * ATTRIBUTES;
if (hidden) {
for (let l = i + POINTS * ATTRIBUTES; i < l; i++) array[i] = 0;
return;
}
// first the contour
const gray = floatColor('#aaa') const gray = floatColor('#aaa')
const size = data.size / 2.3; // experimental... const size = data.size / 2.3; // experimental...
const contourSize = size + 0.8; // experimental... const contourSize = size + 0.8; // experimental...
array[i++] = data.x; return [ { x: data.x, y: data.y, size: contourSize, color: '#aaa', angles: [ANGLE_1, ANGLE_2, ANGLE_3] },
array[i++] = data.y; { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1, ANGLE_2, ANGLE_3] }];
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_1;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_2;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = contourSize;
array[i++] = gray;
array[i++] = ANGLE_3;
// now the inside triangle
const color = floatColor(data.color);
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_1;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i++] = ANGLE_2;
array[i++] = data.x;
array[i++] = data.y;
array[i++] = size;
array[i++] = color;
array[i] = ANGLE_3;
}
render(params) {
if (this.hasNothingToRender()) return;
const gl = this.gl;
const program = this.program;
gl.useProgram(program);
gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
gl.drawArrays(gl.TRIANGLES, 0, this.array.length / ATTRIBUTES);
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment