Exploring the Road to WEBGL (I) — Understanding WEBGL

WebGL (Web Graphics Library) is a JavaScript API that renders high-performance interactive 3D and 2D graphics in any compatible Web browser without the need for plug-ins. WebGL does this by introducing an API very much in line with OpenGL ES 2.0, which can be used within the HTML5 < Canvas > element. This consistency allows the API to take advantage of hardware graphics acceleration provided by the user device.

Principle 2.

Vertex processing: In this stage, GPU reads the vertex data that describes the appearance of 3D graphics and determines the shape and position relationship of 3D graphics according to the vertex data to establish the skeleton of 3D graphics. On existing Gpus, this is done by a hardware-implemented Vertex Shader.

Raster calculation: the actual image displayed by the display is composed of pixels. We need to convert the points and lines on the graph generated above to the corresponding pixels through certain algorithms. The process of converting a vector image into a series of pixels is called rasterization. A mathematically represented slash segment, for example, is eventually transformed into a cascade of continuous pixels.

Texture mapping: Polygons generated by vertex units only form the outline of the 3D object. Texture mapping is a texture mapping of polygons with multiple deformable surfaces. In layman’s terms, the polygon surfaces are pasted with corresponding images to produce a “realistic” shape. The TMU (Texture Mapping Unit) is used to do this.

Pixel processing: This stage (during the rasterization of each pixel) the GPU completes the calculation and processing of the pixel to determine the final attributes of each pixel. On Gpus that support DX8 and DX9 specifications, this is done by the hardware-implemented Pixel Shader (Pixel Shader).

Final output: ROP (rasterization engine) finally completes the output of pixels, after 1 frame rendering is completed, it is sent to the video memory frame buffer.

Generally speaking, the work of GPU is to complete the generation of 3D graphics, map the graphics to the corresponding pixels, calculate each pixel to determine the final color and complete the output.

However, it should be noted that no matter how great the game home graphics card, light and shadow are calculated by CPU, GPU only 2 jobs, 1 polygon generation. 2 is the color on the polygon.

The actual image generation process is roughly as follows:

First it reads the model from the hard disk,

The CPU classifies the polygon information and gives it to the GPU, which then processes it into visible polygons on the screen, but without textures

Cable box. After the CPU calculates the model, the GPU puts the model data into the video memory, and the video card also attaches materials and colors to the model. The CPU retrieves polygon information from video memory accordingly. The CPU then calculates the silhouette of the shadow created by the illumination. After the CPU calculates, the graphics card’s job is to fill the shadows with dark colors. Data is exchanged between the CPU and GPU.

The flow chart