WebGL HOTSH T Create interactive 3D content for web pages and mobile devices Mitch Williams BIRMINGHAM - MUMBAI WebGL HOTSH T 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 express 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: May 2014 Production Reference: 1200514 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78328-091-9 www.packtpub.com Cover Image by Michael Harms ([email protected]) Credits Author Project Coordinator Mitch Williams Wendell Palmer Reviewers Proofreaders Andrea Barisone Simran Bhogal Dario Calonaci Maria Gould Jing Jin Paul Hindle Vincent Lark Todd J. Seiler Indexer Mehreen Deshmukh Commissioning Editor Joanne Fitzpatrick Graphics Ronak Dhruv Acquisition Editor Valentina Dsilva Joanne Fitzpatrick Disha Haria Content Development Editor Production Coordinator Neeshma Ramakrishnan Shantanu Zagade Technical Editors Cover Work Shruti Rawool Shantanu Zagade Aman Preet Singh Copy Editors Tanvi Gaitonde Dipti Kapadia Aditya Nair About the Author Mitch Williams has been involved with 3D graphics programming and Web3D development since its creation in the mid 1990s. He began his career writing software for digital imaging products before moving on as Manager of Software for Vivendi Universal Games. In the late 1990s, he started 3D-Online, his own company, where he created "Dynamic-3D", a Web3D graphics engine. He has worked on various projects ranging from interactive 3D medical procedures, online 3D training for the Department of Defense, creating one of the first 3D mobile games prior to the launch of the iPhone, and graphics card shader language programming. He has been teaching Interactive 3D Media at various universities including UC Berkeley, UC Irvine, and UCLA Extension. Gratitude and thanks to my family, friends, dogs—past and present, artists, SIGGRAPH, wonderful students, and the great math and engineering teachers who helped me along the way. About the Reviewers Andrea Barisone works for a leading Italian IT company and has over 13 years of experience in Information Technology, working on corporate projects as a developer using different technologies. He also has a strong experience in ECM Systems and has several J2EE certifications. He has the ability to acquire new technologies and to exploit the knowledge acquired by working with different environments and technologies. He was the technical reviewer for the following books: f Agile Web Development with Rails 4, David Heinemeier Hansson, Sam Ruby, and Dave Thomas, Pragmatic Bookshelf f BPEL and Java Cookbook, Jurij Laznik, Packt Publishing f Learning Three.js: The JavaScript 3D Library for WebGL, Jos Dirksen, Packt Publishing f Building Applications with ExtJS, Simon Elliston Ball, Packt Publishing (yet to be published) I would like to thank my parents, Renzo and Maria Carla; my beloved wife, Barbara; and my two wonderful little children, Gabriele and Aurora, for making every day of my life wonderful. Dario Calonaci is a graphic designer specializing in typography and logo design. He has worked for the United Nations conference RIO+20, and has worked with Node.js, which was selected for Obama for America. His name and work has appeared in a book presentation in the Senate's library in Rome. He has been teaching Web Design since he was 23 years old. He is a member of FacultyRow, a New York-based association, as a valuable teacher and academic figure. He has been invited to deliver talks as well as to conduct a workshop. His works have been exposed in New York, internationally published and featured, and studied in a couple of theses. You can learn more about him and see his works at http://dariocalonaci.com. Jing Jin works at a game company as a technical artist. She loves delving into new technologies that render game graphics better and more efficiently. She's also interested in innovations that enable a variety of gaming experiences and bring novelty to traditional gaming. Vincent Lark (@allyouneedisgnu) is a French developer in Luxembourg with six years of experience. He worked as a full-stack developer in some large audience companies such as EuroDNS, Jamendo, and more recently, for a local news website for cross-border workers. Interested in game development and 3D modeling since his school years, he's practicing these subjects in Global Game Jams and other hackathons with friends. An open source fanatic, he shares every prototype on his GitHub account and tries to follow state-of-the-art web development. Todd J. Seiler works in the CAD/CAM dental industry as a graphics software engineer at E4D Technologies in Dallas, Texas. He has worked as a software development engineer in Test on Games for Windows LIVE at Microsoft, and he has also worked in the mobile game development industry. He has a B.S. degree in Computer Graphics and Interactive Media from the University of Dubuque, Dubuque, Iowa with minors in Computer Information Systems. He also has a B.S. degree in Real-time Interactive Simulations from DigiPen Institute of Technology, Redmond, Washington, with minors in mathematics and physics. In his spare time, he plays video games, studies Catholic apologetics and theology, writes books and articles, and toys with new tech when he can. He periodically blogs about random things at http://www.toddseiler.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. 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? f Fully searchable across every book published by Packt f Copy and paste, print and bookmark content f 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 Project 1: Building Great Web3D 9 A second coming 10 Comprehensive solutions 11 Mission briefing 13 Introduction to 3D fundamentals 14 Transformations – translation, rotation, and scaling 17 Lights, camera, action! 18 Navigating between multiple viewpoints 20 Animation with interpolators 22 Adding texture maps to 3D meshes 25 Lighting a scene and shading 3D objects with normals 29 Creating an animated Solar System with multiple cameras for navigation 31 Mission accomplished 37 Project 2: WebGL for E-Commerce 39 Mission briefing 40 Introduction to WebGL 42 WebGL 3D with Perspective View 47 WebGL texture mapping and animation 49 Loading a 3D modeled object, normals, and lighting 53 Using the mouse for interactivity 57 E-commerce using existing assets 63 E-commerce with 3D modeling 66 Mission accomplished 70 Table of Contents Project 3: User Experience, Story, Character, Visual Design, and Interactivity 71 Mission briefing 72 Refreshment with shader languages 73 Lighting 3D depths 79 Visual design and interactivity 86 Full navigation 91 Order of transparencies 92 Scene lighting 97 Mission accomplished 100 Project 4: Mobile and Web3D Gaming 101 Mission briefing 102 Creating user interfaces in the 3D environment 103 Designing a game 110 Fun with physics and collisions 118 Mission accomplished 127 Project 5: Social Media Meets Its Destiny 129 Mission briefing 130 Bridging Facebook with WebGL 131 Visiting Facebook friends in WebGL 140 Building a navigable world of Facebook friends 145 Project 6: 3D Reveals More Information 151 Mission briefing 151 Linking 3D to data 152 Comparing multiple stocks in 3D 159 Displaying historical stock data 164 Presenting comparative data 170 Zooming into the data – level of detail 172 Mission accomplished 178 Project 7: Adapting Architecture, Medical, and Mechanical Engineering to Web3D 179 Mission briefing 180 Demonstrating environment mapping for reflections 181 Bending of light – calculating refraction for surfaces such as water 190 Creating surfaces – depth,non-smooth, natural, and realistic with normal maps 192 Rendering a scene as a texture to view multiple