WebGL Introduction

Creating interactive media content for the web traditionally required third-party apps or plug-ins installed in browsers. With the rise of open web standards and the need to support native graphics capabilities in the web browsers, WebGL was born to bring cross-browser compatibility and to be fully integrated with web standards.

What is WebGL?

WebGL (Web Graphics Library) is a rasterization API based on OpenGL ES developed by the Khronos Group, Inc. for rendering 2D and 3D graphics in a web browser. WebGL uses hardware acceleration which enables developers the ability to build high-performance real-time rendering interactive graphics in the web browser such as games, simulations, data visualization, animated videos, 3D modeling, molecular animations, and much more.

The efficiency of WebGL is perhaps one of the main advantages as it allows high-demanding power web applications to extract the full capabilities of the graphics card. Moreover, WebGL is plugin-free and is compatible with all major browsers, so users don’t need to worry about downloading or installing any external application to run a WebGL app.

How does WebGL work?

A WebGL program comprises codes written in OpenGL Shading Language (GLSL), JavaScript, and HTML5. GLSL is used to write the shaders, and special programs executed on the graphics hardware that computes attributes like vertices, textures, colors, lightning, and so on during the rendering of the object or scene. GLSL gives developers important control over the graphic pipeline. JavaScript and HTML are used primarily as binding languages and to provide a rendering context.

A WebGL program is commonly generated by multiple draws on the canvas HTML element that are carried out by the graphic processing unit (GPU) through a process called the rendering pipeline. 
To create high-fidelity graphics, WebGL may be quite complex to use as it is nearly low-level programming. 

There is, however, a variety of libraries available that abstract some of the difficulties of WebGL making them less verbose such as twgl, Three.js, PhiloGL, and J3D.

Rendering Pipeline:

The rendering pipeline consists of a sequence of operations required each time an object (the 2D/3D scene) is rendered on the screen. The objective is to draw the desired graphic model or scene from primitives (geometric shapes expressed by their Cartesian coordinates  X, Y, and Z). In computer graphics, each object is modeled from a collection of triangles. So, in the depicted diagram, we are rendering just one triangle and all these phases represent the rendering pipeline.

👁 Image

1. Vertices (singular vertex): are attributes that describe the geometry of the object represented by its 2D or 3D space coordinates and are stored in a data structure like arrays. They can also specify other attributes like colors, texture, reflectance, normal vectors (used for lighting), etc.
2. Vertex shader: is a function that generates clip space coordinates by applying a transformation to the vertex and helps to prepare data for use in the fragment shader.
3. Primitive generation (assembler): connects vertices to assemble triangle primitives.
4. Rasterization: is the process that projects the triangle described previously as a vector coordinate into small pieces called fragments (the data necessary to generate a screen pixel) and it also interpolates values across the primitives for each pixel.
5. Fragment shader: is a function that calculates and assigns the color to pixels.
6. Testing blending: takes the fragment shader output and combines it with colors in the current framebuffer to render transparency and translucency effects.
7. Framebuffer: stores the frame of data in the GPU memory that represents the visible content of the screen

OpenGL (API, Used Technology): As mentioned earlier WebGL is based on OpenGL and its syntax is similar. There are, however, different versions and standards of OpenGL. Currently, there are three standards: OpenGL for desktop applications, OpenGL ES (Embedded Systems) used primarily in smartphones and tablets, and WebGL which is based on OpenGL ES specification for browsers.
WebGL 1.0 is equivalent to OpenGL ES 2.0
WebGL 2.0 is equivalent to OpenGL ES 3.0

Browsers Support:

WebGL 2.0 is widely supported in all major browsers on both desktop and mobile Apple (Safari), Google (Chrome), Microsoft (Edge), Opera (Opera web browser), and Mozilla (Firefox). However, as WebGL is running on the graphic card, its availability also requires hardware with OpenGL feature support.