WebGL Game Development

418 Pages·2014·4.69 MB·English

by  Arora

WebGL Game Development
Gain insights into game development by rendering
complex 3D objects using WebGL
Sumeet Arora
BIRMINGHAM - MUMBAI
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 Simplified ([email protected])
Credits
Author Copy Editors
Sumeet Arora Sayanee Mukherjee
Deepa Nambiar
Reviewers
Jose Dunia Project Coordinator
Kevin M. Fitzgerald Kranti Berde
Joseph Hocking
Proofreaders
Maulik R. Kamdar
Ting Baker
Hassadee Pimsuwan
Simran Bhogal
Rodrigo Silveira
Maria Gould
Paul Hindle
Acquisition Editors
Rebecca Pedley
Indexer
Julian Ursell
Monica Ajmera Mehta
Content Development Editors
Graphics
Chalini Snega Victor
Sheetal Aute
Arun Nadar
Ronak Dhruv
Disha Haria
Technical Editors
Abhinash Sahu
Kunal Anil Gaikwad
Pramod Kumavat
Production Coordinator
Siddhi Rane
Nilesh R. Mohite
Faisal Siddiqui
Cover Work
Nilesh R. Mohite
About the Author
Sumeet Arora is a tech entrepreneur. He founded Evon Technologies, a
consultancy for mobile and web development, and Logic Simplified, a game
development company. He holds the position of CTO at Evon and works as a
consultant for Logic Simplified. 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 Simplified,
helps new gaming ideas to launch in the market.
Thanks to my family and colleagues at Evon Technologies and
Logic Simplified for assisting me with the graphics and sharing my
workload in order to complete the book.
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 fifth year of marriage and enjoy long
walks on the beach and talking about Node.js, C#, and Bitcoin.
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 qualified 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 scientific 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.
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
first-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 finding 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.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.
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.
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 affine 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 qualifiers 25
Attributes 26
Uniforms 26
The varying qualifier 27
Compiling and linking shaders 28
Associating buffer objects with shader attributes 29
Drawing our primitive 30
Drawing using vertex buffer objects 33