Cocos Shader 基础入门（一）：WebGL 着色器与 GLSL 着色器语言基础

在 Cocos Shader 开始之前，我会先介绍一些 Shader 基础知识，从最浅显的部分开始，揭开 Shader 的神秘面纱。本次讲解采用的渲染引擎是 WebGL，首先来了解一些渲染管线知识。

在介绍 WebGL 之前先来了解一些前置知识，也就是 CPU 和 GPU。

CPU 和 GPU 都属于处理单元，但是结构不同。形象来说，CPU 有点像大型的传输管道，等待处理的任务只能依次通过，所以 CPU 处理任务的速度取决于处理单个任务的时间。又由于 CPU 内部结构异常复杂，能够处理大量的数据和逻辑判断，所以处理一些大型任务是足够的。但是处理图像却不在行，因为处理图像的逻辑通常不复杂，但是由于一幅图像是有成千上万的像素点构成，每个像素的处理都是一个任务，如果由 CPU 处理，那简直就是大材小用。因此就需要用到 GPU。GPU 由大量的小型处理单元构成，处理能力没 CPU 强大，但胜在数量多，并且能够并行处理。

在渲染过程中需要 CPU 和 GPU 之间的通力合作。CPU 如同进货的卡车不断地将要处理的数据丢给 GPU，GPU 工厂调动一个个如工人一般的计算单元对这些数据进行简单的处理，最后组装出产品——图像。

WebGL 是一种 3D 绘图标准，它的本质是 JavaScript 操作 OpenGL 接口，所以 WebGL 是在 OpenGL 的基础上做了一层封装，底层本质还是 OpenGL。利用 WebGL 可以根据你的代码绘制出点、线和三角形。任何复杂的场景都可以组合使用点、线和三角形实现。WebGL 运行在 GPU 中，因此需要使用能够在 GPU 上运行的程序。这样的程序需要成对提供，每对方法中都包含一个顶点着色器和一个片断着色器，并且使用 GLSL 语言（GL 着色语言）编写。每对组合起来称作一个 program（着色程序）。

在 WebGL 中，任何事物都处于 3D 空间中，但最终输出呈现给观众的往往是屏幕或者窗口这种 2D 像素，因此，在渲染引擎底层大部分工作都是把 3D 坐标转变成适应屏幕的 2D 像素。3D 坐标转 2D 的处理过程是由 WebGL 的图形渲染管线处理，它的主要传输流程分为两步：

这两个流程又被划分为几个阶段处理，每个阶段都会把前一个阶段的输出作为输入。

如上图所见，图形渲染管线包含多个阶段，在转换顶点数据到最终像素的这个过程中，每个阶段都将处理各自的职责部分。接下来，简单介绍管线各个阶段的功能：

可以看出，图形渲染管线非常复杂，简单总结一下：WebGL 在 GPU 上的工作基本上分为两部分，第一部分是将顶点数据转换到裁剪空间坐标， 第二部分是基于第一部分的结果绘制像素点。接下来，我们一步步实践，加深对这块的理解。

GLSL 是为图形计算量身定制的，它包含一些针对向量和矩阵操作的特性。一个着色器通常包含输入输出变量、uniform 和 main 函数。每个着色器的入口都是 main 函数，在 main 函数中处理所有输入变量，并将结果输出到输出变量中。

一个常见顶点/片段着色器如下：

// 顶点着色器

// 输入属性 attribute 变量类型 vec4 变量名 a_position
attribute vec4 a_position;
attribute vec2 a_uv;
attribute vec4 a_color;

// 输入输出属性
varying vec4 v_color;
varying vec2 v_uv;

// 每一个着色器都有 main 函数，这是与 WebGL 对接的接口
void main() {
    // 基础赋值语句
    v_color = a_color;
    v_uv = a_uv;
    // 内置变量 gl_Position
    gl_Position = a_position;
}

// 片段着色器

// lowp 精度
varying lowp vec4 v_color;
varying highp vec2 v_uv;

uniform sampler2D mainTexture;

void main(void) {
    vec4 o = texture2D(mainTexture, v_uv);
    o *= v_color
    gl_FragColor = o;
}

此处会列举一些变量、修饰符和常见用法，更多使用方式可以参考下方的 GLSL 详解（基础篇），里面的内容写的还是很详细的，当然，有条件的同学可以直接上 GLSL 官网文档查看。

常用的几种使用方式如下：

// 标量
float myFloat = 1.0；
bool myBool = bool(myFloat); // float -> bool

// 向量
vec4 myVec4 = vec4(1.0); // myVec4 = {1.0, 1.0, 1.0, 1.0}
vec2 myVec2 = vec2(1.0, 0.5);  // myVec2 = {1.0, 0.5}
vec2 temp = vec2(myVec2); // temp = {1.0, 0.5}
myVec4 = vec4(myVec2, temp, 0.0);
// 向量和矩阵的计算是逐分量进行的，因此，也可以采用下面这两个个方法
vec3 myVec3a = myVec2.xyx; // 通过分量访问符 myVec3a = {1.0, 0.5, 1.0}
vec3 myVec3b = vec3(myVec2[0], myVec2[1], myVec2[2]); // 通过数组 myVec3b = {1.0, 0.5, 1.0}

// 矩阵
mat3 myMat3 = mat3(1.0, 0.0, 0.0,  // 第一列
                   0.0, 1.0, 0.0,  // 第二列
                   0.0, 1.0, 1.0); // 第三列
mat4 myMat4 = mat4(1.0) // myMat4 = {1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0}

// 向量、标量和矩阵的交互使用
vec3 v, u;
float f;
v = u + f;
// 等价于 v.x = u.x + f;
// v.y = u.y + f;
// v.z = u.z + f;

mat3 m;
u = v * m; 
// 等价于 u.x = m[0].x * v.x + m[1].x * v.y + m[2].x * v.z;
// u.y = m[0].y * v.x + m[1].y * v.y + m[2].y * v.z;
// u.z = m[0].z * v.x + m[1].z * v.y + m[2].z * v.z;

2.1  存储限定符

使用方法：

attribute vec4 a_position;
varying vec4 v_color;

2.2  参数限定符

vec4 myFunc(inout float myFloat, // 输入输出参数
            out vec4 myVec4,   // 输出
            mat4 myMat4);    // 输入参数

2.3  精度限定符

使用方法：

// 预先声明
precision highp float;
precision mediump int;

// 指定变量声明
varying lowp vec4 v_color;

在 WebGL 上，大多数元素都可以用状态来描述，比如：是否启用了光照、是否启用了纹理、是否启用了混合、是否启用了深度测试等。通常 WebGL 会执行默认状态，除非我们调用相关接口改变它，比如：gl.Enablexxx 或者 gl.Disablexxx。

WebGL 需要依赖 canvas 这个载体获取对应的绘图上下文，通过绘图上下文调用相对应的绘图 API，包括上面提到的各种状态切换。每一个对象的绘制，都需要先设置一系列状态值，然后通过调用 "gl.drawArrays" 或 "gl.drawElements" 运行一个着色方法对，使得你的着色器对能够在 GPU 上运行。WebGL 渲染上下文创建如下：

// 定义一个 canvas 元素
var gl = canvas.getContext("webgl");
if(!gl){
    // 你不能使用 WebGL
}

本章到此主要介绍一些 WebGL 的基础知识，包括渲染管线流程、渲染使用语言等。下一章开始介绍绘制流程，重点内容包括顶点着色器和片元着色器的作用。

往期精彩