Permalink
Browse files

Added test for dynamic webgl renderer.

Improved colors customization in webgl node.
  • Loading branch information...
1 parent 1ab143c commit e57e2681d8571d18c20f4186db9439c1f8a16fa2 @anvaka committed May 18, 2012
Showing with 153 additions and 32 deletions.
  1. +1 −1 Test/DemoTests/webGLRenderer.html
  2. +121 −0 Test/DemoTests/webglDynamic.html
  3. +15 −15 dist/vivagraph.js
  4. +1 −1 dist/vivagraph.min.js
  5. +15 −15 src/View/webglUIElements.js
@@ -4,7 +4,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VivaGraphs WebGL test page</title>
- <script src="../../dist/vivagraph.js"></script>
+ <script src="../../dist/vivagraph.min.js"></script>
<script type='text/javascript'>
/*global Viva*/
@@ -0,0 +1,121 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>VivaGraphs webgl dynamic graph test page</title>
+ <script src="../../dist/vivagraph.js"></script>
+ <script type='text/javascript'>
+ /*global Viva*/
+ var colors = [
+ "#1f77b4", "#aec7e8",
+ "#ff7f0e", "#ffbb78",
+ "#2ca02c", "#98df8a",
+ "#d62728", "#ff9896",
+ "#9467bd", "#c5b0d5",
+ "#8c564b", "#c49c94",
+ "#e377c2", "#f7b6d2",
+ "#7f7f7f", "#c7c7c7",
+ "#bcbd22", "#dbdb8d",
+ "#17becf", "#9edae5"
+ ];
+
+ function beginRemoveNodesLoop(graph){
+ var nodesLeft = [];
+ graph.forEachNode(function(node){
+ nodesLeft.push(node.id);
+ });
+
+ // var removeInterval = setInterval(function(){
+ // var nodesCount = nodesLeft.length;
+//
+ // if (nodesCount > 0){
+ // var nodeToRemove = Math.min((Math.random() * nodesCount) << 0, nodesCount - 1);
+//
+ // graph.removeNode(nodesLeft[nodeToRemove]);
+ // nodesLeft.splice(nodeToRemove, 1);
+ // }
+//
+ // if (nodesCount === 0) {
+ // clearInterval(removeInterval);
+ // setTimeout(function(){
+ // beginAddNodesLoop(graph);
+ // }, 100);
+ // }
+ // }, 100);
+ }
+
+ function beginAddNodesLoop(graph){
+ var i = 0, m = 10, n = 50;
+ var addInterval = setInterval(function(){
+ graph.beginUpdate();
+
+ for (var j = 0; j < m; ++j){
+ var node = i + j * n;
+ if (i > 0) { graph.addLink(node, i - 1 + j * n); }
+ if (j > 0) { graph.addLink(node, i + (j - 1) * n); }
+ }
+ i++;
+ graph.endUpdate();
+
+ if (i >= n) {
+ clearInterval(addInterval);
+ setTimeout(function() {
+ beginRemoveNodesLoop(graph);
+ }, 10000);
+ }
+ }, 100);
+ }
+
+ function onLoad() {
+ var graph = Viva.Graph.graph();
+
+ var layout = Viva.Graph.Layout.forceDirected(graph, {
+ springLength : 10,
+ springCoeff : 0.0008,
+ dragCoeff : 0.02,
+ gravity : -1.2
+ });
+
+ var graphics = Viva.Graph.View.webglGraphics();
+ graphics.node(function(node, gl){
+ return gl.square(1 + Math.random() * 10, colors[(Math.random() * colors.length) << 0]);
+ });
+
+ var renderer = Viva.Graph.View.renderer(graph,
+ {
+ layout : layout,
+ graphics : graphics,
+ container : document.getElementById('graph1'),
+ renderLinks : true
+ });
+
+ renderer.run(50);
+
+ beginAddNodesLoop(graph);
+ l = layout;
+ }
+ </script>
+ <style type='text/css'>
+ .node {
+ background-color: #00a2e8;
+ width: 10px;
+ height: 10px;
+ position: absolute;
+ }
+ .link {
+ background-color: #dddddd;
+ position: absolute;
+ }
+
+ #graph1{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+ </head>
+ <body onload="onLoad()" style="background-color: black;">
+ <div id='graph1'></div>
+ </body>
+</html>
View
@@ -3477,34 +3477,34 @@ Viva.Graph.View.webglNodeShader = function() {
'}'].join('\n'),
nodesVS = [
'attribute vec2 aVertexPos;',
- 'attribute vec2 aCustomAttributes;', // Pack clor and size into vector. First elemnt is color, second - size.
+ // Pack clor and size into vector. First elemnt is color, second - size.
+ // note: since it's floatin point we can only use 24 bit to pack colors...
+ // thus alpha channel is dropped, and is always assumed to be 1.
+ 'attribute vec2 aCustomAttributes;',
'uniform vec2 uScreenSize;',
'uniform mat4 uTransform;',
'varying vec4 color;',
'void main(void) {',
' gl_Position = uTransform * vec4(aVertexPos/uScreenSize, 0, 1);',
' gl_PointSize = aCustomAttributes[1] * uTransform[0][0];',
-
- ' color = vec4(0.0, 0.0, 0.0, 1);',
- ' float c = aCustomAttributes[0]/256.0;',
- ' color[2] = mod(c,256.0); c /= 256.0;',
- ' color[1] = mod(c,256.0); c /= 256.0;',
- ' color[0] = mod(c,256.0);',
- ' color /= 256.0;',
-
+ ' float c = aCustomAttributes[0];',
+ ' color = vec4(0.0, 0.0, 0.0, 255.0);',
+ ' color.b = mod(c, 256.0); c = floor(c/256.0);',
+ ' color.g = mod(c, 256.0); c = floor(c/256.0);',
+ ' color.r = mod(c, 256.0); c = floor(c/256.0); color /= 255.0; ',
'}'].join('\n'),
parseColor = function(color) {
var parsedColor = 0x00A3EAFF;
- if(color) {
- if(color.length === 9) { // #rrggbbaa
- parsedColor = parseInt(color.substring(1, 9), 16);
- } else if (color.length === 7) {// #rrggbb
- parsedColor = parseInt(color.substring(1, 7) + 'ff', 16);
+ if (typeof color === 'string' && color) {
+ if (color.length === 4) { // #rgb
+ color = color.replace(/([^#])/g, '$1$1'); // duplicate each letter except first #.
+ }
+ if (color.length === 9 || color.length === 7) { // #rrggbbaa or #rrggbb. Always ignore alpha:
+ parsedColor = parseInt(color.substring(1, 7), 16);
} else {
- debugger;
throw 'Color expected in hex format with preceding "#". E.g. #00ff00. Got value: ' + color;
}
}
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -22,34 +22,34 @@ Viva.Graph.View.webglNodeShader = function() {
'}'].join('\n'),
nodesVS = [
'attribute vec2 aVertexPos;',
- 'attribute vec2 aCustomAttributes;', // Pack clor and size into vector. First elemnt is color, second - size.
+ // Pack clor and size into vector. First elemnt is color, second - size.
+ // note: since it's floatin point we can only use 24 bit to pack colors...
+ // thus alpha channel is dropped, and is always assumed to be 1.
+ 'attribute vec2 aCustomAttributes;',
'uniform vec2 uScreenSize;',
'uniform mat4 uTransform;',
'varying vec4 color;',
'void main(void) {',
' gl_Position = uTransform * vec4(aVertexPos/uScreenSize, 0, 1);',
' gl_PointSize = aCustomAttributes[1] * uTransform[0][0];',
-
- ' color = vec4(0.0, 0.0, 0.0, 1);',
- ' float c = aCustomAttributes[0]/256.0;',
- ' color[2] = mod(c,256.0); c /= 256.0;',
- ' color[1] = mod(c,256.0); c /= 256.0;',
- ' color[0] = mod(c,256.0);',
- ' color /= 256.0;',
-
+ ' float c = aCustomAttributes[0];',
+ ' color = vec4(0.0, 0.0, 0.0, 255.0);',
+ ' color.b = mod(c, 256.0); c = floor(c/256.0);',
+ ' color.g = mod(c, 256.0); c = floor(c/256.0);',
+ ' color.r = mod(c, 256.0); c = floor(c/256.0); color /= 255.0;',
'}'].join('\n'),
parseColor = function(color) {
var parsedColor = 0x00A3EAFF;
- if(color) {
- if(color.length === 9) { // #rrggbbaa
- parsedColor = parseInt(color.substring(1, 9), 16);
- } else if (color.length === 7) {// #rrggbb
- parsedColor = parseInt(color.substring(1, 7) + 'ff', 16);
+ if (typeof color === 'string' && color) {
+ if (color.length === 4) { // #rgb
+ color = color.replace(/([^#])/g, '$1$1'); // duplicate each letter except first #.
+ }
+ if (color.length === 9 || color.length === 7) { // #rrggbbaa or #rrggbb. Always ignore alpha:
+ parsedColor = parseInt(color.substring(1, 7), 16);
} else {
- debugger;
throw 'Color expected in hex format with preceding "#". E.g. #00ff00. Got value: ' + color;
}
}

0 comments on commit e57e268

Please sign in to comment.