Visualization

A frontend library based on Vue.js display .g3d file using three.js engine.

Features:

  1. Single mesh mode, all meshes mode
  2. Customization (color, line width etc)
  3. Walk mode
  4. Clickable label to highight
  5. Screenshot (w/ and w/o label)
  6. Performance (high FPS)

Start from a g3d file

Prepare your 3D genomic structure data in .g3d format, you can then put it on a web server for remote access or just save on your local drive.

Open the g3dv website at: https://g3dv.now.sh/

_images/g3dv_1.png

Click the Remote file or Local file tab to switch from using a file from web server or a local file from your hard drive.

We have provide example file and region for your to take a quick look, just click the Example button and then the Go button, the 3D structure for the default region will be displayed:

_images/g3dv_2.png

If you want to see whole chromosome structure, choose Whole Chromosome as display region, submit again:

_images/g3dv_3.png

The display will update:

_images/g3dv_4.png

By default, only one 3D model will be displayed, either from maternal or paternal, or from one chromosome. One the display scene, the right part shows the configuration menu for single mode:

_images/single_on.png

The Show all checkbox toggles single model mode or multiple models mode:

_images/single_off.png

Display configurations

The Background color can be changed if you move mouse over to the Background menu item, click the palette to change the color you liked:

_images/bgc.png

The label for each chromosome or region will be displayed by default:

_images/label_on.png

You can make them invisible by uncheck the Show label menu item:

_images/label_off.png

Single model mode

While at single model mode, there is a dropdown menu for selection which region/chromosome to display, we can also change the color and scale:

_images/single_1.png

After adjusted region, color and scale:

_images/single_2.png

On single model mode, there is a walking camera provided to mimic the walk/run along with the reigon/chromosome:

_images/walk_1.png

By checking the Walk mode checkbox, the view will start to move/walk. The speed can be adjusted as well.

_images/walk_2.png

Multiple models mode

Multiple modeles mode displays all 3D models, both from paternal and maternal, and from all chromosomes/regions. There are two dropdown menus to change the color of each model, and toggle the display of each model. Also you can change the shape type to line, tube or ball.

_images/mul_1.png

The image below shows while we changed shape type to ball:

_images/mul_2.png

Screenshot

Use the screenshot button (shown below) to take a screenshot, the generated screenshot will be the same as the time when you clicked the button.

_images/screen.png

Try genomics 3D structure in AR mode

  • Please use your phone’s camera point the QR code in the image below, Safari will popup and try to open our website, and will ask if allow to use the camera, please Allow
_images/patt_qr.png
  • then point the camera again to the Marker part (St. Louis Arch), and you will see the 3D structure in AR.
_images/g3d_ar.jpg