There was a time when most of the web comprised pages with static content—the only graphics were embedded images. Over time, however, application requirements became more ambitious and began running into limitations. As highly interactive applications became an increasingly important part of the user experience, there was, eventually, enough demand for a fully programmable graphics Application Programming Interface (API) to address these requirements. In 2006, Vladimir Vukicevic, an American-Serbian software engineer, began working on an OpenGL prototype for a then-upcoming HTML <canvas> element that he called Canvas 3D. In March 2011, his work would lead to the Kronos Group, the nonprofit organization behind OpenGL, to create WebGL, a specification to grant internet browsers access to Graphics Processing Units (GPUs).
All of the browser engines collaborated to create WebGL, the standard for rendering 3D graphics on the web. It was based on OpenGL Embedded Systems (ES), a cross-platform API for graphics targeted at embedded systems. This was the right starting place, because it made it possible to easily implement the same API in all browsers, especially since most browser engines were running on systems that had support for OpenGL.
WebGL was originally based on OpenGL ES 2.0, the OpenGL specification version for devices such as Apple's iPhone and iPad. But, as the specification evolved, it became independent with the goal of providing portability across various operating systems and devices. The idea of web-based, real-time rendering opened a new world of possibilities for web-based 3D environments. Due to the pervasiveness of web browsers, these and other kinds of 3D applications could now be rendered on desktop and mobile devices such as smartphones and tablets. According to the Khronos Group, the ability for Web developers to directly access OpenGL-class graphics directly from JavaScript, and freely mix 3D with other HTML content, will enable a new wave of innovation in Web gaming, educational and training applications.
Even though WebGL was vastly adopted for many years after it matured into a stable release—shipping inside Firefox, Chrome, Opera, IE11, and Android's mobile web browsers—Apple still lacked official WebGL support. Neither OS X Safari nor Safari Mobile supported WebGL. In fact, it wasn't until 2014, at June's Worldwide Developers Conference (WWDC), that Apple announced that both OS X Yosemite and iOS 8 would ship with WebGL support. This became a turning point for 3D graphics on the web. With official support from all major browsers, the entire range of 3D graphics—at native speeds—could be delivered to billions of desktop and mobile devices. WebGL unleashed the power of graphics processors to developers on an open platform, allowing console-quality application to be built for the web.
In this chapter, we will do the following:
- Understand the necessary system requirements to run WebGL.
- Cover the common high-level components of a WebGL application.
- Set up a drawing area (canvas).
- Test your browser's WebGL capabilities.
- Understand that WebGL acts as a state machine.
- Modify WebGL variables that affect your scene.
- Load and examine a fully-functional scene.
