Draw modes
by Lea Rosema
WebGL supports several draw modes.
gl.POINTS
- draw points (processes the buffer point-by-point)gl.LINES
- draw lines (proccesses pairs of buffer data to draw lines)gl.LINE_STRIP
- draws a line to the next vertexgl.LINE_LOOP
- draws a line to the next vertex and connects the last vertex back to the firstgl.TRIANGLES
- draw triangles (processes triples of buffer data)gl.TRIANGLE_STRIP
- draw triangle strips (like triangles but reuses two coordinates of the last triangle)gl.TRIANGLE_FAN
- reuses a central vertex
drawArrays
vs drawElements
anchorgl.drawArrays
directly processes the data in the buffergl.drawElements
allows you use indexed geometries, this way you can reuse certain coordinates in the buffer by referencing indices multiple times.
Limitation for indexed geometries
anchorWhen using WebGL 1, the index buffer for the vertexes are specified as an unsigned short value, limiting the total number of vertices to 65536
. If you use WebGL 2, this limitation is removed. You can also load the OES_element_index_uint
extension for webgl 1 which is widely supported accross all browsers: