【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载导读本文围绕 thebookofshaders 仓库第 08 章 08/README.md 的核心主题展开用 2D 矩阵对坐标空间进行平移Translate、旋转Rotation与缩放Scale。你将学会如何用 GLSL 内置的mat2构造旋转矩阵和缩放矩阵理解移动空间而非移动物体的着色器思维并通过仓库中的 cross-translate.frag、cross-rotate.frag、cross-scale.frag 与 yuv.frag 四个可运行示例掌握把矩阵变换应用到任意图形乃至颜色向量的完整方法。读完本文你将能独立完成一个由多个图形组合、动态运动的 HUD 风格作品。矩阵是一种非常强大的向量操作工具。掌握了矩阵的用法你就能自由地对任何用向量表达的事物进行平移、缩放与旋转——这也是后续章节构造复杂程序纹理的基础。核心思想移动坐标空间而不是移动物体在上一章第 07 章形状中我们已经学会如何用smoothstep等函数绘制矩形、圆、三角形等基本图形。要让这些图形动起来最直接的想法似乎是去修改图形的坐标。但本书采用的技巧恰恰相反保持物体坐标不变移动它所在的坐标系本身。在片段着色器中st变量保存着每个片段的归一化位置gl_FragCoord.xy / u_resolution.xy。所谓平移图形只需要给st加上一个向量整个坐标空间就会跟着移动vec2 st gl_FragCoord.xy / u_resolution.xy; vec2 translate vec2(cos(u_time), sin(u_time)); st translate * 0.35; // 整个空间绕圆周移动用仓库中的 cross-translate.frag 亲自验证取消第 35 行// color vec3(st.x,st.y,0.0);的注释你会看到背景上的坐标渐变也随之移动——这正是空间本身在平移的直接证据。练习建议为十字赋予真实运动的质感原文给出了一个极佳的实践方向结合u_time与造型函数shaping functions让十字按照你感兴趣的真实世界运动方式移动。波浪的来去、钟摆的往复、弹球的反弹、汽车的加速、自行车的刹车都是值得记录与模拟的参考对象。这一练习为下一节的旋转动画埋下了伏笔。GLSL 中的矩阵mat2、mat3 与 mat4矩阵是按行和列组织的数字集合用矩阵乘以向量遵循一套精确规则从而以特定方式改变向量的值。GLSL 原生支持三种方阵类型仓库术语表 glossary/mat2/README.md、glossary/mat3/README.md、glossary/mat4/README.md 给出了它们的声明与初始化方式类型维度典型初始化示例说明mat22×2mat2(1.0, 0.0, 0.0, 1.0)2D 变换平移之外的旋转、缩放mat33×3mat3(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0)3D 变换或 3 维颜色空间变换mat44×4mat4(1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0)3D 齐次坐标变换含平移需要特别注意的是初始化顺序GLSL 矩阵按列填充。例如mat2的四个参数依次是第一列的两个元素、第二列的两个元素即mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle))实际构造出的矩阵第一列为(cos, -sin)、第二列为(sin, cos)。在矩阵操作上GLSL 支持矩阵乘法*矩阵与向量、矩阵与矩阵相乘matrixCompMult()对两个矩阵做逐分量component-wise乘法。其声明与语义见 glossary/matrixCompMult/README.md例如mat2 matrixCompMult(mat2 x, mat2 y)结果矩阵每个分量result[i][j] x[i][j] * y[i][j]这与数学上的矩阵乘法截然不同。仓库中的 08/matrices.frag 是一份矩阵参考速查包含 2D 旋转、3D 绕 X/Y/Z 轴旋转rotateX3D、rotateY3D、rotateZ3D及其 4D 版本、3D 缩放scale4D与平移translate4D的完整构造可以作为后续练习的对照资料。旋转绕原点旋转坐标系有了矩阵概念就可以构造旋转矩阵。原文给出了 2D 旋转矩阵的标准公式仓库中的 08/rotmat.png 展示了该数学表达式并将它实现为如下 GLSL 函数mat2 rotate2d(float _angle){ return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); }该函数将二维向量绕vec2(0.0)原点旋转。注意我们画图形时并不在原点。十字形状画在画布中心vec2(0.5)因此旋转前必须先把空间中心移到原点旋转之后再移回去形成经典的三步序列参见 cross-rotate.frag 的完整实现void main(){ vec2 st gl_FragCoord.xy / u_resolution.xy; vec3 color vec3(0.0); // 1. 把空间从中心移到 vec2(0.0) st - vec2(0.5); // 2. 旋转空间角度随时间正弦变化 st rotate2d( sin(u_time) * PI ) * st; // 3. 移回原来的位置 st vec2(0.5); color vec3(cross(st, 0.4)); gl_FragColor vec4(color, 1.0); }旋转练习原文为这一节设计了三个递进式练习全部可以通过 cross-rotate.frag 的注释开关验证取消第 45 行注释// color vec3(st.x,st.y,0.0);观察旋转过程中坐标空间本身的变化注释掉第 37 行与第 39 行的平移观察缺少移回中心的后果——旋转将绕画布左下角进行图形会飞出视野用旋转改进上一节平移练习中的动画将十字的运动从简单的圆周平移升级为自转 公转。仓库中的 08/cross-animated.frag 正是这一进阶的示例实现——它先用st rotate2d( sin(u_time*0.5)*PI ) * st;让图形绕自身中心往复旋转再叠加st translate*0.35;的圆周平移将旋转与平移两种变换组合在同一着色器中。缩放对角矩阵平移与旋转之外矩阵同样可以缩放物体大小——这正是 3D 建模软件以及 Processing 中pushMatrix/popMatrix的底层机制。2D 缩放矩阵是一个对角矩阵非对角线元素为零示意图见 08/scale.pngmat2 scale(vec2 _scale){ return mat2(_scale.x, 0.0, 0.0, _scale.y); }在 cross-scale.frag 中缩放同样遵循移到原点 → 变换 → 移回的流程并且用时间驱动缩放系数产生呼吸效果st - vec2(0.5); st scale( vec2(sin(u_time) 1.0) ) * st; // 缩放系数在 0~2 之间往复 st vec2(0.5);缩放练习取消第 42 行注释观察空间坐标如何被缩放缩放中心位于原点空间会被拉伸或压缩注释掉第 37 行与第 39 行的平移观察以画布角落为原点的缩放效果组合旋转矩阵与缩放矩阵先构造rotate2d(angle) * scale(scaleVec)之类的复合矩阵再乘向量。注意变换顺序至关重要——矩阵乘法不满足交换律左乘顺序决定了先旋转再缩放还是先缩放再旋转两种结果截然不同。综合创作用变换拼装 HUD现在你已经掌握了绘制图形第 07 章、平移、旋转与缩放的全部基础。原文给出的收尾练习是设计并构造一个假的 UI 或 HUD平视显示器。将多个十字、矩形等基础图形通过矩阵变换组合成仪表盘、瞄准框、状态栏等界面元素并让部分元素以u_time驱动运动即可获得一个可实时交互的着色器 HUD。这也是把变换从单个图形推广到合成场景的关键一步。矩阵的另一个应用YUV 颜色空间变换矩阵变换的对象不限于空间坐标——颜色同样可以视为向量进行矩阵运算。YUV 是一种用于模拟照片与视频模拟编码的色彩空间它考虑人类感知特性通过降低色度chrominance分量的带宽来实现压缩。RGB 与 YUV 之间的转换本质上就是一次 3×3 矩阵乘法。仓库中的 yuv.frag 完整实现了这一思路直接使用mat3作为转换矩阵// YUV to RGB matrix mat3 yuv2rgb mat3(1.0, 0.0, 1.13983, 1.0, -0.39465, -0.58060, 1.0, 2.03211, 0.0); // RGB to YUV matrix mat3 rgb2yuv mat3(0.2126, 0.7152, 0.0722, -0.09991, -0.33609, 0.43600, 0.615, -0.5586, -0.05639); void main(){ vec2 st gl_FragCoord.xy / u_resolution.xy; vec3 color vec3(0.0); // UV 取值范围是 -1 到 1需要把 st(0.0~1.0) 重映射 st - 0.5; // 变为 -0.5 ~ 0.5 st * 2.0; // 变为 -1.0 ~ 1.0 // 把 st 作为三维向量的 y、z 分量与 3x3 矩阵相乘 color yuv2rgb * vec3(0.5, st.x, st.y); gl_FragColor vec4(color, 1.0); }这段代码展示了三个值得留意的细节mat3的 9 个参数同样按列优先填充每一列对应输出 RGB或 YUV的一个分量与输入三个分量之间的线性组合系数为了让屏幕坐标映射到 UV 的有效区间先把st从[0,1]重映射到[-1,1]屏幕横纵坐标分别充当 U、V 分量固定 Y 亮度分量为0.5将二维屏幕映射成一张完整的 YUV 色度图再由矩阵乘法还原为 RGB 显示。由此可见用矩阵移动值的思想完全适用于颜色空间。这类矩阵化的颜色处理也是后续章节如第 16 章混合与第 18 章 LUT中高级色彩操作的基础。小结与工具箱本章核心收获可以概括为三句话平移给st加向量即可移动整个坐标空间旋转rotate2d(angle)构造 2D 旋转矩阵配合移到原点 → 变换 → 移回三步序列完成绕任意中心点的旋转缩放对角矩阵scale(vec2)控制各轴缩放比例变换顺序决定最终效果。矩阵变换对所有向量表达的事物一视同仁——坐标是向量颜色也是向量因此这些技巧将贯穿本书后续全部章节用于把基础图形组合成漂亮的过程化纹理与图案。如果你希望进一步探索可以将 08/matrices.frag 中的 3D 旋转矩阵rotateX3D、rotateY3D、rotateZ3D、scale4D、translate4D作为进阶参考理解如何把本章的 2D 思路推广到三维空间同时可以对照 glossary/mat2/README.md 与 glossary/matrixCompMult/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 第 08 章GLSL 二维矩阵变换实战指南 —— 平移、旋转、缩放与 YUV 色彩空间The Book of Shaders 第 08 章GLSL 二维矩阵变换实战指南 —— 平移、旋转、缩放与 YUV 色彩空间 本章 08/README vThe Book of Shaders 精读用 GLSL 二维矩阵变换平移、旋转与缩放坐标空间The Book of Shaders 精读用 GLSL 二维矩阵变换平移、旋转与缩放坐标空间 本篇文章精读开源项目 thebookofshaders httThe Book of Shaders 实战精读08GLSL 二维矩阵变换——平移、旋转与缩放The Book of Shaders 实战精读08GLSL 二维矩阵变换——平移、旋转与缩放 导读 本章是《The Book of Shaders》上一篇思源宋体CN7种字重免费商用字体完全指南下一篇终极QMK Toolbox机械键盘固件刷写完全指南15分钟快速上手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考