没有WebGL, js 只能在<canvas>绘制二维图形，有了WebGL, 就可以在上面绘制三维图形了
WebGL程序将加粗强调一些关键部分，包括：
WebGL如何获取<canvas>元素
HTML文件如何引入 WebGL Js 文件
简单的WebGL绘图函数
WebGL中的着色器程序
Canvas是什么
canvas （译为"画布"）作为绘画的地方， 类似地，<canvas>标签定义了网页上的绘图区域
有了<canvas> 就可以使用js(而不是画笔和颜料)绘制任何你想画的东西 <canvas>提供一些简单的绘图函数，用来绘制点、线、矩形、圆等等
着色器是什么
WebGL需要两种着色器
顶点着色器：用来描述顶点特性(如位置、颜色等)的程序
顶点是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点
片元着色器：进行逐片源处理过程如光照的程序
片元是一个WebGL术语，你可以将其理解为像素（图像的单元）
初始化着色器
图1 WebGL程序的执行过程
下图显示了辅助函数initShaders() 的执行效果，我们将在第9章研究这个函数的内部细节，现在，你只需要知道它在WebGL系统中初始化了着色器，供我们使用即可
图2 initShaders()的行为
图2中的上方图所示，WebGL系统由两部分组成，即顶点着色器和片元着色器。在初始化着色器之前，顶点着色器和片元着色器都是空白的，我们需要将字符串形式的着色器代码从js传给WebGL系统，并建立着色器，这就是initShaders()所做的事情。注意，着色器运行在WebGL系统中，而不是js程序中。
图2中的下方图展示了initShaders()执行后的情形，着色器程序以字符串的形式传给initShaders(), 然后在WebGL系统中, 着色器就建立好了并随时可以使用。如图所示，顶点着色器先执行，它对gl_Position变量和gl_PointSize变量进行复制，并将它们传入片元着色器，然后片元着色器再执行。实际上，片元着色器接收到的是经过光栅化处理后的片元值。目前可以简单理解为这两个变量从顶点着色器中被传入了片元着色器。
WebGL程序包括运行在浏览器中的JavaScript和运行在WebGL系统的着色器程序这两个部分
顶点着色器
let VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' + //设置坐标
' gl_PointSize = 10.0;\n' + //设置尺寸
'}\n';
表1 顶点着色器的内置变量
和Js不同，GLSL ES是一种强类型的编程语言，也就是说，开发者需要明确指出某个变量是某种"类型"的，通过为变量指定类型，系统就能够轻易理解变量中存储的是何种数据，进而优化处理这些数据
表2 GLSE中的数据类型
片元着色器
顶点着色器控制点的位置和大小，片元着色器控制点的颜色
// 片元着色器程序
let FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + //设置颜色
'}\n';
片元着色器将点的颜色赋值给gl_FragColor变量, 该变量是片元着色器唯一的内置变量，它控制着像素在屏幕上的最终颜色
绘制操作
建立了着色器之后，我们就需要进行绘制操作
在绘制之前，首先需要清空绘制区域，然后，我们使用gl.drawArrays()来进行绘制
