Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

WebGL Rendering Pipeline

The following figure is a schematic diagram of the WebGL rendering pipeline:

Vertex Buffer Objects (VBOs)

VBOS contains information used to describe geometry, such as vertex coordinates, normal coordinates, colors, texture coordinates, etc.

Index Buffer Objects (IBOs)

IBOs contain information describing the relationship between vertices. It uses the index position of the vertex in VBOs.

Vertex Shader

The vertex shader is executed on each vertex. It processes vertex related information, such as vertex coordinates, normal coordinates, color, and texture coordinates. This information is obtained from the VBO and associated with the attributes used in the vertex shader.

Fragment Shader

The fragment shader is executed on each fragment to calculate the color of each fragment.

Framebuffer

The framebuffer is a two-dimensional buffer that stores the fragments processed by the fragment shader. Once all the fragments have been processed, the rendering results can be displayed on the screen.

Attributes

An attribute is an input variable in a vertex shader. It specifies how to read data from a buffer and pass it to the vertex shader. You can store position information (3 32-bit floating point data) in a buffer. Then specify which buffer to read the position information from, what the data type of the position information is, where to start reading from the buffer, and how many bytes to read in total. Since the vertex shader needs to be executed on each vertex, the attribute value will not be the same each time it is executed.

Uniforms

Uniforms are input variables of vertex shaders and fragment shaders. Unlike Attributes, Uniform variables are fixed in a rendering cycle. For example, the position of a light source.

Textures

Textures often contain image data, but can contain other data.

Varyings

Varyings variables are often used to pass data from the vertex shader to the fragment shader. The varyings variables in the vertex shader will be interpolated before being passed to the fragment shader.