Book Image

WebGL HOTSHOT

By : Mitch Williams
Book Image

WebGL HOTSHOT

By: Mitch Williams

Overview of this book

Table of Contents (17 chapters)
WebGL HOTSHOT
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Comprehensive solutions


Khronos and the Web3D Consortium brought different companies together to produce unified standards and solutions. An issue with the standards was that companies with vested financial interests in their own technologies would have to compromise and perhaps lose a technical advantage. However, in the long run, we end up with a greater good that has standards, and some companies continue to support their own features as an extension to these standards. Often, the right path cannot be discovered until we have tried other unsuccessful paths. We learned a lot in the early days. Remarkably, the early inventors got much of it right, even for the products that had not yet been invented or conceived such as smartphones. Perhaps the only criticism seemed to be redundancy; there were multiple commands in OpenGL to accomplish the same functions. A little streamlining was in order, and thus, OpenGL ES (Embedded Systems, 2003) gave us a powerful 3D graphics interface for low battery power and low-level devices.

Khronos launched WebGL in March 2011, which was supported in Google Chrome, Safari, Firefox, and most recently, Microsoft's Internet Explorer. The ongoing evolution of HTML—the language read by web browsers to display web pages—was producing new standards for HTML5 with the goal of supporting multimedia and interactivity. 3D and, by association, WebGL were a natural fit to be embedded into HTML5. WebGL did not require a plugin to view 3D inside web pages, and by interfacing with the graphics card, WebGL could deliver high-performance graphics. Programming in JavaScript and Cascading Style Sheets (CSS) were languages familiar to web developers.

Technical breakthroughs are often a synergy of near-simultaneous events. The Internet had been around for nearly a quarter of a century before 1970, but was not a commercial success. A convergence of hardware and software took place. Fax modems became commonplace on most PCs. Netscape, the first web browser, was born. Consumers were introduced to the Internet via AOL (America Online), and while primitive to today's standards, the graphical user interface was ubiquitous with Windows, introduced years earlier by Macintosh (and Xerox if we wish to be precise). Web3D was undergoing its own technical breakthrough with HTML5, OpenGL ES, X3D, and one more innovation—shader languages—also known as GPU (Graphics Processing Unit) programming.

The earlier versions of OpenGL and the streamlined OpenGL ES used the fixed-function pipeline method. A 3D mesh, which is simply a list of vertices and how they are connected—think of a Rose Parade Float formed with chicken wire—would go through a series of steps known as the 3D graphics pipeline. The pipeline would perform the following tasks:

  • Transform the object so that it would move (translate), rotate, and scale the 3D object

  • Transform the object to the camera's point-of-view

  • Convert the scene into perspective view so that it appears on the screen in the same way as we would perceive it with our eye in the real world

Traditionally, all the programming was done on the CPU, which passed the 3D meshes and object transformations to the GPU in order to draw or render the colored dots on the screen. The GPU is simply another computer chip specifically designed for this final drawing. It is programmable and its multiprocessor capability means it can operate on multiple vertices simultaneously. Innovators began programming GPUs. Eventually, a formal programming language was designed to program the GPU / shader languages.

Shader languages enabled developers to have finite control and programming over each pixel, vertex, light, and text. With the earlier fixed-function pipeline, we only controlled the final location of the vertices and let the GPU interpolate between the vertices to draw the polygons. Now, with shader languages, we can calculate lighting, shadows, rough surfaces, and blend texture maps on a pixel-by-pixel basis. A great advantage of GPU programming is that the OpenGL ES standard is shared across many products. So, the same shader language coded on an iPhone works for an Android phone. Finally, all was in place—WebGL overcame the plugin issues of the previous Web3D attempts, X3D would be the latest file format based on the XML community standard, and shader languages would give us improved performance and image quality on a pixel-by-pixel basis.