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
Pipeline #3750 failed with stage
    in 0 seconds
    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';
    import ContourTriangleNodeProgram from '../../src/external-deps/sigmajs-triangle-with-contour.js';
    import SquareNodeProgram from '../../src/external-deps/sigmajs-square.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;
    console.log('imported sigma', Sigma);
    ......@@ -200,7 +202,9 @@ function _sigma(left, right, el, opts) {
    triangle: TriangleNodeProgram,
    ctriangle: ContourTriangleNodeProgram,
    square: SquareNodeProgram,
    csquare: ContourSquareNodeProgram
    csquare: ContourSquareNodeProgram,
    diamond: DiamondNodeProgram,
    cdiamond: ContourDiamondNodeProgram
    },
    ...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 @@
    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;
    }
    `;
    import TriangleProgram from "./sigmajs-triangle-abstract";
    const POINTS = 12;
    const ATTRIBUTES = 5;
    ......@@ -87,182 +22,19 @@ const ANGLE_2_1 = (3 * Math.PI) / 4;
    const ANGLE_2_2 = (5 * 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) {
    super(gl, vertexShaderSource, fragmentShaderSource, 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,
    );
    super(gl, POINTS, ATTRIBUTES);
    }
    process(data, hidden, offset) {
    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 gray = floatColor('#aaa')
    triangleDefinitions(data) {
    const gray = '#aaa';
    const size = data.size / 1.7; // experimental...
    const contourSize = size + 0.8; // experimental...
    // first the contour
    // first triangle (upper-right)
    array[i++] = data.x;
    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);
    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-square.js
    View file @ e37f3237
    ......@@ -10,72 +10,7 @@
    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;
    }
    `;
    import TriangleProgram from "./sigmajs-triangle-abstract";
    const POINTS = 6;
    const ATTRIBUTES = 5;
    ......@@ -87,137 +22,15 @@ const ANGLE_2_1 = (3 * Math.PI) / 4;
    const ANGLE_2_2 = (5 * 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) {
    super(gl, vertexShaderSource, fragmentShaderSource, 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,
    );
    super(gl, POINTS, ATTRIBUTES);
    }
    process(data, hidden, offset) {
    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);
    triangleDefinitions(data) {
    const size = data.size / 1.7; // experimental...
    // 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);
    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-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 @@
    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;
    }
    `;
    import TriangleProgram from "./sigmajs-triangle-abstract";
    const POINTS = 6;
    const ATTRIBUTES = 5;
    ......@@ -84,140 +19,17 @@ 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 {
    export default class NodeProgram extends TriangleProgram {
    constructor(gl) {
    super(gl, vertexShaderSource, fragmentShaderSource, 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,
    );
    super(gl, POINTS, ATTRIBUTES);
    }
    process(data, hidden, offset) {
    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
    triangleDefinitions(data) {
    const gray = floatColor('#aaa')
    const size = data.size / 2.3; // experimental...
    const contourSize = size + 0.8; // experimental...
    array[i++] = data.x;
    array[i++] = data.y;
    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);
    return [ { x: data.x, y: data.y, size: contourSize, color: '#aaa', angles: [ANGLE_1, ANGLE_2, ANGLE_3] },
    { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1, ANGLE_2, ANGLE_3] }];
    }
    }
    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