No description available.

The number of devices with touch input such as smart phones, computers, and tablets has grown extensively in recent years. Native applications on these devices have access to this touch and gesture information and can provide a rich, interactive experience. Web applications, however, lack a consistent and uniform way to retrieve touch and gesture input. With the quality and robustness of web applications continually growing and replacing native applications in many areas, a way to access and harness touch input is critical. This paper proposes two JavaScript libraries that provide a reliable and easy way for web applications to use touch efficiently and effectively. First, getTjs abstracts the gathering of touch events for most mobile and desktop touch devices. GenGesjs, the second library, receives this information and identifies gestures based on the touch input. Web applications can have this gesture information pushed to them as it is received or instead request the most recent gestures when desired. An example of interfacing with both libraries is provided in the form of WebMol. WebMol is a web application that allows for three dimensional viewing of molecules using WebGL. Gestures from GenGesjs are translated to interactions with the molecules, providing an intuitive interface for users. Using both of these libraries, web applications can easily tap into touch input resulting in an improved user experience regardless of the device. / text

This master's thesis deals with ways and options to automatically generate three-dimensional models from two-dimensional data within web browsers, especially buildings and map objects. As part of this thesis, an application was designed and implemented to simplify the creation of detailed building models and to display additional and adequate real-time data on mobile devices as well.

By applying the image processing algorithms used in surveillance systems on video data obtained from a web camera, a motion detection application can be created and incorporated into web based games. The use of motion detection opens up a vast field of new possibilities in game design and this thesis will therefore cover how to create a motion detection JavaScript module which can be used in web based games. The performance and quality of the motion detection algorithms are important to consider when creating an application. What motion detection algorithms can be used to give a qualitativerepresentation without affecting the performance of a web based game will be analyzed and implemented in this thesis. Since the performance of the Central Processing Unit will not suffice, WebGL and the parallelism of the Graphical Processing Unit will be utilized to implement some of the most recognized image processing algorithms used in motion detection systems. The work resulted in an application where Gaussian blur and Frame Subtraction were used to detect and return areas where motion has been detected.

abstract: Tessellation and Screen-Space Ambient Occlusion are algorithms which have been widely-used in real-time rendering in the past decade. They aim to enhance the details of the mesh, cast better shadow effects and improve the quality of the rendered images in real time. WebGL is a web-based graphics library derived from OpenGL ES used for rendering in web applications. It is relatively new and has been rapidly evolving, this has resulted in it supporting a subset of rendering features normally supported by desktop applications. In this thesis, the research is focusing on evaluating Curved PN-Triangles tessellation with Screen Space Ambient Occlusion (SSAO), Horizon-Based Ambient Occlusion (HBAO) and Horizon-Based Ambient Occlusion Plus (HBAO+) in WebGL-based real-time application and comparing its performance to desktop based application and to discuss the capabilities, limitations and bottlenecks of WebGL 1.0. / Dissertation/Thesis / WebGL Program / OpenGL Program / Masters Thesis Computer Science 2017

WebGL is a standard for drawing graphics in a web browser. Currently it isn’t widely understood how consistently WebGL performs across a majority of the de- vices that support it. Determining if an image looks correct to a human observer is an interesting problem. The solution for this is useful when developing WebGL applications, since a developer could make better informed decisions during de- velopment. The differences in capability between WebGL implementations are studied, and a few factors are selected that likely will contribute to variations in the rendered output. These factors are found by studying the WebGL specification documen- tation, and in the cases where it is ambiguous, further, authorative sources have contributed to the choice of factors studied. A prototype testing system is developed, including a tool for simulating imple- mentation differences. Two image processing algorithms are evaluated for their suitability in an automatic testing system. For testing, four test cases are devel- oped. The testing system is run with the test cases on wide range of devices, both mobile and desktop. The results show that image processing is not suitable alone the source for deter- mining a test success or failure. However, some promise is shown in using image processing as one component in a fully automatic testing system. Furthermore, developing test cases that perform as the test constructor intends is proven to be a challenge in itself.

Att ha grafiska applikationer i webben har blivit allt mer vanligt sedan World Wide Web kom till i slutet på 80-talet. Till en början handlade det om effektfulla interaktiva element så som reklamskyltar, logotyper och menyknappar. Idag år 2015 har webbläsarna utvecklats så pass långt att inga tredjepartsprogram krävs för att interaktiv grafik ska fungera, vilket tidigare var fallet. Grafiska funktioner och bibliotek finns nu istället inbyggda i webbläsaren. De tekniker som denna rapport/arbete ska behandla är Canvas och WebGL. Dessa är tekniker som används för att presentera interaktiv grafik på webben. WebGL är ett grafiskt bibliotek som bygger på ett känt grafiskt bibliotek vid namnet OpenGL, men konstruerat för webben. Grafiken är hårdvaruaccelererad precis som OpenGL, vilket innebär att tekniken kan åstadkomma relativt kraftfull grafik för att vara en webbapplikation. För en utbildad webbutvecklare kan WebGL upplevas som en svårare värld jämfört med Canvas som ligger närmare en webbutvecklares kunskapsområde. Canvas har även en större tillgänglighet bland webbläsare än WebGL. Detta arbete ska redovisa hur dessa två tekniker förhåller sig till varandra i utritningshastighet tillsammans med en bildteknik kallad Atlas. Atlas teknik är enkelt förklarat när ett bildobjekt är som en atlas med flertal bildobjekt där i som hade kunnat motsvara separata bildobjekt. Detta examensarbete kommer jämföra alla fallen i ett experiment för att kunna ge svar på hur prestanda i utritningshastighet står sig mellan teknikerna Canvas och WebGL med eller utan Atlas teknik.

No description available.

This report describes an analysis of WebGL together with JavaScript with the aim to examine its limitations, strengths and weaknesses. This analysis was performed by building a 2D game engine containing some dynamic elements such as water, smoke, fire, light, and more. Different algorithms have been tested and analyzed to provide a clearer picture of how these work together. The report will go through the most basic functions of the game engine and describe briefly how these work. The result shows that JavaScript with WebGL can be considered to be a potent toolsets, despite the difficulties caused by JavaScript. In summary, similar projects can be recommended as Javascript and WebGL proved both fun and incredibly rewarding to work with.

This thesis is focused on fast rendering of the 3D scene in a web browser with usage of modern technologies, for instance WebGL and WebAssembly. In this thesis you will find out how to compile an application which was written in C++ language into WebAssembly via Emscripten compilator and how to insert this code into a web page. Futhermore, you will find out how to communicate between C++ language and JavaScript, how to call functions, create instances and how to share memory between them. During design of a rendering core you will learn a few methods how to improve rendering performance. In the end the performance of this technologies is compared.