WebGL Graphics Pipeline - WebGL

What is WebGL - Graphics Pipeline?

For rendering 3D graphics, we need to follow a sequence of steps. These steps are called as rendering pipeline or graphics pipeline. The below diagram depicts WebGL rendering pipeline.

WebGL - Graphics Pipeline

In the below sections, we will discuss each step in the detail in the pipeline.


While developing WebGL applications, we write Shader language code to interact with the GPU. JavaScript is employed to write the control code of the program, which involves the below actions −

  • Initialize WebGL − JavaScript is employed to initialize the WebGL context.
  • Create arrays − We create JavaScript arrays to store the geometry data.
  • Buffer objects – Buffer objects (vertex and index) are created by passing the arrays as parameters.
  • Shaders − We design, compile, and connect the shaders by using JavaScript.
  • Attributes − We can create, enable the attributes, and link them with buffer objects by using JavaScript.
  • Uniforms − We can also link the uniforms using JavaScript.
  • Transformation matrix − Using JavaScript, we can create transformation matrix.

Firstly, we create the data for the required geometry and we will pass them to the shaders in buffers form. The attribute variable of the shader language refers to the buffer objects, which will be passed as parameters to the vertex shader.

Vertex Shader

When we begin the rendering procedure by triggering the methods namely drawElements() and drawArray(), the vertex shader is performed for each vertex facilitated in the vertex buffer object. It computes the position of every vertex of a primitive polygon and preserves it in the differing gl_position. It will also compute the other attributes such as texture coordinates, color and vertices that are generally related with a vertex.

Primitive Assembly

After computing the position and other information of every vertex, the next stage is the primitive assembly stage. Here the triangles are arranged and passed to the rasterizer.

What is Rasterization?

In the rasterization step, the pixels in the concluding image of the primitive are specified. It consists of two steps −

  • Culling – Firstly, the position (is it front or back facing?) of the polygon is determined. All the triangles with improper position that are not seen in view area are discarded. This process is called culling.
  • Clipping − If a triangle is partially out of the view area, then the portion outside the view area is discarded. This process is called as clipping.

What is Fragment Shader?

The fragment shader acquires

  • data from the vertex shader in differing variables,
  • primitives from the rasterization phase, and then
  • computes the color values for every pixel between the vertices.

The fragment shader preserves the color values of each pixel in every fragment. These color values can be accessed during fragment operations, which we are going to discuss next.

Some fragment operations are accomplished after specifying the color of each pixel in the primitive. These fragment operations may involve the below −

  • Depth
  • Color buffer blend
  • Dithering

Soon after all the fragments are processed, a 2D image is formed and shown on the screen. The frame buffer is the ultimate stop of the rendering pipeline.

WebGL - Graphics Pipeline

What is Frame Buffer?

Frame buffer is an area of graphics memory which stores the scene data. This frame buffer consists of details like height and width of the surface (in pixels), color of every pixel, and depth and stencil buffers.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

WebGL Topics