Getting Started

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.

Hardware-based rendering is much more efficient than software-based rendering, because the former involves dedicated hardware handling the necessary operations.

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. 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 processing required to obtain an image is all performed locally using the client’s graphics hardware.

WebGL presents several advantages

JavaScript programming
Automatic memory management
Pervasiveness
Performance
Zero compilation

Retained and Immediate Mode Rendering

In th retained-mode the graphics library maintains a scene model in memory, To change what is rendered, the application issues a command to update the scene.

In the inmediate-mode each time a new frame is drawn the application issues all drawing commands required to describe the entire scene.

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.

Immediate-mode rendering, on the other hand, as offered with WebGL, is much more flexible and can implement targeted optimizations.

Elements in a WebGL Application

Some of these common elements include:

canvas: the placeholder where our scene is rendered.
Objects: the 3D entities that make up the scene.
Lights
Camera

Accessing the WebGL Context

A WebGL context is an object through which we can access WebGL functions and attributes.

<script type="text/javascript">
  "use strict";
  function init() {
    const canvas = document.getElementById("webgl-canvas");
    // Ensure we have a canvas
    if (!canvas) {
      console.error("Sorry! No HTML5 Canvas was found on this page");
      return;
    }
    const gl = canvas.getContext("webgl2");
  }
  // Call init once the document has loaded
  window.onload = init;
</script>

A WebGL context can be understood as a state machine: once you modify attributes, the modifications persist until later modifications. For example:

const color = gl.getParameter(gl.COLOR_CLEAR_VALUE);

Here gl.COLOR_CLEAR_VALUE is one of the WebGL context attributes.

Rendering