2.4 着色器 (Shaders) 和 GLSL

文档摘要

2.4 着色器 (Shaders) 和 GLSL WebGL核心概念详解：2.4 着色器 (Shaders) 与 GLSL 2.4.1 着色器 (Shaders) 的概念与作用在传统的固定功能渲染管线中，图形的渲染过程被预先定义好，开发者只能通过有限的参数进行调整。而WebGL采用的可编程渲染管线，则将渲染过程中的关键步骤开放给开发者，允许通过编写着色器程序来定制顶点处理和片元（像素）处理的逻辑。着色器本质上是用GLSL编写的小程序，运行在GPU（图形处理器）上。 WebGL主要使用两种类型的着色器：顶点着色器 (Vertex Shader): 负责处理顶点数据。它接收顶点的位置、颜色、法线等属性信息，并进行坐标变换、光照计算等操作。

2.4 着色器 (Shaders) 和 GLSL

WebGL核心概念详解：2.4 着色器 (Shaders) 与 GLSL

2.4.1 着色器 (Shaders) 的概念与作用

在传统的固定功能渲染管线中，图形的渲染过程被预先定义好，开发者只能通过有限的参数进行调整。而WebGL采用的可编程渲染管线，则将渲染过程中的关键步骤开放给开发者，允许通过编写着色器程序来定制顶点处理和片元（像素）处理的逻辑。

着色器本质上是用GLSL编写的小程序，运行在GPU（图形处理器）上。 WebGL主要使用两种类型的着色器：

顶点着色器 (Vertex Shader): 负责处理顶点数据。它接收顶点的位置、颜色、法线等属性信息，并进行坐标变换、光照计算等操作。顶点着色器的核心任务是计算每个顶点最终在屏幕上的位置，并将数据传递给后续的片元着色器。
片元着色器 (Fragment Shader): 负责处理光栅化后的每个片元（可以理解为像素）。它接收来自顶点着色器的插值数据，并决定每个片元的最终颜色。片元着色器是进行纹理采样、颜色混合、光照计算等高级渲染效果的关键环节。

着色器的作用可以总结为：

控制顶点位置： 顶点着色器决定了模型在三维空间中的位置、旋转、缩放以及投影到屏幕上的位置，是模型变形、动画的基础。
决定片元颜色： 片元着色器最终确定了屏幕上每个像素的颜色，包括物体表面的颜色、纹理、光照效果、阴影等，是实现各种视觉效果的核心。
实现高级渲染效果： 通过编写复杂的着色器程序，可以实现各种高级渲染技术，如光照模型、阴影、反射、折射、后期处理特效等，创造出丰富的视觉体验。
提高性能： 着色器运行在GPU上，利用GPU的并行处理能力，可以高效地处理大量的顶点和片元数据，实现实时渲染复杂场景。

用 mermaid graph TD 图来表示着色器在 WebGL 渲染管线中的位置：

图解说明：

顶点数据 (Vertex Data): 输入到渲染管线的原始数据，包括顶点的位置、颜色、法线等属性。
顶点着色器 (Vertex Shader): 处理顶点数据，计算顶点在屏幕上的位置。
图元装配 (Primitive Assembly): 将顶点组装成几何图元（如点、线、三角形）。
光栅化 (Rasterization): 将图元转换为片元（像素），确定哪些像素需要被绘制。
片元着色器 (Fragment Shader): 处理每个片元，决定片元的最终颜色。
帧缓冲区 (Framebuffer): 存储最终渲染结果的缓冲区，最终显示在屏幕上。

图中高亮显示的 "顶点着色器" 和 "片元着色器" 就是我们本篇文章的核心内容。

2.4.2 GLSL (OpenGL Shading Language) 详解

GLSL（OpenGL Shading Language）是一种专门为GPU编程设计的高级编程语言，语法上与C语言类似，但针对图形渲染进行了优化和扩展。WebGL使用GLSL ES（OpenGL ES Shading Language），它是GLSL的精简版本，更适合移动设备和Web环境。

GLSL 的主要特点：

面向向量和矩阵运算： GLSL 内置了向量和矩阵数据类型，以及丰富的向量和矩阵运算函数，方便进行图形变换和线性代数计算。
并行计算能力： GLSL 代码在GPU上并行执行，能够同时处理大量的顶点和片元，实现高效的图形渲染。
数据类型丰富： GLSL 提供了多种数据类型，包括标量、向量、矩阵、采样器等，满足图形渲染的各种数据需求。
内置函数库： GLSL 提供了丰富的内置函数库，包括数学函数、几何函数、纹理函数等，方便进行各种图形计算和操作。
精度控制： GLSL 允许开发者控制变量的精度 (highp, mediump, lowp)，在保证渲染效果的前提下，可以优化性能和功耗。

GLSL 的基本语法和数据类型：

注释:
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
变量声明: 与 C 语言类似，需要指定数据类型和变量名。
- float position;
- vec3 color;
- mat4 modelMatrix;
基本数据类型:
- float: 单精度浮点数
- int: 有符号整数
- bool: 布尔值 (true 或 false)
- vec2, vec3, vec4: 2维、3维、4维浮点向量
- ivec2, ivec3, ivec4: 2维、3维、4维整数向量
- bvec2, bvec3, bvec4: 2维、3维、4维布尔向量
- mat2, mat3, mat4: 2x2, 3x3, 4x4 浮点矩阵
- sampler2D: 2D纹理采样器 (用于纹理贴图)
- samplerCube: 立方体纹理采样器 (用于环境贴图)
精度限定符: 用于指定变量的精度，影响性能和功耗。
- highp: 高精度 (通常是32位浮点数)
- mediump: 中精度 (通常是16位浮点数)
- lowp: 低精度 (通常是9位或10位定点数)
- 例如： highp vec4 position;
存储限定符: 用于指定变量的存储位置和作用域。
- attribute: 顶点着色器的输入属性，从顶点缓冲区传入，每个顶点的值可能不同。
- uniform: 全局 uniform 变量，在着色器程序执行期间保持不变，由 JavaScript 代码传入。
- varying: 顶点着色器输出，片元着色器输入，用于在顶点和片元之间传递插值数据。
- const: 常量，在编译时确定值，不可修改。
运算符: GLSL 支持常见的运算符，包括：
- 算术运算符: +, -, *, /, %, ++, --
- 关系运算符: ==, !=, >, <, >=, <=
- 逻辑运算符: &&, ||, !
- 位运算符: &, |, ^, ~, <<, >>
- 赋值运算符: =, +=, -=, *=, /=
- 向量和矩阵运算符: GLSL 针对向量和矩阵提供了专门的运算符，例如向量的点积 dot()，叉积 cross()，矩阵乘法 * 等。
控制流语句: GLSL 支持常见的控制流语句，如：
- if-else 条件语句
- for 循环
- while 循环
- do-while 循环
- break, continue, return
内置函数: GLSL 提供了大量的内置函数，涵盖了数学运算、几何运算、纹理采样、颜色处理等方面。例如：
- 数学函数: sin(), cos(), tan(), pow(), sqrt(), abs(), floor(), ceil(), clamp(), mix(), length(), distance(), normalize(), dot(), cross() 等。
- 几何函数: reflect(), refract(), faceforward() 等。
- 纹理函数: texture2D(), textureCube(), textureLod(), textureProj() 等。
- 颜色函数: rgb2hsv(), hsv2rgb() 等。

GLSL 程序结构:

一个基本的 GLSL 着色器程序通常包含以下结构：


#version 300 es // 指定 GLSL ES 版本 (WebGL 2.0 使用)
// 输入变量 (顶点着色器: attribute, 片元着色器: varying)
in vec4 a_position;  // 顶点位置属性 (顶点着色器)
in vec3 v_color;     // 顶点颜色 (从顶点着色器传递到片元着色器)
// 输出变量 (顶点着色器: varying, gl_Position, 片元着色器: gl_FragColor)
out vec3 f_color;    // 输出颜色到片元着色器 (顶点着色器)
out vec4 gl_Position; // 顶点着色器必须输出的裁剪空间坐标
// uniform 变量 (全局常量，由 JavaScript 传入)
uniform mat4 u_modelViewProjectionMatrix; // 模型视图投影矩阵
void main() {
    // 顶点着色器代码
    gl_Position = u_modelViewProjectionMatrix * a_position; // 顶点坐标变换
    f_color = v_color; // 将顶点颜色传递给片元着色器
}


#version 300 es // 指定 GLSL ES 版本 (WebGL 2.0 使用)
precision mediump float; // 设置默认浮点精度为 mediump
// 输入变量 (从顶点着色器传入的 varying)
in vec3 f_color; // 从顶点着色器接收的颜色
// 输出变量 (片元着色器必须输出的 gl_FragColor)
out vec4 gl_FragColor; // 片元着色器必须输出的片元颜色
void main() {
    // 片元着色器代码
    gl_FragColor = vec4(f_color, 1.0); // 设置片元颜色，alpha 值为 1.0 (不透明)
}

代码实践：一个简单的彩色三角形

下面我们通过一个简单的例子，演示如何使用顶点着色器和片元着色器绘制一个彩色三角形。

1. HTML 结构 (HTML 文件 - index.html):


<!DOCTYPE html>
<html>
<head>
    <title>WebGL 彩色三角形</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="glCanvas" width="512" height="512"></canvas>
    <script src="script.js"></script>
</body>
</html>

2. JavaScript 代码 (JavaScript 文件 - script.js):


document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('glCanvas');
    const gl = canvas.getContext('webgl2'); // 获取 WebGL2 上下文
    if (!gl) {
        alert('你的浏览器不支持 WebGL 2.0');
        return;
    }
    // 顶点着色器 GLSL 代码
    const vsSource = `#version 300 es
        in vec4 a_position;
        in vec3 a_color;
        out vec3 v_color;
        uniform mat4 u_modelViewProjectionMatrix;
        void main() {
            gl_Position = u_modelViewProjectionMatrix * a_position;
            v_color = a_color;
        }
    `;
    // 片元着色器 GLSL 代码
    const fsSource = `#version 300 es
        precision mediump float;
        in vec3 v_color;
        out vec4 gl_FragColor;
        void main() {
            gl_FragColor = vec4(v_color, 1.0);
        }
    `;
    // 初始化着色器程序
    const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
    // 获取 attribute 和 uniform 变量的位置
    const programInfo = {
        program: shaderProgram,
        attribLocations: {
            positionAttributeLocation: gl.getAttribLocation(shaderProgram, 'a_position'),
            colorAttributeLocation: gl.getAttribLocation(shaderProgram, 'a_color'),
        },
        uniformLocations: {
            modelViewProjectionMatrixUniformLocation: gl.getUniformLocation(shaderProgram, 'u_modelViewProjectionMatrix'),
        },
    };
    // 顶点数据
    const positions = [
        0.0,  0.5,  0.0,  // 顶点 1
       -0.5, -0.5,  0.0,  // 顶点 2
        0.5, -0.5,  0.0,  // 顶点 3
    ];
    const colors = [
        1.0, 0.0, 0.0, // 红色 (顶点 1)
        0.0, 1.0, 0.0, // 绿色 (顶点 2)
        0.0, 0.0, 1.0, // 蓝色 (顶点 3)
    ];
    // 创建顶点位置缓冲区
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    // 创建顶点颜色缓冲区
    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    // 模型视图投影矩阵 (这里使用简单的正交投影)
    const modelViewProjectionMatrix = mat4.create(); // 使用 glMatrix 库 (需要引入 glMatrix.js)
    mat4.ortho(modelViewProjectionMatrix, -1, 1, -1, 1, -1, 1); // 设置正交投影
    // 渲染函数
    function render() {
        gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清除画布颜色为黑色
        gl.clearDepth(1.0);             // 清除深度缓冲区
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // 清除颜色和深度缓冲区
        gl.useProgram(programInfo.program); // 使用着色器程序
        // 设置 attribute 属性
        {
            const numComponents = 3; // 每个顶点位置是 3 个值 (x, y, z)
            const type = gl.FLOAT;     // 数据类型是浮点数
            const normalize = false;   // 不需要归一化
            const stride = 0;          // 步长为 0，紧密排列
            const offset = 0;          // 从缓冲区起始位置开始读取
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.vertexAttribPointer(
                programInfo.attribLocations.positionAttributeLocation,
                numComponents,
                type,
                normalize,
                stride,
                offset);
            gl.enableVertexAttribArray(programInfo.attribLocations.positionAttributeLocation);
        }
        {
            const numComponents = 3; // 每个顶点颜色是 3 个值 (r, g, b)
            const type = gl.FLOAT;
            const normalize = false;
            const stride = 0;
            const offset = 0;
            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
            gl.vertexAttribPointer(
                programInfo.attribLocations.colorAttributeLocation,
                numComponents,
                type,
                normalize,
                stride,
                offset);
            gl.enableVertexAttribArray(programInfo.attribLocations.colorAttributeLocation);
        }
        // 设置 uniform 变量
        gl.uniformMatrix4fv(
            programInfo.uniformLocations.modelViewProjectionMatrixUniformLocation,
            false,
            modelViewProjectionMatrix);
        const offset = 0;
        const vertexCount = 3; // 绘制 3 个顶点 (三角形)
        gl.drawArrays(gl.TRIANGLES, offset, vertexCount); // 绘制三角形
    }
    render(); // 执行渲染
    // 初始化着色器程序函数 (工具函数)
    function initShaderProgram(gl, vsSource, fsSource) {
        const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
        const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
        const shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);
        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
            return null;
        }
        return shaderProgram;
    }
    // 加载着色器函数 (工具函数)
    function loadShader(gl, type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
            return null;
        }
        return shader;
    }
});

代码详解:

WebGL 上下文获取和初始化: 获取 webgl2 上下文，并进行错误处理。
顶点着色器 (vsSource) 和片元着色器 (fsSource) 代码: 定义了 GLSL 顶点着色器和片元着色器的源代码。
- 顶点着色器:
  - in vec4 a_position;: 接收顶点位置属性。
  - in vec3 a_color;: 接收顶点颜色属性。
  - out vec3 v_color;: 输出颜色到片元着色器。
  - uniform mat4 u_modelViewProjectionMatrix;: 接收模型视图投影矩阵 uniform 变量。
  - gl_Position = u_modelViewProjectionMatrix * a_position;: 进行顶点坐标变换。
  - v_color = a_color;: 将顶点颜色传递给片元着色器。
- 片元着色器:
  - precision mediump float;: 设置浮点精度为 mediump。
  - in vec3 v_color;: 接收从顶点着色器传递过来的颜色。
  - out vec4 gl_FragColor;: 输出片元颜色。
  - gl_FragColor = vec4(v_color, 1.0);: 设置片元颜色为接收到的顶点颜色。
初始化着色器程序 (initShaderProgram 函数): 编译顶点着色器和片元着色器，链接成着色器程序。
获取 attribute 和 uniform 变量的位置 (programInfo): 通过 gl.getAttribLocation 和 gl.getUniformLocation 获取着色器程序中 attribute 和 uniform 变量的位置，方便后续设置变量值。
顶点数据 (positions, colors): 定义了三角形的顶点位置和颜色数据。
创建顶点缓冲区 (positionBuffer, colorBuffer): 将顶点位置和颜色数据分别上传到 GPU 缓冲区。
模型视图投影矩阵 (modelViewProjectionMatrix): 创建一个简单的正交投影矩阵，用于将 3D 坐标投影到 2D 屏幕空间。
渲染函数 (render):
- 清除画布和缓冲区。
- 使用着色器程序 (gl.useProgram).
- 设置 attribute 属性 (gl.vertexAttribPointer, gl.enableVertexAttribArray): 将顶点缓冲区的数据绑定到 attribute 变量。
- 设置 uniform 变量 (gl.uniformMatrix4fv): 将模型视图投影矩阵传递给 uniform 变量。
- 绘制三角形 (gl.drawArrays): 使用 gl.TRIANGLES 图元类型绘制三角形。
工具函数 (loadShader): 加载和编译单个着色器。

运行代码:

将 index.html 和 script.js 文件放在同一个目录下，用浏览器打开 index.html 文件，即可看到一个彩色三角形在 canvas 中渲染出来，三角形的三个顶点分别呈现红色、绿色和蓝色，颜色在三角形内部平滑过渡。

总结:

通过这个简单的彩色三角形示例，我们了解了：

着色器程序的基本结构: 顶点着色器和片元着色器的代码组织方式。
GLSL 的基本语法: 变量声明、数据类型、存储限定符、运算符等。
WebGL 中如何使用着色器: 编译、链接着色器程序，设置 attribute 和 uniform 变量，绘制几何图形。
顶点着色器和片元着色器的协同工作: 顶点着色器处理顶点数据，片元着色器处理片元颜色，共同完成图形的渲染。

2.4.3 深入理解着色器与 GLSL

着色器和 GLSL 是 WebGL 中最核心和强大的工具。掌握它们，就能够充分发挥 GPU 的性能，创造出各种令人惊叹的图形效果。

进一步学习方向：

更深入的 GLSL 语法: 学习 GLSL 的更多数据类型、内置函数、控制流语句，以及更高级的特性，如结构体、数组、函数等。
光照模型: 学习各种光照模型 (如 Phong 光照模型、Blinn-Phong 光照模型)，实现逼真的光照效果。
纹理贴图: 学习如何使用纹理贴图，为物体表面添加细节和纹理。
阴影: 学习各种阴影技术 (如阴影贴图、阴影体积)，为场景增加真实感。
后期处理特效: 学习如何使用片元着色器实现各种后期处理特效 (如 Bloom 效果、景深效果、色彩校正)。
性能优化: 学习如何编写高效的着色器代码，优化渲染性能。

mermaid graph TD 图来表示着色器学习进阶路线：

图解说明：

WebGL 基础知识: 学习 WebGL 的基本概念、API 使用方法、渲染管线等。
着色器 (Shaders) 与 GLSL: 掌握着色器和 GLSL 的基本概念和语法。
GLSL 语法深入: 深入学习 GLSL 的高级特性，提升编程能力。
光照模型: 学习各种光照模型，实现逼真的光照效果。
纹理贴图: 学习纹理贴图技术，为物体表面添加细节。
阴影: 学习阴影技术，增加场景真实感。
后期处理特效: 学习后期处理特效，提升画面视觉效果。
性能优化: 学习着色器性能优化技巧，提升渲染效率。

总结:

着色器和 GLSL 是 WebGL 图形编程的核心，掌握它们是构建高质量 WebGL 应用的关键。通过不断学习和实践，您可以利用着色器的强大功能，创造出令人惊叹的 WebGL 图形世界。希望本文能够帮助您入门 WebGL 着色器和 GLSL 的学习之旅。