【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载导读vec3是 GLSL 着色语言中最核心的数据类型之一——一个包含 3 个浮点分量的向量。在 The Book of Shaders 这本面向片段着色器Fragment Shader的循序渐进教程中vec3几乎无处不在既用来表示 RGB 颜色三个通道各占一个分量也用来表示三维空间坐标与方向。本文以 glossary/vec3/README-vi.md 及其英文原版 glossary/vec3/README.md 为主体系统讲解vec3的四种构造方式、分量访问与 swizzle 语法并结合本仓库各章节的真实.frag着色器源码展示它作为颜色与向量的双重身份在渐变、HSB 色彩空间、噪声与图形绘制中的实际用法。读完本文你将能熟练声明与组合vec3看懂仓库中绝大多数示例着色器的颜色与坐标运算。vec3 是什么浮点向量的定义在 GLSL 中vec3是一个由 3 个float分量组成的向量类型。glossary 文档将其定义为 Vector số thực 3 chiều三维实数向量见 glossary/vec3/README-vi.md英文版则直接写明 3 dimensional floating point vector三维浮点向量见 glossary/vec3/README.md。vec3不是孤立存在的类型它与 GLSL 的标量、向量、矩阵类型家族构成完整的类型体系。glossary 文档的参考更多Tham khảo thêm / See Also一节列出了全部相关类型包括标量类型bool、int、float布尔向量bvec2、bvec3、bvec4整型向量ivec2、ivec3、ivec4浮点向量vec2、vec3、vec4矩阵mat2、mat3、mat4在 The Book of Shaders 的着色器中vec3主要承担两类语义RGB 颜色vec3(1.0, 0.0, 0.0)即红色与三维空间向量坐标、方向、法线等。正如 06/README.md 所述颜色是理解向量类型的绝佳入口因为你可以把颜色与空间坐标互换思考。vec3 的四种构造方式Declarationglossary 文档给出了完整的构造示例glossary/vec3/README-vi.mdvec3 aVec3 vec3(1.0, 1.0, 1.0); vec3 bVec3 vec3(1.0); vec3 cVec3 vec3(aVec4); vec3 dVec3 vec3(aVec4.x, aVec4.y, aVec4.z); vec3 eVec3 vec3(aVec2, aFloat); vec3 fVec3 vec3(aVec2.x, aVec2.y, aFloat);这四种方式可以归纳为文档中明确列出的初始化规则glossary/vec3/README-vi.md逐分量指定标量值vec3(1.0, 1.0, 1.0)三个分量分别给出float值也是最直观的写法。只给一个标量值vec3(1.0)GLSL 会把这个值复制给全部三个分量等价于vec3(1.0, 1.0, 1.0)。这是文档强调的指定 1 个公共值给 3 个分量。由更高维向量截取vec3(aVec4)从vec4中按顺序取前三个分量初始化。文档指出各分量将按顺序被初始化Các thành phần sẽ được khởi tạo theo thứ tự。由多个向量/标量组合拼接vec3(aVec2, aFloat)把vec2的两个分量与一个float依次填入。英文版进一步补充了约束条件glossary/vec3/README.md构造函数的实参总分量数必须不少于待初始化向量的分量数The arguments of the constructor must have at least as many components as the vector that is initialized。例如vec3(aVec2, aFloat)是 213 个分量合法如果实参只有 2 个分量如vec3(aVec2)在部分严格实现中则不被允许。为什么单标量构造如此常见单标量构造vec3(1.0)在仓库的着色器代码中出现频率极高最常见的场景是用 0.0 初始化一个颜色/累加变量或用一个值填充三个通道06/gradient.frag 中vec3 color vec3(0.0);初始化黑色累加变量06/easing.frag 中vec3 colorA vec3(0.149,0.141,0.912);、vec3 colorB vec3(1.000,0.833,0.224);用逐分量方式定义渐变的起止色07/circle.frag 中vec3 color vec3(circle(st,0.9));把一个float圆的 SDF 距离场结果广播到三个分量得到灰度圆形07/shapes.frag 中color vec3(1.0-smoothstep(.4,.41,d));同理把一个浮点亮度广播成 RGB 灰度。这种单标量广播行为是 GLSL 向量构造器的一大特性也是理解一个数值如何变成颜色的关键。与 vec2、vec4 构造规则的对照vec3的构造规则与同族类型完全一致。对比 glossary/vec2/README.md 的vec2与 glossary/vec4/README.md 的vec4// vec2逐分量、单标量、高维截取 vec2 aVec2 vec2(1.0, 1.0); vec2 bVec2 vec2(1.0); vec2 cVec2 vec2(aVec3); // 从 vec3 取前两个分量 vec2 dVec2 vec2(aVec3.x, aVec3.y); // vec4标量、向量、矩阵混合拼接 vec4 cVec4 vec4(aVec2, aFloat, aVec3); // 213 6 个分量取前 4 个 vec4 dVec4 vec4(aBvec2.x, aBvec2.y, aFloat, aBvec3.x);注意vec4(aVec2, aFloat, aVec3)的实参共有 6 个分量构造函数只取前 4 个填充——这正是英文文档所说实参分量数必须至少等于目标向量分量数的含义。vec3作为中间维度是连接 2D 与 4D 的桥梁理解它就能举一反三。分量访问x/y/z、r/g/b、s/t/p 三套命名vec3的 3 个分量可以通过三种语义命名访问06/README.md位置坐标语义.x、.y、.z颜色通道语义.r、.g、.b纹理坐标语义.s、.t、.pp对应z仓库文档将其解释为纹理空间坐标的第三轴它们指向完全相同的数据。对于vec4四套命名完整对应为06/README.mdvector[0] vector.r vector.x vector.s; vector[1] vector.g vector.y vector.t; vector[2] vector.b vector.z vector.p; vector[3] vector.a vector.w vector.q;对vec3而言则对应前三个。这种灵活性让同一段数据既可以当作空间坐标运算又可以当作颜色混合。此外向量分量还支持下标访问vec[0]、vec[1]、vec[2]。Swizzle任意顺序组合分量GLSL 向量最重要的特性之一是swizzle——可以按任意顺序取出、重排、甚至重复使用分量06/README.mdvec3 yellow, magenta, green; // 制作黄色红、绿通道赋 1.0蓝通道赋 0.0 yellow.rg vec2(1.0); // 赋 1.0 给 red 和 green 通道 yellow[2] 0.0; // 赋 0.0 给 blue 通道 // 制作品红把 green 与 blue 通道交换后赋值 magenta yellow.rbg; // 制作绿色把 Yellow 的 blue 通道0赋给 red 和 blue 通道 green.rgb yellow.bgb;在 06/hsb.frag 的rgb2hsb()转换函数中swizzle 被大规模使用c.bg、c.gb、p.xyw、p.yzx、q.w、q.y等正是靠分量重排实现了 RGB 与 HSB 两个色彩空间的高效换算。实战一用 vec3 表示颜色与渐变单标量广播与通道独立控制颜色是vec3最常见的应用。仓库 06/gradient.frag 完整展示了 vec3 的两种用法vec3 colorA vec3(0.149,0.141,0.912); // 逐分量定义起色蓝紫色 vec3 colorB vec3(1.000,0.833,0.224); // 逐分量定义止色金黄 void main() { vec2 st gl_FragCoord.xy/u_resolution.xy; vec3 color vec3(0.0); // 单标量广播初始化为黑色 vec3 pct vec3(st.x); // 单标量广播x 坐标复制到三个通道 // pct.r smoothstep(0.0,1.0, st.x); // 逐通道塑形 // pct.g sin(st.x*PI); // pct.b pow(st.x,0.5); color mix(colorA, colorB, pct); // vec3 版本 mix逐通道混合 ... }关键点在于第 23 行vec3 pct vec3(st.x);——它把归一化 x 坐标广播到r/g/b三个通道取消第 2527 行的注释后三个通道各自使用不同的塑形函数smoothstep、sin、pow就能对每个颜色通道独立控制混合比例做出复杂的彩色渐变。vec3 版本的 mix()glossary 的 mix 词条给出了mix()的完整重载float mix(float x, float y, float a) vec2 mix(vec2 x, vec2 y, vec2 a) vec3 mix(vec3 x, vec3 y, vec3 a) // 逐通道混合 vec4 mix(vec4 x, vec4 y, vec4 a)其计算规则为x×(1−a)y×a。当第三个参数a是vec3而非float时三个通道获得各自独立的插值权重这正是 06/README.md 强调的通过vec3类型的mix获得对每个颜色通道r/g/b混合百分比的独立控制。例如 06/easing.fraggl_FragColor vec4(vec3(mix(colorA, colorB, pct)),1.0);先用vec3的mix得到混合色再用vec4(...)构造器把三维向量与 alpha 值1.0拼成最终的gl_FragColor——这里恰好示范了vec3 与标量组合构造 vec4的规则。从 vec3 到 gl_FragColor几乎所有着色器的结尾都是把vec3颜色扩展成vec4输出。仓库中的标准模式02/hello_world.fraggl_FragColor vec4(1.0,0.0,1.0,1.0);直接四分量构造06/gradient.fraggl_FragColor vec4(color,1.0);vec3 alpha11/2d-noise.fraggl_FragColor vec4(vec3(n), 1.0);把float广播成vec3灰度再加 alpha。正如 05/README.md 的快速注释所说vec3构造器理解你希望用同一个值填充三个颜色通道而vec4构造器理解你要用一个三维向量加一个第四值alpha 不透明度拼成四维向量。实战二vec3 作为空间坐标与方向向量归一化坐标的表示除了颜色vec3也常用于空间计算。虽然屏幕坐标通常用vec2表示如vec2 st gl_FragCoord.xy/u_resolution.xy;但一旦进入三维几何领域vec3就是主力。在 07/triangle.frag 的三角形 SDF 实现中vec3 e0, e1, e2;分别保存三条边的法线信息前两个分量是归一化边法线第三个分量是截距并通过e0.xy normalize(p1 - p0).yx * vec2(1.0, -1.0);这样的 swizzle 运算构造。最终length(vec3(a, b, c))把三个距离值打包进vec3求模得到抗锯齿距离场。三维噪声与 Simplex 噪声11/2d-snoise.frag及其清晰版 11/2d-snoise-clear.frag展示了vec3在 Simplex 噪声实现中的向量运算威力vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec3 permute(vec3 x) { return mod289(((x*34.0)1.0)*x); }这些函数对vec3整体进行逐分量运算配合vec3(0.0, i1.y, 1.0)、i.x vec3(0.0, i1.x, 1.0)等构造与加法在一条表达式里同时计算多个晶格角点的哈希值——这正是 GPU 并行向量指令的优势所在。在 2D 值噪声 11/2d-noise.frag 中vec4(vec3(n), 1.0)则把一维噪声值广播为灰度颜色输出。HSB 色彩空间中的向量运算06/hsb.frag 的hsb2rgb()函数是vec3同时扮演颜色与向量的教科书案例vec3 hsb2rgb( in vec3 c ){ vec3 rgb clamp(abs(mod(c.x*6.0vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0); rgb rgb*rgb*(3.0-2.0*rgb); return c.z * mix(vec3(1.0), rgb, c.y); }输入vec3 c的.x/.y/.z分量分别承载 Hue、Saturation、Brightnessvec3(0.0,4.0,2.0)是构造偏移量mod()、abs()、clamp()逐分量作用最终c.z * mix(vec3(1.0), rgb, c.y)用标量亮度缩放向量。主函数中color hsb2rgb(vec3(st.x,1.0,st.y));06/hsb.frag把屏幕坐标 x/y 映射进 HSB 的三个分量绘出色谱图。同样极坐标色轮 06/hsb-colorwheel.frag 依靠vec3的mod、clamp、mix实现 HSB→RGB 转换。语法要点与常见误区分量总数必须达标构造vec3时实参提供的分量总数必须不少于 3。文档明确列出glossary/vec3/README.md可以是一个vec3、一个vec4取前 3、一个vec2加一个float、三个float或任何分量总数 ≥ 3的组合。超过 3 个分量时按顺序截取前 3 个。浮点字面量的.0约定GLSL 中向量构造要求float实参因此仓库代码中所有标量都写作1.0、0.0而非1、0。例如 03/space.frag 的vec4(st.x,st.y,0.0,1.0)。虽然部分实现允许整型隐式转换但遵循显式.0写法是最稳妥的跨平台习惯。precision 声明vec3的存储精度受着色器顶部的精度声明影响。仓库所有示例都在#ifdef GL_ES块内声明precision mediump float;如 02/hello_world.frag在 WebGL/移动端环境下为包括vec3在内的浮点类型设定中等精度。swizzle 的赋值限制通过 swizzle 可以赋值yellow.rg vec2(1.0);但不能在同一个 swizzle 表达式中重复同一个分量如vec3(1.0).xx这种构造式取值是合法的但vec.rr ...之类的赋值在一些实现中受限。仓库中的 swizzle 用法06/README.md均遵循读取可任意重排、写入按目标位置对应的规则。结语vec3 是理解 GLSL 数据流的钥匙从 glossary/vec3/README-vi.md 这一词条出发我们完整覆盖了vec3的定义、四种构造方式、三套分量命名与 swizzle 语法并通过 06/ 的颜色渐变、07/ 的距离场绘制、11/ 的噪声算法等章节源码印证了vec3在颜色与向量两种语义下的核心地位。无论是vec3(0.0)的单标量广播、mix()的逐通道插值还是hsb2rgb()中密集的向量运算vec3都是串联起整个 The Book of Shaders 教程的枢纽类型。掌握了它你就掌握了阅读和理解仓库内绝大多数片段着色器的基础语法。若想继续深入可对照阅读同族的 vec2、vec4 词条以及颜色章节 06/README.md 与形状章节 07/README.md 的完整源码示例。赞分享【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载相关推荐《The Book of Shaders》GLSL 类型精讲vec2 二维浮点向量详解《The Book of Shaders》GLSL 类型精讲vec2 二维浮点向量详解 导读 vec2 是 GLSLOpenGL Shading LanguThe Book of Shaders 术语精解GLSL vec2 二维浮点向量的声明、初始化与实战用法The Book of Shaders 术语精解GLSL vec2 二维浮点向量的声明、初始化与实战用法 本篇技术指南以 The Book of Shader《The Book of Shaders》GLSL 词条精讲bvec2 —— 二维布尔向量Boolean Vector《The Book of Shaders》GLSL 词条精讲bvec2 —— 二维布尔向量Boolean Vector bvec2 是 GLSL 内置的二上一篇AWS CLI codebuild batch-get-build-batches 命令详解批量查询 CodeBuild 构建批次状态与运行细节下一篇Terragrunt OpenTofu/Terraform 命令快捷键Shortcuts完全指南drop-in 替换用法与底层实现解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/16 6:20:07 · 阅读 1.2k The Book of Shaders 词汇精讲：GLSL vec3 三维浮点向量的声明、构造与实战应用
【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载导读vec3是 GLSL 着色语言中最核心的数据类型之一——一个包含 3 个浮点分量的向量。在 The Book of Shaders 这本面向片段着色器Fragment Shader的循序渐进教程中vec3几乎无处不在既用来表示 RGB 颜色三个通道各占一个分量也用来表示三维空间坐标与方向。本文以 glossary/vec3/README-vi.md 及其英文原版 glossary/vec3/README.md 为主体系统讲解vec3的四种构造方式、分量访问与 swizzle 语法并结合本仓库各章节的真实.frag着色器源码展示它作为颜色与向量的双重身份在渐变、HSB 色彩空间、噪声与图形绘制中的实际用法。读完本文你将能熟练声明与组合vec3看懂仓库中绝大多数示例着色器的颜色与坐标运算。vec3 是什么浮点向量的定义在 GLSL 中vec3是一个由 3 个float分量组成的向量类型。glossary 文档将其定义为 Vector số thực 3 chiều三维实数向量见 glossary/vec3/README-vi.md英文版则直接写明 3 dimensional floating point vector三维浮点向量见 glossary/vec3/README.md。vec3不是孤立存在的类型它与 GLSL 的标量、向量、矩阵类型家族构成完整的类型体系。glossary 文档的参考更多Tham khảo thêm / See Also一节列出了全部相关类型包括标量类型bool、int、float布尔向量bvec2、bvec3、bvec4整型向量ivec2、ivec3、ivec4浮点向量vec2、vec3、vec4矩阵mat2、mat3、mat4在 The Book of Shaders 的着色器中vec3主要承担两类语义RGB 颜色vec3(1.0, 0.0, 0.0)即红色与三维空间向量坐标、方向、法线等。正如 06/README.md 所述颜色是理解向量类型的绝佳入口因为你可以把颜色与空间坐标互换思考。vec3 的四种构造方式Declarationglossary 文档给出了完整的构造示例glossary/vec3/README-vi.mdvec3 aVec3 vec3(1.0, 1.0, 1.0); vec3 bVec3 vec3(1.0); vec3 cVec3 vec3(aVec4); vec3 dVec3 vec3(aVec4.x, aVec4.y, aVec4.z); vec3 eVec3 vec3(aVec2, aFloat); vec3 fVec3 vec3(aVec2.x, aVec2.y, aFloat);这四种方式可以归纳为文档中明确列出的初始化规则glossary/vec3/README-vi.md逐分量指定标量值vec3(1.0, 1.0, 1.0)三个分量分别给出float值也是最直观的写法。只给一个标量值vec3(1.0)GLSL 会把这个值复制给全部三个分量等价于vec3(1.0, 1.0, 1.0)。这是文档强调的指定 1 个公共值给 3 个分量。由更高维向量截取vec3(aVec4)从vec4中按顺序取前三个分量初始化。文档指出各分量将按顺序被初始化Các thành phần sẽ được khởi tạo theo thứ tự。由多个向量/标量组合拼接vec3(aVec2, aFloat)把vec2的两个分量与一个float依次填入。英文版进一步补充了约束条件glossary/vec3/README.md构造函数的实参总分量数必须不少于待初始化向量的分量数The arguments of the constructor must have at least as many components as the vector that is initialized。例如vec3(aVec2, aFloat)是 213 个分量合法如果实参只有 2 个分量如vec3(aVec2)在部分严格实现中则不被允许。为什么单标量构造如此常见单标量构造vec3(1.0)在仓库的着色器代码中出现频率极高最常见的场景是用 0.0 初始化一个颜色/累加变量或用一个值填充三个通道06/gradient.frag 中vec3 color vec3(0.0);初始化黑色累加变量06/easing.frag 中vec3 colorA vec3(0.149,0.141,0.912);、vec3 colorB vec3(1.000,0.833,0.224);用逐分量方式定义渐变的起止色07/circle.frag 中vec3 color vec3(circle(st,0.9));把一个float圆的 SDF 距离场结果广播到三个分量得到灰度圆形07/shapes.frag 中color vec3(1.0-smoothstep(.4,.41,d));同理把一个浮点亮度广播成 RGB 灰度。这种单标量广播行为是 GLSL 向量构造器的一大特性也是理解一个数值如何变成颜色的关键。与 vec2、vec4 构造规则的对照vec3的构造规则与同族类型完全一致。对比 glossary/vec2/README.md 的vec2与 glossary/vec4/README.md 的vec4// vec2逐分量、单标量、高维截取 vec2 aVec2 vec2(1.0, 1.0); vec2 bVec2 vec2(1.0); vec2 cVec2 vec2(aVec3); // 从 vec3 取前两个分量 vec2 dVec2 vec2(aVec3.x, aVec3.y); // vec4标量、向量、矩阵混合拼接 vec4 cVec4 vec4(aVec2, aFloat, aVec3); // 213 6 个分量取前 4 个 vec4 dVec4 vec4(aBvec2.x, aBvec2.y, aFloat, aBvec3.x);注意vec4(aVec2, aFloat, aVec3)的实参共有 6 个分量构造函数只取前 4 个填充——这正是英文文档所说实参分量数必须至少等于目标向量分量数的含义。vec3作为中间维度是连接 2D 与 4D 的桥梁理解它就能举一反三。分量访问x/y/z、r/g/b、s/t/p 三套命名vec3的 3 个分量可以通过三种语义命名访问06/README.md位置坐标语义.x、.y、.z颜色通道语义.r、.g、.b纹理坐标语义.s、.t、.pp对应z仓库文档将其解释为纹理空间坐标的第三轴它们指向完全相同的数据。对于vec4四套命名完整对应为06/README.mdvector[0] vector.r vector.x vector.s; vector[1] vector.g vector.y vector.t; vector[2] vector.b vector.z vector.p; vector[3] vector.a vector.w vector.q;对vec3而言则对应前三个。这种灵活性让同一段数据既可以当作空间坐标运算又可以当作颜色混合。此外向量分量还支持下标访问vec[0]、vec[1]、vec[2]。Swizzle任意顺序组合分量GLSL 向量最重要的特性之一是swizzle——可以按任意顺序取出、重排、甚至重复使用分量06/README.mdvec3 yellow, magenta, green; // 制作黄色红、绿通道赋 1.0蓝通道赋 0.0 yellow.rg vec2(1.0); // 赋 1.0 给 red 和 green 通道 yellow[2] 0.0; // 赋 0.0 给 blue 通道 // 制作品红把 green 与 blue 通道交换后赋值 magenta yellow.rbg; // 制作绿色把 Yellow 的 blue 通道0赋给 red 和 blue 通道 green.rgb yellow.bgb;在 06/hsb.frag 的rgb2hsb()转换函数中swizzle 被大规模使用c.bg、c.gb、p.xyw、p.yzx、q.w、q.y等正是靠分量重排实现了 RGB 与 HSB 两个色彩空间的高效换算。实战一用 vec3 表示颜色与渐变单标量广播与通道独立控制颜色是vec3最常见的应用。仓库 06/gradient.frag 完整展示了 vec3 的两种用法vec3 colorA vec3(0.149,0.141,0.912); // 逐分量定义起色蓝紫色 vec3 colorB vec3(1.000,0.833,0.224); // 逐分量定义止色金黄 void main() { vec2 st gl_FragCoord.xy/u_resolution.xy; vec3 color vec3(0.0); // 单标量广播初始化为黑色 vec3 pct vec3(st.x); // 单标量广播x 坐标复制到三个通道 // pct.r smoothstep(0.0,1.0, st.x); // 逐通道塑形 // pct.g sin(st.x*PI); // pct.b pow(st.x,0.5); color mix(colorA, colorB, pct); // vec3 版本 mix逐通道混合 ... }关键点在于第 23 行vec3 pct vec3(st.x);——它把归一化 x 坐标广播到r/g/b三个通道取消第 2527 行的注释后三个通道各自使用不同的塑形函数smoothstep、sin、pow就能对每个颜色通道独立控制混合比例做出复杂的彩色渐变。vec3 版本的 mix()glossary 的 mix 词条给出了mix()的完整重载float mix(float x, float y, float a) vec2 mix(vec2 x, vec2 y, vec2 a) vec3 mix(vec3 x, vec3 y, vec3 a) // 逐通道混合 vec4 mix(vec4 x, vec4 y, vec4 a)其计算规则为x×(1−a)y×a。当第三个参数a是vec3而非float时三个通道获得各自独立的插值权重这正是 06/README.md 强调的通过vec3类型的mix获得对每个颜色通道r/g/b混合百分比的独立控制。例如 06/easing.fraggl_FragColor vec4(vec3(mix(colorA, colorB, pct)),1.0);先用vec3的mix得到混合色再用vec4(...)构造器把三维向量与 alpha 值1.0拼成最终的gl_FragColor——这里恰好示范了vec3 与标量组合构造 vec4的规则。从 vec3 到 gl_FragColor几乎所有着色器的结尾都是把vec3颜色扩展成vec4输出。仓库中的标准模式02/hello_world.fraggl_FragColor vec4(1.0,0.0,1.0,1.0);直接四分量构造06/gradient.fraggl_FragColor vec4(color,1.0);vec3 alpha11/2d-noise.fraggl_FragColor vec4(vec3(n), 1.0);把float广播成vec3灰度再加 alpha。正如 05/README.md 的快速注释所说vec3构造器理解你希望用同一个值填充三个颜色通道而vec4构造器理解你要用一个三维向量加一个第四值alpha 不透明度拼成四维向量。实战二vec3 作为空间坐标与方向向量归一化坐标的表示除了颜色vec3也常用于空间计算。虽然屏幕坐标通常用vec2表示如vec2 st gl_FragCoord.xy/u_resolution.xy;但一旦进入三维几何领域vec3就是主力。在 07/triangle.frag 的三角形 SDF 实现中vec3 e0, e1, e2;分别保存三条边的法线信息前两个分量是归一化边法线第三个分量是截距并通过e0.xy normalize(p1 - p0).yx * vec2(1.0, -1.0);这样的 swizzle 运算构造。最终length(vec3(a, b, c))把三个距离值打包进vec3求模得到抗锯齿距离场。三维噪声与 Simplex 噪声11/2d-snoise.frag及其清晰版 11/2d-snoise-clear.frag展示了vec3在 Simplex 噪声实现中的向量运算威力vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec3 permute(vec3 x) { return mod289(((x*34.0)1.0)*x); }这些函数对vec3整体进行逐分量运算配合vec3(0.0, i1.y, 1.0)、i.x vec3(0.0, i1.x, 1.0)等构造与加法在一条表达式里同时计算多个晶格角点的哈希值——这正是 GPU 并行向量指令的优势所在。在 2D 值噪声 11/2d-noise.frag 中vec4(vec3(n), 1.0)则把一维噪声值广播为灰度颜色输出。HSB 色彩空间中的向量运算06/hsb.frag 的hsb2rgb()函数是vec3同时扮演颜色与向量的教科书案例vec3 hsb2rgb( in vec3 c ){ vec3 rgb clamp(abs(mod(c.x*6.0vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0); rgb rgb*rgb*(3.0-2.0*rgb); return c.z * mix(vec3(1.0), rgb, c.y); }输入vec3 c的.x/.y/.z分量分别承载 Hue、Saturation、Brightnessvec3(0.0,4.0,2.0)是构造偏移量mod()、abs()、clamp()逐分量作用最终c.z * mix(vec3(1.0), rgb, c.y)用标量亮度缩放向量。主函数中color hsb2rgb(vec3(st.x,1.0,st.y));06/hsb.frag把屏幕坐标 x/y 映射进 HSB 的三个分量绘出色谱图。同样极坐标色轮 06/hsb-colorwheel.frag 依靠vec3的mod、clamp、mix实现 HSB→RGB 转换。语法要点与常见误区分量总数必须达标构造vec3时实参提供的分量总数必须不少于 3。文档明确列出glossary/vec3/README.md可以是一个vec3、一个vec4取前 3、一个vec2加一个float、三个float或任何分量总数 ≥ 3的组合。超过 3 个分量时按顺序截取前 3 个。浮点字面量的.0约定GLSL 中向量构造要求float实参因此仓库代码中所有标量都写作1.0、0.0而非1、0。例如 03/space.frag 的vec4(st.x,st.y,0.0,1.0)。虽然部分实现允许整型隐式转换但遵循显式.0写法是最稳妥的跨平台习惯。precision 声明vec3的存储精度受着色器顶部的精度声明影响。仓库所有示例都在#ifdef GL_ES块内声明precision mediump float;如 02/hello_world.frag在 WebGL/移动端环境下为包括vec3在内的浮点类型设定中等精度。swizzle 的赋值限制通过 swizzle 可以赋值yellow.rg vec2(1.0);但不能在同一个 swizzle 表达式中重复同一个分量如vec3(1.0).xx这种构造式取值是合法的但vec.rr ...之类的赋值在一些实现中受限。仓库中的 swizzle 用法06/README.md均遵循读取可任意重排、写入按目标位置对应的规则。结语vec3 是理解 GLSL 数据流的钥匙从 glossary/vec3/README-vi.md 这一词条出发我们完整覆盖了vec3的定义、四种构造方式、三套分量命名与 swizzle 语法并通过 06/ 的颜色渐变、07/ 的距离场绘制、11/ 的噪声算法等章节源码印证了vec3在颜色与向量两种语义下的核心地位。无论是vec3(0.0)的单标量广播、mix()的逐通道插值还是hsb2rgb()中密集的向量运算vec3都是串联起整个 The Book of Shaders 教程的枢纽类型。掌握了它你就掌握了阅读和理解仓库内绝大多数片段着色器的基础语法。若想继续深入可对照阅读同族的 vec2、vec4 词条以及颜色章节 06/README.md 与形状章节 07/README.md 的完整源码示例。赞分享【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载相关推荐《The Book of Shaders》GLSL 类型精讲vec2 二维浮点向量详解《The Book of Shaders》GLSL 类型精讲vec2 二维浮点向量详解 导读 vec2 是 GLSLOpenGL Shading LanguThe Book of Shaders 术语精解GLSL vec2 二维浮点向量的声明、初始化与实战用法The Book of Shaders 术语精解GLSL vec2 二维浮点向量的声明、初始化与实战用法 本篇技术指南以 The Book of Shader《The Book of Shaders》GLSL 词条精讲bvec2 —— 二维布尔向量Boolean Vector《The Book of Shaders》GLSL 词条精讲bvec2 —— 二维布尔向量Boolean Vector bvec2 是 GLSL 内置的二上一篇AWS CLI codebuild batch-get-build-batches 命令详解批量查询 CodeBuild 构建批次状态与运行细节下一篇Terragrunt OpenTofu/Terraform 命令快捷键Shortcuts完全指南drop-in 替换用法与底层实现解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考