WebGL第一步

什么是WebGL？

WebGL使用了GLSL ES(OpenGL ES)着色器语言，通过配合调用js相关的绘制接口来实现3D效果。

采用页面中的<canvas>元素来定义绘图区域，canvas支持三维图形的绘制，但它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形。

绘制流程

获取画布canvas和3D绘制上下文

var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');

具体的参数可以参考这里：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext

编写顶点着色器和片段着色器

// 着色器是字符串形式的glsl代码
var VSHADER_SOURCE = "...";
var FSHADER_SOURCE = "...";

编译着色器并提交到GPU

1.创建Shader对象

createShader方法，需要传递参数指明是顶点着色器还是片段着色器；

2.将写好的着色器附加到Shader上

shaderSource方法，可以指定着色器代码添加到指定的Shader上；

3.编译着色器

compileShader方法，可以将附加了着色器的shader对象进行编译；

4.创建程序对象

createProgram方法，可以创建一个程序对象，一个可用的WebGLProgram对象由两个编译过后的WebGLShader组成，即顶点着色器和片段着色器；

5.添加着色器

attachShader方法，可以把一个编译好的着色器对象添加到一个程序对象上；

6.连接程序对象

linkProgram方法，连接一个程序对象，连接之后的程序对象可以使用；

7.使用程序对象

useProgram方法，设定一个程序对象为当前使用的程序对象；

8.调用绘制方法继续绘制

根据需要调用对应的方法进行绘制；

示例代码点击这里；

绘制三角形

绘制图像需要向GPU传递多个顶点，WebGL提供了一种很方便的机制，缓冲区对象（buffer object），它是WebGL系统中的一块内存区域，它可以一次性向着色器传入多个顶点的数据，然后将这些数据保存在其中，供顶点着色器使用。

绘制图像除了要完成上面说的步骤之外，还有下面的步骤需要完成：

1.使用缓冲区对象向GPU传入多个顶点数据

创建缓冲区对象

createBuffer方法，创建缓冲区对象；

将缓冲区对象绑定到目标

bindBuffer方法，绑定缓冲区对象，同时表明缓冲区的类型，如下：

• gl.ARRAY_BUFFER: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
• gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的Buffer。

向缓冲区写入数据

bufferData方法，需要表明缓冲数据的类型，同上，还要表明数据是否会变动，如下：

• gl.STATIC_DRAW: 缓冲区的内容可能经常使用，而不会经常更改。内容被写入缓冲区，但不被读取。
• gl.DYNAMIC_DRAW: 缓冲区的内容可能经常被使用，并且经常更改。内容被写入缓冲区，但不被读取。
• gl.STREAM_DRAW: 缓冲区的内容可能不会经常使用。内容被写入缓冲区，但不被读取。

获取属性下标位置

getAttribLocation方法，获取指定属性的下标；

将缓冲区对象分配给指定的名称变量

vertexAttribPointer方法，会告知到GPU的属性怎么获取传入的数据，参数分别如下：

• 第一个参数：指定待分配attribute变量的存储位置
• 第二个参数：指定缓存区中每个顶点的分量个数（1~4）
• 第三个参数：类型有，gl.UNSIGNED_BYTE无符号字节，gl.SHORT短整数，gl.UNSIGNED_SHORT无符号短整数，gl.INT整型，gl.UNSIGNED_INT无符号整型，gl.FLOAT浮点型。
• 第四个参数：表示是否将非浮点型的数据归到[0,1][-1,1]区间
• 第五个参数：相邻两个顶点的字节数。默认为0
• 第六个参数：表示缓存区对象的偏移量（以字节为单位），就是attribute变量从缓冲区中的何处开始存储。

开启attribute变量

enableVertexAttribArray方法，就是开启指定的变量，使缓存区对attribute变量分配生效，以便顶点着色器能够访问缓冲区内的数据。

2.着色器获取外部传入的数据

使用attribute定义的属性都是可以接收外部传入的数据的属性，接收到的数据可以直接在着色器中使用；

attribute vec4 a_Position;

void main() {
gl_Position = a_Position;
}

3.绘制图像

drawArrays方法，用来绘制图像，参数分别如下：

第一个参数：绘制类型

• 点 gl.POINTS 一系列点，绘制v0,v1……。
• 线段 gl.LINES 一系列单独的线段，绘制（v0,v1）,(v2,v3)……如果是奇数，最后一个省略。
• 线条 gl.LINE_STRIP 一系列连接的线段，绘制（v0,v1）,(v1,v2),(v2,v3)……除了第一个和最后一个，其他的点点即是起点又是终点。
• 回路 gl.LINE_LOOP 一系列连接的线段，绘制（v0,v1）,(v1,v2),(v2,v3)……（vn,v0），最后一个点会连接起点。

三角形 gl.TRIANGLES 一系列单独的三角形，绘制（v0,v1,v2）,（v3,v4,v5）……如果不是3的倍数，剩下的将会被忽略。

三角带 gl.TRIANGLES_STRIP 一系列连接的三角形，绘制（v0,v1,v2）,（v2,v1,v3）,（v2,v3,v4）……以此类推，第二个是（v2,v1,v3）而不是（v1,v2,v3）是为了保持绘制按照逆时针绘制

第二个参数：开始绘制的顶点索引

第三个参数：绘制的顶点数量

示例代码点击这里；

矩阵转换

我们希望修改传输到GPU中的顶点的位置时（比如放大缩小旋转等），需要从外部传入一个矩阵来进行运算，外部传入的矩阵是一个包含16个数字的带数据类型的数组对象；

关于矩阵的相关教程可以看这里；

1.先在代码中定义好需要参与运算的矩阵：

// 控制缩放的矩阵
var Sx = 1.5; Sy = 1.5; Sz = 1.0;
var xformMatrix = new Float32Array([
Sx, 0.0, 0.0, 0.0,
0.0, Sy, 0.0, 0.0,
0.0, 0.0, Sz, 0.0,
0.0, 0.0, 0.0, 1.0
]);

2.将矩阵数据传入GPU：

uniformMatrix4fv方法，传输到GPU，参数如下：

• 第一个参数：代表uniform变量的存储位置；
• 第二个参数：在WebGL中指定为false；
• 第三个参数：待传输的类型化数组；

代码如下：

// 获取矩阵变量的下标
var u_xformMatarix = gl.getUniformLocation(shaderProgram, 'u_xformMatarix');
// 提交矩阵数据到GPU
gl.uniformMatrix4fv(u_xformMatarix, false, xformMatrix);

3.在着色器中获取矩阵并进行运算

attribute vec4 a_Position;
uniform mat4 u_xformMatarix;

void main() {
// 设置坐标
gl_Position = u_xformMatarix * a_Position;
}

示例代码点击这里；

设定颜色

我们可以通过顶点数据向着色器添加颜色信息。

1.为顶点数据添加颜色的信息

//顶点坐标和颜色
var vertices = new Float32Array([
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
]);

2.编写着色器

颜色是在片段着色器中处理的，但是顶点数据只在顶点着色器中可以使用，所以我们需要将顶点着色器中的部分数据传递到片段着色器中，使用varying定义的属性可以将顶点着色器中的数据传递到片段着色器中；

// 顶点着色器
attribute vec4 a_Position;
attribute vec4 a_Color;
// 声明需要传递到片段着色器的属性
varying vec4 v_Color;

void main() {
// 设置坐标
gl_Position = a_Position;
// 传递颜色数据
v_Color = a_Color;
}


// 片段着色器
// 必须在片段着色器中为float指定一个默认精度
precision mediump float;
// 声明从顶点着色器接收数据的属性
varying vec4 v_Color;

void main() {
gl_FragColor = v_Color;
}

3.设置传递的数据规则

//获取单个字节
var FSIZE = vertices.BYTES_PER_ELEMENT;

//获取坐标点
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);

//连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position);

//获取Color坐标点
var a_Color = gl.getAttribLocation(shaderProgram, 'a_Color');

//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);

//连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Color);

示例代码点击这里；

绘制图片

这里我们看看怎么使用webgl来绘制图片；

1.加载图片

通过创建Image对象，可以动态加载指定的图片，保存这个Image对象，后期直接使用这个对象提交到GPU即可；

2.提交到GPU

//对纹理图像进行Y轴反转，因为WebGL纹理坐标系统的t轴（分为t轴和s轴）的方向和图片的坐标系统Y轴方向相反。因此将Y轴进行反转。
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

//开启0号纹理单元，WebGL通过纹理单元的机制来同时使用多个纹理，gl.TEXTURE0~gl.TEXTURE7是管理纹理图像的8个纹理单元
gl.activeTexture(gl.TEXTURE0);

//向target绑定纹理对象
gl.bindTexture(gl.TEXTURE_2D, texture);

//配置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

//配置纹理图像
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

//获取u_Sampler的存储位置
var u_Sampler = gl.getUniformLocation(shaderProgram, 'u_Sampler');

//将0号纹理图像传递给着色器
gl.uniform1i(u_Sampler, 0);

// 清空 <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制矩形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);

3.UV坐标

Webgl中，是使用UV坐标来标记图像的采样点，UV的详情点击这里；

4.着色器修改

// 顶点着色器
attribute vec4 a_Position;
attribute vec2 a_TextCoord;
varying vec2 v_TexCoord;

void main() {
// 设置坐标
gl_Position = a_Position;
// 传递uv坐标
v_TexCoord = a_TextCoord;
}

// 片段着色器
precision mediump float;
// 声明采样器
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;

void main() {
// 设置颜色，通过采样获得指定坐标的颜色
gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}

示例代码点击这里；

drawArrays和drawElements

我们之前是提交顶点数据，然后通过drawArrays来绘制三角形，我们知道一个矩形是由两个三角形组合而成的，所以可以用下面的两种方式来进行绘制：

// 3个顶点为一组进行绘制，绘制一个矩形需要6个点
gl.drawArrays(gl.TRIANGLES, 0, 6);

// 传入4个顶点，按照（v0,v1,v2）,（v2,v1,v3）,（v2,v3,v4）...的顺序进行绘制
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

这里，第一种方法，会导致大量的重复顶点数据存在，第二种方法，虽然可以节省顶点数据，但是是规定好的顺序，不够自由；

为了解决这个问题，WebGL还引入了另外一种绘制方法drawElements，这种方法需要传递两种数据，一种是顶点数据，一种是索引数据；

顾名思义，顶点数据定义一堆不同的顶点，而索引数据定义这些顶点的绘制顺序；

1.定义索引数组

//定义索引数组
var indexDatas =
[
0, 1, 2,
2, 1, 3,
];

2.提交到GPU

//创建缓冲区对象
indexBuffer = gl.createBuffer();
//将缓冲区对象绑定到目标，并设定该缓冲区是索引缓冲
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
//向缓冲区写入数据
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexDatas), gl.STATIC_DRAW);

3.着色器代码

不需要做任何的修改；

4.提交绘制

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

• 第一个参数：绘制模式，可选：gl.LINE_LOOP、gl.LINES、gl.TRIANGLES等
• 第二个参数：绘制顶点个数
• 第三个参数：索引数据类型，gl.UNSIGNED_BYTE对应Uint8Array，gl.UNSIGNED_SHORT对应Uint16Array
• 第四个参数：从第几个点开始绘制

示例代码点击这里；