WebGL初识

WebGL概述

WebGL，是一项用来在网页上绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。WebGL通过JavaScript操作OpenGL接口的标准，把三维空间图像显示在二维的屏幕上。

WebGL程序的结构

相对于传统网页，支持WebGL的浏览器底层接入了OpenGL/OpenGL ES标准，WebGL通过实现标准支持着色器语言编程语言GLSL ES，在我们实际开发过程中，GLSL ES通常是以字符串的形式存在JavaScript中，我们可以通过JavaScript修改GLSL ES字符串来改变着色器程序。

WebGL和OpenGL

OpenGL是一种用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，是在个人计算机上使用最广泛的两种三维图形渲染技术之一，另一种是Direct3D。在某种意义上，WebGL就是“Web版的OpenGL”。
OpenGL ES在添加新特性的同时从OpenGL中移除了许多陈旧无用的旧特性，使得在保持轻量级的同时，仍然具有足够的能力来渲染出精美的三维图形。
WebGL的技术规范继承自OpenGL ES，从2.0版本开始，OpenGL支持可编程着色器方法，这个支持可以让我们通过着色器语言编写着色器程序。

着色器语言

着色器是WebGL依赖的实现图像渲染的一种绘图机制。WebGL在GPU中运行，因此需要使用能够在GPU上运行的代码，这样的代码需要提供成对的方法，他们分别是顶点着色器和片元着色器，可以简单理解为一个定位置一个添颜色。

顶点着色器

顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。

//顶点着色器
const VERTEX_SHADER_SOURCE = `
	// 所有着色器都有一个main方法
	void main() {
	  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);//设置坐标
	  gl_PointSize = 10.0;//设置尺寸
	}  
`

其中，gl_Position和gl_PointSize是着色器的内置变量，分别代表顶点的位置和大小，因此这段代码的作用是设置顶点的位置和大小。
在着色器内，一般命名以gl_开头的变量是着色器的内置变量。

片元着色器

片段着色器的作用是计算出当前绘制图元中每个像素的颜色值，逐片元控制片元的颜色和纹理等渲染。

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

内置变量gl_FragColor来确定顶点像素颜色，vec4是一个四维向量，用来表示一个 RGBA 颜色值，它与 CSS 的颜色区别是，CSS 的 RGB 值是 0 到 255，Alpha 值是 0 到 1，但是在着色器里面，RGBA 的值都是从 0 到 1。

webGL绘制一个点

webgl会有大量的重复性前置工作，也就是创建着色器 -> 传入着色器代码 -> 编译着色器 -> 创建着色器程序 -> 绑定、连接、启用着色器 -> 进行绘制。

创建着色器的代码一般封装好了直接调用就行，如下所示：

//gl代表渲染上下文，VERTEX_SHADER_SOURCE代表顶点着色器代码，FRAGMENT_SHADER_SOURCE代表片元着色器代码
function initShader (gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {