WebGL 在 GPU 上的工作基本上分为两部分，第1部分是将顶点（或数据流）转换到裁剪空间坐标， 第2部分是基于第一部分的结果绘制像素点。
# 1.顶点着色器
一个顶点着色器的工作是生成裁剪空间坐标值，通常是以下的形式
void main() {
// 该变量的值就是裁减空间坐标值
gl_Position = doMathToMakeClipspaceCoordinates
}
在顶点着色器定义变量时前面的修饰符主要用到的是下面三个属性
attribute属性 (从缓冲中获取的数据)uniform全局变量 (在一次绘制中对所有顶点保持一致值)texture纹理 (从像素或纹理元素中获取的数据) 顶点着色器需要的数据，可以通过以下三种方式获得。
attribute 属性
最常用的方法是缓冲和属性。使用缓冲的一般流程上面已经讲过了。就是
- 创建缓冲
const buf = gl.createBuffer();
- 将数据存入缓冲
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, someData, gl.STATIC_DRAW);
- 在着色器中找到属性所在地址
const positionLoc = gl.getAttribLocation(someShaderProgram, "a_position");
- 从缓冲中获取数据传递给属性
// 开启从缓冲中获取数据
gl.enableVertexAttribArray(positionLoc);
const numComponents = 3; // (x, y, z)
const type = gl.FLOAT; // 32位浮点数据
const normalize = false; // 不标准化
const offset = 0; // 从缓冲起始位置开始获取
const stride = 0; // 到下一个数据跳多少位内存
// 0 = 使用当前的单位个数和单位长度 （ 3 * Float32Array.BYTES_PER_ELEMENT ）
gl.vertexAttribPointer(positionLoc, numComponents, type, false, stride, offset);
- 最后将数据传递给
gl_Position
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
属性可以用 float, vec2, vec3, vec4, mat2, mat3 和 mat4 数据类型。
uniform全局变量
全局变量在一次绘制过程中传递给着色器的值都一样。下面是一个用全局变量给顶点着色器添加一个偏移量的例子。
attribute vec4 a_position;
uniform vec4 u_offset;
void main() {
gl_Position = a_position + u_offset;
}
在初始化时找到全局变量的地址。
const offsetLoc = gl.getUniformLocation(someProgram, "u_offset");
在绘制前设置全局变量
gl.uniform4fv(offsetLoc, [1, 0, 0, 0]); // 向右偏移一半屏幕宽度
注意： 全局变量属于单个着色程序，如果多个着色程序有同名全局变量，需要找到每个全局变量并设置自己的值。 我们调用gl.uniform??? 的时候只是设置了当前程序的全局变量，当前程序是传递给 gl.useProgram 的最后一个程序。
全局变量有很多类型，对应的类型所对应的设置方法。
gl.uniform1f (floatUniformLoc, v); // float
gl.uniform1fv(floatUniformLoc, [v]); // float 或 float array
gl.uniform2f (vec2UniformLoc, v0, v1); // vec2
gl.uniform2fv(vec2UniformLoc, [v0, v1]); // vec2 或 vec2 array
gl.uniform3f (vec3UniformLoc, v0, v1, v2); // vec3
gl.uniform3fv(vec3UniformLoc, [v0, v1, v2]); // vec3 或 vec3 array
gl.uniform4f (vec4UniformLoc, v0, v1, v2, v4); // vec4
gl.uniform4fv(vec4UniformLoc, [v0, v1, v2, v4]); // vec4 或 vec4 array
gl.uniformMatrix2fv(mat2UniformLoc, false, [ 4x element array ]) // mat2 或 mat2 array
gl.uniformMatrix3fv(mat3UniformLoc, false, [ 9x element array ]) // mat3 或 mat3 array
gl.uniformMatrix4fv(mat4UniformLoc, false, [ 16x element array ]) // mat4 或 mat4 array
gl.uniform1i (intUniformLoc, v); // int
gl.uniform1iv(intUniformLoc, [v]); // int 或 int array
gl.uniform2i (ivec2UniformLoc, v0, v1); // ivec2
gl.uniform2iv(ivec2UniformLoc, [v0, v1]); // ivec2 或 ivec2 array
gl.uniform3i (ivec3UniformLoc, v0, v1, v2); // ivec3
gl.uniform3iv(ivec3UniformLoc, [v0, v1, v2]); // ivec3 or ivec3 array
gl.uniform4i (ivec4UniformLoc, v0, v1, v2, v4); // ivec4
gl.uniform4iv(ivec4UniformLoc, [v0, v1, v2, v4]); // ivec4 或 ivec4 array
gl.uniform1i (sampler2DUniformLoc, v); // sampler2D (textures)
gl.uniform1iv(sampler2DUniformLoc, [v]); // sampler2D 或 sampler2D array
gl.uniform1i (samplerCubeUniformLoc, v); // samplerCube (textures)
gl.uniform1iv(samplerCubeUniformLoc, [v]); // samplerCube 或 samplerCube array
一个数组可以一次设置所有的全局变量，例如
// 着色器里
uniform vec2 u_someVec2[3];
// JavaScript 初始化时
const someVec2Loc = gl.getUniformLocation(someProgram, "u_someVec2");
// 渲染的时候
gl.uniform2fv(someVec2Loc, [1, 2, 3, 4, 5, 6]); // 设置数组 u_someVec2
也可以使用下面的方法来设置数组里面的值。
// JavaScript 初始化时
const someVec2Element0Loc = gl.getUniformLocation(someProgram, "u_someVec2[0]");
const someVec2Element1Loc = gl.getUniformLocation(someProgram, "u_someVec2[1]");
const someVec2Element2Loc = gl.getUniformLocation(someProgram, "u_someVec2[2]");
// 渲染的时候
gl.uniform2fv(someVec2Element0Loc, [1, 2]); // set element 0
gl.uniform2fv(someVec2Element1Loc, [3, 4]); // set element 1
gl.uniform2fv(someVec2Element2Loc, [5, 6]); // set element 2
当我们使用结构体时
struct SomeStruct {
bool active;
vec2 someVec2;
};
uniform SomeStruct u_someThing;
...
const someThingActiveLoc = gl.getUniformLocation(someProgram, "u_someThing.active");
const someThingSomeVec2Loc = gl.getUniformLocation(someProgram, "u_someThing.someVec2");
texture纹理
跟下面片元着色器中的一样。
# 2.片元着色器
一个片段着色器的工作是为当前光栅化的像素提供颜色值，通常是以下的形式。
precision mediump float;
void main() {
gl_FragColor = doMathToMakeAColor;
}
每个像素都将调用一次片段着色器，每次调用需要从你设置的特殊全局变量 gl_FragColor中获取颜色信息。
片段着色器所需的数据，可以通过以下三种方式获取。
uniform全局变量 (对于单个绘制调用的每个像素保持相同的值)texture纹理 (数据来源于像素)varying可变量 (数据来源于差值过的顶点着色器)。
uniform全局变量（片元着色器中）
跟点元着色器中的全局变量一样。
texture纹理 在着色器中获取纹理信息，可以先创建一个sampler2D类型全局变量，然后用GLSL方法texture2D从纹理中提取信息。
precision mediump float;
uniform sampler2D u_texture;
void main() {
vec2 texcoord = vec2(0.5, 0.5); // 获取纹理中心的值
gl_FragColor = texture2D(u_texture, texcoord);
}
下面是使用纹理的一般步骤。
- 创建纹理
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
const level = 0;
const width = 2;
const height = 1;
const data = new Uint8Array([
255, 0, 0, 255, // 一个红色的像素
0, 255, 0, 255, // 一个绿色的像素
]);
gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
- 找到全局变量的地址
const someSamplerLoc = gl.getUniformLocation(someProgram, "u_texture");
- 绑定并激活纹理
const unit = 5; // 挑选一个纹理单元
gl.activeTexture(gl.TEXTURE0 + unit);
gl.bindTexture(gl.TEXTURE_2D, tex);
- 将数据传递给着色器
gl.uniform1i(someSamplerLoc, unit);
varying可变量
可变量是一种顶点着色器给片段着色器传值的方式。为了使用可变量，要在两个着色器中定义同名的可变量。
// 点元着色器
attribute vec4 a_position;
uniform vec4 u_offset;
varying vec4 v_positionWithOffset;
void main() {
gl_Position = a_position + u_offset;
v_positionWithOffset = a_position + u_offset;
}
// 片元着色器
precision mediump float;
varying vec4 v_positionWithOffset;
void main() {
// 从裁剪空间 (-1 <-> +1) 转换到颜色空间 (0 -> 1).
vec4 color = v_positionWithOffset * 0.5 + 0.5;
gl_FragColor = color;
}
# 3. 着色器的工作原理
WebGL在GPU上的工作基本上分为两部分，第一部分是将顶点（或数据流）转换到裁剪空间坐标， 第二部分是基于第一部分的结果绘制像素点。
# 3.1 点元着色器的工作原理
顶点着色器代码
attribute vec3 a_position;
uniform vec4 u_matrix;
void main() {
gl_Position =u_matrix * a_position + u_offset;
}
WebGL 渲染代码
const primitiveType = gl.TRIANGLES;
const offset = 0;
const count = 9;
gl.drawArrays(primitiveType, offset, count);
这里的9表示 处理9个顶点，所以将会有9个顶点被转换。下面是处理顶点的示意图。(图片来自官网)
着色器中的代码在绘制每个顶点的时候都会被调用一次。顶点在顶点着色器中被处理后会被保存到 gl_Position变量中， 这个变量就是该顶点转换到裁剪空间中的坐标值，GPU 接收该值并将其保存起来。
# 3.2 片元着色器的工作原理
在片段着色器中有一个变量 gl_FragColor 用来设置顶点的颜色，一般情况下我们都只会给每个顶点设置颜色，而其它非顶点位置的颜色是怎么来的呢？
这是因为顶点传递到片元着色器后，会转换成像素，其它非顶点像素的颜色都是通过顶点颜色差值生成的。颜色差值的主要原理可以看下下面的图片。差值的动态过程 (opens new window)
如果我们像实现颜色的自定义，就需要使用变量 varing,来将在点段着色器中的 颜色值传递给片元着色器中。
注意：颜色必须从点元着色器中通过变量 attribute 去接收，最后通过 varying 传递给 片元着色器。
<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec4 a_color;
uniform mat3 u_matrix;
varying vec4 v_color;
void main() {
// Multiply the position by the matrix.
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
// Copy the color from the attribute to the varying.
v_color = a_color;
}
</script>
<script id="fragment-shader-2d" type="x-shader/x-fragment">
precision mediump float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
</script>
# 4.着色器中的细节梳理
# 4.1 关于buffer和attribute的代码是干什么的？
缓冲操作是在 GPU 上获取顶点和其他顶点数据的一种方式。一般会通过下面的三部曲来完成缓冲数据的初始化操作，这些操作一般在初始化完成。
创建一个缓冲
const colorBuffer = gl.createBuffer()
设置缓冲为当前使用缓冲
// 将gl.ARRAY_BUFFER与colorBuffer版定
gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer)
将数据拷贝到缓冲
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(
[ Math.random(), Math.random(), Math.random(), 1,
Math.random(), Math.random(), Math.random(), 1,
Math.random(), Math.random(), Math.random(), 1,
Math.random(), Math.random(), Math.random(), 1,
Math.random(), Math.random(), Math.random(), 1,
Math.random(), Math.random(), Math.random(), 1]),
gl.STATIC_DRAW)
一旦数据存到缓冲中，还需要告诉 WebGL 怎么从缓冲中提取数据传给顶点着色器的属性。这一步一般也是在初始化部分完成。
询问顶点数据应该放在哪里，是数据通过属性传到GPU的一个桥梁，获取属性的地址
// 询问顶点数据应该放在哪里
const positionLocation = gl.getAttribLocation(program, "a_position");
const colorLocation = gl.getAttribLocation(program, "a_color");
一旦知道了属性的地址，在绘制前还需要发出三个命令。
打开
colorLocation的缓冲通道
// Turn on the attribute 打开location的缓冲通道
gl.enableVertexAttribArray(colorLocation);
绑定缓冲区
// 告诉我们WebGL我们想从缓冲中提供数据
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
告诉颜色属性如何从
colorBuffer中提取数据(ARRAY_BUFFER)
const size = 4; // 每次迭代使用四个单位数据
const type = gl.UNSIGNED_BYTE; // 数据类型是8位的 UNSIGNED_BYTE 类型。
const normalize = true; // 标准化数据
const stride = 0; // 0 = 移动距离 * 单位距离长度sizeof(type)
// 每次迭代跳多少距离到下一个数据
const offset = 0; // 从缓冲的起始处开始
gl.vertexAttribPointer(
colorLocation, size, type, normalize, stride, offset)
# 4.2 vertexAttribPointer 中的 normalizeFlag 参数是什么意思？
标准化标记（normalizeFlag）适用于所有非浮点型数据。如果传递 false 就解读原数据类型。 BYTE 类型的范围是从 -128 到 127，UNSIGNED_BYTE 类型的范围是从 0 到 255， SHORT 类型的范围是从 -32768 到 32767，等等...
如果标准化标记设为 true，BYTE 数据的值(-128 to 127)将会转换到 -1.0 到 +1.0 之间， UNSIGNED_BYTE (0 to 255) 变为 0.0 到 +1.0 之间，SHORT 也是转换到 -1.0 到 +1.0 之间， 但比 BYTE 精确度高。
最常用的是标准化颜色数据。大多数情况颜色值范围为 0.0 到 +1.0。 使用4个浮点型数据存储红，绿，蓝和阿尔法通道数据时，每个顶点的颜色将会占用16字节空间， 如果你有复杂的几何体将会占用很多内存。代替的做法是将颜色数据转换为四个 UNSIGNED_BYTE ， 其中 0 表示 0.0，255 表示 1.0。现在每个顶点只需要四个字节存储颜色值，省了 75% 空间。
// 告诉颜色属性如何从colorBuffer中提取数据 (ARRAY_BUFFER)
const size = 4; // 每次迭代使用四个单位数据
const type = gl.UNSIGNED_BYTE; // 数据类型是8位的 UNSIGNED_BYTE 类型。
const normalize = true; // 标准化数据
const stride = 0; // 0 = 移动距离 * 单位距离长度sizeof(type)
// 每次迭代跳多少距离到下一个数据
const offset = 0; // 从缓冲的起始处开始
gl.vertexAttribPointer(
colorLocation, size, type, normalize, stride, offset);
// 给矩形的两个三角形
// 设置颜色值并发到缓冲
function setColors(gl) {
// 设置两个随机颜色
const r1 = Math.random() * 256; // 0 到 255.99999 之间
const b1 = Math.random() * 256; // 这些数据
const g1 = Math.random() * 256; // 在存入缓冲时
const r2 = Math.random() * 256; // 将被截取成
const b2 = Math.random() * 256; // Uint8Array 类型
const g2 = Math.random() * 256;
gl.bufferData(
gl.ARRAY_BUFFER,
new Uint8Array( // Uint8Array
[ r1, b1, g1, 255,
r1, b1, g1, 255,
r1, b1, g1, 255,
r2, b2, g2, 255,
r2, b2, g2, 255,
r2, b2, g2, 255]),
gl.STATIC_DRAW);
}
WebGL的执行流程图 (opens new window)