What happened to WebGL?

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?

Simply put WebGL is a javascript API for rendering 2D and 3D graphics on the web.

  • 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.

In 2011, WebGL was introduced as a part of the web standards, and with HTML 5 canvas more possibilities for graphics on the web were unlocked. It became quickly popular as it uses javascript under the hood, so it means no ActionScript or Java that transcompiles into javascript ( webassembly is a similar tech for doing a heavy performance in the browser, find my article here ).

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.

WebGLCSS
WebGL is a javascript library for handling 2D and 3D objects.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.
All the color and texture data are processed from javascript.Inbuild properties are used to apply colors to the elements.
WebGL and CSS comparison

How does it work?

In this section, we will understand how WebGL works.

webgl - process
The process involved in WebGL

The above picture shows how a javascript code is used to render a 2D or 3D image using WebGL, we will explore each and every step below.

Javascript:

In WebGL, javascript’s role is to handle dom elements and write control code to manage the rendering of graphics. To put it simply all the values related to the graphics like positions, colors and shading are converted into buffers and passed to the pipeline by javascript.

Vertex shaders:

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.

Primitive Assembly:

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.

Rasterization:

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.

Fragment Shader:

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.

Fragment Operations:

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.

Frame Buffer:

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.

webgl - Fragment Operations
WebGL flow ( Image courtesy Tutorial Points )

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.

Conclusion

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.

Happy coding!!!

19 thoughts on “What happened to WebGL?

  1. I just could not depart your web site before suggesting that I really enjoyed the standard info a person provide on your guests? Is gonna be back continuously in order to check out new posts

  2. Howdy would you mind stating which blog platform you’re working with? I’m going to start my own blog in the near future but I’m having a difficult time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique. P.S My apologies for getting off-topic but I had to ask!

  3. Greetings! This is my first comment here so I just wanted to give a quick shout out and tell you I truly enjoy reading through your blog posts. Can you suggest any other blogs/websites/forums that cover the same subjects? Thank you!

  4. Heya are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you need any coding expertise to make your own blog? Any help would be greatly appreciated!

  5. Hello, i think that i saw you visited my blog thus i came to โ€œreturn the favorโ€.I’m attempting to find things to enhance my website!I suppose its ok to use some of your ideas!!

  6. I’m so happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.

Leave a Reply

Your email address will not be published.

Pin It on Pinterest