search

vasturiano / force-graph

Force-directed graph rendered on HTML5 canvas
https://vasturiano.github.io/force-graph/example/directional-links-particles/
MIT License
1.56k stars 248 forks source link

WebGL 3D version vs force-graph #3

Closed peekxc closed 4 years ago

peekxc commented 6 years ago

Hi @vasturiano,

I love your project, especially the nice concise and useful API.

What's the difference between this project and using the other 3-D force graph project with numDimensions = 2? I see this one uses a canvas renderer, and the other uses ThreeJS which in turn uses WebGL, but I though ThreeJS also uses a canvas renderer backup?

The feature-set of the 3D version looks almost the same as the 2D version.

Edit: To be more specific, could I simply use the 3d-force w/ numDimensions = 2 to achieve a nice WebGL-based 2d force rendering?

vasturiano commented 6 years ago

Hi @peekxc, thanks for reaching out. This is a great question. The answer is that the numDimensions property relates to how many dimensions to run the force simulation engine on. While the distinction between this library and 3d-force-graph relates to the spatial environment where the objects are drawn. So, in force-graph you always have a two-dimensional force-simulation in a two-dimensional environment. In 3d-force-graph you have a three-dimensional space with the possibility of a 1, 2 or 3D force-simulation.

This example shows what those different possibilities look like.

So yes, you can have 3d-force-graph running a force-simulation in 2D, but keep in mind the spatial navigation (zoom / pan) would still be in 3D.

peekxc commented 6 years ago

Ahh I see the distinction, thanks for the clarification! In that case thank you for making this, as I'm only concerned with graphs drawn within a 2D environment.

I look forward to where this package goes!

Edit:

So I actually have a few follow up questions, if you don't mind... I apologize in advance for my overall ignorance of JavaScript and its related technologies

  1. I assume adding the option to render things with a WebGL renderer, like was done for this library is perhaps very non-trivial?

  2. I might be missing something obvious, but is it possible to access the actual d3 simulation object? I know most of the properties and all of the force interactions are accessible through force-graphs API, but I can't seem to figure out how to get the actual simulation to change, e.g. the alpha value. I ask because I'm trying to wrap force-graph in an htmlwidget for an R package I'm working on.

vasturiano commented 6 years ago

Hi @peekxc.

  1. force-graph is already using Canvas/WebGL as rendering element, with a 2d context.

  2. You can find some methods in the component interface that allow you to manipulate the d3 force engine configuration, like d3AlphaDecay, d3VelocityDecay and d3Force. It's not as low level as d3-force but that is also the purpose of the library, to provide a higher level abstraction.

peekxc commented 6 years ago

  1. Right... I guess I saw it was using my CPU intensively, so I assumed it wasn't using the GPU, but honestly I don't know much about the internals, so I'll defer to your expertise

  2. I mean the simulation object, not just the force engine. I do appreciate the higher level abstraction very much :)