Browser Visualization using PNGs Generated by HTML5 Workers on Multicore
0 likes478 views
The document proposes a browser-based visualization system that aggregates performance data from multiple sources using HTML5 workers to generate PNG images on multiple CPU cores. This allows for dynamic, flexible, asynchronous and interactive graphics rendering within the browser by exploiting modern multicore hardware. Experimental results show the system can update screen sections below 50ms for small PNGs but sluggish updates of 500ms for large PNGs, with the optimal configuration being 500x500 PNGs generated by any number of workers.
Browser Visualization using PNGs Generated by HTML5 Workers on Multicore
- 2. Problem Statement • old/traditional visualization technology • example of data center traffic visualization • problems: centralized, too heavy, impractical, inflexible Web Worker Web Worker CPU Core(s) …. PM PM PM PM Switch To Cloud Split Merge Traffic Mirroring Interactive Display M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 2/18 2/18
- 3. Objectives • browser aggregates performance data from multiple sources ◦ dynamic, flexible, async, interactive • graphics are generated inside browser based on raw data • browser exploits the full potential of multicore hardware ◦ in modern browsers, Workers are mapped to multiple cores, and run async M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 3/18 3/18
- 4. Visualization Basics M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 4/18 4/18
- 5. The Best Kind of Visual • the best thing to do is to find the best metaphor for your data M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 5/18 5/18
- 6. The Waterpipe Visualization • a model based on the concept of plumbing • several kinds of plumbing • not only traffic but anything -- memory, CPU, etc. M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 6/18 6/18
- 7. The Weather Visualization • the big picture in cloud performance resembles weather • typhoons, pressure fronts, etc. are easily translated from performance data • the ugly thing on the right side: experimental visualizations (high/low) Pressure front Typhoon Drought Good weather Bad weather FRAME:8 userland cloudland otherland 47k 45k 41k 40k 37k 37k 31k 26k 25k 25k 24k24k 24k 23k 23k 22k 21k 21k 18k 16k 15k 15k 14k 11k 8k 0k 0k 0k 0k 0k 0k 0k 0k0k 0k M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 7/18 7/18
- 8. System Design M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 8/18 8/18
- 9. Key Elements • HTML5 native binary : can create PNGs and convert them in to base64 URLs • base64 URLs are generated by Workers on multicore -- the inteded offload feature • each Worker is in charge of a section of the screen M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 9/18 9/18
- 10. System Design and Bottlenecks M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 10/18 10/18
- 11. Design Goals Gc < Ge (1) k∑ i=0 Gb,i > Ga > Gc. (2) • Network Goodput Ga • Worker Goodput Gb • Network Goodput Gc • Main Webapp Goodput Gd • Screen Update Goodput Ge M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 11/18 11/18
- 12. Analysis M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 12/18 12/18
- 13. Experimental Setup • a dripping water model • no network traffic, just random local generation • try out various configurations to feel performance margins M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 13/18 13/18
- 14. Simple Tests • one thing to notice: slugging with many workers • CPU is not affected much regardless of the setup • let's see a demo! M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 14/18 14/18
- 15. Performance Analysis (1) 0 0.2 0.4 0.6 0.8 1 Decreasing order of values 0 50 100 150 200 250 300 350 Eventinterval(ms) Size# 200 x 200 with 5 workers -100 -80 -60 -40 -20 0 Time relative to the end of each 60s session 15.8 16 16.2 16.4 16.6 16.8 CPUusage(eachcore) • small PNGs, 5 workers • per-Worker rate is about 100ms per frame • screen update rate is below 50ms (per section) M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 15/18 15/18
- 16. Performance Analysis (2) 0 0.2 0.4 0.6 0.8 1 Decreasing order of values 0 1000 2000 3000 4000 5000 6000 Eventinterval(ms) Size# 1000 x 1000 with 10 workers -100 -80 -60 -40 -20 0 Time relative to the end of each 60s session 14.6 14.8 15 15.2 15.4 15.6 CPUusage(eachcore) • large PNGs, 10 workers • Workers can output an image only once every 3s • screen update interval is also around 500ms -- noticably sluggish M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 16/18 16/18
- 17. Overall Performance 0 50 100 150 200 250 300 Global event interval (ms) 0 1000 2000 3000 4000 5000 Per-workereventinterval(ms) 1000/3500/15 500/3 800/20 1000/15 500/20 800/3 200/5 500/5 800/10 200/10200/3 1000/20 200/20 1000/5 800/15 1000/10 500/10 800/5 200/15 • width of each virtual column is the effect of multicore offload on screen update -- minor effect • column height is the overhead from multicore messaging -- very bad for large images • the best group: 500x500 PNGs with any number of workers -- recommended setup M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 17/18 17/18
- 18. That’s all, thank you ... M.Zhanikeev -- maratishe@gmail.com -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 18/18 18/18