1. Real-time Collaborative Scientific WebGL Visualization with WebSocket Julien Jomier & Charles Marion Web3D Conference 2012

3. Collaborative visualization WebGL WebSocket Demo Collaborative visualization over the web Outline

4. 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

5. 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

6. Collaborative Visualization

7. 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

8. 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

9. 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

10. Demo

11. Data Server Database Websocket Server Session manager Master Spectator Send Dataset Send Scene Description Internet

12. WebGl + WebSocket Internet Master Spectator 1Spectator2 Emit scene state

13. WebGl + WebSocket Web Socket Server Internet Master Spectator 1Spectator2 Broadcast master’s scene state

14. WebGl + WebSocket

15. Client Server Implementation (using SocketIO)

16. The description objects are defined using the JSON format Scene Description JSON Object Internet Camera Properties: -Position -Focal Point -Up vector Camera Properties: -Position -Focal Point -Up vector Models Properties: -Dataset URL -Position -Visibility -Color Models Properties: -Dataset URL -Position -Visibility -Color Interactions: -3D object selection Interactions: -3D object selection

17. AJAXWebSocket Average latency332.4ms149.5ms Synchronization rate5.89 /s59.1 /s Master rendering rate60 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

18. 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

19. Thank you! julien.jomier@kitware.com