企业官网建设流程全解析

本指南系统梳理开源仓库 thebookofshaders 中 glossary（术语表）所收录的全部 GLSL（GLSL ES）语言元素，包括 19 种数据类型、11 个限定符、6 个内置变量、7 个内置常量，以及三角函数、指数函数、通用函数、几何函数、矩阵函数、向量关系函数和纹理查找函数等七大函数族。读完本文，你将获得一份可直接对照使用的 GLSL 语法速查手册，并能理解每个函数在本书各章节着色器示例（如 05/smoothstep.frag、06/mix.frag、07/circle-making.frag）中的实际应用方式。

一、术语表的组织方式与检索机制

仓库根目录下的 glossary 目录是一个由 79 个词条目录构成的 GLSL 术语表，每个词条目录内都存放一份README.md（英文）与多语言翻译（如README-vi.md）。词条页面统一采用“声明（Declaration）—参数（Parameters）—描述（Description）—参见（See Also）”的四段式结构，便于快速定位某一语法元素的签名与语义。

索引页 glossary/README-vi.md 同时提供两种浏览视角：按主题分组（数据类型、限定符、内置变量、内置常量、各函数族）与按字母表排序（A 到 V）。站点层面的检索由 glossary/index.php 驱动：当请求携带search参数时（如?search=smoothstep），该脚本会拼接$_GET['search'].'/README.md'路径，加载对应词条目录中的文档并渲染；同时支持lan参数切换README-<语言>.md翻译文件。也就是说，索引页中每个词条的链接最终都指向本仓库内对应目录下可读的 Markdown 文件。

提示：字母表视角中还额外收录了dFdx()、dFdy()两个导数函数（见 glossary/dFdx/README.md、glossary/dFdy/README.md），它们并未出现在主题分组中，阅读时需留意。

二、数据类型（Types）

GLSL ES 的数据类型分为标量、向量、矩阵、采样器与自定义结构五类，全部列举于术语表“CÁC KIỂU DỮ LIỆU”（数据类型）分组。

标量：void、bool、int、float

• void：用于声明无参数或无返回值的函数。典型写法void main(void);、int aFunction(void);、void bFunction(float);，见 glossary/void/README.md。
• bool：布尔类型，取值true/false，可通过bool(aInt)、bool(aFloat)做显式转换，见 glossary/bool/README.md。
• int：整数类型，int aInt = 42;，见 glossary/int/README.md。
• float：浮点类型，float aFloat = 1.0;，注意 GLSL 中浮点字面量需带小数点，见 glossary/float/README.md。

向量：bvec / ivec / vec

向量按分量类型分为布尔向量bvecN、整数向量ivecN与浮点向量vecN（N = 2、3、4）。以 glossary/vec2/README.md 中vec2的声明为例：

vec2 aVec2 = vec2(1.0, 1.0); // 逐分量给出标量 vec2 bVec2 = vec2(1.0); // 单一标量广播到全部分量 vec2 cVec2 = vec2(aVec3); // 从更高维向量截取（按顺序取前 N 个分量） vec2 dVec2 = vec2(aVec3.x, aVec3.y); // 配合分量选择器

vec3与vec4还支持“向量 + 标量混合构造”，只要参数分量总数不少于目标维度即可（见 glossary/vec3/README.md、glossary/vec4/README.md）：

vec3 eVec3 = vec3(aVec2, aFloat); vec4 dVec4 = vec4(aBvec2.x, aBvec2.y, aFloat, aBvec3.x);

bvecN（bvec2、bvec3、bvec4）与ivecN（ivec2、ivec3、ivec4）遵循相同的构造规则，只是分量类型分别为布尔与整数。

矩阵：mat2、mat3、mat4

矩阵按列主序（column-major）构造。以 glossary/mat4/README.md 为例：

mat4 aMat4 = mat4(1.0, 0.0, 0.0, 0.0, // 第 1 列 0.0, 1.0, 0.0, 0.0, // 第 2 列 0.0, 0.0, 1.0, 0.0, // 第 3 列 0.0, 0.0, 0.0, 1.0); // 第 4 列 mat4 bMat4 = mat4(1.0); // 仅填充主对角线 mat4 cMat4 = mat4(aVec4, bVec4, cVec4, dVec4); // 由向量组合

矩阵既支持按分量访问（aMat4[3][3] = 1.0;），也支持按列整体访问（vec4 aVec4 = aMat4[0];）。mat2、mat3的规则完全一致（见 glossary/mat2/README.md、glossary/mat3/README.md）。矩阵相关内容可在第 08 章进一步展开，参见 08/README.md。

采样器与结构体：sampler2D、samplerCube、struct

• sampler2D/samplerCube：纹理采样器类型，分别对应 2D 纹理与立方体纹理，不能直接赋值，只能作为uniform由 CPU 端绑定纹理（详见后文纹理函数节，条目见 glossary/sampler2D/README.md、glossary/textureCube/README.md）。
• struct：允许基于基础类型自定义数据结构，声明变量可省略；构造器与结构体同名并自动生成（见 glossary/struct/README.md）：

struct matStruct { vec4 ambientColor; vec4 diffuseColor; vec4 specularColor; float specularExponent; } newMaterial; newMaterial = matStruct(vec4(0.1, 0.1, 0.1, 1.0), vec4(1.0, 0.0, 0.0, 1.0), vec4(0.7, 0.7, 0.7, 1.0), 50.0);

三、限定符（Qualifiers）

限定符控制变量的存储位置与读写权限，是理解着色器数据流的钥匙。

• attribute：只读的逐顶点数据，由 WebGL/OpenGL 环境传入顶点着色器，典型用途是顶点空间位置、颜色、法线与纹理坐标（见 glossary/attribute/README.md）：

  attribute vec4 v_color;

• uniform：只读的逐图元 / 逐帧 / 逐场景常量数据，由 CPU 端传入，同一图元内保持不变。本书所有示例几乎都以它声明画布信息，例如 05/smoothstep.frag 中的uniform vec2 u_resolution;、uniform float u_time;、uniform vec2 u_mouse;（见 glossary/uniform/README.md）。
• varying：顶点着色器写给片段着色器的数据，片段着色器中读取的是经顶点插值后的值（见 glossary/varying/README.md）：

  varying vec3 position;

• const：编译期常量，值不可修改，如const float PI = 3.14159265359;（见 glossary/const/README.md，本书众多.frag文件第一行即此写法）。
• precision与精度修饰符highp/mediump/lowp：用于声明浮点运算精度。本书每个片段着色器开头都有：

  #ifdef GL_ES precision mediump float; #endif

  即在移动端 GLSL ES 环境下把默认浮点精度设为mediump，以保证兼容性与性能（条目见 glossary/precision/README.md 等）。

• in/out/inout：函数参数方向限定符（ES 3.0 起取代attribute/varying的语法）。in表示只读输入、out表示只写输出、inout表示可读写，条目见 glossary/in/README.md、glossary/out/README.md、glossary/inout/README.md。

四、内置变量与内置常量

内置变量（Built-in Variables）

• gl_Position：顶点着色器必须写出的裁剪空间顶点位置（条目 glossary/gl_Position/README.md）。
• gl_PointSize：点精灵的点大小（条目 glossary/gl_PointSize/README.md）。
• gl_PointCoord：点精灵内部的归一化纹理坐标（条目 glossary/gl_PointCoord/README.md）。
• gl_FrontFacing：布尔值，指示当前片段是否为图元正面，常用于双面材质（条目 glossary/gl_FrontFacing/README.md）。
• gl_FragCoord：片段在窗口坐标下的位置，本书用它归一化画布坐标：vec2 st = gl_FragCoord.xy/u_resolution;（见 05/smoothstep.frag，条目 glossary/gl_FragCoord/README.md）。
• gl_FragColor：片段着色器输出的最终颜色（vec4，RGBA），本书每个示例都以gl_FragColor = vec4(color, 1.0);结尾（条目 glossary/gl_FragColor/README.md）。

内置常量（Built-in Constants）

gl_Max*系列常量报告 GPU 硬件的资源上限，供着色器在运行时查询（条目集中在 G 字母分组，如 glossary/gl_MaxVertexAttribs/README.md、glossary/gl_MaxVaryingVectors/README.md 等）：

• gl_MaxVertexAttribs：顶点属性最大数量
• gl_MaxVaryingVectors：varying 向量最大数量
• gl_MaxVertexTextureImageUnits：顶点着色器可用纹理单元数
• gl_MaxCombinedTextureImageUnits：顶点 + 片段着色器合计可用纹理单元数
• gl_MaxTextureImageUnits：片段着色器可用纹理单元数
• gl_MaxFragmentUniformVectors：片段着色器 uniform 向量上限
• gl_MaxDrawBuffers：多渲染目标（MRT）的绘制缓冲数量

五、三角函数（Angle & Trigonometry）

• radians(degrees)：角度转弧度，返回(PI * degrees)/180（glossary/radians/README.md）。
• degrees(radians)：弧度转角度，返回(180.0*radians)/PI（glossary/degrees/README.md）。
• sin(angle)/cos(angle)/tan(angle)：参数为弧度，返回对应三角函数值，支持向量重载（sin、cos、tan）。
• asin(x)/acos(x)：反正弦 / 反余弦，返回角度（弧度）（asin、acos）。
• atan(y, x)/atan(y_over_x)：提供两种重载。双参数版本利用y、x的符号确定象限，返回值落在-PI到PI；单参数版本仅返回-PI/2到PI/2，且x为零时结果未定义（glossary/atan/README.md）。

六、指数函数（Exponential）

• pow(x, y)：x的y次幂（glossary/pow/README.md）。
• exp(x)/exp2(x)：自然指数e^x与以 2 为底的指数2^x（exp、exp2）。
• log(x)/log2(x)：自然对数与以 2 为底的对数（log、log2）。
• sqrt(x)：平方根；inversesqrt(x)：平方根倒数（快速归一化常用），条目见 glossary/sqrt/README.md、glossary/inversesqrt/README.md。

七、通用函数（Common Functions）：塑造形状的核心工具

这是本书第 05 章“Shaping Functions”的主力函数族，也是术语表中篇幅最重的分组，全部支持向量重载。

• abs(x)：绝对值（glossary/abs/README.md）。
• sign(x)：符号函数，x<0返回-1.0，x==0返回0.0，x>0返回1.0（glossary/sign/README.md）。
• floor(x)：向下取整到最近整数（glossary/floor/README.md）；ceil(x)：向上取整（glossary/ceil/README.md）。
• fract(x)：取小数部分，等价于x - floor(x)（glossary/fract/README.md）。
• mod(x, y)：取模，等价于x - y * floor(x/y)（注意：与 C 语言的%语义不同，结果符号跟随除数）（glossary/mod/README.md）。
• min(x, y)/max(x, y)：逐分量取较小 / 较大值（min、max）。
• clamp(x, minVal, maxVal)：把x约束到[minVal, maxVal]，等价于min(max(x, minVal), maxVal)，是 GLSL 中防越界的最常用函数（glossary/clamp/README.md）。
• mix(x, y, a)：线性插值，返回x×(1−a)+y×a，本书第 06 章用它混合两种颜色（见 06/mix.frag 中color = mix(colorA, colorB, pct);与 06/gradient.frag 的三通道渐变演示，条目 glossary/mix/README.md）。
• step(edge, x)：阶跃函数，x[i] < edge[i]时返回0.0，否则返回1.0，用于生成硬边阈值（见 05/step.frag 中float y = step(0.5, st.x);，条目 glossary/step/README.md）。
• smoothstep(edge0, edge1, x)：Hermite 平滑插值，在edge0 < x < edge1区间内从0平滑过渡到1，等价于：

  genType t = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); return t * t * (3.0 - 2.0 * t);

  当edge0 ≥ edge1时结果未定义。它是抗锯齿绘制中无可替代的函数——例如 05/smoothstep.frag 用两个smoothstep相减绘制出 1px 宽的绿色曲线：

  float plot(vec2 st, float pct){ return smoothstep(pct-0.02, pct, st.y) - smoothstep(pct, pct+0.02, st.y); }

  条目见 glossary/smoothstep/README.md。

八、几何函数（Geometric Functions）

几何函数用于向量运算与距离场构建，是第 07 章“Shapes”绘制圆形、矩形等形状的基础。

• length(x)：向量长度（模）（glossary/length/README.md）。
• distance(p0, p1)：两点间距离（glossary/distance/README.md）。
• dot(x, y)：点积，x[0]·y[0] + x[1]·y[1] + ...；当x == y时sqrt(dot(x,x))等于向量长度（glossary/dot/README.md）。
• cross(x, y)：叉积，仅支持vec3，结果大小等于两向量长度乘积乘以其夹角正弦（glossary/cross/README.md）。
• normalize(x)：返回与x同向的单位向量（glossary/normalize/README.md）。
• faceforward(N, I, Nref)：按参考法线朝向重定向向量，dot(Nref, I) < 0时返回N，否则返回-N（glossary/faceforward/README.md）。
• reflect(I, N)：反射方向，I - 2.0 * dot(N, I) * N，要求N已归一化（glossary/reflect/README.md）。
• refract(I, N, eta)：折射方向，按公式k = 1.0 - eta*eta*(1.0 - dot(N,I)^2)，当k < 0.0时返回零向量（全反射），否则返回eta*I - (eta*dot(N,I) + sqrt(k))*N（glossary/refract/README.md）。

以第 07 章的圆形为例，07/circle-making.frag 演示了三种等价的距离度量（distance、length、手写sqrt），而 07/circle.frag 则用dot+smoothstep绘制出抗锯齿的圆：

float circle(in vec2 _st, in float _radius){ vec2 dist = _st-vec2(0.5); return 1.0 - smoothstep(_radius-(_radius*0.01), _radius+(_radius*0.01), dot(dist,dist)*4.0); }

九、矩阵函数（Matrix Functions）

• matrixCompMult(x, y)：逐分量相乘两个矩阵，结果矩阵的result[i][j] = x[i][j] * y[i][j]。需要注意它与“矩阵乘法”是两回事——矩阵乘法需用*运算符，而本函数是分量级乘法的唯一内建实现（glossary/matrixCompMult/README.md，相关章节 08/README.md）。

十、向量关系函数（Vector Relational Functions）

关系函数对两个向量做逐分量比较，返回布尔向量bvecN：

• lessThan(x, y)：x[i] < y[i]（glossary/lessThan/README.md）
• lessThanEqual(x, y)：x[i] ≤ y[i]（glossary/lessThanEqual/README.md）
• greaterThan(x, y)：x[i] > y[i]（glossary/greaterThan/README.md）
• greaterThanEqual(x, y)：x[i] ≥ y[i]（glossary/greaterThanEqual/README.md）
• equal(x, y)：x[i] == y[i]（glossary/equal/README.md）
• notEqual(x, y)：x[i] != y[i]（glossary/notEqual/README.md）
• any(x)：只要存在一个true分量即返回true（等价于对分量做逻辑或循环）（glossary/any/README.md）
• all(x)：全部分量为true才返回true（glossary/all/README.md）
• not(x)：逐分量逻辑取反，!x[i]（glossary/not/README.md）

十一、纹理查找函数（Texture Lookup Functions）

• texture2D(sampler2D sampler, vec2 coord [, float bias])：从 2D 纹理按坐标取色，返回vec4。可选第三参数bias在 mipmap 的 LOD（Level of Detail）计算完成后、正式采样前叠加（glossary/texture2D/README.md）。
• textureCube(samplerCube sampler, vec3 coord [, float bias])：从立方体纹理按三维方向向量取色，规则同上（glossary/textureCube/README.md）。

两个条目都特别注明：在 iOS 设备上，纹理查找功能仅可在片段着色器中使用。结合第 15 章（15/README.md）中大量texture*系列.frag示例（如 15/texture.frag、15/texture-kaleidoscope.frag），可以观察纹理采样在真实项目中的典型形态。

十二、导数函数与补充词条

术语表的字母表分组中还有两个仅此收录的函数：

• dFdx(p)/dFdy(p)：仅在片段着色器中可用，返回表达式p对屏幕 x / y 方向的偏导数（通过局部差分计算）。二阶或混合阶导数（如dFdx(dFdy(n))）结果未定义；非均匀控制流中求值的表达式同样未定义（dFdx、dFdy）。这类函数常用于根据屏幕空间变化率做自适应抗锯齿。

此外，词条目录中还包含main（glossary/main/README.md）与return（glossary/return/README.md）两个控制流词条，与void一起构成对 GLSL 函数定义语法的完整补充。

十三、查阅建议与章节联动

术语表的价值在于“按需速查”。建议的查阅姿势是：先通过 glossary/README-vi.md 的主题分组定位语法元素所属类别，再进入对应词条目录阅读四段式详解，最后回到对应章节的.frag源码看实际用法。各函数族与本书章节的对应关系如下：

• 通用函数（smoothstep、step、mix、fract等）→ 第 05 章 Shaping Functions（05/README.md）
• mix、三角函数与颜色 → 第 06 章 Color（06/README.md）
• length、distance、dot、normalize→ 第 07 章 Shapes（07/README.md）
• matrixCompMult与矩阵类型 → 第 08 章 Matrices（08/README.md）
• texture2D、textureCube与采样器 → 第 15 章 Texture（15/README.md）
• uniform、attribute、varying→ 第 03 章 Uniforms（03/README.md）

把术语表当作索引、把.frag示例当作对照实验，你就能在阅读 The Book of Shaders 的过程中，随时查证每一个 GLSL 语言元素的精确语义。