Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
P
purescript-gargantext
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Grégoire Locqueville
purescript-gargantext
Commits
e37f3237
Verified
Commit
e37f3237
authored
1 year ago
by
Przemyslaw Kaminski
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[sigma.js] refactoring of triangle/square/diamond node renderers
parent
d9d082ad
Changes
7
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
318 additions
and
625 deletions
+318
-625
Sigma.js
src/Gargantext/Hooks/Sigmax/Sigma.js
+5
-1
sigmajs-diamond-with-contour.js
src/external-deps/sigmajs-diamond-with-contour.js
+40
-0
sigmajs-diamond.js
src/external-deps/sigmajs-diamond.js
+36
-0
sigmajs-square-with-contour.js
src/external-deps/sigmajs-square-with-contour.js
+9
-237
sigmajs-square.js
src/external-deps/sigmajs-square.js
+6
-193
sigmajs-triangle-abstract.js
src/external-deps/sigmajs-triangle-abstract.js
+216
-0
sigmajs-triangle-with-contour.js
src/external-deps/sigmajs-triangle-with-contour.js
+6
-194
No files found.
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
};
...
...
This diff is collapsed.
Click to expand it.
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
]
}
];
}
}
This diff is collapsed.
Click to expand it.
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
]
}
];
}
}
This diff is collapsed.
Click to expand it.
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
Abstract
Program
{
export
default
class
NodeProgram
extends
Triangle
Program
{
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
]
}
];
}
}
This diff is collapsed.
Click to expand it.
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
Abstract
Program
{
export
default
class
NodeProgram
extends
Triangle
Program
{
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
]
}];
}
}
This diff is collapsed.
Click to expand it.
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
);
}
}
This diff is collapsed.
Click to expand it.
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
Abstract
Program
{
export
default
class
NodeProgram
extends
Triangle
Program
{
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
();
super
(
gl
,
POINTS
,
ATTRIBUTES
);
}
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
*
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
]
}];
}
}
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment