MASARYK UNIVERSITY FACULTY}w¡¢£¤¥¦§¨ OF I !"#$%&'()+,-./012345<yA|NFORMATICS Faster WebGL Graphics MASTER’S THESIS David Hrachovy´ Brno, Spring 2012 Declaration Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Advisor: Mgr. Marek Vinkler ii Acknowledgement I would like to express my thanks to Mgr. Marek Vinkler, the supervisor of my thesis, for his guidance, suggestions and friendly approach. iii Abstract The goal of the thesis was to find an efficient way of loading 3d models in WebGL. Several WebGL frameworks for loading and rendering of 3d mod- els were compared based on their performance as well as other capabilities. In addition, a new method for rendering digital content is presented. Compared to simultaneous rendering on multiple HTML canvases, this method enables to reduce GPU memory footprint, reduces initialization time and gives better rendering performance in most of the tested web browsers. Based on the performed tests, a discussion forum, which demonstrates the new method for fast rendering of 3d avatars, was implemented and evaluated. iv Keywords WebGL, COLLADA, HTML5, WebGL frameworks, digital asset file format v Contents 1 Introduction ...............................2 2 WebGL ..................................4 2.1 OpenGL ..............................4 2.2 WebGL Fundamentals ......................7 2.3 Web Browsers Support ...................... 10 3 The Overlay Canvas .......................... 13 3.1 Multiple Canvases ........................ 13 3.2 Overlay Canvas Design ..................... 16 3.3 Implementation .......................... 18 3.4 Testing ............................... 22 3.5 Conclusion and Future Improvements ............. 28 4 Model Loading in Frameworks .................... 30 4.1 Relevant Frameworks Selection ................. 30 4.2 Usage Issues ............................ 33 4.3 Design of Loading Test ...................... 34 4.4 Test Implementation in the Frameworks ............ 41 4.5 Results ............................... 46 5 Sample Application .......................... 50 5.1 Used Models ............................ 50 5.2 Avatars Talk ............................ 51 6 Conclusion ................................ 54 A Canvas Initialization .......................... 66 B The Overlay Canvas Performance .................. 68 C Brief Description of 3d Asset File Formats ............. 70 C.1 3d Asset File Formats Used in our Tests ............ 70 C.2 Other File Formats ........................ 71 D Frameworks’ Properties ........................ 73 E Model Loading Test Results ...................... 76 F Loading Small Models ......................... 81 G Contents of the Attachment ...................... 83 1 Chapter 1 Introduction Interactivity in modern web pages is provided mainly by JavaScript 1 code interpreted by a web browser on a client side. The client-side JavaScript code embedded within an HTML2 web page is run by the client computer and allows to alter the document content, interact with the user, and control the web browser [1]. Additional standards are produced to enhance user’s experience. For example the upcoming HTML5 [2] standard proposes in- terfaces for audio and video elements. WebGL [3] is a standard produced by Khronos WebGL Working Group. It provides another HTML Canvas3 rendering context which presents the WebGL API4. Rendering results are displayed on the canvas initialized with WebGL context. Provided API is similar to OpenGL ES 2.0 and the routines may be called directly in JavaScript. Experimental implementation of the API is available in most leading web browsers. Applications with rich 3d content often use 3d assets (3d models) stored in a certain file format. The implementation of loading a 3d model stored in a particular format and the selection of the format itself influences the total time of loading the model. The aim of the thesis is to find an efficient way of loading the models based on existing solutions. This is done by com- paring WebGL frameworks with various file formats. As a result, suitable candidates for web environment are presented. In addition, we examine rendering in multiple canvases and propose a better approach. In the second chapter, a brief description of major WebGL functionality is presented together with examples in JavaScript. The state of the imple- mentation in most popular web browsers is examined as well. The third chapter is dedicated to examination of the proposed Overlay Canvas method. It is a proof of concept demonstration that solves some is- 1. JavaScript is an interpreted programming language with object-oriented capabilities sometimes referred to as ECMAScript [1]. 2. HyperText Markup Language 3. Canvas is an HTML element providing drawable region. 4. Application Programming Interface 2 1. INTRODUCTION sues which were observed in situations where multiple canvases had been used. Implementation of the Overlay Canvas is tested in various browsers with respect to rendering performance and correctness. Benefits and de- tected issues are discussed together with future improvements. The fourth chapter focuses on loading 3d models in various WebGL frameworks. We test selected models, which are stored in common digi- tal asset file format, and other custom file formats provided by the frame- works. Our automated test tool created to simulate a user visiting a web- site with the model is designed. Loading time of the models in each of the frameworks is measured. The results are then used to implement a sample application using the Overlay Canvas. The sample application implemented in the fifth chapter is a web site that allows registered users to choose their 3d avatar which is shown next to the message they post. The chosen file format is based on the test re- sults from the previous chapter and an additional test focusing on loading several small models. In the last part of the thesis, suitable file formats for fast loading are summarized and the usability of Overlay Canvas in today’s web browsers is discussed. 3 Chapter 2 WebGL This chapter is devoted to the introduction of WebGL. Its relation to previ- ous OpenGL standards is revisited since many constructs are semantically similar to those of the underlying OpenGL ES 2.0 API. Tight relation of the OpenGL standards is demonstrated in Figure 2.1 [3]. The main part of the Figure 2.1: WebGL relation to other OpenGL standards. Arrows de- note which specification was a given standard based on. chapter describes WebGL integration in a web environment which is ac- companied by code samples. The state of WebGL implementation in major web browsers is examined. Selected web browsers are then used in all tests that we performed. Other parts of WebGL such as security, events, detailed differences to OpenGL ES 2.0, and other topics are not covered here, but they can be found in the WebGL specification [3]. 2.1 OpenGL OpenGL is a low-level interface to access graphics hardware capabilities. In the desktop world, there are two standard 3d APIs, DirectX and OpenGL. OpenGL is a multiplatform, hardware independent client-server1 architec- 1. Client application running on a host device (e.g. PC) sends data and commands to the server – graphics hardware (graphics chip or card). 4 2. WEBGL ture providing commands to render basic graphical primitives, manipulate textures, framebuffers and other objects. OpenGL is widely used in industry (computer games, CAD applica- tions, modeling tools) as well as in academic community. The standard was defined by Khronos Group2 [4]. 2.1.1 OpenGL ES 2.0 OpenGL ES was designed for handheld devices and embedded devices that place different demands on applications than desktops do. They often feature low overall performance that is caused by reduced memory band- width, low processor performance, and small battery capacity. Having well established graphics API, Khronos Group defined OpenGL ES 2.0 relative to the OpenGL 2.0 specification that emphasizes a programmable 3d graph- ics pipeline (see Figure 2.2). Figure 2.2: OpenGL ES 2.0 graphics pipeline OpenGL ES 2.0 consists of two specifications: OpenGL ES 2.0 API spec- ification and OpenGL ES Shading Language (OpenGL ES SL). [5] 2. The Khronos Group is a not-for-profit, member-funded consortium focusing on the cre- ation of royalty-free open standards. OpenGL and OpenCL are some of the standards pro- duced by the consortium. 5 2. WEBGL OpenGL ES 2.0 API One of the design goals was to create an API suitable for constrained de- vices. Primarily, the fixed-function pipeline was dropped and programmable rendering pipeline using vertex shader and fragment shader is mandatory. The following text briefly covers differences of OpenGL ES 2.0 API from OpenGL 2.0. Note that the list of removed features is similar to the list of deprecated features in OpenGL 3.0 [4]. Primitives (only sprites, lines and triangles) are drawn using DrawAr- rays (we omit the gl prefix) and DrawElements using vertex arrays. A sup- port for fixed-point numbers was added. Notable features which were removed include: immediate mode, dis- play lists3, color index rendering, coordinate transformation operations and matrix operations4, evaluators, selection and feedback, lighting model, imag- ing subset5, proxy textures, color sum, fog, texture environments and tex- ture functions, texture borders, depth textures, accumulation buffers and alpha test.