What is WebGL and how does it work?

WebGL

Web Graphics Library (WebGL) is a javaScript API for rendering 2D and 3D graphics within web browser without the use any plug-ins. It is derived from OpenGL's Embedded Systems (ES) 2.0 library which is a low-level 3D APIfor phones and other mobile devices. WebGL provides similarfunctionality of ES 2.0 and uses the HTML5 canvas element to performs well on modern3D graphics hardware.

WebGL is written in a mix of JavaScript and shader code that is written in OpenGL Shading Language, a language similar to C or C++, and is executed on a computer's GPU.

In 2007, Vladimir Vukicevic, an American-Serbian software engineer started working on an OpenGL prototype for Canvas element of the HTML document. By the end of 2007, both Mozilla and Opera had made their own separate implementations. In early 2009, the non-profit technology consortium Khronos Group started the WebGL Working Group, with initial participation from Apple, Google, Mozilla, Opera, and others.

Version 1.0 was released in March 2011 and some early adopters and users of WebGL including Google Maps and Zygote Body. Autodesk also ported many of their applications to the cloud, running on local WebGL systems. Some of the browsers that support WebGL include Google Chrome, Mozilla Firefox, Internet Explorer, Opera, and Safari. It is also supported by a number of mobile browsers including Opera Mobile, WebOS, and MeeGo.

WebGL 2.0 is based on OpenGL ES 3.0 and made guaranteed availability of many optional extensions of WebGL 1.0 and exposes new APIs. Development of the WebGL 2 specification started in 2013 with a final in January 2017. This specification is based on OpenGL ES 3.0. First implementations are in Firefox 51, Chrome 56 and Opera 43.

WebGL allows developers to put real-time interactive 3D graphics in the browser. WebGL can be applied to interactive music videos, games, data visualization, art, 3D design environments, 3D modeling of space, 3D modeling of objects, plotting mathematical functions, or creating physical simulations.

How does it work?

WebGL is slightly more complicated than your typical web technologies because it’s designed to work directly with your graphics card. To access WebGL content you need to have a browser that supports it. Also, having a good graphics card will likely improve WebGL performance on your computer. This is what allows it to rapidly do complex 3D rendering involving lots of calculations.

When programming in WebGL, you are usually aiming to render a scene of some kind. This usually includes multiple subsequent draw jobs or calls, each of which is carried out in the GPU through a process called the rendering pipeline.

In WebGL, like in most real-time 3D graphics, the triangle is the basic element with which models are drawn. Therefore, the process of drawing in WebGL involves using JavaScript to generate the information that specifies where and how these triangles will be created, and how they will look like; color, shades, textures, etc. This information is then fed to the GPU, which processes it, and returns a view of the scene.

The key metaphor here is that of a pipeline. GPUs are massively parallel processors, consisting of a large number of computation units designed to work in parallel with each other, and in parallel with the CPU. That is true even in mobile devices. With that in mind, graphics APIs such as WebGL are designed to be inherently friendly to such parallel architectures. On typical workloads, and when correctly used, WebGL allows the GPU to execute graphics commands in parallel with any CPU-side work, i.e. the GPU and the CPU should not have to wait for each other, and WebGL allows the GPU to max out its parallel processing power. It is in order to allow running on the GPU that these shaders are written in a dedicated GPU-friendly language rather than in JavaScript. It is in order to allow the GPU to run many shaders simultaneously that shaders are just callbacks handling one vertex or one pixel each - so that the GPU is free to run shaders on whichever GPU execution unit and in whichever order it pleases.

Conclusion

In recent years WebGL brings a lot of change the world wide web with 3D graphics and browser games. Even bring the 3D world map in our browser, and with the latest stable release of WebGL 2, it put one step ahead. In the future, we will able to see some more interesting implement in WebGL.