Book Image

Real-Time 3D Graphics with WebGL 2 - Second Edition

By : Farhad Ghayour, Diego Cantor
Book Image

Real-Time 3D Graphics with WebGL 2 - Second Edition

By: Farhad Ghayour, Diego Cantor

Overview of this book

As highly interactive applications have become an increasingly important part of the user experience, WebGL is a unique and cutting-edge technology that brings hardware-accelerated 3D graphics to the web. Packed with 80+ examples, this book guides readers through the landscape of real-time computer graphics using WebGL 2. Each chapter covers foundational concepts in 3D graphics programming with various implementations. Topics are always associated with exercises for a hands-on approach to learning. This book presents a clear roadmap to learning real-time 3D computer graphics with WebGL 2. 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 3D computer graphics topics, including rendering, colors, textures, transformations, framebuffers, lights, surfaces, blending, geometry construction, advanced techniques, and more. With each chapter, you will "level up" your 3D graphics programming skills. This book will become your trustworthy companion in developing highly interactive 3D web applications with WebGL and JavaScript.
Table of Contents (14 chapters)

Getting Started

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.