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

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

4. VTK/ParaView • 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

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 • Lightweightopen 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. Master Spectator Spectator Internet SendDataset SendScene Description Session manager Database Data Server Websocket Server

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

13. WebGl + WebSocket Master Spectator 1 Spectator2 Broadcastmaster’sscene state Internet Web Socket Server

14. WebGl + WebSocket

15. Implementation (using SocketIO) • Client • Server

16. Scene Description • The description objects are definedusing the JSON format • Camera Properties: • Position • Focal Point • Up vector • ModelsProperties: • Dataset URL • Position • Visibility • Color • Interactions: • 3D objectselection JSON Object Internet

17. 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. Future work • 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

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