What is a WebGL

In short, WebGL is a set of apis that provide direct access to the graphics capabilities of a GPU. It has the following characteristics

  1. The WebGL API is process-oriented design. For example, if the statement of object-oriented programming isobj.someFunc(arg1, arg2), so the process-oriented representation issomeFunc(obj, arg1, arg2)
  2. All data is eventually passed to the GPU through the WebGL API, and every time data is updated, it needs to be passed to the GPU again using the API
  3. All drawing operations are performed on the GPU, and we only inform the GPU of drawing instructions and related data through the WebGL API

In fact, the difficulty of WebGL lies not in the use of API, but in the understanding of GPU drawing process.

WebGL drawing process

Let’s take a look at the steps required for WebGL drawing. You don’t need to fully understand what this means, as it involves a lot of terminology. I’ll give a more concrete reference to these terms later in the steps in section 1.

With the tetrahedron example in section 1, let’s explain each step one by one.

Vertex Data

Let’s start with the first step: Vertex Data is the position Data of the four vertices of the tetrahedron, and it informs the GPU of the Vertex Data through WebGL API.

Vertex Shader

Shader is a very important concept in WebGL. In a word, Shader is a program running on GPU, and GPU can execute many such programs concurrently. Vertex Shader is a Vertex Shader that processes each Vertex once. This Shader is used to perform perspective transformations on tetrahedral vertices and output the processed Vertex data. Since shaders can run multiple times at once, the GPU can process many vertices with great efficiency.

Primitive Assembly

This step assembles vertices into polygons, and WebGL supports a maximum of three vertices for a polygon, namely triangles. The tetrahedron has four triangles, so it will be assembled into four triangles at this stage. If you are rendering a cube, then you need to split a rectangle into 2 triangles.

Rasterization

In this step, the system calculates the pixels that the four triangles of the tetrahedron cover on the screen, and each pixel corresponds to a two-dimensional coordinate on the screen. Multiple faces may overlap each other, but this step does not care about that. It enumerates all the pixels covered by each triangle, and the positions of these pixels are repeatable. This step corresponds to the operation of dividing the minimum paint point mentioned earlier.

Fragment Shader

Like Vertex Shader, it is a program running on the GPU that processes the pixels created in the previous step. Each pixel is processed once by the Fragment Shader. Working with a pixel is mostly about setting the color of the pixel. We can pass information to the Fragment Shader to determine what color the pixel should be. Most of the lighting and shading we see in games is done in this step.

Per-Fragment Operations

In this step, the pixel output of the Fragment Shader will be processed again. For example, the pixel that will not be displayed will be removed. In the case of tetrahedron, the pixel covered by the hidden triangular plane will be discarded. In addition, if your pixels are translucent, you will need to mix transparently in this step. This step and the previous step correspond to the operation of painting the minimum color point mentioned earlier.

Present

Finally the system will output pixel information to the screen or other output target to complete a drawing.

conclusion

This section mainly introduces the main process of WebGL drawing, or GPU drawing. Compared with 2D drawing, many new concepts are introduced, such as Vertex Shader and Fragment Shader. The reader can try to think about what each step means in the drawing process, and then find answers to your questions in later chapters.