Tutorial: Intro to VRmol

Tutorial: Intro to VRmolIntroductionVR Mode Getting Started VR DeviceEntering VR Scene (V)VR MenuLoading Structure (V)Main StructureLigandSurfaceColor SchemeMeasurement (V)Drag (V)Fragmentation (V)Structure Editing (V)Genome Variations (V)Interactive Docking (V)Speech Recognition (V)Desktop Mode Getting Started Mouse UsageLoading Structure Main StructureLigandSurfaceColor SchemeFragmentation (V)Structure Editing (V)Genome Variations (V)Interactive Docking (V)Density Map Sharing by URLURL OptionsExamples for API VRmol Service Access APIGenomic VariationsSequence ConservationDrug data APIEMDBAutoDockSpeech RecognitionContacts

Introduction

Welcome to the VRmol tutorial. VRmol is an easy-to-use web-based tool capable of visualizing and integratively analyzing biomolecular structures in Virtual Reality environment. It connects to multiple resources, such as disease and drug-related databases, enabling it to serve as an integrative platform for structure-based translational researches and drug design. It can be freely accessed online by typing https://VRmol.net in local browser. The following pages present a brief self-guided tour of the VRmol.

The tutorial includes three sections:

 

VR Mode

Getting Started

VR Device

For experiencing VR Scene in VRmol, a VR device is required. VR devices such as HTC Vive, Oculus Rift, and Microsoft Mixed Reality are well-supported by VRmol. Specifically, for HTC Vive, you should install SteamVR from Steam library and setup the room environment in advance. The compatibility between these VR devices and web browsers listed in the following table has been successfully tested in VRmol.

DeviceFrame Rate (frame per second)OSWeb browser
Windows Mixed Reality* 90Windows 10 (build 1709+) Microsoft Edge
Windows 10 Firefox
HTC VIVE 90Windows 7 + Firefox Nightly
macOS Firefox Nightly
Oculus Rift90Windows 10Firefox

*: Recommanded.

 

The operating elements in the VR device and their functions in VR mode are described as follows:

VR Controllers input map is shown below:

HTC ViveOculus RiftWindows Mixed Reality
vr_menuOculus Riftvr_menu
HTC ViveOculus RiftWindows Mixed Reality Controllers
Setup docsSetup docsSetup docs, Hardware guidelines

Notably, the mouse in the desktop interface can also control structural operations in VR environment.

 

Entering VR Scene (V)

Access VRmol at https://VRmol.net through a WebVR enabled web browser, such as Microsoft Edge and Firefox Nightly. Once you finish typing the website and press Enter button, an VRmol user interface will appear as follows:image-20190216151729944

Click VR Mode button at the bottom of the VRmol user interface using the left mouse button, and the VR starting interface will appear as follows. Click the ENTER VR button by using the left mouse button to enter VR Scene.image-20190216153456628

Alternatively, you can also point the laser tip of the controller to ENTER VR button and press the trigger to Enter VR Scene.video

Here is an example video of entering VR Mode.

 

VR Menu

Press Menu button on the controller, a VR menu will appear in front of you in VR Scene (as shown below).The VR menu contains four parts. The top part (labeled in red box) is a VR keyboard including a 26-character alphabet, 10 numbers and a deletion (<--) button; the other three parts consist of a main menu colored in blue, a submenu in green and an information board in pink.

vr_menu

 

Loading Structure (V)

Press Menu button on the controller to get VR menu. By pointing the laser tip of the controller to alphabet or number in the VR keyboard and pressing the trigger, and a 4-character PDB ID can be typed and the corresponding structure will be afterwards loaded into the VR Scene. Alternatively, the structure in PDB format can also be loaded into the VR environment by typing its PDB ID, inputing a remote URL (such as https://files.rcsb.org/view/1mbs.pdb) or uploading a local structural file in the VRmol Desktop user interface.

vr_menu

A screenshot of structure visualization with stereo view. Screen shot

Press Menu button on the controller again, you will go back to the VR menu. By pointing the laser tip to options in other three parts of the menu and pressing the trigger, you can experience structrual visualization styles and analysis in VR Scene, as is concretely described in the following sections.

Here is a video for eploring the structure in VRmol VR mode.

 

Main Structure

Point the laser tip to "Main Structure" option in VR menu and press the trigger, and 12 different representation styles will appear in the submenu board, including Line, Backbone, Sphere, Stick, Ball & Rod, Tube, Ribbon-flat, Ribbon-ellipse, Ribbon-rectangle, Ribbon-strip, Ribbon-railway, Ribbon-SS. You can visualize the input structure in your favorable style by choosing the specific representation style.

Menu → Main Structure → Line

Menu → Main Structure → Backbone

Menu → Main Structure → Sphere

Menu → Main Structure → Stick

Menu → Main Structure → Ball & Rod

Menu → Main Structure → Tube

Menu → Main Structure → Ribbon-flat

Menu → Main Structure → Ribbon-ellipse

Menu → Main Structure → Ribbon-rectangle

Menu → Main Structure → Ribbon-strip

Menu → Main Structure → Ribbon-railway

Menu → Main Structure → Ribbon-SS

vr_menu

The gallery of these styles is shown below.

LineBackboneSphere
Representation_1Representation_2Representation_3
StickBall & RodTube
Representation_4Representation_5Representation_6
Ribbon-flatRibbon-ellipseRibbon-rectangle
Representation_7Representation_12Representation_8
Ribbon-stripRibbon-railwayRibbon-Secondary Structure
Representation_9Representation_10Representation_11

 

 

Ligand

Point the laser tip to "Ligand" in VR menu and press the trigger to choose the "ligand" option, and there will be 4 ligand representation styles in the submenu board: Line, Sphere, Stick, Ball & Rod.

Menu → Ligand → Line

Menu → Ligand → Sphere

Menu → Ligand → Stick

Menu → Ligand → Ball & Rod

vr_menu

The gallery of these styles is shown below.

LineSphereStickBall & Rod
ligand_lineligand_sphereligand_stickligand_ball&rod

 

Surface

The "Surface" option includes Van der Waals, Solvent excluded, Solvent accessible and Molecular surface. The transparence of the structure surface can be adjusted by pointing the laser tip to Opacity 1.0-0.5 in submenu and pressing the trigger. In addition, by pointing the laser tip to Wireframe in submenu and pressing the trigger, the structure surface can be viewed as meshed surface.

Menu → Surface → Van der Waals surface

Menu → Surface → solvent accessible surface

Menu → Surface → solvent excluded surface

Menu → Surface → molecular surface

surface_1

The gallery of these styles is shown below.

Van der Waals surfaceVan der Waals surface with Wireframesolvent accessible surfaceVan der Waals surface with transparency(0.8)
surface_1surface_1surface_1
Van der Waals surface with transparency(0.5)solvent accessible surfacesolvent excluded surface
surface_1surface_1surface_1

 

Color Scheme

By choosing options in "Color" submenu in VR menu, the structure can be variedly colored according to 10 different schemes, such Element, Residue ,Secondary structure,Representation, Chain, B-factor, Spectrum, Chain Spectrum, Hydrophobicity, Sequence Conservation.

Menu → Color → Element

Menu → Color → Residue

Menu → Color → Secondary Structure

Menu → Color → Representation

Menu → Color → Chain

Menu → Color → B-factor

Menu → Color → Spectrum

Menu → Color → Chain Spectrum

Menu → Color → Hydrophobicity

Menu → Color → Conservation

vr_menu

The gallery of these styles is shown below.

Color by ElementColor by ResidueColor by Secondary Structure
color_1color_1color_3
Color by RepresentationColor by B-FactorColor by Spectrum
color_1color_1color_1
Color by Chain SpectrumColor by HydrophobicityColor by Conservation
color_1color_1color_1

 

Measurement (V)

In VR menu, choose "Measure" and there will be Distance and Angle appearing in the submenu.

Point the laser tip to Distance option and press the trigger, the VR Scene containing the structure will appear. Point the laser tip to a residue and press the trigger to select it; then point the laser tip to another residue and press the trigger to select the second one. The distance between these two residues will be automatically presented.

Point the laser tip to Angle option and press the trigger, and then select three residues in the VR Scene. The angle among them will be automatically presented.

Menu → Measure → Distance

Menu → Measure → Angle vr_menu

Here is an example video for computing distance in VR.

 

Drag (V)

"Drag" option is designed for dragging specific elements in the structure. By selecting Drag Chain, Drag Ligand, Drag Residue or Drag Drug, you can drag the individual chain, ligand, residue or drug of the structure in VR Scene. vr_menu

Here is an example video for dragging specific elements in VR.

 

Fragmentation (V)

You can highlight specific fragments by presenting them with varied representation styles in the VR Scene. Firstly, enter "Fragment" in VR menu, and 12 representation styles will appear in submenu. Then choose a target representation style, and the VR Scene containing the input structure will apear. Next pick two residues by using the laser tip and pressing the trigger, and you will see the highlighted fragments presented with the previously-chosen representation style in VR scene.

Menu → Fragment vr_menu

A selected fragment is highlighted with Ball&Rod style.fragment_3

Here is an example video for fragments visualization.

 

Structure Editing (V)

"Editing" provides a method to replace one amino acid with another one. Enter "Editing" in VR menu, and 20 types of amino acids will appear in the submenu. Choose the target type residue in the submenu by pointing the laser tip to it and pressing the trigger. Then pick the residue that you want to replace in the structure in VR Scene by pointing the laser tip to it and pressing the trigger, and you will see the picked residue is replaced by the target residue.

Menu → Editing fragment_3

The edited structure can be exported as a new PDB file by using Export PDB in "Export" option in VR menu.
fragment_3

Here is an example video for structure editing in VR Scene.

 

Genome Variations (V)

"Mutation" option in VR menu provides a handy way to view genomic variation sites in the target structure by connecting to TCGA, CCLE and ExAc databases. By choosing "Mutation" in VR menu, TCGA, CCLE and ExAC will apear in submenu board. And you can view genomic mutation sites (highlighted by twinkling balls) in the loaded structure by selecting these databases.

Menu → Mutation → TCGA

Menu → Mutation → CCLE

Menu → Mutation → ExAc mutation

Here is an example video for genomic variations visualization. Try it

 

Interactive Docking (V)

In "Drugs" option in VR menu, choose Load Drug, and the structure-related drug (from DrugBank databse) will be loaded into the VR Scene. Press Menu button in the controller, and go back to VR menu. And choose Drug Random Migration to interactively perform drug docking in VR Scene.

Menu → Drugs → Load Drugs → docking docking

An example video for interactive docking in VR mode. Try it

 

Speech Recognition

VRmol provides speech recognition option, enabling users to operate the structure by speaking commands (the commands in English are listed below). Chinese commands can be accessed here.

Category Command
Visualization Mode go to desktop mode
go to virtual reality mode
go to travel mode
Main structure style change to dot style
change to line style
change to backbone style
change to sphere style
change to stick style
change to ball and rod style
change to tube style
change to second structure style
hide main structure
show main structure
Ligand structure style change Ligand to line style
change Ligand to sphere style
change Ligand to stick style
change Ligand to ball and rod style
hide ligand structure
show ligand structure
Show Other show water
hide water
show hydrogen bond
hide hydrogen bond
show mutation
hide mutation
Surface show the surface of main structure
show transparency
show mesh
hide the surface of main structure
Color color by element
color by residue
color by second structure
color by chain
color by b-factor
color by spectrum
color by hydrophobicity
color by conservation
Interaction open dragging function
open labelling function
rotation
rotation by x
rotation by y
rotation by z
clockwise rotation
anticlockwise rotation
move
move along x
move along y
move along z
move forward
move backward

In VR menu, select "Speech" options. And then follow these steps:

  1. Choose a language by pointing the laser tip to Chinese Voice or English Voice and pressing the trigger. The default language is English.
  2. Point Voice in VR menu, and press down the trigger.
  3. Hold on pressing the trigger untill you finish speaking the command. The voice will be recorded and automatically uploaded to the server for recognization.
  4. VRmol will operate the structure according to the recognized command.

Menu → Speech → Voice Speech_recognition

 

Here is an example video of speech-recognition.

 

 

Desktop Mode

Getting Started

Mouse Usage

Operation on the structure is controlled by mouse.

img

OperationMouse Usage
RotatePress & hold LEFT mouse button, then move.
TranslatePress & hold RIGHT mouse button, then move.
ZoomScroll UP to zoom in; scroll DOWN to zoom out.

 

Loading Structure

Users can access VRmol at https://vrmol.net through any WebGL supported browsers. Then type a PDB code (like 1MBS) in the textbox and then press enter button. A structure will appear in the user interface. In addition, VRmol also surpports loading structure by inputing a remote URL (such as https://files.rcsb.org/view/1mbs.pdb) or uploading a local structural file.image-20190216151253839

 

Main Structure

By clicking "Main Structure" option in the interface, you can view 12 different representation styles for "Main Structure", including Line, Backbone, Sphere, Stick, Ball & Rod, Tube, Ribbon-flat, Ribbon-ellipse, Ribbon-rectangle, Ribbon-strip, Ribbon-railway, Ribbon-SS.

Main Structure → Line

Main Structure → Backbone

Main Structure → Sphere

Main Structure → Stick

Main Structure → Ball & Rod

Main Structure → Tube

Main Structure → Ribbon-flat

Main Structure → Ribbon-ellipse

Main Structure → Ribbon-rectangle

Main Structure → Ribbon-ellipse

Main Structure → Ribbon-strip

Main Structure → Ribbon-railway

Main Structure → Ribbon-Secondary Structure

Representation_1

The gallery of the styles is shown below.

LineBackboneSphere
Representation_1Representation_2Representation_3
StickBall & RodTube
Representation_4Representation_5Representation_6
Ribbon-flatRibbon-ellipseRibbon-rectangle
Representation_7Representation_12Representation_8
Ribbon-stripRibbon-railwayRibbon-Secondary Structure
Representation_9Representation_10Representation_11

 

Ligand

By clicking "Ligand", you can select ligand representation styles.

ligand_1

You can view the ligand in four representation styles by clicking these affiliated options, including Line, Sphere, Stick, Ball & Rod .

Ligand → Line

Ligand → Sphere

Ligand → Stick

Ligand → Ball & Rod

LineSphereStickBall & Rod
ligand_lineligand_sphereligand_stickligand_ball&rod

 

Surface

The "Surface" option includes Van der Waals, Solvent excluded, Solvent accessible and Molecular surface. The transparency of structure surface can be adjusted by clicking 1.0-0.5 in the affiliated options. In addition, by selecting Wireframe, the structure surface can be viewed as meshed surface.

Surface → Van der Waals surface

Surface → Solvent accessible surface

Surface → Solvent excluded surface

Surface → Molecular surface

Surface → 1.0 (Transparency)

Surface → 0.8 (Transparency)

Surface → Wireframe

surface_1

The gallery of the surface representation styles is shown below.

Van der Waals surfaceSolvent excluded surfaceSolvent accessible surface
surface_1surface_1surface_1
Molecular surfaceVan der Waals surface with WireframeVan der Waals surface with transparency(0.8)
surface_1surface_1surface_1

 

Color Scheme

By choosing options in "Color", the structure can be variedly colored according to 10 different schemes, such as Element, Residue ,Secondary structure,Representation, Chain, B-factor, Spectrum, Chain Spectrum, Hydrophobicity, Sequence Conservation.

Color → By Element

Color → By Residue

Color → By Second Structure

Color → By Representation

Color → By B-Factor

Color → By Spectrum

Color → By Chain Spectrum

Color → By Hydrophobicity

Color → By Conservation

surface_1

The gallery of the color schema is shown below.

Color by ElementColor by ResidueColor by Second Structure
color_1color_1color_3
Color by RepresentationColor by B-FactorColor by Spectrum
color_1color_1color_3
Color by Chain SpectrumColor by HydrophobicityColor by Conservation
color_1color_1color_1

 

Fragmentation (V)

You can highlight specific fragments by presenting them with varied representation styles. Firstly, click "Fragment", and two affiliated options, Region and Editing, will appear.

fragment_1

Click the Region option, and the Fragment panel will appear as follows. The steps for representation of the selected fragments are labeled in the panel.

fragment_2

fragment_3 Here is an example video for fragment regions.

 

Structure Editing (V)

Structure Editing provides a method to replace one amino acid with another one. Click "Fragment", and then click its affiliated option Editing.

fragment_2

Here will appear an editing panel as follows. In this panel, you can select a specific chain by selecting its chain ID, and then select the residue that you want to replace. Next select the target residue and its representation style in the resulting structure. Finally, click Replace button in the panel, and you will see the original residue is replaced by the target residue highlighted by your selected representation style. Notably, the edited structure can be exported as a new PDB file by click "Export" option in the VRmol user interface.

fragment_2 fragment_2

Here is an example videos for structure editing in VRmol.

 

Genome Variations (V)

"Mutation" option provides a handy way to view genomic variation sites in the target structure by connecting to TCGA, CCLE, ExAc and dbSNP databases. By clicking "Mutation", TCGA, CCLE, ExAC and dbSNP will apear. And you can view genomic mutation sites (highlighted by twinkling balls) on the loaded structure by selecting these databases.

Mutation → TCGA

Mutation → CCLE

Mutation → ExAc

Mutation → dbSNP

mutation

 

mutation

Here is an example video for visualizing genomic variation. Try it

 

Interactive Docking (V)

"Drugs" option in VRmol provides a handy way for the structure-related drugs visualization and drug molecules docking analysis. In "Drugs" option, choose Load Drug, and the structure-related drug (from DrugBank databse) will be loaded into the user interface. And choose Drug Random Migration to perform drug docking. You can define the searching space in drug docking by clicking Show BoxHelper for getting more efficient and meaningful docking results. Once you click Show BoxHelper, there will appear a "Box Helper Limit" board in the upper right of the user interface, where searching space can be defined by inputing x, y and z coordinates.

mutation

image-20190124155039841

Here is an example video for drug docking. Try it

 

Density Map

If the input structure (PDB) has corresponding density map (like electron microscopy density map in EMDB), you can easily load this density map by clicking "Density Map" and then Load Density Map (as shown in the following figure). And the loaded density map can be visualized in several representation styles as listed in "Control panel for density map" in the following figure.

Density Map → Load Density Mapmutation

"Surface" (I), "Slice" (II) and "Solid" (III) representation styles of density map are shown below. density_map

Notably, a local individual density map can also be directly uploaded by clicking "+Upload" button in the user interface.

 

Sharing by URL

URL Options

You can save a specific structural representation scene by saving operation options setting in VRmol as a URL, like https://vrmol.net/index.html?id=1dfb&panelShow=0&mainMode=7&showSurface=0&surfaceOpc=0.5&surfaceType=1&colorMode=602. And then you can load and share the scene by opening this previously-saved URL in the web browser or embedding it into your own website by using iframe, such as

The options and their data types supported in VRmol are shown in the table below.

OptionsData TypeValueComment
idStringPDB code4 charactors
panelShowIntegerShow:1,Hide:0Show menu panel or not
mainModeIntegerLINE : 1, DOT : 2,BACKBONE : 3, SPHERE: 4,STICK : 5, BALL_AND_ROD : 6,TUBE : 7, RIBBON_FLAT:8, RIBBON_ELLIPSE:9, RIBBON_RECTANGLE:10, RIBBON_STRIP:11, RIBBON_RAILWAY:12, CARTOON_SSE:13,SURFACE:14Main Structure Representation
showSurfaceIntegerShow:1,Hide:0Show surface panel or not
surfaceOpcFloat0~1Transparency of surface
surfaceTypeIntegerVan der Waals surface:1, solvent excluded surface:2, solvent accessible surface:3, molecular surface:4Surface type
colorModeIntegerElement:601, Residue:602, Secondary Structure:603, Chain:604, Representation:605, B-Factor:606", "Spectrum:607, Chain Spectrum:608, Hydrophobicity:609Color schemes
travelIntegerShow:1,Hide:0Enter travel mode or not

Examples for API

Present structure (PDB code:1MBS) with Ball & Rod style and hide the menu panel.

shareing URL

Present structure (PDB code:1DDB) with Tube style and show its Van der Waals surface with transparency (0.5), and hide the menu panel.

shareing URL

 

VRmol Service Access API

You can access VRmol Service (including drug auto-docking, genomic variations, speech recognition, sequence conservation visualization) by URL. Option settings are listed below. Once you request the service, VRmol will response and return with a json format string, which consists of data or warning information.

Genomic Variations

OptionsData TypeValueComment
taskidInteger10Request Genomic Variations for the provided structure
pdbidStringPDB code4 charactors
dsStringTCGA, CCLE, EXACGenomic Variations Database Name

Example 1: https://vrmol.life.tsinghua.edu.cn/server/api.php?taskid=10&pdbid=1MBD&ds=tcga

Example 2: https://vrmol.life.tsinghua.edu.cn/server/api.php?taskid=10&pdbid=2YGD&ds=ccle

Example 3: https://vrmol.life.tsinghua.edu.cn/server/api.php?taskid=10&pdbid=2YGD&ds=tcga

 

Sequence Conservation

OptionsData TypeValueComment
taskidInteger11Request Sequence Conservation for the provided structure
pdbidStringPDB code4 charactors
chainStringTCGA, CCLE, EXACChain Name

Example 1: https://vrmol.life.tsinghua.edu.cn/server/api.php?taskid=11&pdbid=3IVD&chain=A

 

Drug data API

OptionsData TypeValueComment
taskidInteger12Request Related drugs for the provided structure
pdbidStringPDB code4 charactors

Example: http://vrmol.life.tsinghua.edu.cn/server/api.php?taskid=12&pdbid=2BR9

 

EMDB

OptionsData TypeValueComment
taskidInteger13Request related electronic density map for the provided structure
pdbidStringPDB code4 charactors

Example: https://vrmol.life.tsinghua.edu.cn/server/api.php?taskid=13&pdbid=1MI6

 

AutoDock

OptionsData TypeValueComment
taskidInteger10Access AutoDock service
pdbidStringPDB code4 charactors
smolidStringdrug name in DrugBankdrug name
x_cFloat*x value of center position of the docking area
y_cFloat*y value of center of the docking area
z_cFloat*z value of center of the docking area
x_sFloat*width value of the docking area
y_sFloat*height value of the docking area
z_sFloat*length value of the docking area

Example: https://vrmol.life.tsinghua.edu.cn/server/autodock/autodock.php?pdbid=1mbs&smolid=DB04464&x_c=10&y_c=10&z_c=10&x_s=50&y_s=50&z_s=50

 

Speech Recognition

For accessing Speech Recognition service, you only need to import https://vrmol.net/server/listen/recorder.js into your html code.

Example:

Contacts

VRmol is developed and supported by ZhangLab and WangLab in Tsinghua University. Any question about VRmol, please contact xuk16@mails.tsinghua.edu.cn.