This project provides a free web-based AR viewer for 3D models for teaching structural biology, optimized for both iOS and Android devices. Students can scan QR codes to view different biological structures in augmented reality or 3D without any specific app.
Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or suggestions.
If you take nice AR picture please share !!
- Cross-Platform Support: Automatically detects the user's device (iOS or Android) and loads the appropriate 3D model format (USDZ for iOS, GLB for Android).
- Augmented Reality: Allows users to view 3D models in AR if their device supports it.
- Dynamic Model Loading: QR codes link to specific models, which are dynamically loaded based on the URL parameters.
- Python script to generate free QR code: You can easily generate the different QR code to link URL to specific models.
- Pymol, Chimera and Blender are use to genrate 3D models.
- Even Faster you can use Mol'*' (https://molstar.org/viewer/) that can directly export your model in usdz and glb format, ready to be uploaded on your server.
- You can also have look to MolAR (https://mtzgroup.github.io/molar/).
-
Use a link with smartphone or tablet etc... For example you can have access to the 20 amino acids (model15 to model34) by with the following link:
https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=modelXX
just change the model number XX for the coresponding aa:
ALA: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model15
ARG: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model16
ASN: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model17
ASP: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model18
CYS: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model19
GLN: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model20
GLU: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model21
GLY: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model22
HIS: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model23
ILE: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model24
LEU: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model25
LYS: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model26
MET: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model27
PHE: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model28
PRO: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model29
SER: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model30
THR: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model31
TRP: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model32
TYR: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model33
VAL: https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model34
- Use a a QR Code You can also use a QR code scanner on your mobile device to scan the QR code associated with the desired model (for presentation, poster etc ...). (for ipad make sure that safari is in mobile version)
Here are some QR codes for some models:
Open the Link: The link will direct you to the web viewer, which will automatically detect your device and load the appropriate model depending of iOS or Android.
Click on the cube at the bottom right
See the magic, your model in your world
Display just the 3D model without AR
You have the possibility to just display the model in 3D by clicking on 'object' (for iOS), 3D (for Android)
- Just have Fun
Today's fluorescent assay is glowing in a vibrant …
… mcherry!
mCherry-3.mp4
To create and optimize 3D models for the AR viewer, follow this pipeline using PyMOL, Chimera, Blender, and MeshLab:
-
Create Your Model in PyMOL or Chimera:
- Design your 3D molecular structure or other models using PyMOL or Chimera.
- Export the model in the VRML 2 format.
- if you use Mol'*' (https://molstar.org/viewer/) you can direclty export the model in usdz or glb.
-
Import and Process in Blender:
- Importing the Model:
- Open Blender and /!\ enable the
Web3D X3D/VRML2
add-on /!\ , which allows for importing VRML 2 files. - Import the VRML 2 model into Blender.
- Open Blender and /!\ enable the
- Processing in Blender:
- Refine the model, adjust textures, and prepare it for AR use. Ensure the model's scale and orientation are appropriate.
- Exporting to USDZ and GLB:
- Export the model in both USDZ (for iOS) and GLB (for Android) formats, ensuring cross-platform compatibility.
- Importing the Model:
-
Optimizing Large Models with MeshLab:
-
keeping the color (thx to @Allister_crow)
-
Open the VRML 2 model in Meslab
-
under color Creation and Processing -> transfert color to vertex to face
-
under color Creation and Processing -> tranfert color face to vertex
-
save the model to *.obj and then go to blender (step2)
-
Handling Large Structures:
- For complex models resulting in large file sizes, use MeshLab to optimize the model using cleanning tools.
-
Decimation and Cleaning:
- Utilize MeshLab's decimation tools to reduce polygon count and make the model more efficient for AR applications.
-
Final Export:
- After optimization, re-export the model in VRML to import with blender to then export in USDZ and GLB formats
-
By following this pipeline, you can produce high-quality, optimized 3D models that enhance the AR experience for users.
Update `models.json` with the appropriate URLs for your 3D model files.
"modelXX": { "ios": "YY.usdz", "android": "YY.glb" }
```json
{
"model1": { "ios": "a-helix.usdz", "android": "a-helix.glb" },
"model2": { "ios": "beta-sheet.usdz", "android": "beta-sheet.glb" },
...
}
```
Generate QR codes that link to your hosted models.json
with the appropriate model query parameter.
For example:
-
Alpha Helix:
https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model1
-
Beta Sheet:
https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model2
-
DNA:
https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model3
-
mCherry:
https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model4
-
B-galactosidase:
https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model5
-
Haemoglobin:
https://jmb-scripts.github.io/AR-Structural-Biology/index.html?model=model6
You can use a QR code generator Qr-code.py in QR-Code/:
-
Edit Qr-code.py change the URL line 25 with the proper model number
-
Then in a terminal type:
python Qr-code.py
-
Share the PNG on your website, in your scientific poster, or presentation etc...
-
- To @Allister_crow for its walkthrough on the use of AR for structural biology.
- To chatgpt because HTML is not my friend.