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.
| WebGL | CSS |
| 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. |
How does it work?
In this section, we will understand how WebGL works.
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.
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!!!
Good right up
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
I really appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thank you again
I am glad that it helped you, thanks for your valuable feedback 😊
Wow! This blog looks just like my old one! It’s on a completely different subject but it has pretty much the same layout and design. Excellent choice of colors!
Hi my friend! I wish to say that this article is amazing, nice written and include almost all significant infos. I would like to see more posts like this.
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!
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!
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!
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!!
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.
I love how your website looks, thanks for the post it was nice read.
This is radiant work, friend.
Thanks for sharing, a Nice article amazing post.
This is radiant work, friend.
It really is an amazing bit of crafting in support of most of the on the web tourist might receive advantage from this I am sure.
It’s cool not just elegant!
My 56 year old brother rates this colour very clean.
This colours blew my mind.
I like the valuable info you provide in your articles. I will bookmark your blog and check again here frequently. I’m quite certain I’ll learn plenty of new stuff right here! Best of luck for the next!
Say, you got a nice article post.Really thank you! Will read on…
Hey there! I know this is kinda off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having trouble finding one? Thanks a lot!
I blog quite often and I really appreciate your information. This article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I opted in for your RSS feed too.
I really appreciate this post. I¦ve been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thanks again
I want to to thank you for this fantastic read!! I absolutely enjoyed every bit of it. I’ve got you book-marked to check out new stuff you postÖ
Im grateful for the blog post.Much thanks again. Fantastic.
wow, awesome article post.Really thank you! Will read on…
Explore AI marketing strategies with the help of James Jernigan’s YouTube channel. He not only shares what works but also explains why, making his content highly educational.
This seems kinda exclusive…in my view…
Greetings! Very useful advice within this post! It is the little changes that produce the largest changes. Thanks a lot for sharing!
An interesting discussion is definitely worth comment. I do believe that you ought to write more about this issue, it might not be a taboo subject but typically folks don’t talk about such topics. To the next! All the best.
I value the blog. Keep writing.