As a web developer have you looked into websites that have heavy graphics, and animation, and wondered how complex their CSS is and what framework they have used? well, you already know the answer. This article will explore what WebGL is, how it works, and its future in web development.
What is WebGL?
- WebGL is based on OpenGL which is a cross-platform API for handling graphics.
- Specifically, WebGL is based on the OpenGL ES library which targets embedded systems.
- WebGL uses your GPU for rendering graphics on the web, which cannot be achieved with CSS ( this is done by OpenGLSL – OpenGL Shading Language more on this later ).
- All the rendering is done on the client-side ( browser ).
Why do we need WebGL?
Before WebGL, we had java applets and adobe flash for handling graphics on the web. It was a great solution at that time which also provided GPU acceleration, but the problem is that these were proprietary software and not a web standard.
WebGL vs CSS:
Some of you might ask, that all the animations and fancy graphics can be achieved with modern CSS properties like keyframe, transition, scale etcetera. Well yes, but WebGL is specifically meant for heavy graphics work, and remember, it uses GPU for rendering ( NVIDIA vs browser in graphics? I see a clear winner 😉 ).
To make us understand better below are some of the differences between WebGL and CSS.
|CSS is a collection of properties to style HTML elements.
|WebGL uses GPU for rendering the objects.
|CSS uses a browser to achieve styling and graphics, but not as powerful as WebGL.
|It uses a coordination system to render an object on the screen.
|It has properties to align and position HTML elements.
|Inbuild properties are used to apply colors to the elements.
How does it work?
In this section, we will understand how WebGL works.
In this stage, the buffers are converted into points and calculated where to place in a frame, It also calculates other attributes such as color, texture coordinates, and vertices. All the calculations are done on the GPU.
Here all the points are combined into a respective number of triangles and placed on the frame.
Note: WebGL can only produce triangles and all the required shapes are formed using triangles.
for example if you want to draw a square, then two triangles are used.
In this stage, all the required pixels are calculated by the triangle data obtained from the previous stage and all the unnecessary pixels and viewpoints are removed here.
This is the stage where all the colors are created. All the pixel and position data are obtained from the previous step and the color data buffer obtained from js is stored in each and every pixel.
In this step, the optimization happens with additional calculations like depth and adding white noise to the frame, and finally, a 2D image is displayed.
This is the memory space where the data about the image like width, height, color, and depth is stored. Whenever the image is requested by any application this buffer is read and the respective image is displayed.
the tutorialpoints website has a good image for examining how each and every step happens.
So what happened?
The last update for WebGL was released on 17 January 2017 ( when writing this article ), three-plus years for a new update in Open source software is a huge gap. so what happened? there are some news and articles from which we can infer some points.
- WebGPU is coming, it’s a similar library for handling 2D and 3D objects on the web and it is expected to have high performance compared to WebGL.
- Unity has for long supported exporting the work as WebGL for rendering on the web, in this post they have said they will move to WebGPU.
- WebAssembly is gaining popularity as we can use low-level language in that, it is possible to achieve what we could with WebGL.
- HTML5 and CSS are growing more powerful, it shouldn’t take long for this tech to handle high graphics on the Web. A library like D3.js already uses this tech to produce high graphics content.
So should you learn WebGL? It depends, if you are developing some custom software related to graphics on the web, then you should give WebGL a try. But if you want to use graphics as a part of your web application there are frameworks based on WebGL that give a great abstraction, for example, three.js.
My opinion is, that unless a project requires WebGL, wait for WebGPU to come, because all the top organizations are involved in developing it including Google, Apple, Microsoft Corporation, Mozilla, World Wide Web Consortium, Open-source-software movement.