声明webGL程序步骤

• 设置canvas绘图上下文为webGL环境

const gl = canvas.getContext('webgl')

• 创建着色器（主要是顶点着色器与片面着色器）
• 指定清空绘图区的颜色（例如需要清空当前绘图区，在之前需要指定清空后的背景色，则执行清空操作后绘图区以该颜色为背景色）

gl.clearColor(0.0, 0.0, 0.0, 1.0); // 黑色

• 清空（gl.COLOR_BUFFER_BIT表示颜色缓冲区，webgl中清除了颜色缓冲区就会webgl清空页面上canvas的区域）

gl.clear(gl.COLOR_BUFFER_BIT)

• 绘制

着色器

webgl中绘制图形必须要使用着色器

• 顶点着色器（vertex shader）顶点着色器是用来描述顶点特性（位置、颜色等）的程序，顶点（vertex）是指二维或三维空间的的一个点，如二维或三维图形的端点或交点。
• 片面着色器（fragment shader）进行逐片元处理过程的程序。片元是webgl中的术语，可以理解为像素。

着色器变量

目的：为了javascript语言可以通过相关的WebGL API把一些数据传递给着色器

关键字(变量类型)	数据传递	声明变量
attribute	javascript——>顶点着色器	声明顶点数据变量
uniform	javascript——>顶点、片元着色器	声明非顶点数据变量
varying	顶点着色器——>片元着色器	声明需要插值计算的顶点变量

创建着色器

// 顶点着色器
const VSHADER_SOURCE = `
  // glsl语言
  attribute vec4 a_Position; // 通过设置attribute变量则可以通过js传数据给着色器
  void main() {
    gl_Position = a_Position; // 设置坐标
    gl_PointSize = 10.0; // 设置尺寸
  }
`;

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

// webgl创建着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, VSHADER_SOURCE);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, FSHADER_SOURCE);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;
// 这里是通过设置的attribute变量a_Position，传输数据给着色器
const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

向着色器传值 (分量值)

• gl.vertexAttrib1f(location, v0)相当于赋值成vec4(v0, 0.0, 0.0, 1.0)
• gl.vertexAttrib2f(location, v0, v1)相当于赋值成vec4(v0, v1, 0.0, 1.0)
• gl.vertexAttrib3f(location, v0, v1, v2)相当于赋值成vec4(v0, v1, v2, 1.0)
• gl.vertexAttrib4f(location, v0, v1, v2, v3)相当于赋值成vec4(v0, v1, v2, v3)

向着色器传值 (失量值，已数组的形式传入)

// 有四种，参数同上 vertexAttrib1fv() vertexAttrib2fv() vertexAttrib3fv() vertexAttrib4fv()
const position = new Float32Array([1.0, 2.0, 3.0, 1.0])
gl.vertexAttrib4fv(location, position)

绘制操作

// 清空canvas绘图区并设置成黑色背景
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制图形，这里绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);