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
Motivation 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
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
Remote Rendering Technologies 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
ParaViewWeb Improvements 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)
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
Large Molecules Rendering 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)
Experimental Setup Workflow New dataset Dataset Interaction events Image req 30x/s New images
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!