This is the 15th day of my participation in the August More Text Challenge

WebGL Usage Guide (1) Understanding webGL

WebGL is introduced

WebGL is a 3D drawing standard, which allows the combination of JavaScript and OpenGL ES 2.0. By adding a JavaScript binding of OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas. So web developers can use system graphics to more fluid in the browser display 3 d scene and model, also can create complex navigation and data visualization, webGL technology standard the bother of the development of web pages dedicated to render plugin, can be used to create a complex 3 d structure of the web page, and even can be used to design the 3 d web games and so on.

How webGL works

WebGL works in a similar way to an assembly line, dividing a drawing process into multiple steps. The current step only processes the results of the previous step, and then passes the processed results to the next step, finally rendering to the 2D screen. This rendering method is called graphics pipeline or rendering pipeline. Main processing process of GPU rendering pipeline:

  1. Firstly, vertex shader stage is entered, and coordinate transformation is carried out on vertices one by one by using the parallel computing advantage of GPU
  2. Then enter the graph source assembly stage and assemble the vertices into a graph according to the graph source type
  3. Next comes the rasterization phase, which fills the graph with pixels that do not contain color information
  4. After that, it enters the slice shader stage, which is the pixel shader, and finally displays on the screen

A simple sketch of the webGL rendering pipeline

Graph TD JavaScript provides data --> vertex data --> vertex shader --> Vertex shader --> Draw vertex Draw vertex --> Primitive assembly Pixel Assembly --> Configure vertices as triangles --> Rasterize --> Fill triangles with pixels --> Slice shader --> Fill pixels with colors

Primitives that webGL can draw

  • point
  • Line segment
  • triangle