Web GL Beginner's Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 377
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 (diego.cantor@gmail.com)
Credits
Authors
Diego Cantor
Copy Editor
Leonard D'Silva
Brandon Jones
Project Coordinator
Reviewers
Joel Goveya
Paul Brunt
Dan Ginsburg
Andor Salga
Giles Thomas
Acquisition Editor
Wilson D'Souza
Lead Technical Editor
Azharuddin Sheikh
Technical Editors
Manasi Poonthottam
Manali Mehta
Rati Pillai
Ankita Shashi
Manmeet Singh Vasir
Proofreader
Lesley Harrison
Indexer
Monica Ajmera Mehta
Graphics
Valentina D'silva
Manu Joseph
Production Coordinator
Melwyn D'sa
Cover Work
Melwyn D'sa
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
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.
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
Chapter 1: Getting Started with WebGL
System requirements
What kind of rendering does WebGL offer?
Structure of a WebGL application
Creating an HTML5 canvas
Time for action – creating an HTML5 canvas
Defining a CSS style for the border
Understanding canvas attributes
What if the canvas is not supported?
Accessing a WebGL context
Time for action – accessing the WebGL context
WebGL is a state machine
Time for action – setting up WebGL context attributes
Using the context to access the WebGL API
Loading a 3D scene
Virtual car showroom
Time for action – visualizing a finished scene
Summary
Chapter 2: Rendering Geometry
Vertices and Indices
Overview of WebGL's rendering pipeline
Vertex Buffer Objects (VBOs)
Vertex shader
Fragment shader
Framebuffer
Attributes, uniforms, and varyings
1
7
8
8
10
10
11
12
12
12
13
13
15
15
18
18
18
19
21
23
23
24
25
25
25
25
26
Table of Contents
Rendering geometry in WebGL
Defining a geometry using JavaScript arrays
Creating WebGL buffers
Operations to manipulate WebGL buffers
26
26
27
30
Associating attributes to VBOs
31
Binding a VBO
Pointing an attribute to the currently bound VBO
Enabling the attribute
Rendering
32
32
33
33
The drawArrays and drawElements functions
33
Putting everything together
Time for action – rendering a square
Rendering modes
Time for action – rendering modes
WebGL as a state machine: buffer manipulation
Time for action – enquiring on the state of buffers
Advanced geometry loading techniques: JavaScript Object Notation (JSON)
and AJAX
Introduction to JSON – JavaScript Object Notation
Defining JSON-based 3D models
JSON encoding and decoding
37
37
41
41
45
46
48
48
48
50
Time for action – JSON encoding and decoding
Asynchronous loading with AJAX
Setting up a web server
Working around the web server requirement
50
51
53
54
Time for action – loading a cone with AJAX + JSON
Summary
Chapter 3: Lights!
54
58
59
Lights, normals, and materials
Lights
Normals
Materials
Using lights, normals, and materials in the pipeline
Parallelism and the difference between attributes and uniforms
Shading methods and light reflection models
Shading/interpolation methods
Goraud interpolation
Phong interpolation
60
60
61
62
62
63
64
65
65
65
Light reflection models
66
Lambertian reflection model
Phong reflection model
66
67
ESSL—OpenGL ES Shading Language
Storage qualifier
68
69
[ ii ]
Table of Contents
Types
Vector components
Operators and functions
Vertex attributes
Uniforms
Varyings
Vertex shader
Fragment shader
Writing ESSL programs
Goraud shading with Lambertian reflections
Time for action – updating uniforms in real time
Goraud shading with Phong reflections
Time for action – Goraud shading
Phong shading
Time for action – Phong shading with Phong lighting
Back to WebGL
Creating a program
Initializing attributes and uniforms
Bridging the gap between WebGL and ESSL
Time for action – working on the wall
More on lights: positional lights
Time for action – positional lights in action
Nissan GTS example
Summary
Chapter 4: Camera
69
70
71
72
72
73
73
75
75
76
77
80
83
86
88
89
90
92
93
95
99
100
102
103
105
WebGL does not have cameras
Vertex transformations
Homogeneous coordinates
Model transform
View transform
Projection transform
Perspective division
Viewport transform
Normal transformations
Calculating the Normal matrix
WebGL implementation
JavaScript matrices
Mapping JavaScript matrices to ESSL uniforms
Working with matrices in ESSL
[ iii ]
106
106
106
108
109
110
111
112
113
113
115
116
116
117
Table of Contents
The Model-View matrix
Spatial encoding of the world
118
119
Rotation matrix
Translation vector
The mysterious fourth row
120
120
120
The Camera matrix
Camera translation
Time for action – exploring translations: world space versus camera space
Camera rotation
Time for action – exploring rotations: world space versus camera space
The Camera matrix is the inverse of the Model-View matrix
Thinking about matrix multiplications in WebGL
Basic camera types
Orbiting camera
Tracking camera
Rotating the camera around its location
Translating the camera in the line of sight
Camera model
120
121
122
123
124
127
127
128
129
129
129
129
130
Time for action – exploring the Nissan GTX
The Perspective matrix
Field of view
Perspective or orthogonal projection
Time for action – orthographic and perspective projections
Structure of the WebGL examples
WebGLApp
Supporting objects
Life-cycle functions
Configure
Load
Draw
131
135
136
136
137
142
142
143
144
144
144
144
Matrix handling functions
144
initTransforms
updateTransforms
setMatrixUniforms
144
145
146
Summary
146
Chapter 5: Action
149
Matrix stacks
Animating a 3D scene
requestAnimFrame function
JavaScript timers
Timing strategies
Animation strategy
Simulation strategy
150
151
151
152
152
153
154
[ iv ]
Table of Contents
Combined approach: animation and simulation
Web Workers: Real multithreading in JavaScript
Architectural updates
WebGLApp review
Adding support for matrix stacks
Configuring the rendering rate
Creating an animation timer
Connecting matrix stacks and JavaScript timers
Time for action – simple animation
Parametric curves
Initialization steps
Setting up the animation timer
Running the animation
Drawing each ball in its current position
Time for action – bouncing ball
Optimization strategies
Optimizing batch performance
Performing translations in the vertex shader
Interpolation
Linear interpolation
Polynomial interpolation
B-Splines
Time for action – interpolation
Summary
Chapter 6: Colors, Depth Testing, and Alpha Blending
Using colors in WebGL
Use of color in objects
Constant coloring
Per-vertex coloring
Per-fragment coloring
Time for action – coloring the cube
Use of color in lights
Using multiple lights and the scalability problem
154
156
156
156
157
157
158
158
158
160
161
162
163
163
164
166
167
168
170
170
170
172
173
175
177
178
179
179
180
181
181
185
186
How many uniforms can we use?
Simplifying the problem
186
186
Architectural updates
Adding support for light objects
187
187
Improving how we pass uniforms to the program
188
Time for action – adding a blue light to a scene
Using uniform arrays to handle multiple lights
190
196
Uniform array declaration
197
[v]
Table of Contents
JavaScript array mapping
198
Time for action – adding a white light to a scene
Time for action – directional point lights
Use of color in the scene
Transparency
Updated rendering pipeline
Depth testing
Depth function
Alpha blending
Blending function
Separate blending functions
Blend equation
Blend color
WebGL alpha blending API
Alpha blending modes
Additive blending
Subtractive blending
Multiplicative blending
Interpolative blending
198
202
206
207
207
208
210
210
211
212
213
213
214
215
216
216
216
216
Time for action – blending workbench
Creating transparent objects
Time for action – culling
Time for action – creating a transparent wall
Summary
Chapter 7: Textures
217
218
220
222
224
225
What is texture mapping?
Creating and uploading a texture
Using texture coordinates
Using textures in a shader
Time for action – texturing the cube
Texture filter modes
Time for action – trying different filter modes
NEAREST
LINEAR
226
226
228
230
231
234
237
238
238
Mipmapping
239
NEAREST_MIPMAP_NEAREST
LINEAR_MIPMAP_NEAREST
NEAREST_MIPMAP_LINEAR
LINEAR_MIPMAP_LINEAR
240
240
240
241
Generating mipmaps
Texture wrapping
Time for action – trying different wrap modes
CLAMP_TO_EDGE
241
242
243
244
[ vi ]
Table of Contents
REPEAT
MIRRORED_REPEAT
244
245
Using multiple textures
Time for action – using multitexturing
Cube maps
Time for action – trying out cube maps
Summary
246
247
250
252
255
Chapter 8: Picking
257
Picking
Setting up an offscreen framebuffer
Creating a texture to store colors
Creating a Renderbuffer to store depth information
Creating a framebuffer for offscreen rendering
Assigning one color per object in the scene
Rendering to an offscreen framebuffer
Clicking on the canvas
Reading pixels from the offscreen framebuffer
Looking for hits
Processing hits
Architectural updates
Time for action – picking
Picker architecture
Implementing unique object labels
Time for action – unique object labels
Summary
Chapter 9: Putting It All Together
257
259
259
260
260
261
262
264
266
268
269
269
271
272
274
274
285
287
Creating a WebGL application
Architectural review
Virtual Car Showroom application
Complexity of the models
Shader quality
Network delays and bandwidth consumption
Defining what the GUI will look like
Adding WebGL support
Implementing the shaders
Setting up the scene
Configuring some WebGL properties
Setting up the camera
Creating the Camera Interactor
The SceneTransforms object
[ vii ]
287
288
290
291
291
292
292
293
295
297
297
298
298
298
Table of Contents
Creating the lights
Mapping the Program attributes and uniforms
Uniform initialization
Loading the cars
Exporting the Blender models
Understanding the OBJ format
Parsing the OBJ files
Load cars into our WebGL scene
Rendering
Time for action – customizing the application
Summary
Chapter 10: Advanced Techniques
299
300
301
301
302
303
306
307
308
310
313
315
Post-processing
Creating the framebuffer
Creating the geometry
Setting up the shader
Architectural updates
Time for action – testing some post-process effects
Point sprites
Time for action – using point sprites to create a fountain of sparks
Normal mapping
Time for action – normal mapping in action
Ray tracing in fragment shaders
Time for action – examining the ray traced scene
Summary
Index
315
316
317
318
320
320
325
327
330
332
334
336
339
341
[ viii ]
Preface
WebGL is a new web technology that brings hardware-accelerated 3D graphics to the
browser without requiring the user to install additional software. As WebGL is based on
OpenGL and brings in a new concept of 3D graphics programming to web development,
it may seem unfamiliar to even experienced web developers.
Packed with many examples, this book shows how WebGL can be easy to learn despite its
unfriendly appearance. Each chapter addresses one of the important aspects of 3D graphics
programming and presents different alternatives for its implementation. The topics are always
associated with exercises that will allow the reader to put the concepts to the test in an
immediate manner.
WebGL Beginner's Guide presents a clear road map to learning WebGL. Each chapter starts
with a summary of the learning goals for the chapter, followed by a detailed description
of each topic. The book offers example-rich, up-to-date introductions to a wide range of
essential WebGL topics, including drawing, color, texture, transformations, framebuffers,
light, surfaces, geometry, and more. Each chapter is packed with useful and practical
examples that demonstrate the implementation of these topics in a WebGL scene. With each
chapter, you will "level up" your 3D graphics programming skills. This book will become your
trustworthy companion filled with the information required to develop cool-looking 3D web
applications with WebGL and JavaScript.
What this book covers
Chapter 1, Getting Started with WebGL, introduces the HTML5 canvas element and describes
how to obtain a WebGL context for it. After that, it discusses the basic structure of a WebGL
application. The virtual car showroom application is presented as a demo of the capabilities
of WebGL. This application also showcases the different components of a WebGL application.
Chapter 2, Rendering Geometry, presents the WebGL API to define, process, and render
objects. Also, this chapter shows how to perform asynchronous geometry loading using
AJAX and JSON.
Preface
Chapter 3, Lights!, introduces ESSL the shading language for WebGL. This chapter shows
how to implement a lighting strategy for the WebGL scene using ESSL shaders. The theory
behind shading and reflective lighting models is covered and it is put into practice through
several examples.
Chapter 4, Camera, illustrates the use of matrix algebra to create and operate cameras
in WebGL. The Perspective and Normal matrices that are used in a WebGL scene are also
described here. The chapter also shows how to pass these matrices to ESSL shaders so they
can be applied to every vertex. The chapter contains several examples that show how to set
up a camera in WebGL.
Chapter 5, Action, extends the use of matrices to perform geometrical transformations
(move, rotate, scale) on scene elements. In this chapter the concept of matrix stacks is
discussed. It is shown how to maintain isolated transformations for every object in the scene
using matrix stacks. Also, the chapter describes several animation techniques using matrix
stacks and JavaScript timers. Each technique is exemplified through a practical demo.
Chapter 6, Colors, Depth Testing, and Alpha Blending, goes in depth about the use of colors
in ESSL shaders. This chapter shows how to define and operate with more than one light
source in a WebGL scene. It also explains the concepts of Depth Testing and Alpha Blending,
and it shows how these features can be used to create translucent objects. The chapter
contains several practical exercises that put into practice these concepts.
Chapter 7, Textures, shows how to create, manage, and map textures in a WebGL scene.
The concepts of texture coordinates and texture mapping are presented here. This chapter
discusses different mapping techniques that are presented through practical examples. The
chapter also shows how to use multiple textures and cube maps.
Chapter 8, Picking, describes a simple implementation of picking which is the technical
term that describes the selection and interaction of the user with objects in the scene.
The method described in this chapter calculates mouse-click coordinates and determines
if the user is clicking on any of the objects being rendered in the canvas. The architecture
of the solution is presented with several callback hooks that can be used to implement
logic-specific application. A couple of examples of picking are given.
Chapter 9, Putting It All Together, ties in the concepts discussed throughout the book.
In this chapter the architecture of the demos is reviewed and the virtual car showroom
application outlined in Chapter 1, Getting Started with WebGL, is revisited and expanded.
Using the virtual car showroom as the case study, this chapter shows how to import Blender
models into WebGL scenes and how to create ESSL shaders that support the materials used
in Blender.
[2]
Preface
Chapter 10, Advanced Techniques, shows a sample of some advanced techniques such as
post-processing effects, point sprites, normal mapping, and ray tracing. Each technique is
provided with a practical example. After reading this WebGL Beginner's Guide you will be
able to take on more advanced techniques on your own.
What you need for this book
You need a browser that implements WebGL. WebGL is supported by all major
browser vendors with the exception of Microsoft Internet Explorer. An updated
list of WebGL-enabled browsers can be found here:
http://www.khronos.org/webgl/wiki/Getting_a_WebGL_
Implementation
A source code editor that recognizes and highlights JavaScript syntax.
You may need a web server such as Apache or Lighttpd to load remote geometry
if you want to do so (as shown in Chapter 2, Rendering Geometry). This is optional.
Who this book is for
This book is written for JavaScript developers who are interested in 3D web development.
A basic understanding of the DOM object model, the JQuery library, AJAX, and JSON is ideal
but not required. No prior WebGL knowledge is expected.
A basic understanding of linear algebra operations is assumed.
Conventions
In this book, you will find several headings appearing frequently.
To give clear instructions of how to complete a procedure or task, we use:
Time for action – heading
1.
Action 1
2.
Action 2
3.
Action 3
Instructions often need some extra explanation so that they make sense, so they are
followed with:
[3]
Preface
What just happened?
This heading explains the working of tasks or instructions that you have just completed.
You will also find some other learning aids in the book, including:
Have a go hero – heading
These set practical challenges and give you ideas for experimenting with what you
have learned.
You will also find a number of styles of text that distinguish between different kinds of
information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Open the file ch1_Canvas.html using one of the
supported browsers."
A block of code is set as follows:
WebGL Beginner's Guide - Setting up the canvas
When we wish to draw your attention to a particular part of a code block, the relevant lines
or items are set in bold:
WebGL Beginner's Guide - Setting up the canvas
[4]
Preface
Any command-line input or output is written as follows:
--allow-file-access-from-files
New terms and important words are shown in bold. Words that you see on the screen, in
menus or dialog boxes for example, appear in the text like this: "Now switch to camera
coordinates by clicking on the Camera button."
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this
book—what you liked or may have disliked. Reader feedback is important for us to develop
titles that you really get the most out of.
To send us general feedback, simply send an e-mail to feedback@packtpub.com, and
mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in
the SUGGEST A TITLE form on www.packtpub.com or e-mail suggest@packtpub.com.
If there is a topic that you have expertise in and you are interested in either writing or
contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you
to get the most from your purchase.
[5]
Preface
Downloading the example code
You can download the example code files for all Packt books you have purchased from your
account at http://www.PacktPub.com. If you purchased this book elsewhere, you can
visit http://www.PacktPub.com/support and register to have the files e-mailed directly
to you.
Downloading the color images of this book
We also provide you a PDF file that has color images of the screenshots/diagrams used
in this book. The color images will help you better understand the changes in the output.
You can download this file from http://www.packtpub.com/sites/default/files/
downloads/1727_images.pdf
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do
happen. If you find a mistake in one of our books—maybe a mistake in the text or the
code—we would be grateful if you would report this to us. By doing so, you can save other
readers from frustration and help us improve subsequent versions of this book. If you
find any errata, please report them by visiting http://www.packtpub.com/support,
selecting your book, clicking on the errata submission form link, and entering the details
of your errata. Once your errata are verified, your submission will be accepted and the
errata will be uploaded on our website, or added to any list of existing errata, under the
Errata section of that title. Any existing errata can be viewed by selecting your title from
http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt,
we take the protection of our copyright and licenses very seriously. If you come across any
illegal copies of our works, in any form, on the Internet, please provide us with the location
address or website name immediately so that we can pursue a remedy.
Please contact us at copyright@packtpub.com with a link to the suspected
pirated material.
We appreciate your help in protecting our authors, and our ability to bring you
valuable content.
Questions
You can contact us at questions@packtpub.com if you are having a problem with any
aspect of the book, and we will do our best to address it.
[6]
1
Getting Started with WebGL
In 2007, Vladimir Vukicevic, an American-Serbian software engineer, began
working on an OpenGL prototype for the then upcoming HTML