WebGL Beginner's Guide Become a master of 3D web programming in WebGL and JavaScript Diego Cantor Brandon Jones BIRMINGHAM - MUMBAI WebGL Beginner's Guide Copyright © 2012 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: June 2012 Production Reference: 1070612 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-172-7 www.packtpub.com Cover Image by Diego Cantor ([email protected]) Credits Authors Copy Editor Diego Cantor Leonard D'Silva Brandon Jones Project Coordinator Reviewers Joel Goveya Paul Brunt Dan Ginsburg Proofreader Lesley Harrison Andor Salga Giles Thomas Indexer Monica Ajmera Mehta Acquisition Editor Wilson D'Souza Graphics Valentina D'silva Lead Technical Editor Manu Joseph Azharuddin Sheikh Production Coordinator Technical Editors Melwyn D'sa Manasi Poonthottam Manali Mehta Cover Work Rati Pillai Melwyn D'sa Ankita Shashi Manmeet Singh Vasir About the Authors Diego Hernando Cantor Rivera is a Software Engineer born in 1980 in Bogota, Colombia. Diego completed his undergraduate studies in 2002 with the development of a computer vision system that tracked the human gaze as a mechanism to interact with computers. Later on, in 2005, he finished his master's degree in Computer Engineering with emphasis in Software Architecture and Medical Imaging Processing. During his master's studies, Diego worked as an intern at the imaging processing laboratory CREATIS in Lyon, France and later on at the Australian E-Health Research Centre in Brisbane, Australia. Diego is currently pursuing a PhD in Biomedical Engineering at Western University in London, Canada, where he is involved in the development augmented reality systems for neurosurgery. When Diego is not writing code, he enjoys singing, cooking, travelling, watching a good play, or bodybuilding. Diego speaks Spanish, English, and French. Acknowledgement I would like to thank all the people that in one way or in another have been involved with this project: My partner Jose, thank you for your love and infinite patience. My family Cecy, Fredy, and Jonathan. My mentors Dr. Terry Peters and Dr. Robert Bartha for allowing me to work on this project. Thank you for your support and encouragement. My friends and collegues Danielle Pace and Chris Russ. Guys your work ethic, professionalism, and dedication are inspiring. Thank you for supporting me during the development of this project. Brandon Jones, my co-author for the awesome glMatrix library! This is a great contribution to the WebGL world! Also, thank you for your contributions on chapters 7 and 10. Without you this book would not had been a reality. The technical reviewers who taught me a lot and gave me great feedback during the development of this book: Dan Ginsburg, Giles Thomas, Andor Salga, and Paul Brunt. You guys rock! The tireless PACKT team: Joel Goveya, Wilson D'souza, Maitreya Bhakal, Meeta Rajani, Azharuddin Sheikh, Manasi Poonthottam, Manali Mehta, Manmeet Singh Vasir, Archana Manjrekar, Duane Moraes, and all the other people that somehow contributed to this project at PACKT publishing. Brandon Jones has been developing WebGL demos since the technology first began appearing in browsers in early 2010. He finds that it's the perfect combination of two aspects of programming that he loves, allowing him to combine eight years of web development experience and a life-long passion for real-time graphics. Brandon currently works with cutting-edge HTML5 development at Motorola Mobility. I'd like to thank my wife, Emily, and my dog, Cooper, for being very patient with me while writing this book, and Zach for convincing me that I should do it in the first place. About the Reviewers Paul Brunt has over 10 years of web development experience, initially working on e-commerce systems. However, with a strong programming background and a good grasp of mathematics, the emergence of HTML5 presented him with the opportunity to work with richer media technologies with particular focus on using these web technologies in the creation of games. He was working with JavaScript early on in the emergence of HTML5 to create some early games and applications that made extensive use of SVG, canvas, and a new generation of fast JavaScript engines. This work included a proof of concept platform game demonstration called Berts Breakdown. With a keen interest in computer art and an extensive knowledge of Blender, combined with knowledge of real-time graphics, the introduction of WebGL was the catalyst for the creation of GLGE. He began working on GLGE in 2009 when WebGL was still in its infancy, gearing it heavily towards the development of online games. Apart from GLGE he has also contributed to other WebGL frameworks and projects as well as porting the JigLib physics library to JavaScript in 2010, demoing 3D physics within a browser for the first time. Dan Ginsburg is the founder of Upsample Software, LLC, a software company offering consulting services with a specialization in 3D graphics and GPU computing. Dan has co-authored several books including the OpenGL ES 2.0 Programming Guide and OpenCL Programming Guide. He holds a B.Sc in Computer Science from Worcester Polytechnic Institute and an MBA from Bentley University. Andor Salga graduated from Seneca College with a bachelor's degree in software development. He worked as a research assistant and technical lead in Seneca's open source research lab (CDOT) for four years, developing WebGL libraries such as Processing. js, C3DL, and XB PointStream. He has presented his work at SIGGRAPH, MIT, and Seneca's open source symposium. I'd like to thank my family and my wife Marina. Giles Thomas has been coding happily since he first encountered an ICL DRS 20 at the age of seven. Never short on ambition, he wrote his first programming language at 12 and his first operating system at 14. Undaunted by their complete lack of success, and thinking that the third time is a charm, he is currently trying to reinvent cloud computing with a startup called PythonAnywhere. In his copious spare time, he runs a blog at http://learningwebgl.com/ www.PacktPub.com Support files, eBooks, discount offers, and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? Fully searchable across every book published by Packt Copy and paste, print and bookmark content On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface 1 Chapter 1: Getting Started with WebGL 7 System requirements 8 What kind of rendering does WebGL offer? 8 Structure of a WebGL application 10 Creating an HTML5 canvas 10 Time for action – creating an HTML5 canvas 11 Defining a CSS tyles for the border 12 Understanding canvas attributes 12 What if the canvas is not supported? 12 Accessing a WebGL context 13 Time for action – accessing the ebGLW context 13 WebGL is a state machine 15 Time for action – setting up WebGL context attributes 15 Using the context to access the WebGL API 18 Loading a 3D scene 18 Virtual car showroom 18 Time for action – visualizing a finished scene 19 Summary 21 Chapter 2: Rendering Geometry 23 Vertices and Indices 23 Overview of WebGL's rendering pipeline 24 Vertex Buffer Objects (VBOs) 25 Vertex shader 25 Fragment shader 25 Framebuffer 25 Attributes, uniforms, and varyings 26 Table of Contents Rendering geometry in WebGL 26 Defining a eometryg using JavaScript arrays 26 Creating WebGL buffers 27 Operations to manipulate WebGL buffers 30 Associating attributes to VBOs 31 Binding a VBO 32 Pointing an attribute to the currently bound VBO 32 Enabling the attribute 33 Rendering 33 The drawArrays and drawElements functions 33 Putting everything together 37 Time for action – enderingr a square 37 Rendering modes 41