foreword

WebGL can render many types of graphics, some common types include:

Points: Individual pixels or small graphics used to create patterns or particle effects on the screen.
Lines: A connection between two points to create a line, path or curve.
Polygons: Closed shapes composed of three or more line segments, which can be used to create plane figures, meshes, or faces of three-dimensional objects.
Cubes: Cubes with six planes, which can be used to create basic shapes for 3D scenes, games or architectural models.
Spheres: Spherical surfaces that can be used to create celestial bodies, spherical objects or special effects.
Polyhedron (Polyhedra): Any polyhedron in three-dimensional space can be used to create polyhedral objects, buildings, or complex models.

However, the basic drawing of WEBGL only has points, lines and triangles, as shown in the following figure:

value	effect	illustrate
gl.POINTS	point	series of points
gl.LINES	line segment	A sequence of individual line segments, the last one being ignored if the number of vertices is odd
gl.LINE_LOOP	closed line	A series of connected line segments that, at the end, close the end point and start point
gl.LINE_STRIP	line	A series of connected line segments that do not close the end point and start point
gl.TRIANGLES	triangle	a series of individual triangles
gl.TRIANGLE_STRIP	triangle belt	A series of striped triangles
gl.TRIANGLE_FAN	triangle	streamer triangle

1. Drawing type of graphics

1. Draw a variety of graphics

1.1 points

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      
      
      margin: 0;
      padding: 0;
    }

    canvas{
      
      
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 只传递顶点数据
    attribute vec4 aPosition;
    void main() {
      gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
      gl_PointSize = 10.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');

  const points = new Float32Array([
    -0.5, -0.5,
     0.5, -0.5,
    -0.5,  0.5,
     0.5,  0.5,
  ])

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(aPosition)
  // gl.vertexAttrib2f(aPosition, 0.0, 0.0)

  gl.drawArrays(gl.LINES, 0, 4);
</script>