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
8ecdf513
Commit
8ecdf513
authored
1 year ago
by
Alexandre Delanoë
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/501-dev-label-shape-in-graph-explorer' into dev-merge
parents
2e36c381
d9d082ad
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
923 additions
and
1 deletion
+923
-1
Sigma.js
src/Gargantext/Hooks/Sigmax/Sigma.js
+9
-1
sigmajs-square-with-contour.js
src/external-deps/sigmajs-square-with-contour.js
+268
-0
sigmajs-square.js
src/external-deps/sigmajs-square.js
+223
-0
sigmajs-triangle-with-contour.js
src/external-deps/sigmajs-triangle-with-contour.js
+223
-0
sigmajs-triangle.js
src/external-deps/sigmajs-triangle.js
+200
-0
No files found.
src/Gargantext/Hooks/Sigmax/Sigma.js
View file @
8ecdf513
...
...
@@ -5,6 +5,10 @@ import Sigma from 'sigma';
import
{
takeScreenshot
}
from
'../../src/external-deps/sigmajs-screenshot.js'
;
import
CircleNodeProgram
from
'sigma/rendering/webgl/programs/node.fast'
;
import
ContourCircleNodeProgram
from
'../../src/external-deps/sigmajs-circle-with-contour.js'
;
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'
;
let
sigma
=
Sigma
.
Sigma
;
console
.
log
(
'imported sigma'
,
Sigma
);
...
...
@@ -192,7 +196,11 @@ function _sigma(left, right, el, opts) {
labelRenderer
:
drawLabel
,
nodeProgramClasses
:
{
circle
:
CircleNodeProgram
.
default
,
// TODO why default? It seems that import should be fixed
ccircle
:
ContourCircleNodeProgram
ccircle
:
ContourCircleNodeProgram
,
triangle
:
TriangleNodeProgram
,
ctriangle
:
ContourTriangleNodeProgram
,
square
:
SquareNodeProgram
,
csquare
:
ContourSquareNodeProgram
},
...
opts
.
settings
};
...
...
This diff is collapsed.
Click to expand it.
src/external-deps/sigmajs-square-with-contour.js
0 → 100644
View file @
8ecdf513
/**
* 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
=
12
;
const
ATTRIBUTES
=
5
;
const
ANGLE_1_1
=
-
(
1
*
Math
.
PI
)
/
4
;
const
ANGLE_1_2
=
(
1
*
Math
.
PI
)
/
4
;
const
ANGLE_1_3
=
(
3
*
Math
.
PI
)
/
4
;
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
{
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
,
);
}
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'
)
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
);
}
}
This diff is collapsed.
Click to expand it.
src/external-deps/sigmajs-square.js
0 → 100644
View file @
8ecdf513
/**
* 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
=
6
;
const
ATTRIBUTES
=
5
;
const
ANGLE_1_1
=
-
(
1
*
Math
.
PI
)
/
4
;
const
ANGLE_1_2
=
(
1
*
Math
.
PI
)
/
4
;
const
ANGLE_1_3
=
(
3
*
Math
.
PI
)
/
4
;
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
{
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
,
);
}
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
);
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
);
}
}
This diff is collapsed.
Click to expand it.
src/external-deps/sigmajs-triangle-with-contour.js
0 → 100644
View file @
8ecdf513
/**
* 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
=
6
;
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
)
{
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
,
);
}
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
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
);
}
}
This diff is collapsed.
Click to expand it.
src/external-deps/sigmajs-triangle.js
0 → 100644
View file @
8ecdf513
/**
* 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
)
{
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
,
);
}
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
);
const
size
=
data
.
size
/
1.7
;
// experimental...
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
);
}
}
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