1 最简单的 WebGL 程序

接下来我们将这个例子绘制到屏幕上。

首先当然需要获取到画布的 Canvas 元素，并从中取得 WebGL 的绘图上下文对象：

const canvas = document.querySelector('.canvas')
const gl = canvas.getContext('webgl')

gl是一个WebGLRenderingContext对象，它是我们与 GPU 通信的入口。之后的所有 WebGL 操作都会通过gl对象完成。

然后创建着色器对象。着色器是在 GPU 中执行的程序，我们需要为顶点着色器和片段着色器分别创建对应的着色器对象：

const vertexShader = gl.createShader(gl.VERTEX_SHADER)
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

此时这两个对象只是空的容器，没有任何可执行代码。因此我们需要给他们绑定 GLSL 源码。

通常我们会将 GLSL 源码写在 HTML 的<script>标签中，然后通过getElementById读取它们：

const vertexSource = document.getElementById('vertex-shader').textContent
const fragmentSource = document.getElementById('fragment-shader').textContent

接着，将源码“装入”对应的着色器对象中：

gl.shaderSource(vertexShader, vertexSource)
gl.shaderSource(fragmentShader, fragmentSource)

此时着色器对象才是一个可被 GPU 执行的程序。

下一步是编译着色器，让 GPU 能够理解：

gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)

至此，对顶点和片段着色器的操作已经完成。但是我们并未将这两个着色器连接起来。因此我们还需要一个程序对象将顶点着色器和片段着色器组合成为一个完整的可执行程序：

const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)

attachShader()告诉 WebGL 这个程序需要哪些着色器才能运行。然后链接程序对象，生成可在 GPU 上运行的二进制代码：

gl.linkProgram(program)

链接成功后，就可以让 WebGL 使用它了：

gl.useProgram(program)

useProgram()表明，后续的绘制操作将基于这个程序执行。

现在，我们的 GPU 程序已经就绪，可以进行绘制：

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

drawArrays()是 WebGL 的基本绘制命令之一，这行代码的含义是：使用gl.POINTS模式绘制点，从第0个点开始绘制1个顶点。