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

Thank you!

julien.jomier@kitware.com