web3d2013.web3d.orgweb3d2013.web3d.org/slides/web3d2013-marion.pdf · title: presentation 1 author:...
TRANSCRIPT
![Page 1: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/1.jpg)
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
![Page 2: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/2.jpg)
• 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
![Page 3: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/3.jpg)
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
![Page 4: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/4.jpg)
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
![Page 5: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/5.jpg)
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
![Page 6: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/6.jpg)
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
![Page 7: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/7.jpg)
• 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
![Page 8: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/8.jpg)
![Page 9: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/9.jpg)
• 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
![Page 10: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/10.jpg)
• 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
![Page 11: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/11.jpg)
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
![Page 12: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/12.jpg)
• 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
![Page 13: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/13.jpg)
Experimental Setup Workflow
Interaction events
Image req 30x/s
New images
Dataset
New dataset
![Page 14: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/14.jpg)
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)
![Page 15: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/15.jpg)
Results
Small Molecule Large Molecule
WebGL 60 fps N/A
ParaViewWeb (HTTP protocol)
4 fps 4 fps
ParaViewWeb (WebSocket protocol)
17 fps 13fps
![Page 16: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/16.jpg)
Interactive Science Publishing • Now available on Science Direct (Elsevier)
• Enhance traditional publishing with interactive 3D content
http://www.sciencedirect.com/science/article/pii/S0969212612004121
![Page 17: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/17.jpg)
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.
![Page 18: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/18.jpg)
![Page 19: web3d2013.web3d.orgweb3d2013.web3d.org/slides/Web3D2013-marion.pdf · Title: Presentation 1 Author: Charles Created Date: 6/21/2013 11:22:15 AM](https://reader034.vdocuments.net/reader034/viewer/2022052017/6030a95b103226438f0bb3a1/html5/thumbnails/19.jpg)
Thank you!