WebGL Rendering

WebGL is a 3D graphics library that enables modern web browsers to render 3D scenes in a standard and efficient manner. According to Wikipedia, rendering is the process of generating an image from a model by means of computer programs. Since this is a process executed by a computer, there are different ways to produce such images. There are three main distinctions to make when discussing rendering: software-based and hardware-based rendering, server-based and client-based rendering, and retained-mode and immediate-mode rendering. As we will see, WebGL offers a unique approach to hardware and client based rendering with an immediate-mode API on the web.

Software and Hardware Based Rendering

The first distinction we should make is whether we are using any special graphics hardware. On one hand, we can talk about software-based rendering for cases where all required calculations to render 3D scenes are performed using the computer's Central Processing Unit (CPU). On the other hand, as is the case with WebGL, we use the term hardware-based rendering for scenarios where there is a GPU performing 3D graphics computations. From a technical standpoint, hardware-based rendering is much more efficient than software-based rendering, because the former involves dedicated hardware handling the necessary operations. In contrast, a software-based rendering solution can be more common due to the lack of hardware dependencies.

Server and Client Based Rendering

The second distinction to make is whether the rendering process is happening locally or remotely. When the image that needs to be rendered is too complex, the render will most likely occur remotely. This is the case for 3D animated movies where dedicated servers with lots of hardware resources render intricate scenes. We call this server-based rendering. The opposite of this approach takes place when rendering occurs locally. We call this client-based rendering. WebGL offers a client-based rendering approach: the elements that are a part of the 3D scene are usually downloaded from a server. However, the processing required to obtain an image is all performed locally using the client's graphics hardware. Although this is not a unique solution, compared to other technologies (such as Java 3D, Flash, and the Unity Web Player Plugin), WebGL presents several advantages:

• JavaScript programming: JavaScript is a language that is natural to both web developers and browsers. Working with JavaScript allows you to access all parts of the DOM and easily integrate WebGL applications with other JavaScript libraries such as jQuery, React, and Angular.
• Automatic memory management: WebGL—unlike other technologies, such as OpenGL, where memory allocation and deallocation are handled manually—follows the rules for JavaScript variable scoping and automatic memory management. This simplifies programming tremendously while reducing the code footprint. Ultimately, this simplification makes it easier to understand the application logic.
• Pervasiveness: Web browsers with JavaScript capabilities are installed in smartphones and tablet devices by default. This means you can leverage WebGL across a vast ecosystem of desktop and mobile devices.
• Performance: Performance of WebGL applications is comparable to equivalent standalone applications (with some exceptions). This is possible due to WebGL's ability to access the local graphics hardware. Until recently, many 3D web rendering technologies used software-based rendering.
• Zero compilation: WebGL is written in JavaScript; therefore, there is no need to compile your code before executing it on the web browser. This empowers you to make changes in real-time and see how those changes affect your 3D web application. Nevertheless, when we cover shader programs, we will understand that some compilation is needed. However, this occurs in your graphics hardware and not in your browser.

Retained and Immediate Mode Rendering

The third distinction to make is that WebGL is an immediate mode 3D rendering API designed for the web. Graphics APIs can be divided into retained-mode APIs and immediate-mode APIs.

Retained-Mode Rendering

A retained-mode API is declarative. The application builds a scene from primitives, such as shapes and lines, and then the graphics library maintains a scene model in memory. To change what is rendered, the application issues a command to update the scene, which could include, for example, adding or removing a shape; the library is then responsible for managing and redrawing the scene:

Immediate-Mode Rendering

An immediate-mode API is procedural. Immediate mode rendering requires the application to directly manage rendering. In this case, the graphics library does not maintain a scene model. Each time a new frame is drawn, the application issues all drawing commands required to describe the entire scene, regardless of actual changes. This method provides the maximum amount of control and flexibility to the application program:

Retained Versus Immediate Mode Rendering

Retained-mode rendering can be simpler to use, because the API does more of the work for you, such as initialization, state maintenance, and cleanup. However, it is often less flexible since the API forces its own particular scene model; it can also have higher memory prerequisites because it needs to provide a general-purpose scene model. Immediate-mode rendering, on the other hand, as offered with WebGL, is much more flexible and can implement targeted optimizations.