real-time collaborative scientific webgl visualization with websocket
DESCRIPTION
Real-time Collaborative Scientific WebGL Visualization with WebSocket. Julien Jomier & Charles Marion Web3D Conference 2012. Outline. Collaborative visualization WebGL WebSocket Demo Collaborative visualization over the web. VTK/ ParaView. Visualization Toolkit (VTK) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/1.jpg)
Real-time Collaborative Scientific WebGL Visualization with WebSocketJulien Jomier & Charles Marion
Web3D Conference 2012
![Page 2: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/2.jpg)
![Page 3: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/3.jpg)
• Collaborative visualization• WebGL• WebSocket• Demo• Collaborative visualization over the web
Outline
![Page 4: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/4.jpg)
• 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
![Page 5: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/5.jpg)
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
![Page 6: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/6.jpg)
Collaborative Visualization
![Page 7: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/7.jpg)
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
![Page 8: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/8.jpg)
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
![Page 9: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/9.jpg)
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
![Page 10: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/10.jpg)
Demo
![Page 11: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/11.jpg)
Data Server
Database
Websocket Server
Session manager
Master Spectator Spectator
Send Dataset Send Scene Description
Internet
![Page 12: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/12.jpg)
WebGl + WebSocket
Internet
Master Spectator 1 Spectator2
Emit scene state
![Page 13: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/13.jpg)
WebGl + WebSocket
Web Socket Server
Internet
Master Spectator 1 Spectator2
Broadcast master’s scene state
![Page 14: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/14.jpg)
WebGl + WebSocket
![Page 15: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/15.jpg)
• Client
• Server
Implementation (using SocketIO)
![Page 16: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/16.jpg)
• 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
![Page 17: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/17.jpg)
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
![Page 18: Real-time Collaborative Scientific WebGL Visualization with WebSocket](https://reader033.vdocument.in/reader033/viewer/2022051002/56816381550346895dd464d9/html5/thumbnails/18.jpg)
• 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