Volu.dev VS Code Extension
Use this extension to connect to Volu.dev.
Volu.dev is a Spatial Web development companion. View and debug your WebXR experience in-headset with one-click!
Features
- Establishes a secure peer-to-peer connection to your headset in one-click
- Save & manage multiple devices
- Preview and debug your WebXR project in-headset
- track errors with a built in console
- monitor frame rate, draw calls, and memory usage
- Explore and tweak your app with the built-in scene inspector
- Local first and peer-to-peer, your code never leaves your control.
Usage
Pair Your Headset
- Click "Connect" in the status bar
- Continue the pairing process through the opened webview
![Animation of the pairing process inside of VS Code](https://cdn.volu.dev/extension/pair-1.gif)
- Once you have a pairing code, visit volu.dev in your headset's browser and enter the pairing code
![Enter the code in your headset](https://cdn.volu.dev/extension/pair-2.gif)
Pair another Headset
Volu.dev supports multiple paired headsets. To add another headset, navigate to the extension in the action bar, and click on the "+" button, next to "Devices".
![Pair another device](https://cdn.volu.dev/extension/pair-2.png)
Sync Your Project
Note: Volu.dev only supports static content, so if you have a build phase, you should sync the folder with the resulting files ( dist/
, output/
, build/
, etc)
![Select the project folder to sync to volu.dev](https://cdn.volu.dev/extension/sync-1.gif)
- Click the extension icon in the action bar.
- In the "Synced Folder" section, click the "Sync Folder" button or the folder icon
- Select the folder you'd like to sync
![The project folder is synced and rendered in volu.dev](https://cdn.volu.dev/extension/sync-2.gif)
This folder will be synced to your headset anytime a file is updated.
Connect
Once you have added your headset, there are two ways to initiate a connection.
- Click on the extension icon in the status bar to connect to your last used headset.
- Click on the headset you'd like to connect to in the devices menu
Volu.dev must be open on your headset in order to connect.
If at any point you'd like to disconnect, simply click the extension icon in the status bar.
Preview in Headset
The extension will default to index.html
or the first HTML file it finds in your synced folder. To preview another file:
- Open the file in text editor
- Click the volu.dev extension icon in the editor toolbar
![The selected file is loaded in the render window](https://cdn.volu.dev/extension/use.gif)
Note: the extension icon will only appear in the editor toolbar while you're connected to your headset, and the file must exist in your currently synced folder.
Remove a Headset
- Click the volu.dev extension icon in the action bar
- Right-click on the headset you'd like to remove
- select "Remove" in the context menu
Known Issues
- Vscode.dev and other browser based editor are currently not supported
- Initial sync can be slow depending on project size, all subsequent updates are much faster.
- The inspector in volu.dev only supports MRjs at the moment, AFrame and THREE.js support are coming soon.
- Both devices must be on the same network
Release Notes
0.0.7
0.1.0
- Improved connection stability
- resolved forst connect bug
- improved connection recovery
0.1.1
- Device setup now appears in a webview
- eliminate use of localhost to receive the pairing info
0.1.2
0.1.4
- added unsync folder feature
0.1.6