SVG 3D Graphical Presentation for Web-based Applications Lu Jisheng A thesis submitted to The University of Gloucestershire In accordance with the requirements of the degree of Doctor of Philosophy In the Faculty of Media, Arts and Technology February, 2015 2 ABSTRACT Due to the rapid developments in the field of computer graphics and computer hardware, web-based applications are becoming more and more powerful, and the performance distance between web-based applications and desktop applications is increasingly closer. The Internet and the WWW have been widely used for delivering, processing, and publishing 3D data. There is increasingly demand for more and easier access to 3D content on the web. The better the browser experience, the more potential revenue that web-based content can generate for providers and others. The main focus of this thesis is on the design, develop and implementation of a new 3D generic modelling method based on Scalable Vector Graphics (SVG) for web-based applications. While the model is initialized using classical 3D graphics, the scene model is extended using SVG. A new algorithm to present 3D graphics with SVG is proposed. This includes the definition of a 3D scene in the framework, integration of 3D objects, cameras, transformations, light models and textures in a 3D scene, and the rendering of 3D objects on the web page, allowing the end-user to interactively manipulate objects on the web page. A new 3D graphics library for 3D geometric transformation and projection in the SVG GL is design and develop. A set of primitives in the SVG GL, including triangle, sphere, cylinder, cone, etc. are designed and developed. A set of complex 3D models in the SVG GL, including extrusion, revolution, Bezier surface, and point clouds are designed and developed. The new Gouraud shading algorithm and new Phong Shading algorithm in the SVG GL are proposed, designed and developed. The algorithms can be used to generate smooth shading and create highlight for 3D models. The new texture mapping algorithms for the SVG GL oriented toward web-based 3D modelling applications are proposed, designed and developed. Texture mapping algorithms for different 3D objects such as triangle, plane, sphere, cylinder, cone, etc. will also be proposed, designed and developed. This constitutes a unique and significant contribution to the disciplines of web-based 3D modelling, as well as to the process of 3D model popularization. I Signed ............. .............. Date ...20/02/2015...... ACKNOWLEDGEMENTS I would like to thank all the people who helped me build the foundations for the SVG 3D framework for web-based application during my Ph.D. studies. Special thanks go to my supervisor Dr. Shujun Zhang. His advice and guidance have been invaluable, his enthusiasm and scientific knowledge both motivating and inspiring. I had a great time at the School of Computing and Technology, and I hope that our cooperation will continue in the future. Many thanks also to my co-advisors Dr. Vicky Bush. It has been a great experience to work with her and share her knowledge in many interesting discussions. I would like to thank my Family: my parents, my wife, my son, for their understanding, support and motivation, which they offered me every day throughout the last four years. This work would not have been possible without your help. III Contents Chapter 1 Introduction…………………………………………………..….…1 1.1 Backgrounds……………………………………………………………….1 1.2 Motivations…………………………………………………………..…….4 1.3 Aim and Objectives ………………………………………………….........6 1.4 Contributions to New Knowledge Generation…………………………….7 1.5 Thesis Structure……………………………………………………..….….8 Chapter 2 Literature Review and Current 3D Technologies…………………10 2.1 Introduction…………………………………………………………..…..10 2.2 3D Computer Graphical Presentations…………………………..…….....12 2.2.1 3D Scene Modelling……………………………………………..….12 2.2.2 3D Rendering………………………………………………………..15 2.3 Technologies for 3D Graphical Presentations…………………………....17 2.3.1 OpenGL……………………………………………………………...18 2.3.2 Direct3D……………………………………………………………...18 2.3.3 Other Technologies…………………………………………….….....19 2.4 3D Computer Graphical Presentations for Web-Based Applications……20 2.5 Technologies for Web-Based 3D Graphical Presentations………………21 2.5.1 VRML…………………………………………………………….….21 2.5.2 X3D………………………………………………………….……….22 2.5.3 WebGL……………………………………………………….………22 2.5.4 JOGL………………………………………………….……………23 2.5.5 Other Technologies…………………………………………………24 2.6 SVG and Its Applications……………………………………………….26 2.7 Shading for 3D Graphical Presentations………………………………..28 2.8 Texture Mapping………………………………………………………..28 2.9 Summary…………………………………………………….…………..29 Chapter 3 Research Design and Methods...........................................................31 3.1 Introduction……………………………………………………………31 3.2 Methods for Data Collection and Presentation..………………………..31 3.3 Research Design………………………………………………………32 3.4 Methods for Verification and Validation………………………………34 3.5 Ethical Issues……………………………………………………………35 IV 3.6 Summary………………………………………………………………..35 Chapter 4 SVG Theory and Its Applications, and OpenGL…………….…….37 4.1 Introduction……………………………………………………….……37 4.2 SVG Theory……………………………………………………………..38 4.2.1 SVG Coordinate System……………………………………………39 4.2.2 SVG Basic Geometry Elements…………………………………….40 4.2.3 Text and Fonts………………………………………………………40 4.2.4 Filling, Stroking, Opacity……………………………………………41 4.2.5 Styling……………………………………………………………….41 4.2.6 Filters………………………………………………………………..42 4.2.7 Interactivity and Scripting…………………………………………...42 4.2.8 Animation……………………………………………………………43 4.2.9 Adding SVG to a Webpage………………………………………….43 4.3 Evaluation of SVG Applications…………………………………………45 4.4 Discussion of Problems of SVG Applications…………………………...46 4.5 OpenGL Theory………………………………………………………….49 4.5.1 3D Graphics Coordinate Systems…………………………………...50 4.5.2 Primitives……………………………………………………………51 4.5.3 Vertices……………………………………………………………..51 4.5.4 Pixel vs. Fragment………………………………………………….52 4.6 OpenGL Applications……………………………………………….…..52 4.7 OpenGL and SVG………………………………………………………53 4.8 Summary………………………………………………………………..55 Chapter 5 A New Framework-SVG GL for Web-Based Graphical Presentation……………………………………………………..………………56 5.1 Introduction……………………………………………..…………….…56 5.2 Proposition and Design of a New Framework-SVG GL for Web-Based Graphical Presentation………………………………….………………….…57 5.3 3D Modelling of Primitive Geometries in the SVG GL………………....70 5.4 3D Modelling Through Sweeping………………………………………76 5.4.1 Extrusion…………………………………………………………….76 5.4.2 Revolution…………………………………………………………...77 5.5 Bezier Surface……………………………………………………………78 5.6 3D Modelling Through 3D Point Clouds………………………………..79 5.7 Summary…………………………………………………………………80 V Chapter 6 New Algorithms for Shading in the SVG GL...…………………82 6.1 Introduction………………………………………………………………82 6.2 Discussion of the Existing Algorithms in SVG and Its Problems………..83 6.2.1 Filter Element……………………………………………………..84 6.2.2 Lighting Filters………………………………………………………85 6.3 Illuminating Model…………………………………………………….88 6.3.1 Light Source………………………………………………………89 6.3.2 Ambient Reflection……………………………………………….91 6.3.3 Diffuse Reflection……………………………………………………91 6.3.4 Specular Reflection………………………………………………….92 6.4 Discussion of Shading Methods…………………………………………94 6.4.1 Flat Shading…………………………………………………………94 6.4.2 Gouraud Shading……………………………………….…………95 6.4.3 Phong Shading……………………………………………………….96 6.5 Flat Shading, New Gouraud Shading and Phong Shading Algorithms in the SVG GL…………………………………………………………………......97 6.5.1 Flat Shading in the SVG GL……………………………………..97 6.5.2 A New Gouraud Shading Algorithm in the SVG GL……..................99 6.5.3 A New Phong Shading Algorithm in the SVG GL……………….101 6.6 Summary……………………………………………………………….103 Chapter 7 New Algorithms for Texture Mapping in the SVG GL………….105 7.1 Introduction……………………………………………………………..105 7.2 Texture Mapping in SVG ………………………………………….…...105 7.3 Texture Mapping………………………………………………………..108 7.4 Texture Mapping in the SVG GL………..………………………..….…110 7.5 A New Texture Mapping Algorithm for a Triangle in the SVG GL……111 7.6 A New Texture Mapping Algorithm for a Plane in the SVG GL…..…...114 7.7 A New Texture Mapping Algorithm for a Sphere in the SVG GL……..116 7.8 A New Texture Mapping Algorithm for a Cylinder in the SVG GL…...118 7.9 A New Texture Mapping Algorithm for a Cone in the SVG GL……....121 7.10 A New Texture Mapping Algorithm for a Bezier Surface in the SVG GL…………………………………………………………..……………….123 7.11 A New Texture Mapping Algorithm for an Extrusion in the SVG GL…………………………………………….…………………………….126 7.12 A New Texture Mapping Algorithm for a Revolution in the SVG GL…………………………………………………………………..……....128 VI 7.13 Summary…………………………………………………………….…130 Chapter 8 Design and Development of the Software Environment for Validating the Proposed Framework and Algorithms………..…………………………...132 8.1 Introduction…………………………………………………………….132 8.2 System Validation…………………………..…………………………..132 8.3 System Requirement Analysis………………………………….…….…133 8.3.1 Problem Definition…………………………………………………133 8.3.2 The Software System- S3GL……………………………………….133 8.4 System Design…………………………………………….…………….135 8.4.1 Development Environment………………………………………....135 8.4.2 Classes Design and Definition………………………………….…..137 8.5 System Implementation…………………………………………………145 8.5.1 Web Server…………………………………………………………145 8.5.2 Support Platform………………………………………….………...145 8.6 System Test………………………………………………….…………..147 8.7 The Validation of the Theory and Algorithms Using Software System.150 8.7.1 3D Static Objects…………………………………………………...151 8.7.2 A Gouraud Shading Box……………………………………………153