Beginning WebGL for HTML5
Brian Danchilla Beginning WebGL for HTML5 Copyright © 2012 by Brian Danchilla This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 978-1-4302-3996-3 ISBN-13 978-1-4302-3997-0 (eBook) Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. President and Publisher: Paul Manning Lead Editor: Ben Renow-Clarke Technical Reviewer: Massimo Nardone Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Louise Corrigan, Morgan Ertel, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Coordinating Editor: Jennifer Blackwell, Anamika Panchoo Copy Editor: Nancy Sixsmith Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science + Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348–4505, e-mail [email protected], or visit www.springeronline.com. For information on translations, please e-mail [email protected], or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales. Any source code or other supplementary materials referenced by the author in this text is available to readers at www.apress.com. For detailed information about how to locate your book’s source code, go to www.apress.com/source-code. For Tressa, as fierce as she is delicate. Contents at a Glance
About the Author ...... xv About the Technical Reviewer ...... xvi Acknowledgments ...... xvii Introduction ...... xviii
N Chapter 1: Setting the Scene ...... 1 N Chapter 2: Shaders 101 ...... 33 N Chapter 3: Textures and Lighting ...... 57 N Chapter 4: Increasing Realism ...... 85 N Chapter 5: Physics ...... 115 N Chapter 6: Fractals, Height Maps, and Particle Systems ...... 139 N Chapter 7: Three.js Framework ...... 173 N Chapter 8: Productivity Tools ...... 205 N Chapter 9: Debugging and Performance ...... 233 N Chapter 10: Effects, Tips, and Tricks ...... 267 N Afterword: The Future of WebGL ...... 299
N Appendix A: Essential HTML5 and JavaScript ...... 303 N Appendix B: Graphics Refresher ...... 309 N Appendix C: WebGL Spec. Odds and Ends ...... 315 N Appendix D: Additional Resources ...... 317 N Index...... 323 iv Contents
About the Author ...... xv About the Technical Reviewer ...... xvi Acknowledgments ...... xvii Introduction ...... xviii
N Chapter 1: Setting the Scene ...... 1 A Blank Canvas...... 1 Getting Context ...... 2 WebGL Components ...... 4 The Drawing Buffers ...... 4 Primitive Types ...... 5 Vertex Data ...... 6 Rendering in Two Dimensions ...... 8 The View: Part I ...... 16 Clip Coordinates ...... 17 Why Manipulate Coordinates? ...... 18 The Viewport ...... 18 Adding Color ...... 20 Animation and Model Movement ...... 22 Using requestAnimationFrame ...... 22 The View: Part II ...... 24 Model-View Matrix ...... 24
v N CONTENTS
Three-Dimensional Rendering ...... 26 2D Models in a 3D World ...... 26 An Example with Depth ...... 28 Summary ...... 32 N Chapter 2: Shaders 101 ...... 33 Graphics Pipelines ...... 33 Fixed Functionality or Programmable Shaders ...... 33 Why Shaders? ...... 34 The WebGL Graphics Pipeline ...... 34 GL Shading Language ...... 35 Background ...... 35 Shader Roles ...... 36 Basic Usage ...... 37 Setting Up a Shader Program ...... 37 Clean Up ...... 38 Loading Shaders with Ajax ...... 39 GLSL Specification in More Detail ...... 42 Primitive Types ...... 42 Qualifiers ...... 42 Built-in Variables ...... 44 Built-in Constants ...... 44 Vector Components ...... 44 Vector and Matrix Operations ...... 45 Built-in Functions ...... 46 Angle and Trigonometry Functions ...... 46 Exponential Functions ...... 47 Common Functions ...... 47 Geometric Functions ...... 48 Matrix and Vector Functions ...... 49 Texture Lookup Functions ...... 50
vi N CONTENTS
Interactive GLSL Environs ...... 50 Procedural Shaders ...... 51 Summary ...... 56 N Chapter 3: Textures and Lighting ...... 57 Textures ...... 58 Texture Coordinates ...... 58 Texture Objects ...... 58 texImage2D...... 59 Loading Images into a Texture Object ...... 59 Application and Shader Interaction ...... 61 Using a Texture in Our Shader ...... 61 Texture Options ...... 62 Texture Filtering ...... 62 Texture Wrapping ...... 63 Data Storage ...... 64 Mipmaps ...... 65 Texturing a 3D Object ...... 66 Texture Coordinate Attribute ...... 66 Adjusting Our Shaders ...... 67 Data Changes ...... 68 Toggling State ...... 70 Toggling Textures On and Off ...... 71 Multiple Textures ...... 72 Application Changes...... 72 Shader Program Changes ...... 73 Lighting ...... 75 Light Components ...... 75 Types of Lights ...... 75 Normal Vectors ...... 76
vii N CONTENTS
Lighting Models ...... 76 Ambient and Directional Light ...... 77 A Point Light ...... 81 Texture and Lighting Together ...... 81 Summary ...... 83 N Chapter 4: Increasing Realism ...... 85 Setup ...... 86 A Vector Object ...... 86 Plane Class ...... 87 Spheres ...... 88 Lighting Revisited ...... 91 Shading Models ...... 91 Phong Illumination Model ...... 98 Attenuation ...... 103 Spotlights ...... 104 More Advanced Lighting ...... 106 Fog ...... 106 Shadows ...... 107 Ambient Occlusion ...... 108 Shadow Maps ...... 108 Depth Buffer ...... 109 Blending ...... 109 Reflection and Refraction ...... 112 Fresnel effect ...... 113 Fresnel Shader ...... 113 Putting it All Together ...... 113 Summary ...... 114 N Chapter 5: Physics ...... 115 Background ...... 115
viii N CONTENTS
Forces Acting Upon Us ...... 115 Scalars and Vectors ...... 115 Rates of Change ...... 116 Code Setup ...... 116 Storing Information ...... 117 Interactively Adjusting the Camera ...... 118 Gravity ...... 120 Free Falling ...... 120 Falling and Colliding With the Ground ...... 122 Falling Down, but Bouncing Back Up ...... 123 Falling and Bouncing Up; Repeat ...... 124 Nonperfect Elasticity ...... 125 Velocity in Three Dimensions ...... 126 Detecting Collisions with Many Walls ...... 126 Intercollisions ...... 127 Bounding Boxes and Spheres ...... 127 Conservation of Momentum ...... 128 Uniform Mass Collisions ...... 128 Collisions of Different Mass ...... 130 Projectiles ...... 131 Potential Energy ...... 134 Summary ...... 137 N Chapter 6: Fractals, Height Maps, and Particle Systems ...... 139 Painting Directly with the GPU ...... 139 Color Lookups ...... 141 Fractals ...... 144 Mandelbrot Set ...... 144 Julia Set ...... 147 Adding Interactivity ...... 147 Generation of Fractals ...... 156
ix N CONTENTS
Rendering a Grid Mesh with One TRIANGLE_STRIP Call ...... 157 Height Maps ...... 161 Bump/Normal Mapping ...... 162 Terrain ...... 162 Midpoint Displacement ...... 162 Particle Systems ...... 166 Enhancements ...... 168 Summary ...... 171 N Chapter 7: Three.js Framework ...... 173 Background ...... 173 Features ...... 174 Setup ...... 174 Obtaining the Library ...... 174 Directory Structure ...... 174 Basic Elements ...... 175 Basic Usage ...... 175 Hello World! ...... 175 Adding Some Details ...... 179 Lighting ...... 180 Updating Objects ...... 183 Falling Back to the 2D Canvas Context ...... 183 Shaders ...... 184 Revisiting Earlier Book Code ...... 185 2D Rendering ...... 185 Custom Mesh ...... 185 The Triangular Prism ...... 189 Texturing ...... 191 Lighting and Texturing ...... 197 Particle System ...... 199
x N CONTENTS
Advanced Usage ...... 201 Import/Export ...... 202 tQuery ...... 202 Summary ...... 203 N Chapter 8: Productivity Tools ...... 205 Frameworks ...... 205 Many Choices ...... 205 Available Frameworks ...... 206 A philoGL “Hello World!” Example ...... 208 A GLGE “Hello World!” Example ...... 211 Meshes ...... 213 Loading Existing Meshes ...... 213 Modeling Resources ...... 214 File Formats ...... 214 Importing, Exporting, and Format Conversion ...... 216 Shaders ...... 224 Textures ...... 224 Physics Engines ...... 225 Revisiting Old Code with physi.js and Three.js ...... 225 Summary ...... 231 N Chapter 9: Debugging and Performance ...... 233 Debugging ...... 233 Integrated Development Environment (IDE) ...... 233 Browser Developer Tools ...... 234 Generic WebGL Error Codes ...... 237 Context Errors ...... 237 Continuously Checking For Errors ...... 239 WebGL Inspector ...... 240 Testing with glsl-unit ...... 247 Common Pitfalls ...... 247
xi N CONTENTS
Performance ...... 250 Measuring Framerate ...... 250 Complexity in Optimizations ...... 251 Bottlenecks ...... 252 Browser Resources ...... 253 Blocking the GPU ...... 253 Summary ...... 266 N Chapter 10: Effects, Tips, and Tricks ...... 267 Effects ...... 267 Basic Image Manipulation ...... 267 Convolution Filters ...... 271 Antialiasing ...... 282 Nonphotorealistic Rendering ...... 283 Cartoon Shading ...... 283 Technical Diagrams ...... 285 Framebuffers ...... 286 Creating a Framebuffer Object ...... 287 Attaching a Texture to the Framebuffer ...... 287 Binding the Framebuffer ...... 288 Changing Shader Functionality per Framebuffer ...... 289 Adding a Depth Attachment ...... 291 Picking Objects ...... 292 Looking Up a Value ...... 293 Shadow Map Implementation ...... 294 Summary ...... 298 N Afterword: The Future of WebGL ...... 299 Support ...... 299 Browser support ...... 299 Mobile Device support ...... 299
xii N CONTENTS
Adoption ...... 300 What WebGL Has Going for It ...... 300 Concerns...... 300 Game Developers ...... 301 Active Development ...... 301 Extensions ...... 301 The Final Word ...... 301 N Appendix A: Essential HTML5 and JavaScript ...... 303 Essential HTML5 ...... 303 Brevity ...... 303 Semantic Areas ...... 304 The
xiii N CONTENTS
Texture Properties ...... 315 Cube Map Targets ...... 316 texImage2D...... 316 Framebuffer and RenderBuffer Targets and Attachments ...... 316 N Appendix D: Additional Resources ...... 317 Companion Website ...... 317 Topics ...... 317 Ajax ...... 317 Debugging ...... 317 Demos...... 318 HTML ...... 318 JavaScript ...... 318 LAMP, MAMP, and WAMP ...... 318 Libraries and Frameworks ...... 318 GLGE ...... 319 PhiloGL ...... 319 Three.JS ...... 319 Lighting ...... 319 Mathematics ...... 320 Matrix and Vector Libraries ...... 320 Mesh File Formats ...... 320 Performance and Best Practices ...... 321 Physics ...... 321 WebGL...... 321 WebGL Future ...... 322 WebGL SL (OpenGL ES SL) ...... 322 N Index ...... 323
xiv About the Author
Brian Danchilla is a freelance developer and author. He is ZEND PHP Certified and cowrote the book Pro PHP Programming. Brian is a contributing author to the book HTML5 Games Most Wanted, and was a technical reviewer for Foundation HTML5 Animation for JavaScript and PHP: The Good Parts. Brian is a seasoned web developer, Java, and OpenGL programmer and has a BA degree as a double major in computer science and mathematics. After several years working within the computer industry, he is now enjoying the flexibility of freelance work. Brian has a strong desire and ability to learn new technologies and APIs and is an avid technical reader. When not programming, Brian likes to play guitar, cook, and travel. He resides in Saskatoon, SK, Canada with his fiancée Tressa.
xv About the Technical Reviewer
Massimo Nardone holds a Master of Science degree in Computing Science from the University of Salerno, Italy. He works currently as a PCI QSA and Senior Lead IT Security/Cloud Architect for IBM Finland. With more than 19 years of work experience in Cloud Computing, IT Infrastructure, Mobile, Security and WWW technology areas for both national and international projects, Massimo has worked as a Project Manager, Software Engineer, Research Engineer, Chief Security Architect, and Software Specialist. He worked as visiting lecturer and supervisor for exercises at the Networking Laboratory of the Helsinki University of Technology (Helsinki University of Technology TKK became a part of Aalto University) for the course of “Security of Communication Protocols.” He holds four international patents (PKI, SIP, SAML and Proxy areas). His beloved baby girl, Neve, was born some days ago and he wants to welcome her from the bottom of his heart.
xvi Acknowledgments
I would like to thank my family: mom, dad, Robert, Karen, Tressa. Longtime friends: Vince, Nick, and Tim. It was not always a smooth journey during this book project and I am very grateful for your support along the way. Thank you to everyone on the Apress team who was involved with this book. I would especially like to thank Ben Renow-Clarke for getting this book title off the ground, Louise Corrigan for valuable editing advice, Anamika Panchoo for her coordinating skills, and the technical reviewing of Massimo Nardone. Thank you to my university professor David Mould for introducing me to OpenGL,and my high school art teacher Mrs. Robinson for helping develop my artistic side. I am thankful for having a good set of headphones and a great music collection that enabled me to zone in and work. Thanks to late, late night Super Mario Galaxy 2 sessions for inspiration and coffee, lots of coffee. Several years ago, I first read computer graphics books and thoroughly enjoyed the experience. Now I am blessed to have been able to write my own book about an exciting new technology, WebGL.
xvii Introduction
WebGL (Web-based Graphics Language) is a wonderful and exciting new technology that lets you create powerful 3D graphics within a web browser. The way that this is achieved is by using a JavaScript API that interacts with the Graphics Processing Unit (GPU). Thisbook will quickly get you on your way to demystify shaders and render realistic scenes. To ensure enjoyable development, we will show how to use debugging tools and survey libraries which can maximize productivity.
Audience Beginning WebGL for HTML5 is aimed at graphics enthusiasts with a basic knowledge of computer graphics techniques. A knowledge of OpenGL, especially a version that uses the programmable pipeline, such as OpenGL ES is beneficial, but not essential. We will go through all the relevant material. A JavaScript background will certainly help. When writing a book of this nature, we unfortunately cannot cover all the prerequisite material. Baseline assumptions about the reader need to be made. The assumptions that I have made are that the reader has a basic knowledge of 2D and 3D computer graphics concepts such as pixels, colors, primitives, and transforms. Appendix B quickly refreshes these concepts. It is also assumed that the reader is familiar (though need not be an expert) with HTML, CSS, and JavaScript. Although much of the book makes use of plain “vanilla” JavaScript, we will use some jQuery. Appendix A discusses newer HTML5 concepts and a quick jQuery crash course that will be essential for properly understanding the text. Appendix D provides a complete reference for further reading on topics that are presented throughout the book.
What You Will Learn This book presents theory when necessary and examples whenever possible. You will get a good overview of what you can do with WebGL. What you will learn includes the following:
v Understanding the model view matrix and setting up a scene v Rendering and manipulating primitives v Understanding shaders and loving their power and flexibility v Exploring techniques to create realistic scenes v Using basic physics to simulate interaction v Using mathematics models to render particle systems, terrain, and fractals v Getting productive with existing models, shaders, and libraries
xviii N INTRODUCTION
v Using the Three.js framework v Learning about GLGE and philoGL frameworks and a survey of other frameworks available v Debugging and performance tips v Understanding other shader uses, such as image processing and nonphotorealistic rendering v Using an alternate framebuffer to implement picking and shadowmaps v Learning about current browser and mobile support and the future of WebGL
Book Structure It is recommended that you start by reading the first two chapters before moving on to other areas of the book. Even though the book does follow a fairly natural progression, you may choose to read the book in order or skip around as desired. For example, the debugging section of Chapter 9 is not strictly essential, but is very useful information to know as soon as possible.
Chapter 1: Setting the Scene We go through all the steps to render an image with WebGL, including testing for browser support and setting up the WebGL environment, using vertex buffer objects (VBOs), and basic shaders. We start with creating a one color static 2D image, and by the end of the chapter have a moving 3D mesh with multiple colors.
Chapter 2: Shaders 101 Shaders are covered in depth. We show an overview of graphics pipelines (fixed and programmable), give a background of the GL Shading Language (GLSL), and explain the roles of vertex and fragment shaders. Next we go over the primitive types and language details of GLSL and how our WebGL application will interact with our shaders. Finally, we show several examples of GLSL usage.
Chapter 3: Textures and Lighting We show how to apply texture and simple lighting. We explain texture objects and how to set up and configure them and combine texture lookups with a lighting model in our shader.
Chapter 4: Increasing Realism A more realistic lighting model—Phong illumination—is explained and implemented. We discuss the difference between flat and smooth shading and vertex and fragment calculations. We show how to add fog and blend objects; and discuss shadows, global illumination, and reflection and refraction.
Chapter 5: Physics This chapter shows how to model gravity, elasticity, and friction. We detect and react to collisions, model projectiles and explore both the conservation of momentum and potential and kinetic energy.
xix N INTRODUCTION
Chapter 6: Fractals, Height Maps, and Particle Systems In this chapter we show how to paint directly with the GPU, discuss fractals, and model the Mandlebrot and Julia sets. We also show how to produce a height map from a texture and generate terrain. We also explore particle systems.
Chapter 7: Three.js Framework The Three.js WebGL framework is introduced. We provide a background and sample usage of the library, including how to fall back to the 2D rendering context if necessary, API calls to easily create cameras, objects, and lighting. We compare earlier book examples to the equivalent Three.js API calls and introduce tQuery, a library that combines Three.js and jQuery selectors.
Chapter 8: Productivity Tools We discuss the benefits of using frameworks and the merit of learning core WebGL first. Several available frameworks are discussed and the GLGE and philoGL frameworks are given examples. We show how to load existing meshes and find other resources. We list available physics libraries and end the chapter with an example using the physi.js library.
Chapter 9: Debugging and Performance An important chapter to help identify and fix erroneous code and improve performance by following known WebGL best practices.
Chapter 10: Effects, Tips, and Tricks Image processing and nonphotorealistic shaders are discussed and implemented. We show how to use offscreen framebuffers that enable us to pick objects from the canvas and implement shadow maps.
Afterword: The Future of WebGL In the afterword, we will speculate on the bright future of WebGL, the current adoption of it within the browser, and mobile devices and what features will be added next.
Appendix A: Essential HTML5 and JavaScript We cover some of the changes between HTML 4 and 5, such as shorter tags, added semantic document structure, the
Appendix B: Graphics Refresher This appendix is a graphics refresher covering coordinate systems, elementary transformations and other essential topics.
xx N INTRODUCTION
Appendix C: WebGL Specification Odds and Ends Contains part of the WebGL specification, available athttp://www.khronos.org/registry/webgl/specs/latest/ , which were not covered in the book, but are nonetheless important.
Appendix D: Additional Resources A list of references for further reading about topics presented in the book such as HTML5, WebGL, WebGLSL, JavaScript, jQuery, server stacks, frameworks, demos, and much more.
WebGL Origins The origin of WebGL starts 20 years ago, when version 1.0 of OpenGL was released as a nonproprietary alternative to Silicon Graphics’ Iris GL. Up until 2004, OpenGL used a fixed functionality pipeline (which is explained in Chapter 2). Version 2.0 of OpenGL was released that year and introduced the GL Shading Language (GLSL) which lets you program the vertex and fragment shading portions of the pipeline. The current version of OpenGL is 4.2, however WebGL is based off of OpenGL Embedded Systems (ES) 2.0, which was released in 2007 and is a trimmer version of OpenGL 2.0. Because OpenGL ES is built for use in embedded devices like mobile phones, which have lower processing power and fewer capabilities than a desktop computer, it is more restrictive and has a smaller API than OpenGL. For example, with OpenGL you can draw vertices using both a glBegin...glEnd section or VBOs. OpenGL ES only uses VBOs, which are the most performance-friendly option. Most things that can be done in OpenGL can be done in OpenGL ES. In 2006, Vladimar Vukic´evic´ worked on a Canvas 3D prototype that used OpenGL for the web. In 2009, the Khronos group created the WebGL working group and developed a central specification that helps to ensure that implementations across browsers are close to one another. The 3D context was modified to WebGL, and version 1.0 of the specification was completed in spring2011. Development of the WebGL specification is under active development, and the latest revision can be found at http://www.khronos.org/registry/webgl/specs/latest/.
How Does WebGL work? WebGL is a JavaScript API binding from the CPU to the GPU of a computer’s graphics card. The API context is obtained from the HTML5
Uses Some uses of WebGL are viewing and manipulating models and designs, virtual tours, mapping, gaming, art, data visualization, creating videos, manipulating and processing of data and images.
xxi N INTRODUCTION
Demonstrations There are many demos of WebGL, including these: v http://www.chromeexperiments.com/webgl v https://code.google.com/p/webglsamples/ v http://aleksandarrodic.com/p/jellyfish/ v Google Body (now http://www.zygotebody.com), parts of Google Maps, and Google Earth v http://www.ro.me/tech/ v http://alteredqualia.com/
Supported Environments Does your browser support WebGL? It is important to know that WebGL is not currently supported by all browsers, computers and/or operating systems (OS). Browser support is the easiest requirement to meet and can be done simply by upgrading to a newer version of your browser or switching to a different browser that does support WebGL if necessary. The minimum requirements are as follows: v Firefox 4+ v Safari 5.1+ (OS X only) v Chrome 9+ v Opera 12alpha+ v Internet Explorer (IE)—no native support Although IE currently has no built in support, plugins are available; for example, JebGL (available at http://code.google.com/p/jebgl/), Chrome Frame (available at http://www.google.com/chromeframe), and IEWebGL (http://iewebgl.com/). JebGL converts WebGL to a Java applet for deficient browsers; Chrome Frame allows WebGL usage on IE, but requires that the user have it installed on the client side. Similarly, IEWebGL is an IE plugin. In addition to a current browser, you need a supported OS and newer graphics card. There are also several graphics card and OS combinations that have known security vulnerabilities or are highly prone to a severe system crash and so are blacklisted by browsers by default. Chrome supports WebGL on the following operating systems (according to Google Chrome Help (http://www.google.com/support/chrome/bin/answer.py?answer=1220892): v Windows Vista and Windows 7 (recommended) with no driver older than 2009–01 v Mac OS 10.5 and Mac OS 10.6 (recommended) v Linux Often, updating your graphics driver to the latest version will enable WebGL usage. Recall that OpenGL ES 2.0 is based on OpenGL 2.0, so this is the version of OpenGL that your graphics card should support for WebGL usage. There is also a project called ANGLE (Almost Native Graphics Layer Engine) that ironically uses Microsoft Direct X to enhance a graphics driver to support OpenGL ES 2.0 API calls through conversions to Direct X 9 API calls. The result is that graphics cards thatonly support OpenGL 1.5 (OpenGL ES 1.0) can still run WebGL. Of course, support for WebGL should improve drastically over the next couple of years.
xxii N INTRODUCTION
Testing for WebGL Support To check for browser support of WebGL. there are several websites such as http://get.webgl.org/, which displays a spinning cube on success; and http://doesmybrowsersupportwebgl.com/, which gives a large “Yay” or “Nay” and specific details if the webgl context is supported. We can also programmatically check for WebGL support using modernizr (http://www.modernizr.com).
Companion Site Along with the Apress webpage at http://www.apress.com/9781430239963, this book has a companion website at http://www.beginningwebgl.com. This site demonstrates the examples found in the book, and offers an area to make comments and add suggestions directly to the author. Your constructive feedback is both welcome and appreciated.
Downloading the code The code for the examples shown in this book is available on the Apress website,http://www.apress.com . A link can be found on the book’s information page, http://www.apress.com/9781430239963, under the Source Code/ Downloads tab. This tab is located underneath the Related Titles section of the page. Updated code will also be hosted on github at https://github.com/bdanchilla/beginningwebgl.
Contacting the Author If you have any questions or comments—or even spot a mistake you think I should know about—you can contact the author directly at bdanchilla@gmail.com or on the contact form at http://www.beginningwebgl.com/contact.
xxiii