A Hybrid Visualization System for Molecular ModelsA Hybrid Visualization System for Molecular Models Charles Marion, Joachim Pouderoux, Julien Jomier Kitware SAS, France Sébastien

A Hybrid Visualization System

for Molecular Models

Charles Marion, Joachim Pouderoux, Julien Jomier Kitware SAS, France

Sébastien Jourdain, Marcus Hanwell & Utkarsh Ayachit Kitware Inc, USA

Web3D Conference 2013, San Sebastian

• Provide a molecules and proteins visualization tool

running on every web connected devices (client’s need)

• Heterogeneous world - thankfully

– Devices

• Phones, tablet, laptops, netbooks, PC, Mac

– Browsers

• Firefox, Chrome, Safari, IE, Opera …

• WebGL support not guaranteed

Motivation

Trade Off

• Remote visualization

– Images rendered server side and streamed to the client

– Computation is carried out on appropriate hardware

– No additional hardware costs, very convenient for users

– No need to download the data

– Copyrighted data friendly

• Local Rendering

– Download/stream dataset from the server

– Use the client’s hardware

– Rely on mainstream technology

– Better interactive experiment

Technologies Trade Off

• Remote rendering - ParaViewWeb

– Can manage large datasets

– No client side constraints

– Provide direct support for collaboration

– Processing capabilities

– Dependent on network performances

• Local rendering - WebGL

– Not ideal for big dataset

– Dependent on the client machine capabilities

– Support is not guaranteed

Hybrid Visualization

• Remote or local rendering policy

– Size of the dataset

– Client’s browser capabilities

• Use local rendering when it is possible – Save computing power on server side

– Save bandwidth

– Less latency – improve interactive feedback

• Try to provide the same visual experience with both technologies

Local Rendering Technologies

• WebGL

– Enables web enabled devices to natively access 3D content directly from web pages

– Javascript bindings to OpenGL|ES 2.0

– Supported browser: Chrome, Firefox, Safari, Opera

• three.js

– Efficient

– Easy to use

– Many features

– Lot of examples

– Active community

• Visualization Toolkit (VTK)

– Open-Source C++ visualization library

– Wrapping for Java, Python, C#...

– Used worldwide in different fields of 2D/3D sci-visualization

• ParaView

– Open-Source framework and client/server applications

– Large data processing & visualization

• ParaViewWeb

– Collaborative remote web interface for 3D visualization with

ParaView as a server

– Provide a JavaScript API based on the ParaView scripting

features and capabilities

Remote Rendering Technologies

• Better performances

– Improved loading time

• User wants the visualization starts immediately

• ParaViewWeb communicates with ParaView through a Python layer

• Creating Python engine & loading libraries is long

• So we create a pool of PVW sessions

• Original data are preprocessed so they can be loaded faster

– Improved the rendering engine in order to display very large

models (up to 10M of polygons) on a graphic server

• VTK is mainly based on OpenGL 1.2

• We developed some new OpenGL 3.0 VTK mappers

ParaViewWeb Improvements

• Better streaming performances

– PVW used to stream the image flow through the

HTTP protocol

– We added support for the WebSocket protocol

• Bidirectional communication

• Low latency and network overhead

• Faster than AJAX

• Supported everywhere (except old internet explorer versions)

• Remove the number of concurrent connections limitation

(from 2 to 11)

• Send the messages (string) and the images (binary)

ParaViewWeb Improvements

Use Case: Molecule Visualization

• Different representation mode

– Bond-and-sticks, liquorice, etc.

– For proteins: ribbon diagrams

– Shipped in PDB files/PyMol sessions

• Local rendering

– Based on Glmol – itself base on three.js

• Remote rendering

– VTK had native molecular data model & inefficient

visualization support

– We created ribbon filter and optimized OpenGL mappers

• Ball & stick rendering

– Atoms are spheres

– Bonds are cylinders

• Direct glyphing technique would depend on the glyph resolution

• Rendering technique

– Impostors

• Render 1 quad per element

• Camera oriented & shaded in GLSL

– Instanced rendering

• We send on single plane to render all the entities

• Plus element properties (pos, color, orientation)

Large Molecules Rendering

Experimental Setup Workflow

Interaction events

Image req 30x/s

New images

Dataset

New dataset

Experimental Setup

• Server

– Located in the US

– CPU: Intel Xeon E5620 – 12 GB RAM

– GPU: Nvidia 660Ti - 2GB GRAM

– Embeds a Midas data server

• Clients

– Located in France

– Chrome (Desktop)

– Internet Explorer 7

– Chrome (Android)

Results

Small Molecule Large Molecule

WebGL 60 fps N/A

ParaViewWeb (HTTP protocol)

4 fps 4 fps

ParaViewWeb (WebSocket protocol)

17 fps 13fps

Interactive Science Publishing • Now available on Science Direct (Elsevier)

• Enhance traditional publishing with interactive 3D content

http://www.sciencedirect.com/science/article/pii/S0969212612004121

Conclusion and Future Work

• Hybrid and adaptive scheme for molecules visualization

• Can work with (almost) any kind of devices and browsers

• Easy to use (without third party plugins)

• Improve the remote rendering streaming performances

– Image flow compression/decompression on GPU

– Load balancing strategies

• Flexible publishing framework

– More remote rendering oriented

– Specific rendering techniques depending on data type

– Cultural heritage data with high resolution textures, volume

data, large 2D images, etc.

Thank you!