从画一个点开始学习 WebGL

今年的春节似乎有点特别。微信红包和抢红包游戏很火，一些人预测这将会成为人们告别微信、迁往其他社交软件的最后一个春节。

新的一年从画一个点开始吧！先说好，这个点可不是我们通常说的那个点。通常说的点，指的是一个抽象的几何对象，没有宽没有高。可是 WebGL 的点，不仅有宽，而且有高，是一个实实在在的像素点。它的大小可以通过设置点的视口大小来控制。

想画一个点，我们得先拿到 WebGL 绘图的画笔 —— 着色器。着色器是一种 JavaScript 程序，它用来告诉显卡如何绘制像素。WebGL 提供了两种着色器：顶点着色器和片元着色器。

顶点着色器负责将顶点数据转换为屏幕坐标。顶点数据通常包括顶点的坐标、颜色、法线等等。片元着色器负责将屏幕坐标转换为像素的颜色。

着色器语言是一种特殊的语言，它与 JavaScript 有很大的不同。着色器语言只有寥寥几个，而且语法非常简单。但是，它却非常强大，可以用来实现各种各样的图形效果。

好了，让我们开始画第一个点吧！

首先，我们需要创建一个 WebGL 上下文。WebGL 上下文是一个对象，它包含了 WebGL 的绘图状态和数据。我们可以通过调用 WebGLRenderingContext 方法来创建一个 WebGL 上下文。

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

接下来，我们需要创建一个着色器程序。着色器程序是一个对象，它包含了顶点着色器和片元着色器。我们可以通过调用 createProgram 方法来创建一个着色器程序。

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

gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragmentShaderSource);

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

const program = gl.createProgram();

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

然后，我们需要将着色器程序告诉 WebGL。我们可以通过调用 useProgram 方法来将着色器程序告诉 WebGL。

gl.useProgram(program);

现在，我们可以开始画点了。我们可以通过调用 drawArrays 方法来画点。drawArrays 方法的第一个参数指定要绘制的图元的类型。这里，我们指定要绘制的图元是点，所以我们传入 gl.POINTS。第二个参数指定要绘制的点的数量。这里，我们只画一个点，所以我们传入 1。

gl.drawArrays(gl.POINTS, 0, 1);

这样，我们就画了一个点！

不过，我们还看不到这个点。这是因为我们还没有告诉 WebGL 如何将点显示在屏幕上。我们需要设置视口。视口是 WebGL 绘图区域的大小和位置。我们可以通过调用 viewport 方法来设置视口。

gl.viewport(0, 0, canvas.width, canvas.height);

现在，我们就可以看到点啦！