www.it-ebooks.info WebGL Game Development Gain insights into game development by rendering complex 3D objects using WebGL Sumeet Arora BIRMINGHAM - MUMBAI www.it-ebooks.info WebGL Game Development Copyright © 2014 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 expressed or implied. Neither the author, 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: April 2014 Production Reference: 1180414 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-979-2 www.packtpub.com Cover Image by Logic Simplied (sumeet.arora@logicsimplified.com) www.it-ebooks.info Credits Author Sumeet Arora Reviewers Jose Dunia Kevin M. Fitzgerald Joseph Hocking Maulik R. Kamdar Hassadee Pimsuwan Rodrigo Silveira Acquisition Editors Rebecca Pedley Julian Ursell Content Development Editors Chalini Snega Victor Arun Nadar Technical Editors Kunal Anil Gaikwad Pramod Kumavat Siddhi Rane Faisal Siddiqui Copy Editors Sayanee Mukherjee Deepa Nambiar Project Coordinator Kranti Berde Proofreaders Ting Baker Simran Bhogal Maria Gould Paul Hindle Indexer Monica Ajmera Mehta Graphics Sheetal Aute Ronak Dhruv Disha Haria Abhinash Sahu Production Coordinator Nilesh R. Mohite Cover Work Nilesh R. Mohite www.it-ebooks.info About the Author Sumeet Arora is a tech entrepreneur. He founded Evon Technologies, a consultancy for mobile and web development, and Logic Simplied, a game development company. He holds the position of CTO at Evon and works as a consultant for Logic Simplied. He has worked as an architect consultant for scalable web portals for clients across the globe. His core expertise lies in 3D rendering technologies and collaboration tools. For the past four years, he has been working with various clients/companies on multiplatform content delivery. His own passion towards gaming technologies has helped him help his clients in launching games on various platforms on both web and mobile. Currently his company, Logic Simplied, helps new gaming ideas to launch in the market. Thanks to my family and colleagues at Evon Technologies and Logic Simplied for assisting me with the graphics and sharing my workload in order to complete the book. www.it-ebooks.info About the Reviewers Jose Dunia is an experienced web developer with a passion for computer graphics. He would like to see software, especially video games and simulations, being used more within the various levels of education. Jose started developing web projects at the age of 12 and his interest for programming lead him to pursue a B.E. in Computer Engineering at the Universidad Simón Bolívar. He holds an M.S. degree in Digital Arts and Sciences from the University of Florida where he studied Computer Graphics and serious games. Currently, he is working at Shadow Health, a start-up company that designs and develops interactive simulations for the advancement of health education. Kevin M. Fitzgerald is a Platform Architect of Okanjo.com. He has over 12 years of development experience in education, medical systems, and startups and has been tinkering with the web since dial-up modems were mainstream. Kevin is active in the open source community and has contributed to the Mono project and Umbraco communities. He continues to be active on GitHub, working with the latest technologies and projects. Kevin and his wife Luciana are celebrating their fth year of marriage and enjoy long walks on the beach and talking about Node.js, C#, and Bitcoin. www.it-ebooks.info Joseph Hocking is a software engineer living in Chicago, specializing in interactive media development. He builds games and apps for both mobile and web using technologies such as C#/Unity, ActionScript 3/Flash, Lua/Corona, and JavaScript/ HTML5. He works at Synapse Games as a developer of web and mobile games, such as the recently released Tyrant Unleashed. He also teaches classes in game development at Columbia College, Chicago. His website is www.newarteest.com. Maulik R. Kamdar is a research scientist working at the intersection of Big Data Visualization, Life Sciences, and Semantic Web. His primary interests revolve around the conceptualization and development of novel, interdisciplinary approaches, which tackle the integrative bioinformatics challenges and guide a bioscientist towards intuitive knowledge exploration and discovery. Maulik has an M.Tech. in Biotechnology, conferred by Indian Institute of Technology (IIT), Kharagpur, one of the most prestigious universities in India. He qualied for the Google Summer of Code scholarship, an annual program encouraging students across the world to participate in open source projects, for three successive years (2010-12). He has contributed to Drupal, a content management platform, and the Reactome Consortium, a knowledge base of human biological pathways, on the introduction of HTML5 canvas-based visualization modules in their frameworks. Currently, he is employed at the Insight Center for Data Analytics, Ireland, and researches the application of human-computer interaction principles and visualization methods to increase the adoption and usability of semantic web technologies in the biomedical domain. He has co-authored several scientic publications in internationally acclaimed journals. His recent contribution, titled Fostering Serendipity through Big Linked Data, has won the Big Data award at Semantic Web Challenge, held during International Semantic Web Conference, Sydney, in October 2013. www.it-ebooks.info Hassadee Pimsuwan, currently the CEO and co-founder of Treebuild (http://treebuild.com), a customizable 3D printing marketplace and Web3D application. He was working with a Web3D company in Munich, Germany, in 2011 and a web design company in Singapore in 2012-2013. He has graduated in Management Information System from Suranaree University of Technology with rst-class honors in 2012. Rodrigo Silveira is a software engineer at Deseret Digital Media. He divides his time there developing applications in PHP, JavaScript, and Android. Some of his hobbies outside of work include blogging and recording educational videos about software development, learning about new technologies, and nding ways to push the web forward. He received his Bachelor of Science degree in Computer Science from Brigham Young University, Idaho, as well as an Associate's Degree in Business Management from LDS Business College in Salt Lake City, Utah. His fascination for game development began in his early teenage years, and his skills grew as he discovered the power of a library subscription, a curious and willing mind, and supportive parents and friends. Today, Rodrigo balances his time between the three great passions of his life—his family, software development, and video games (with the last two usually being mingled together). I would like to thank my best friend, and the love of my life, Lucimara, for supporting me in my many hobbies, her endless wisdom, and her contagious love for life. I also wish to thank my daughter Samira, who makes each day shine brighter. www.it-ebooks.info www.PacktPub.com Support les, eBooks, discount offers, and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub les 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 service@packtpub.com 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. TM 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. www.it-ebooks.info Table of Contents Preface 1 Chapter 1: Getting Started with WebGL Game Development 7 Understanding WebGL 8 Differentiating WebGL from the game engine 8 Understanding basic 3D mathematics 8 Vectors 9 Matrices 10 Understanding transformations 10 Classifying into linear and afne transformations 10 Understanding transformations required to render 3D objects 12 Learning the basics of 3D graphics 15 Understanding mesh, polygon, and vertices 15 Using indices to save memory 17 Understanding WebGL's rendering pipeline 18 Framebuffers 20 A walkthrough of the WebGL API 20 Initializing the WebGL context 20 Vertex buffer objects – uploading data to GPU 21 Index buffer objects 23 Shaders 23 The vertex shader 24 The fragment shader 25 Shader variable qualiers 25 Attributes 26 Uniforms 26 The varying qualier 27 Compiling and linking shaders 28 Associating buffer objects with shader attributes 29 Drawing our primitive 30 Drawing using vertex buffer objects 33 www.it-ebooks.info [...]... following topics: • Understanding WebGL • Understanding basic 3D mathematics • Learning the basics of 3D graphics • Understanding WebGL' s rendering pipeline • A walkthrough of the WebGL API • The structuring of a WebGL application and learning shaders for debugging your application www.it-ebooks.info Getting Started with WebGL Game Development Understanding WebGL WebGL is a JavaScript API based on... in game development called ray casting, which is used to cover cases that cannot be handled by collision detection This also covers framebuffers, another very important concept used in game development Chapter 10, 2D Canvas and Multiplayer Games, covers the use of 2D rendering in 3D games through canvas 2D, a very powerful 2D drawing API We also discuss the technology behind HTML-based multiplayer games... used to build a complete in-browser massive multiplayer online role-playing game What this book covers Chapter 1, Getting Started with WebGL Game Development, covers basic terminologies of 3D and the basics of WebGL, 3D mathematics, and 3D graphics It also gives a walkthrough of the WebGL API and discusses the structuring of a WebGL application Chapter 2, Colors and Shading Languages, explains how to... executes on the computer's GPU Differentiating WebGL from the game engine WebGL only provides 3D rendering capability It is simple, straightforward, and insanely fast It is good at what it does, that is, rendering 2D and 3D graphics It is a low-level programming interface with a very small set of commands WebGL is not a game engine like Unity, Cocos2D, or Jade A game engine has many other features, such... on the iPhone and Android platforms WebGL enables web content to perform 3D rendering in HTML canvas in browsers that support it Hence, to learn game development using WebGL, you need to understand JavaScript and HTML basics If you have an understanding of the mathematics involved in 3D graphics, that's great However, it is not a must to understand this book The WebGL program consists of a JavaScript... will do our best to address it [5] www.it-ebooks.info www.it-ebooks.info Getting Started with WebGL Game Development We are in 5000 AD and you are wired in to your browser Rivers have dried up and you are under constant attack by the mutated human race You are the only hope You have this book, and your tool is WebGL, a JavaScript API for rendering interactive 3D and 2D graphics Your ancestors, the non-profit... Using WebGL, you can create your own game engine WebGL provides functionalities to draw basic primitives such as lines, circles, and triangles that can be used to draw any complex 3D object It does not provide a direct function to add a camera to your scene However, a camera class can be evolved to do the same This is what this book will help you with It will help you create a library on top of WebGL. .. of WebGL tailored for creating games and gaming functions Understanding basic 3D mathematics Developing a WebGL game requires a good understanding of 3D mathematics But we will not cover 3D mathematics in its entirety, since that would require a complete book in itself In this section, we will cover some basic aspects of 3D mathematics that are required to understand WebGL rendering We will also build... www.it-ebooks.info www.it-ebooks.info Preface This book is your foray into building in-browser 3D games The book starts with an introduction to the basics of the low-level 3D rendering API, WebGL We then transform the low-level API to an implementation of a sample 3D rendering library We use this library to build components of a concept game, "5000 AD" We walk you step by step from using 3D assets to the implementation... the use of 2D rendering in 3D games through canvas 2D, a very powerful 2D drawing API We also discuss the technology behind HTML-based multiplayer games What you need for this book To learn game development in WebGL, all you need is your favorite text editor and any of the following browsers: • Mozilla Firefox Version 4.0 and above (http://en.wikipedia.org/wiki/ Mozilla_Firefox) • Google Chrome Version . www.it-ebooks.info WebGL Game Development Gain insights into game development by rendering complex 3D objects using WebGL Sumeet Arora BIRMINGHAM - MUMBAI www.it-ebooks.info WebGL Game Development Copyright. access. www.it-ebooks.info Table of Contents Preface 1 Chapter 1: Getting Started with WebGL Game Development 7 Understanding WebGL 8 Differentiating WebGL from the game engine 8 Understanding basic 3D mathematics 8 Vectors. multiplayer online role-playing game. What this book covers Chapter 1, Getting Started with WebGL Game Development, covers basic terminologies of 3D and the basics of WebGL, 3D mathematics, and 3D