M¨alardalenUniversity School of Innovation Design and Engineering V¨aster˚as,Sweden Thesis for the Degree of Bachelor in Computer Science 15.0 credits EVALUATING REMOTE AND LOCAL WEB RENDERING OF REAL-TIME INTERACTIVE 2D GRAPHICS USING BLAZOR Alexander Andersson Tholin [email protected] Examiner: Gabriele Capannini M¨alardalenUniversity, V¨aster˚as,Sweden Supervisor: Afshin Ameri M¨alardalenUniversity, V¨aster˚as,Sweden Company supervisor: Isak Savo, ABB Power Grids Sweden AB, V¨aster˚as June 18, 2020 A. Andersson Tholin Evaluating remote and local web 2D rendering using Blazor Abstract With the growing popularity of the web, companies are starting to extend current development to reflect this. When extending desktop applications to the web, it can be difficult to choose what tech- niques and technologies to use when solving a problem, as current solutions might not be directly applicable. Rendering high-performance interactive 2D graphics on the web can be achieved in mul- tiple ways. The rise in open standards such as the Canvas API allows the client to render natively in the browser, provided they can receive the full object state. There are some cases where this is simply not possible, where the object state is too large, or the client is lacking sufficient hardware. A possible solution is migrating the rendering of the graphic from the client to the server. However, remote rendering comes with new sets of issues as it often lacks high interaction capabilities, and would theoretically require more resources with multiple connections. This thesis will evaluate the performance differences and individual capabilities of remote and local rendering in terms of scala- bility and Quality of Experience using ASP.NET Core Blazor. The evaluation is done through the implementation of the four different solutions for the scenario. These implementations are based on Canvas and SVG using remote and local rendering. Different configurations of the performed tests, such as how much data should be rendered and how many clients are connected, were used to see how they affect response time and interaction latency. The results show that remote rendering performed better in all scalability tests, with remote SVG being the recommended approach. Due to implementation issues and lack of a proper testing environment, the number of concurrent clients was downsized. This caused problems when analyzing the results, and drawing concrete conclusions were difficult. In tests with increasing image size, the client solution suffered memory exceptions, preventing the local versions to be tested further. When testing interaction capabilities by measur- ing interaction latency, the SVG technology significantly outperformed Canvas, since SVG does not require a full re-render of the elements. i A. Andersson Tholin Evaluating remote and local web 2D rendering using Blazor Table of Contents 1. Introduction 1 1.1 Purpose..........................................2 1.2 Problem formulation...................................3 1.3 Limitations........................................3 2. Background 4 2.1 Web technologies.....................................4 2.1.1 Real-time communication............................5 2.2 Performance and load testing..............................5 2.3 ASP.NET Core Blazor..................................5 2.3.1 Blazor WebAssembly...............................6 2.3.2 Blazor Server...................................6 3. Related Work 8 4. Method 10 4.1 Test data......................................... 10 4.2 Test environment..................................... 11 4.2.1 Device specifications............................... 12 5. Comparing rendering strategies 13 5.1 Tests............................................ 13 5.2 Implementation...................................... 14 5.2.1 Generating test data............................... 15 5.2.2 Implementation issues.............................. 16 6. Results 17 6.1 Scalability (clients).................................... 17 6.2 Scalability (image size).................................. 19 6.3 Interaction latency.................................... 19 7. Discussion 21 7.1 Scalability (clients).................................... 21 ii A. Andersson Tholin Evaluating remote and local web 2D rendering using Blazor 7.2 Scalability (image size).................................. 21 7.3 Interaction latency.................................... 22 7.4 Related work....................................... 22 7.5 Limitations and issues.................................. 23 8. Conclusions 24 8.1 Future work........................................ 24 References 27 iii A. Andersson Tholin Evaluating remote and local web 2D rendering using Blazor List of Figures 1 Example of a 2D figure rendered using DirectX. This is a screenshot from the Net- work Control desktop client................................2 2 Blazor WebAssembly. Source: [1].............................6 3 Blazor Server. Source: [1].................................7 4 Switch and transformer rendered in the Network Manager application, connected to other components using lines............................. 11 5 Cropped screenshot of local rendering Canvas and SVG with 50 elements. Note that not all 50 elements are visible............................... 15 6 Concurrent clients test using 250 elements with real-time updated data. Tested on 1 to 15 clients....................................... 17 7 Concurrent clients test using 2,500 elements with real-time updated data. Tested on 1 to 15 clients...................................... 18 8 Concurrent clients test using 10,000 elements with real-time updated data. Tested on 1 to 15 clients...................................... 18 9 Increasing elements. Tested on one client........................ 19 10 Interaction latency with increasing elements. Tested on one client.......... 19 iv A. Andersson Tholin Evaluating remote and local web 2D rendering using Blazor List of Tables 1 Testing devices hardware specifications......................... 12 2 Software version specifications.............................. 12 3 Scalability (clients) configuration............................ 13 4 Steps for testing increasing clients. k = concurrent clients, n = # of elements... 13 5 Steps for testing increasing elements. n = # of elements............... 14 6 Steps for testing interaction latency. n = # of elements. The actions taken will simulate a pan movement................................. 14 7 Rendering method and technology description..................... 15 v A. Andersson Tholin Evaluating remote and local web 2D rendering using Blazor 1. Introduction Applications for rendering 2D and 3D graphics usually require specific hardware components such as GPUs, forcing the application to run as a native executable. With the rapid growth of web technology, open standard solutions now provide graphics rendering functionalities in the browser [2,3]. Early on, plug-ins like Adobe Flash would assist in hardware-accelerated rendering but typically requires the plug-in to be installed on the machine. The rise of native open standard methods, such as the Canvas API [2] and WebGL [3], led the once-popular plug-ins to lose support from large companies [4]. There are, however, cases where it is not possible to process data and render graphics on the client. Devices such as mobile phones might lack the processing power and network bandwidth to receive and render the incoming data. These problems open up a new realm of remote rendering, as opposed to local rendering, in which the server (or another system) processes the data, and the client receives the finished result ready to be displayed [5]. This method takes a significant load off the client, and displaying resource-heavy graphics can be done on thin clients such as a laptop or mobile phone. The main drawback of using remote rendering instead of local rendering is the loss in native interactivity since every input event requires a request to the server to receive the updated rendered result [6]. Another drawback is scalability since all of the processing is done on one system. With the server sending updates to a multitude of clients, there is a limit to where the server can not keep up. This bachelor thesis is conducted together with ABB Power Grids, offering services in power technologies, providing systems, software, and service solutions across the world. ABB Power Grids is in the initial phase of extending its Network Manager software to the web, which is a central system for energy management, automation and communications with power distribution grids. Power utility companies are using the product in control rooms to monitor the transmission and distribution of energy in a country or region. Currently, this is a desktop application, requiring an extensive installation process to function. A feature of the current system is the ability to visualize stations in a 2D representation with rich interactivity and frequent real-time updates. This thesis aims to give an empirical basis for determining the proper rendering strategy (local or remote) to use when rendering 2D-figures on the web. Currently, the company generates image definitions from different object states. An example object could be an electrical component, and we define the example state as the component being either on or off. These definitions consist of various objects that contain symbols with specifications on how they are displayed. The sizes of these images can vary, but a simple model has around 200-300 elements. The current