绘制一个点

<canvas id="glcanvas" width="640" height="480"></canvas>

  // 顶点着色器程序
  const VSHADER_SOURCE = 
  `void main() {
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // 设置坐标
    gl_PointSize = 10.0; // 设置尺寸
  }`

  // 片元着色器程序
  const FSHADER_SOURCE = 
  `void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置颜色
  }`

  function main() {
    // 1.获取canvas元素
    const canvas = document.getElementById('glcanvas')

    // 2.获取webgl绘图上下文
    const gl = canvas.getContext('webgl')

    if (!gl) {
      alert('不支持webgl')
      return
    }

    // 初始化着色器(封装在另一个函数库中，不是本片文章讨论的重点，下一篇文章再详细讨论。绘制一个点只需要理解整体流程就好了，加入初始化着色器概念会增加理解难度。)
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
      console.log('着色器初始化失败')
      return
    }

    // 3.设置背景色（指定清空canvas的颜色）
    gl.clearColor(0.0, 1.0, 0.0, 1.0)

    // 4.清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT)

    // 5.绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1)
  }

  main()

分析

1.顶点着色器中定义了点的坐标和点的大小
2.片元着色器中定义了点的颜色
3.将顶点着色器和片元着色器传入initShaders函数中进行初始化着色器
4.调用gl.clearColor方法进行设置背景色
5.调用gl.clear方法进行清空canvas绘图
6.调用gl.drawArrays方法进行绘制一个点

着色器

我们通常使用三角形来构造网格。由于WebGL使用GPU加速计算，所以关于这些三角形的信息应该从CPU传输到GPU，这需要大量的通信开销。

WebGL提供了一种减少通信开销的解决方案。着色器。使用 OpenGL ES Shading Language / GLSL 编写的程序，它携带着绘制形状的顶点信息以及构造绘制在屏幕上像素的所需数据，在客户端系统上绘制图形元素。换句话说，它负责记录着像素点的位置和颜色。

简而言之，它是一个代码段，它实现算法来获取网格的像素。

绘制WebGL时候有两种不同的着色器函数，顶点着色器和片段着色器 你需要通过用GLSL 编写这些着色器，并将代码文本传递给WebGL，使之在GPU执行时编译。

顶点着色器

每次渲染一个形状时，顶点着色器会在形状中的每个顶点运行。它的工作是将输入顶点从原始坐标系转换到WebGL使用的缩放空间(clipspace)坐标系，其中每个轴的坐标范围从-1.0到1.0，并且不考虑纵横比，实际尺寸或任何其他因素。

片段着色器

片段着色器在顶点着色器处理完图形的顶点后，会被要绘制的每个图形的每个像素点调用一次。它的职责是确定像素的颜色，通过指定应用到像素的纹理元素（也就是图形纹理中的像素），获取纹理元素的颜色，然后将适当的光照应用于颜色。之后颜色存储在特殊变量gl_FragColor中，返回到WebGL层。该颜色将最终绘制到屏幕上图形对应像素的对应位置。

gl.drawArrays()

WebGLRenderingContext.drawArrays() 方法用于从向量数组中绘制图元。

  /**
   * @param mode GLenum 类型，指定绘制图元的方式，可能值如下:
   * gl.POINTS: 绘制一系列点。
   * gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
   * gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
   * gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
   * gl.TRIANGLE_STRIP：绘制一个三角带。
   * gl.TRIANGLE_FAN：绘制一个三角扇。
   * gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。
   * @param first GLint 类型，指定从哪个点开始绘制。
   * @param count GLsizei 类型，指定绘制需要使用到多少个点
   */
  void gl.drawArrays(mode, first, count);

webGL入门-绘制一个点

绘制一个点

分析

着色器

顶点着色器

片段着色器

gl.drawArrays()