本文会把WebGL工作的具体流程梳理一遍，WebGL到底是如何渲染出一个三角形的。我们常说把大象装进冰箱需要三步，那么写一个WebGL程序应该也只需要三步：1、把数据放入缓冲区，2、把缓冲区的数据给着色器，3、着色器把数据给GPU。

下面是梳理的一个WebGL程序的大致流程图：

创建WebGL上下文

一切的前提那一定是WebGL上下文了。

<canvas id="canvas-gl" width="512" height="512"></canvas>

function main(){    const canvas = document.getElementById('canvas-gl')    const gl = canvas.getContext("webgl")    if(!gl)return    gl.viewport(0, 0, canvas.width, canvas.height)    gl.clearColor(1.0, 1.0, 1.0, 1.0)}

在创建WebGL上下文后，紧接着又用gl.viewport()函数设置了视口，前两个参数表示视口左下角距画布左下角的偏移量，后面两个是视口的宽和高。这里把视口的大小和canvas的大小设为一样。

举个