Real-time Collaborative Scientific WebGL Visualization with WebSocketJulien Jomier & Charles Marion
Web3D Conference 2012
• Collaborative visualization• WebGL• WebSocket• Demo• Collaborative visualization over the web
Outline
• Visualization Toolkit (VTK)– Visualization library– Open-Source (BSD)– C++ library (8M LOC) – Bindings for Java, Python, C#...– Used worldwide in different fields of visualization
• ParaView– Framework and application– Large data visualization– Open-Source (BSD)– Based on VTK
VTK/ParaView
Introduction
• Remote visualization– The computing is carried out on appropriate hardware– No additional hardware costs, very convenient– No need to download the data– Only the required view is transmitted (not the full dataset)
• Collaborative visualization- Large number of attendees- No need to travel to share an experience- Multiple people can interact simultaneously- Multiple people can use different Viewpoints
Collaborative Visualization
Objectives
• Create applications designed for different fields of scientific visualization– medical, design, biochemical, etc.
• Enable interactive and participative collaboration
• Obtain optimal performances
• Bring interactive visualization to the users
WebGL
• Enables web enabled devices to natively access 3D content directly from web pages
• Javascript bindings to OpenGL|ES 2.0
• VTK.js Library• Lightweight open source library• Scientific visualization library • Inspired by the Visualization Toolkit
• Supported browser: Chrome, Firefox, Opera
WebSocket
• Proposed Standard (December 2011) RFC 6455
• Bidirectional communication
• Low Latency
• Works with proxy/firewall
• Low network overhead
• Faster than AJAX
• Supported everywhere except Android native browser
Demo
Data Server
Database
Websocket Server
Session manager
Master Spectator Spectator
Send Dataset Send Scene Description
Internet
WebGl + WebSocket
Internet
Master Spectator 1 Spectator2
Emit scene state
WebGl + WebSocket
Web Socket Server
Internet
Master Spectator 1 Spectator2
Broadcast master’s scene state
WebGl + WebSocket
• Client
• Server
Implementation (using SocketIO)
• The description objects are defined using the JSON format
Scene Description
JSON Object
Internet
Camera Properties:- Position- Focal Point- Up vector
Models Properties:- Dataset URL- Position- Visibility- Color
Interactions:- 3D object selection
AJAX WebSocket
Average latency 332.4ms 149.5ms
Synchronization rate 5.89 /s 59.1 /s
Master rendering rate 60 fps 60 fps
Results and Conclusion
• Real-time performances with WebGL and WebSocket• Easy to use (without third party plugins)
• Not ideal for big dataset• Highly dependent on the client machine configuration
• Integration of WebSocket into the VTK.js library• Creation of an hybrid solution WebGL / ParaviewWeb• Create a common API between
– VTK.js (WebGL)– VTK (Desktop)– ParaviewWeb (Online Streaming) – VES (Mobile)
• http://demoweb3d.webviz.org• http://visiblepatient.eu• http://webviz.org
Future work