What is WebGL? Learn the Concept of How Website 3D works

Web applications are tend to be more mobile-app like. Traditionally, the desktop website contains all many information. However, to better attract the users to interact with the application, it has to be fun and interesting. Three diemnsional elements are emerging, we can see this is the trends because of the metaverse, NFT, VR/AR and so on.

For more information, the implementation of 3D elements on the website is not something new, it've existed for quite a long time. Though, It was never easy to create astounding 3D web application back then, it required loads of coding works, until there were more and more 3D APIs and Libraries came out. It's way more easier right now to build such kind of web application.

WebGL: Background

WebGL stands for Web Graphics Library, it's a standard JavaScript API that's supported by the mainstream browser. As the name suggests, It allows the developer to render interactive 2D and 3D graphics on the website with any compatible browser. In addition, the browser utilizes the user's GPUs to achieve high performance in rendering.

WebGL is based upon OpenGL, to be more precise, it's based on OpenGL ES which is a derivative of OpenGL.

OpenGL

OpenGL stands for Open Graphics Library, it's a cross-platform API for rending 2D and 3D graphics, it's used in more low-level operating systems like Windows, macOS, and Linux.

The initial release date of OpenGL is 1992, along the way with different patches and updates, there're a lot of complicated algorithms that are not supported on mobile devices, so as the embedded system. Therefore, to work more efficiently on those devices, the company Khronos Group created a subset API of OpenGL, namely OpenGL ES.

OpenGL ES is derivated from OpenGL, mainly are for mobile application and embedded devices that have less computing power.

WebGPU

Because WebGL is developed based on OpenGL ES, and OpenGL ES is also based on OpenGL, which makes both the derivatives hard to catch the version updates. It leads to a situation where the GPU is updated with more powerful functions but the API does not make use of those features.

Moreover, starting in 2015, there are three companies published their new Graphics APIs, Metal from Apple, DirectX 12 from Microsoft and Vulkan from Khronos. With these three popular, people in W3C decided to wrap these three 3D APIs as the next fully new generation of Web API.

With the state-of-art Graphics APIs, it can help hightly enhence the 3D graphics performance on browser by taking advantages of the latest GPU's features.

WebGPU currently is still in the origin trial stage which will be ended on 11 Aug 2023. Thus, it's more likely we can see 3D applications that're based on WebGPU next year. With that being said, WebGL will still be the main driver of the 3D elements for a long time.

WebGL: Under the Hood

The most important element in WebGL is the vertex, vertices are basically the corner of a 3D object. WebGL renders 3D objects in a 2D space based on the vertices and other data (light, camera, texture) we provided. A bunch of vertices will form a bunch of triangles and all the 3D objects are composed of many triangles.

Rendering Pipeline

The rendering pipeline can be seen below, here I'll give an overview of it. First of all, the developer needs to provide a set of arrays to hold the data of the vertices, then the engine will put those data into GPU (because GPUs are way better when working with many tiny tasks), in this case, GPUs are used to calculate all the coordinates of the vertices with the Vertex Shader.

After the Vertex Shader, it will go through the Geometry Shader and assemble triangles based on the vertices provided. Then it comes to the Rasterization stage, which can simply understand as turning the triangles into pixels. These pixels are used in the next stage, Fragment Shader, the shader will color all the pixels respectively according to the Code of Fragment Shader.

The last stage is testing and blending, it will take care of the depth and color buffer blend. Then it will pass all the data into the Frame Buffer, it's a portion of memory that keep the scene data. And ready for rendering the 3D objects.

Shader

The Shaders are actually nothing crazy but a chunk of code, it's written with shader language called OpenGL Shading Language (GLSL). Its role is to calculate the image data like color, lighting, and so on depending on the type of shader.

Rendering Pipeline，the image is from this article from duriansoftware.

Other Important Variable

Besides the vertices, the engine also requires other values like the texture, and vertex colors. This article has disclosed more details on what other variables are used and how they are passed.

Summary

The code for WebGL is very low level, which means we need a great effort on complicated code and only come up with a plain triangle. If we're not developers that take serious care of the performance of the application and want to approach it from the low level, it's less likely we will go for the WebGL code. There're a lot of libraries that help us simplify the process.

The most popular one would be Three.js, Three.js is built upon WebGL, and they made the coding part way easier compared to coding it in WebGL. Of cause after the three frontend framework getting mature, developers are also working on integrating 3D libraries into those frameworks. like the @react-three/fiber for React. The code and implementation are even more cleaner than Three.js, their efforts make it more accessible for all developers, and focus on creating stunning interactive 3D elements!

Reference

1. WebGL Fundamentals - https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html
2. An Introduction to WebGL — Part 1 - https://dev.opera.com/articles/introduction-to-webgl-part-1/
3. WebGPU by Chrome - https://developer.chrome.com/en/docs/web-platform/webgpu/
4. A Comparison of Modern Graphics APIs - https://alain.xyz/blog/comparison-of-modern-graphics-apis
5. WebGPU，下一代 Web 图形技术 - https://www.youtube.com/watch?v=y2dZYG5YTRU
6. WebGL + GPU = Amazing Results! - https://www.youtube.com/watch?v=qkDg-Y9iHBA
7. Learn WebGL: All you need in a Nutshell - https://www.youtube.com/watch?v=-nqIzV9OuQM
8. WebGL Tutorial - Introduction to WebGL - https://www.youtube.com/watch?v=Z64kw2MlDLE
9. Shaders and the Graphics Pipeline - https://www.youtube.com/watch?v=f2hbOfT12jU
10. An intro to modern OpenGL. Chapter 1: The Graphics Pipeline - https://duriansoftware.com/joe/an-intro-to-modern-opengl.-chapter-1:-the-graphics-pipeline