The idea of this project is to implement the edge path algorithm in 3D and render with A-Frame in VR. The paper that introduced this algorithm is Edge-Path Bundling: A Less Ambiguous Edge Bundling Approach
There is a demo available.
There are two main components in this project
This is the base implementation of a three.js module that renders a force-directed graph. It is forked from three-forcegraph. In addition, we added the edge path bundling algorithm in 3D to the module.
The main changes are in
three-forcegraph-edge-path-bundling/src/forcegraph-kapsule.js -> main method that renders the graph
three-forcegraph-edge-path-bundling/src/utils/edge-path-utils.js => edge path bundling algorithm
three-forcegraph-edge-path-bundling/src/utils/dijkstra.js => dijkstra algorithm helper class
three-forcegraph-edge-path-bundling/src/utils/tree-layout-utils.js => tree layout helper class, used before the edge path bundling algorithm to layout the graph
This is an A-Frame component that uses the three-forcegraph-edge-path-bundling module to render a force-directed graph in A-Frame. It is forked from aframe-forcegraph-component
By using our previous three.js module we were able to render our edge path bundling algorithm in A-Frame.
This uses the three-forcegraph-edge-path-bundling module as a dependency and adds the A-Frame component.
There are multiple modules from the original author, Vasco Asturiano, that build up on each other. An overview of the modules can be found here.
In the three-forcegraph-edge-path-bundling folder run:
yarn install
yarn link
In the aframe-forcegraph-component-edge-path-bundling folder run:
yarn link three-forcegraph
yarn install
In the three-forcegraph-edge-path-bundling folder run:
yarn run dev
Then open ./examples/3d/basic/index.html via a web server see Open files in a webserver
In the three-forcegraph-edge-path-bundling folder run:
yarn run build
In the aframe-forcegraph-component-edge-path-bundling folder run:
yarn run dist
Then open ./examples/vr/basic/index.html via a web server see Open files in a webserver
For example with intellij you can right-click on the file and select Open in Browser. Or in VSCode you can install the Live Server extension and right-click on the file and select Open with Live Server.
Another way is to run python -m http.server in the folder where the file is located and then open localhost:8000 in your browser.
WebXR requires HTTPS. You can use ngrok to host a local server on the internet via https.
- Start a local server on port 8000 (or any other port) with
python -m http.server 8000 - Start ngrok with
ngrok http 8000 - Copy the https url from ngrok and open it in your browser on Oculust Quest or other VR device
If you encounter this error while debugging in intellij:
Access to script at 'http://unpkg.com/three/examples/jsm/controls/TrackballControls.js' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
When debugging, the x-ijt header is sent for request signing to prevent requests from outside from being rejected; header is not sent if Allow unsigned requests in Settings | Build, Execution, Deployment | Debugger is enabled, so, if you are facing issues because of this header, you have to turn this option on
found on https://intellij-support.jetbrains.com/hc/en-us/community/posts/4407891226898-CORS-policy-error
docker build -t emanum/immersive-edge-path-bundling-demo:latest . docker push emanum/immersive-edge-path-bundling-demo:latest