What are WebGL's draw primitives?

WebGL supports various drawing primitives, which serve as the foundation for constructing 3D graphics. In WebGL, the most commonly used drawing primitives include:

1. Points - The most basic primitive, representing a vertex position. In WebGL, points can be specified using gl.POINTS. This is highly useful for rendering particle systems or marking specific vertex locations.

2. Lines - Defined by two vertices, they can represent straight lines or line segments. In WebGL, lines can be drawn using gl.LINES (each pair of vertices defines an independent line), gl.LINE_STRIP (a sequence of vertices connected by straight lines), or gl.LINE_LOOP (similar to gl.LINE_STRIP, but with the first and last vertices connected to form a closed loop).

3. Triangles - Defined by three vertices, they are the fundamental building blocks for constructing the surfaces of 3D objects. In WebGL, triangles can be drawn using gl.TRIANGLES (each set of three vertices defines an independent triangle), gl.TRIANGLE_STRIP (a sequence of interconnected triangles, where each new vertex together with the previous two defines a new triangle), or gl.TRIANGLE_FAN (the first vertex together with all subsequent adjacent vertices defines a series of triangles).

Example:

Suppose we want to draw a simple square in WebGL. Since WebGL does not natively support quadrilaterals, we must use two triangles to form the square. We can define four vertices and specify them using the gl.TRIANGLES primitive to render two triangles that compose the square. The definition and order of the vertices are critical to ensure the triangles are correctly assembled.

By utilizing these primitives, we can construct various visual objects ranging from simple 2D graphics to complex 3D models. In practical applications, selecting the appropriate primitives significantly impacts both performance optimization and visual quality.