Pictures for nodes in WebGL

[duckwc]

I'm not able to use pictures in a webGL force directed graph I made. My graph is over 1,000 nodes, so I can't really use another rendering method. Is it possible or do you have plan to add this feature?

[TDonselaar]

Hi there,

I ran in to the same problem. this is what i did to use images in WebGL:

graph = Viva.Graph.graph();

var graphics = Viva.Graph.View.webglGraphics(), nodeSize = 20;

graphics.setNodeProgram(Viva.Graph.View.webglImageNodeProgram());

graphics.node(function(node) { //url location on your server ui = Viva.Graph.View.webglImage(nodeSize, 'img/server.png'); return ui; });

renderer = Viva.Graph.View.renderer(graph, { graphics : graphics, renderLinks : true, prerender : true });

renderer.run();

[duckwc]

Mmmh, I think it's not far from what I need, but even if webglImageNodeProgram seems better, it does not display the picture, only a black box where the picture should be: http://tcgbrowser.com/tools/graph/index2.php?level=0&ratio=0.3&cardid=8618 I'm not sure what goes wrong here. I can see that the pictures are loaded by my browser during the page display, but they are not rendered...

[TDonselaar]

HI,

It's very simple the location of the image needs to be where the script is located. I use this for my own project and it works great :)

[duckwc]

Yeah!!!, thanks a lot, this works now! Do you know if there is a way to have not square pictures?

[TDonselaar]

Use PNG with transparent background :) On 29 Apr 2013 20:57, "duckwc" notifications@github.com wrote:

Yeah!!!, thanks a lot, this works now! Do you know if there is a way to have not square pictures?

— Reply to this email directly or view it on GitHubhttps://github.com/anvaka/VivaGraphJS/issues/34#issuecomment-17186660 .

[duckwc]

Well I was thinking about these too.. anyway the current solution is already very nice. Thanks again for your help

[duckwc]

Ok, I was able to add a constant ratio (which is good for me) for each texture by modifying a bit the nodes definition:

    /**
     * Updates position of current node in the buffer of nodes.
     *
     * @param idx - index of current node.
     * @param pos - new position of the node.
     */
    position : function (nodeUI, pos) {
        var idx = nodeUI.id * ATTRIBUTES_PER_PRIMITIVE;
        nodes[idx] = pos.x - nodeUI.size;
        nodes[idx + 1] = pos.y - nodeUI.size*1.4;
        nodes[idx + 2] = nodeUI._offset * 4;

        nodes[idx + 3] = pos.x + nodeUI.size;
        nodes[idx + 4] = pos.y - nodeUI.size*1.4;
        nodes[idx + 5] = nodeUI._offset * 4 + 1;

        nodes[idx + 6] = pos.x - nodeUI.size;
        nodes[idx + 7] = pos.y + nodeUI.size*1.4;
        nodes[idx + 8] = nodeUI._offset * 4 + 2;

        nodes[idx + 9] = pos.x - nodeUI.size;
        nodes[idx + 10] = pos.y + nodeUI.size*1.4;
        nodes[idx + 11] = nodeUI._offset * 4 + 2;

        nodes[idx + 12] = pos.x + nodeUI.size;
        nodes[idx + 13] = pos.y - nodeUI.size*1.4;
        nodes[idx + 14] = nodeUI._offset * 4 + 1;

        nodes[idx + 15] = pos.x + nodeUI.size;
        nodes[idx + 16] = pos.y + nodeUI.size*1.4;
        nodes[idx + 17] = nodeUI._offset * 4 + 3;
    },

[anvaka]

Yes, @TDonselaar is right, WebGL has very strict security requirements, and will not let you render images coming from another domain. Unless the hosting server implements CORS. If you have control over the image hosting server you can add access-control-allow-origin:* into the HTTP headers response.

[rymohr]

Another option is to run an image proxy like camo if you're running into cross origin issues. The README even comes with a built in deploy to heroku button to get you started.

[fastclemmy]

Thanks for the WebGL tips!

Is there any way to prevent images from being blurry like in your example: http://tcgbrowser.com/tools/graph/index2.php?level=0&ratio=0.3&cardid=8618 ?

Especially when you're zooming in?

Thanks!

[anvaka]

@fastclemmy I can't think of anything simple right now in WebGL renderer.

How big is your final graph going to be? Switch to SVG would make it easier to replace image with higher quality..

[fastclemmy]

@anvaka that's bad news for me :(

Actually I've switched to the WebGL renderer as my graph was getting huge and the SVG laggy with the force-directed graph...

[anvaka]

@fastclemmy if this is a show-stopper I can highly recommend considering three.js for webgl rendering with ngraph.forcelayout for layout.

ngraph.forcelayout is based on vivagraph's layout and is very fast too. I have created several examples of how to integrate it with popular 2d libraries (e.g. with pixi)

In three.js take a look on particles example - it is ridiculously fast.

Unfortunately I don't have interactive end to end demo which I can show right now, but my experiments shows this direction to be very promising.

[gg4u]

holly molly three.js is indeed a savage beast :) I'd like to think it in mobile usage: @anvaka I check out http://anvaka.github.io/ngraph/examples/pixi.js/03%20-%20Zoom%20And%20Pan/ on smartphone (iPhone) is slow, zoom work http://anvaka.github.io/ngraph/examples/pixi.js/06%20-%20Packaging/ it renders well (no touch interaction on nodes) but threejs.org/examples/ says webGL is not supported by the video card (from browser yes)

I run ngraph.threejs examples and they work, but slow: e.g. dynamics has very slow frame rate.

Why do three.js examples say graphic card not supported on iphone, while your examples works? Examples look slow in mobiles : is it a matter of frame rate which is possible to adjust or hardware issue? Has anyone check this out ? Basically I wonder if your experiments suggest that also mobiles can handle well webGL graphs, or still SVG will be preferred.

And another question please: does ngraph require node.js as server or can work also as a client library? My question may be not clear, what i mean is that with vivagraph you just need to import the vivagraph.js: I wonder if for ngraph, it will be sufficient to import bundle.js and the modules generated through package.js or you need to install node.js in the backend.

Thank you!

[anvaka]

does ngraph require node.js as server or can work also as a client library?

It does not require node.js at runtime. Just compile the source code and include it as regular javascript asset to your html page.

As for pixi examples - I should probably revise them. They're are almost a year old, and pixi made huge progress since then.

I wonder, how does this work on your phone: https://github.com/anvaka/allnpmviz3d ?

[gg4u]

HAHAHA :) I've havent looked on the iphone yet, but you're awesome! Dude, everytime a surprise :D great job! very creative. i ll look more at it tomorrow, here' night now . happy holidays to all the community and na zdorovie ahah

[rmtom]

I'm using vivagraph for a couple of years, I just started trying use webgl now, because I have some big graphics to display... I wonder if there's code example using webglImageNodeProgram . I tried the code from TDonselaar above, but for a strange reason the image don't stay in correct position, it seems reflect in horizontal axis, the edges up and images down.

[ghost]

I'm having the same issue as rmton. It works correctly in the middle of the horizontal axis but when I drag up the images move down and vice-versa.

[josephrocca]

Here's a fixed version of 0.10.0 per weequ's edits in the pull request linked above:

https://gist.github.com/josephrocca/a5e3bfb96665ef5e5499523e2cc71cb7

And here's a cdn link for that.

Anyone getting a bug where instead of getting an image you get a black square until you click and drag - then the images load properly? Comes with this flurry of warnings which may be relevant:

Here's a minimal example reproducing the bug: http://jsbin.com/xomoqoyebe/3/edit?html,output