Skip to content

Commit 5e1fedc

Browse files
YomguitherealYomguithereal
committed
Merge branch 'edges-vertex-shader'
2 parents 78e3cda + 920e031 commit 5e1fedc

8 files changed

+783
-33
lines changed

‎examples/basic.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
2222
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
2323
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
24+
<script src="../src/renderers/webgl/sigma.webgl.edges.shader.js"></script>
2425
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
2526
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
2627
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
@@ -69,13 +70,13 @@
6970
*/
7071
var i,
7172
s,
72-
N = 100,
73-
E = 500,
73+
N = 1000,
74+
E = 5000,
7475
g = {
7576
nodes: [],
7677
edges: []
7778
};
78-
79+
sigma.webgl.edges.def = sigma.webgl.edges.shader;
7980
// Generate a random graph:
8081
for (i = 0; i < N; i++)
8182
g.nodes.push({

‎examples/drag-nodes.html

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
2020
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
2121
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
22+
<script src="../src/renderers/webgl/sigma.webgl.edges.shader.js"></script>
2223
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
2324
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
2425
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
@@ -45,6 +46,7 @@
4546
<script src="../src/misc/sigma.misc.bindEvents.js"></script>
4647
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script>
4748
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
49+
4850
<!-- END SIGMA IMPORTS -->
4951
<script src="../plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
5052
<div id="container">
@@ -76,13 +78,13 @@
7678
*/
7779
var i,
7880
s,
79-
N = 100,
80-
E = 500,
81+
N = 1000,
82+
E = 5000,
8183
g = {
8284
nodes: [],
8385
edges: []
8486
};
85-
87+
sigma.webgl.edges.def = sigma.webgl.edges.shader;
8688
// Generate a random graph:
8789
for (i = 0; i < N; i++)
8890
g.nodes.push({
@@ -102,7 +104,7 @@
102104
size: Math.random(),
103105
color: '#ccc'
104106
});
105-
sigma.renderers.def = sigma.renderers.canvas
107+
// sigma.renderers.def = sigma.renderers.canvas
106108
// Instantiate sigma:
107109
s = new sigma({
108110
graph: g,
@@ -112,16 +114,16 @@
112114
// Initialize the dragNodes plugin:
113115
var dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
114116

115-
dragListener.bind('startdrag', function(event) {
116-
console.log(event);
117-
});
118-
dragListener.bind('drag', function(event) {
119-
console.log(event);
120-
});
121-
dragListener.bind('drop', function(event) {
122-
console.log(event);
123-
});
124-
dragListener.bind('dragend', function(event) {
125-
console.log(event);
126-
});
127-
</script>
117+
// dragListener.bind('startdrag', function(event) {
118+
// console.log(event);
119+
// });
120+
// dragListener.bind('drag', function(event) {
121+
// console.log(event);
122+
// });
123+
// dragListener.bind('drop', function(event) {
124+
// console.log(event);
125+
// });
126+
// dragListener.bind('dragend', function(event) {
127+
// console.log(event);
128+
// });
129+
// </script>

‎examples/force.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
2121
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
2222
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
23+
<script src="../src/renderers/webgl/sigma.webgl.edges.shader.js"></script>
2324
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
2425
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
2526
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
@@ -82,7 +83,7 @@
8283
nodes: [],
8384
edges: []
8485
};
85-
86+
sigma.webgl.edges.def = sigma.webgl.edges.shader;
8687
// Generate the graph:
8788
for (i = 0; i < C; i++)
8889
cs.push({
@@ -127,7 +128,7 @@
127128
graph: g,
128129
container: 'graph-container',
129130
settings: {
130-
drawEdges: false
131+
drawEdges: true
131132
}
132133
});
133134

‎plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@
3838

3939
// A quick hardcoded rule to prevent people from using this plugin with the
4040
// WebGL renderer (which is impossible at the moment):
41-
if (
42-
sigma.renderers.webgl &&
43-
renderer instanceof sigma.renderers.webgl
44-
)
45-
throw new Error(
46-
'The sigma.plugins.dragNodes is not compatible with the WebGL renderer'
47-
);
41+
// if (
42+
// sigma.renderers.webgl &&
43+
// renderer instanceof sigma.renderers.webgl
44+
// )
45+
// throw new Error(
46+
// 'The sigma.plugins.dragNodes is not compatible with the WebGL renderer'
47+
// );
4848

4949
// Init variables:
5050
var _self = this,
@@ -60,7 +60,7 @@
6060
_isMouseDown = false,
6161
_isMouseOverCanvas = false,
6262
_drag = false;
63-
63+
6464
if (renderer instanceof sigma.renderers.svg) {
6565
_mouse = renderer.container.firstChild;
6666
}
@@ -212,7 +212,7 @@
212212
captor: event,
213213
renderer: _renderer
214214
});
215-
215+
216216
_drag = false;
217217
_node = null;
218218
};

‎src/renderers/sigma.renderers.webgl.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@
7070
Object.defineProperty(this, 'edgeFloatArrays', {
7171
value: {}
7272
});
73+
Object.defineProperty(this, 'edgeIndicesArrays', {
74+
value: {}
75+
});
7376

7477
// Initialize the DOM elements:
7578
if (this.settings(options, 'batchEdgesDrawing')) {
@@ -142,6 +145,9 @@
142145
for (k in this.edgeFloatArrays)
143146
delete this.edgeFloatArrays[k];
144147

148+
for (k in this.edgeIndicesArrays)
149+
delete this.edgeIndicesArrays[k];
150+
145151
// Sort edges and nodes per types:
146152
for (a = graph.edges(), i = 0, l = a.length; i < l; i++) {
147153
type = a[i].type || this.settings(options, 'defaultEdgeType');
@@ -177,6 +183,7 @@
177183
a.length * renderer.POINTS * renderer.ATTRIBUTES
178184
);
179185

186+
180187
// Just check that the edge and both its extremities are visible:
181188
if (
182189
!a[i].hidden &&
@@ -193,6 +200,11 @@
193200
this.settings
194201
);
195202
}
203+
204+
if (typeof renderer.computeIndices === 'function')
205+
this.edgeIndicesArrays[k] = renderer.computeIndices(
206+
this.edgeFloatArrays[k].array
207+
);
196208
}
197209

198210
// Push nodes:
@@ -287,6 +299,7 @@
287299
arr,
288300
end,
289301
start,
302+
indices,
290303
renderer,
291304
batchSize,
292305
currentProgram;
@@ -300,6 +313,7 @@
300313
i = 0;
301314
renderer = sigma.webgl.edges[a[i]];
302315
arr = this.edgeFloatArrays[a[i]].array;
316+
indices = this.edgeIndicesArrays[a[i]];
303317
start = 0;
304318
end = Math.min(
305319
start + batchSize * renderer.POINTS,
@@ -328,7 +342,8 @@
328342
'webglOversamplingRatio'
329343
),
330344
start: start,
331-
count: end - start
345+
count: end - start,
346+
indicesData: indices
332347
}
333348
);
334349
}
@@ -386,7 +401,8 @@
386401
width: this.width,
387402
height: this.height,
388403
ratio: this.camera.ratio,
389-
scalingRatio: this.settings(options, 'webglOversamplingRatio')
404+
scalingRatio: this.settings(options, 'webglOversamplingRatio'),
405+
indicesData: this.edgeIndicesArrays[k]
390406
}
391407
);
392408
}

0 commit comments

Comments
 (0)