search

vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.47k stars 802 forks source link

Progressive WebXR #667

Open apowers313 opened 4 months ago

apowers313 commented 4 months ago

Is your feature request related to a problem? Please describe. Sometimes I want to work on my desktop. Sometimes I want to work in my VR headset. When exploring networks with all these awesome web components I want to have flexibility around which interaction model I use, and I want feature parity (drag & drop, controls, etc.) across the models -- without using different components. Basically I want Progressive WebXR.

I think this is timely because of all the interest around Meta Quest 3 and Apple Vision Pro as potential productivity platforms. :)

Describe the solution you'd like Three.js has a VR / AR / XR mode that allows you to interact with the WebGL canvas in any mode. Rather than using A-Frame, you can have Progressive WebXR.

I've played around with this a bit and I've been able to modify the basic three-forcegraph render loop and add a VRButton / ARButton / XRButton to enter VR. (AR is especially fun :) ). I also tried monkeypatching _animationCycle in 3d-force-graph, but that didn't work for some reason. I'm also struggling to figure out how to get the VR controls to work in threejs.

Describe alternatives you've considered I thought about creating logic for switching between the 3D / VR / XR components, but even with that there's such a discrepancy in features that it's not really going to be a progressive experience.

apowers313 commented 4 months ago

Created PR #670 as an initial proof of concept.

apowers313 commented 1 month ago

Proof of concept in BabylonJS: https://forum.babylonjs.com/t/3d-vr-ar-force-directed-graph/49886