PDB2AR is a free web-based tool to create immersive experiences to visualize and manipulate molecules. From PDBs, PDB ids, AlphaFold models or 3D objects created in VMD you can easily create AR and VR models of your molecules that run right on the web.
Once you set up your project, PDB2AR will create 3 immersive apps for you:
- AR with a cube marker
- AR to visualize the molecule in your space without markers
- VR app to manipulate your molecule with your hands or controllers using a VR headset
Then, you will receive an email containing the corresponding URLs for each one of these apps. In this repository you will find templates that illustrate how we build each of them.
👐 Hand tracking: Manipulate 3D objects in VR using your hands thanks to WebXR API and Three.js.
🎮 Controllers: Manipulate 3D objects in VR using controllers using WebXR's input profiles and Three.js.
📁 3D models: Load previously compressed 3D models for further AR/VR usage using DRACO Loader with Three.js, AR.js and Model Viewer.
📱 Interactive controls: Add interactive controls to your AR.js scene using web components and custom events. Here you'll find how to zoom in/out the 3D element within the marker and how to mirror and change the camera (front/back) on the fly.
Follow this instructions to run this project on your local machine.
To run this project all you need is a basic static server. We use live-server package from npm. All you need to have installed is node.js.
$ node --version
v17.0.1
$ npm install --global live-server$ git clone https://github.com/fcor/pdb2ar-templates.git # Clone the repository.
$ cd pdb2ar-templates # Navigate into the folder
$ live-server # Start the local development serverNavigate to http://127.0.0.1:8080/vr/ for VR/3D app.
Navigate to http://127.0.0.1:8080/model-viewer/ for model viewer app.
Navigate to http://127.0.0.1:8080/cube-ar/ for AR.js app.
Please keep in mind that this setup will allow you to run the project locally in your computer. If you want to try it in your mobile phone or VR headset you will need to run a server under HTTPS.
This project was possible thanks to the amazing community behind Three.js, AR.js, model-viewer and WebXR community.
This project is manintained by Fabio Cortés and Luciano Abriata from the Laboratory of Biomolecular Modeling at École Polytechnique Fédérale de Lausanne (EPFL) in Switzerland.
This work was funded by Agora grant CRARP2_202370 from the Swiss National Science Foundation and grant number 21033 from the Hasler Foundation to LAA.
See the LICENSE for details.