alx/parasol

Graphical design target for WebVR display

alx opened this issue · 21 comments

alx commented

Current reference

I'd like it to look like this demo: https://www.youtube.com/watch?v=JsEm-CDj4qM

Based on OpenGraphiti: http://www.opengraphiti.com/

  • transparency effect on node
  • blur effect on node
  • animation on edges, with various speed (weight?)
  • circle around selected node

screenshot-2018-1-4 security graph 3d visualization wikileaks org - youtube

gitcoinbot commented

This issue now has a funding of 0.3 ETH (210.17 USD) attached to it.

  • If you would like to work on this issue you can claim it here.
  • If you've completed this issue and want to claim the bounty you can do so here
  • Questions? Get help on the Gitcoin Slack
  • $10407.04 more Funded OSS Work Available at: https://gitcoin.co/explorer
Smona commented

I'd be interested in working on this but I'm not free 'til Tuesday. I'll check back then!

alx commented

Thanks @Smona , have a great weekend and see you next Tuesday :)

owocki commented

@Smona any interest?

ccajas commented

I'm currently working on this issue and have been in touch with @alx for a few days. Here's a screenshot of the work in progress.
aframe-test

To do still is to make the nodes "fuzzy", highlight selected nodes, and the edge animations. I don't have access to VR hardware so I cannot fully test the controls.

owocki commented

@ccajas looks like good progress. want to claim the issue on gitcoin @ https://gitcoin.co/funding/details?url=https://github.com/alx/parasol/issues/10 ?

ccajas commented

@owocki Yeah, sure. I've just been watching the issue. Shouldn't it be claimed only when the issue is completed?

owocki commented

@ccajas you can claim it when you have a strong intent to follow through and turn it around :) no need to wait until its completed (id hate for someone else to jump in and your work to go to waste)

gitcoinbot commented

The funding of 0.3 ETH (278.85 USD) attached has been claimed by @ccajas.

@ccajas, please leave a comment to let the funder (@alx) and the other parties involved your implementation plan. If you don't leave a comment, the funder may expire your claim at their discretion.

alx commented

Hi @ccajas

I've updated the issue with a proper tasklist and a screenshot to compare your future updates to the design target.

Feel free to comment on what's possible and what are the main difficulties with some desired effects.

Thanks and have a nice day,

Alex

ccajas commented

@alx I have been testing out custom shaders with A-frame in a code sandbox and have made an effect for nodes that is very close to the look in your screenshot. Currently working that into the Parasol source code.

Some quirks/difficulties might include:

  • glow effect becomes more "directional" on nodes near edges of the screen. The effect is camera based, and it's due to the VR view having a much greater FOV angle than your example screenshot.
  • To add a circle around the selected node, we need to figure how to make nodes selectable in VR. Can't seem to find that option so far.
ccajas commented

I've added the custom shader to the project. It creates its own transparent circle texture with blurred edges. Nodes are no longer spheres but billboard quads which should help with rendering performance.

parasol-preview

alx commented

Thanks @ccajas it looks great

I've cheked the "blur node" item on the tasklist.

ccajas commented

I've added animation for the edges. Here's a video of it in action.

The speed of the circles is based on edge "size" (I'm guessing number of connections?) Z position is just something I varied to make the graph look more dynamic, but I don't know if you will have some way to organize nodes by Z axis. I also added text labels just to see how they would look in VR.

Should I start a pull request? Let me know what you think.

alx commented

Wao, that's impressive, thanks a lot :)

Yes, you can start the pull request.

Do you think you'll be able to implement the selection node ? I'd be happy to give you the gitcoin bounty with the current state.

alx commented

It's now online at http://parasol.alexgirard.com/webvr/

  • 🎉1
ccajas commented

The node selection requires a way to interact with the scene. Do you have a preferred way to handle input for webVR?

alx commented

Hi @ccajas,

Thanks for the update, I'll probably use a vive controller for the selection:

https://aframe.io/docs/0.7.0/components/laser-controls.html

I'll take some time during the week to implement basic controls.

To work on a selected node without needing to interact with the scene, you can preselect a node directly from the initial settings:

data-settings='{
        "networks": [...],
        "ui": {...},
        "graph": {
          "selectedNodes": [
            {"node": {"id": "n0"}}
          ]
        }
      }'
vs77bb commented

Hi @alx did you intend to pay out the bounty to @ccajas, or is this still in progress? Just checking in... cc @owocki 🙂

alx commented

Hi @vs77bb

Yes, the bounty has been payed out to @ccajas

I'd close this issue as it fit the original plan.

Thanks and have a nice day,

Alex

gitcoinbot commented

The funding of 0.3 ETH (302.1 USD) attached to this issue has been approved & issued to @ccajas.