javascript七基础学习系列一千四百七十三：GLSL 100 升级到GLSL 300

WebGL2 的主要变化是升级到了GLSL 3.00 ES 着色器。这个升级暴露了很多新的着色器功能，包括3D
纹理等在支持OpenGL ES 3.0 的设备上都有的功能。要使用升级版的着色器，着色器代码的第一行必须是：
#version 300 es
这个升级需要一些语法的变化。
 顶点attribute 变量要使用in 而不是attribute 关键字声明。
 使用varying 关键字为顶点或片段着色器声明的变量，现在必须根据相应着色器的行为改为使
用in 或out。
 预定义的输出变量gl_FragColor 没有了，片段着色器必须为颜色输出声明自己的out 变量。
 纹理查找函数texture2D 和textureCube 统一成了一个texture 函数。
绘图
WebGL 只能绘制三种形状：点、线和三角形。其他形状必须通过这三种基本形状在3D 空间的组合
来绘制。WebGL 绘图要使用drawArrays()和drawElements()方法，前者使用数组缓冲区，后者则
操作元素数组缓冲区。
drawArrays()和drawElements()的第一个参数都表示要绘制形状的常量。下面列出了这些常量。
 gl.POINTS：将每个顶点当成一个点来绘制。
 gl.LINES：将数组作为一系列顶点，在这些顶点间绘制直线。每个顶点既是起点也是终点，因
此数组中的顶点必须是偶数个才能开始绘制。
 gl.LINE_LOOP：将数组作为一系列顶点，在这些顶点间绘制直线。从第一个顶点到第二个顶点
绘制一条直线，再从第二个顶点到第三个顶点绘制一条直线，以此类推，直到绘制到最后一个
顶点。此时再从最后一个顶点到第一个顶点绘制一条直线。这样就可以绘制出形状的轮廓。
 gl.LINE_STRIP：类似于gl.LINE_LOOP，区别在于不会从最后一个顶点到第一个顶点绘制直线。
 gl.TRIANGLES：将数组作为一系列顶点，在这些顶点间绘制三角形。如不特殊指定，每个三角
形都分开绘制，不共享顶点。
 gl.TRIANGLES_STRIP：类似于gl.TRIANGLES，区别在于前3 个顶点之后的顶点会作为第三
个顶点与其前面的两个顶点构成三角形。例如，如果数组中包含顶点A、B、C、D，那么第一个
三角形使用ABC，第二个三角形使用BCD。
 gl.TRIANGLES_FAN：类似于gl.TRIANGLES，区别在于前3 个顶点之后的顶点会作为第三个
顶点与其前面的顶点和第一个顶点构成三角形。例如，如果数组中包含顶点A、B、C、D，那么
第一个三角形使用ABC，第二个三角形使用ACD。
以上常量可以作为gl.drawArrays()方法的第一个参数，第二个参数是数组缓冲区的起点索引，
第三个参数是数组缓冲区包含的顶点集合的数量。以下代码使用gl.drawArrays()在画布上绘制了一
个三角形：
// 假设已经使用本节前面的着色器清除了视口
// 定义3 个顶点的x 坐标和y 坐标
let vertices = new Float32Array([ 0, 1, 1, -1, -1, -1 ]),
buffer = gl.createBuffer(),
vertexSetSize = 2,
vertexSetCount = vertices.length/vertexSetSize,
uColor,
aVertexPosition;
// 将数据放入缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 给片段着色器传入颜色
uColor = gl.getUniformLocation(program, “uColor”);
gl.uniform4fv(uColor, [ 0, 0, 0, 1 ]);
// 把顶点信息传给着色器
aVertexPosition = gl.getAttribLocation(program, “aVertexPosition”);
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, vertexSetSize, gl.FLOAT, false, 0, 0);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, vertexSetCount);
这个例子定义了一个Float32Array 变量，它包含3 组两个点的顶点。完成计算的关键是跟踪顶
点大小和数量。将vertexSetSize 的值指定为2，再计算出vertexSetCount。顶点信息保存在了缓
冲区。然后把颜色信息传给片段着色器。
接着给顶点着色器传入顶点集的大小，以及表示顶点坐标数值类型的gl.FlOAT。第四个参数是一
个布尔值，表示坐标不是标准的。第五个参数是步长值（stride value），表示跳过多个数组元素取得下一
个值。除非真要跳过一些值，否则就向这里传入0 即可。最后一个参数是起始偏移量，这里的0 表示从
第一个数组元素开始。
最后一步是使用gl.drawArrays()把三角形绘制出来。通过把第一个参数指定为gl.TRIANGLES，
就可以从(0, 1)到(1, –1)再到(–1, –1)绘制一个三角形，并填充传给片段着色器的颜色。第二个参数表示缓
冲区的起始偏移量，最后一个参数是要读取的顶点数量。
通过改变gl.drawArrays()的第一个参数，可以修改绘制三角形的方式。