The Book of Shaders 开篇导读：从 CMYK 半色调到 Fragment Shaders 的并行渲染革命

【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载导读本文对应 The Book of Shaders 开源项目的第 00 章引言系统讲解片段着色器Fragment Shaders这一革命性渲染技术的核心思想它如何以非串行的并行方式、在极短时间内完成整幅图像的像素级计算。读完本文你将理解 shaders 与 CPU 串行绘图在本质上的区别、GLSL 的跨平台适用场景、本书的章节路线图与读者门槛以及本仓库如何把每章的.frag着色器变成浏览器里可交互的实时演示。引言同一幅画两种生产方式这一章的开篇用一个极具对比性的例子引出全书的主题同样一幅画可以用两种截然不同的方式产生。第一种方式是梵高式的画家用画笔一层一层涂抹颜料耗时数小时这是一条严格的串行serial流水线——每一步都依赖上一步的完成。第二种方式由四个像素矩阵在数秒钟内并行生成一个矩阵负责青色Cyan、一个负责品红Magenta、一个负责黄色Yellow、一个负责黑色Black。关键区别在于第二种方式是**非串行non-serial**的即所有像素的计算同时进行而不是一步一步执行。这正是 fragment shaders 与 CPU 传统绘图之间最本质的差异。这个开篇例子在仓库中并非只是抽象描述而是真实可运行的可交互演示。第 00 章的 Markdown 源文件 00/README-es.md 开头就嵌入了一段 HTML 画布标签canvas idcustom classcanvas>uniform sampler2D u_tex0; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time;这四个uniform变量是所有本书 shader 的公共输入接口u_tex0是绑定的纹理此处即梵高画作u_resolution是画布分辨率u_mouse是鼠标位置u_time是动画时间。着色器为屏幕上的每一个像素独立执行一遍main()这即是所有像素同时计算的硬件基础。关键函数链如下vec4 rgb2cmyki (in vec4 c) { float k max(max(c.r,c.g),c.b); return min(vec4(c.rgb/k,k),1.0); }rgb2cmyki把 RGB 颜色拆分为 CMY 三色分量加黑色通道 K随后halftone函数通过grid()把屏幕划分成半色调网点网格用length(fc-smp)计算每个片元到网点的距离来控制网点大小再为 C、M、Y、K 四个通道分别应用不同角度的旋转矩阵rotm()15°、75°、0°、45°最终用smoothstep合成半色调网点图案。右侧画面还支持鼠标交互——移动鼠标可实时调整网点尺寸与旋转角度R 3.14-(u_mouse.y/u_resolution.y)*(3.14/180.); S 12.0-(u_mouse.x/u_resolution.x)*7.0;也就是说读者打开第 00 章页面后拖动鼠标就能直观看到四个像素矩阵并行工作的实时效果——这本身就是全书交互式学习理念的第一次亮相。Fragment Shaders图形学领域的古腾堡印刷术本书对 fragment shaders 的历史定位是它可以被看作图形学领域的古腾堡印刷术。手工誊抄一本书是串行的、逐字逐句的而印刷术让整页文字一次性成型。同理fragment shaders 让整幅图像的所有像素一次性并行计算完成。这一革命性技术带来两个核心能力对屏幕渲染像素的完全控制你能精确决定屏幕上每一个像素的最终颜色极高的速度并行架构让渲染以远超 CPU 串行绘制的速度完成。正因为如此fragment shaders 被广泛用于从手机视频滤镜到震撼的 3D 视频游戏等各类场景。下图为第 00 章正文中用于佐证shader 在游戏中的应用的配图That Game Company 的《Journey》。随后的章节会让读者逐步发现这项技术难以置信地快速且强大并学会把它应用到专业与个人创作中。这本书为谁而写第 00 章明确划定了目标读者群创意编程者creative coders游戏开发者game developers工程师engineers他们需要具备一定的编程经验线性代数与三角学的基础知识想要把自己的作品提升到一个激动人心的新图形水准。如果你是完全零基础、想先学编程的读者原书建议先去学习 [Processing]一个面向创意编程的教学环境等熟悉之后再回来阅读。GLSL 的跨平台优势本书的核心教学语言是GLSLOpenGL Shading Language它最大的优势在于可编译并运行于多种平台。因为 GLSL shader 能在任何使用以下图形 API 的环境中运行OpenGLOpenGL ESWebGL这意味着你在本书学到的技能可以迁移到几乎任何图形环境[Processing] 草图[openFrameworks] 应用[Cinder] 交互装置[Three.js] 网站iOS/Android 游戏这本书覆盖哪些主题第 00 章给出了完整的全书路线图共分四大板块1. 基础从形状到图案先定义什么是 shader然后学习如何用程序化方式创建程序化形状procedural shapes图案patterns材质/纹理textures动画animations2. 图像处理掌握着色语言基础后进入更实用的场景图像运算image operations矩阵卷积matrix convolutions模糊blurs颜色滤镜color filters查找表lookup tables以及其他效果3. 模拟Conway 的生命游戏Conways Game of LifeGray-Scott 反应-扩散reaction-diffusion水波water ripples水彩效果watercolor effectsVoronoi 细胞Voronoi cells等等4. 进阶Ray Marching到书末会看到一系列基于**光线步进Ray Marching**的高级技术。对照仓库根目录的 README.md 目录结构可以看到上述内容被组织为编号章节00/关于本书、01/什么是 shader、02/Hello World、03/Uniforms、04/运行你的 shader、05/塑形函数、06/颜色、07/形状、08/矩阵、09/图案、10/随机、11/噪声、12/细胞噪声、13/分形布朗运动以及图像处理、模拟、3D 图形三大后续板块。交互式学习是本书的方法论原书特别强调每一章都配有可交互的示例。当你修改代码时屏幕上会立即看到变化。由于 shader 概念常常抽象且令人困惑交互式示例是理解材料的核心手段——你越快把概念付诸实践学习过程就越轻松。这一方法论在仓库中有着扎实的工程支撑00/index.php 等章节页面通过 PHP 读取同目录的README.md并用 Parsedown 库把 Markdown 渲染为 HTML页面的公共头部 header.php 会按需加载src/glslCanvas、src/glslEditor、src/glslGallery三套前端库src/main.js 中的loadGlslElements()是核心装配逻辑它遍历页面中所有带classcanvas的canvas标签读取data-fragment-url属性指定的.frag文件然后为每个画布实例化GlslCanvas对象new GlslCanvas(canvas[i])实现 shader 的实时编译与渲染对codeAndCanvas和simpleFunction类的代码编辑块则实例化GlslEditor让读者直接在页面上改写代码并立刻看到效果css/style.css如.canvas、.codeAndCanvas规则定义了交互元素的布局。首页 README.md 顶部的月亮 shadersrc/moon/moon.frag同样是这一机制的演示它把月球纹理贴到旋转球体上并叠加来自太阳的方向光与阴影全部在片段着色器内实时计算。这本书不包含什么为避免读者产生错误预期第 00 章明确划清了边界这不是一本 OpenGL / WebGL 的书OpenGL 与 WebGL 是远比 GLSL 或 fragment shaders 更大的主题。本书只聚焦于 GLSL pixel shaders 本身。原书建议想系统学习 OpenGL/WebGL 的读者参阅 OpenGL 官方入门教程、OpenGL 编程指南俗称红宝书以及《WebGL: Up and Running》。这不是一本数学书虽然书中会涉及大量依赖代数与三角学理解的算法和技术但不会深入讲解数学原理。原书建议读者手边常备《Mathematics for 3D Game Programming and Computer Graphics》第 3 版或《Essential Mathematics for Games and Interactive Applications》第 2 版作为数学参考。开始学习需要什么准备门槛极低只需要一个支持 WebGL 的现代浏览器如 Chrome、Firefox 或 Safari和网络连接点击页面底部的下一章按钮即可开始。可选的四种使用方式根据你的设备与需求原书提供了四种替代使用方式本仓库 appendix/ 目录下有对应的详细指引需求方式仓库文档离线阅读制作本书的离线版appendix/00/README.md无浏览器运行示例在树莓派上运行示例appendix/01/README.md实体书/便携阅读生成可打印 PDFappendix/02/README.md参与共建使用仓库解决 issue、分享代码根目录各语言 README方式一制作离线版在电脑上克隆仓库并启动本地服务即可。MacOS 下先用 Homebrew 安装依赖brew update brew upgrade brew install git php树莓派Raspbian下sudo apt-get update sudo apt-get upgrade sudo apt-get install git-core glslviewer php然后克隆并启动本地 PHP 服务cd ~ git clone --recursive https://github.com/patriciogonzalezvivo/thebookofshaders.git cd thebookofshaders git submodule foreach git submodule init git submodule update php -S localhost:8000浏览器打开http://localhost:8000/即可离线阅读全部章节。仓库根目录还提供了纯 Python 的实现 server.py它用标准库http.server复刻了同样的页面渲染逻辑包括?lanes等语言参数解析、PHP 模板处理与 Markdown 转换python3 server.py后同样监听 8000 端口。方式二树莓派 glslViewer树莓派自带 Broadcom GPU可绕过浏览器直接在控制台运行 shader。配套工具glslViewer支持代码保存后自动重新编译渲染配合-l标志可在屏幕角落实时预览同时用任意文本编辑器nano、vi、vim、emacs修改代码甚至可通过 ssh/sftp 远程操作sudo apt-get update sudo apt-get upgrade sudo apt-get install git-core glslviewer cd ~ git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git cd thebookofshaders方式三生成 PDF / EPUB先安装 glslViewer用于把 shader 示例编译成图片以及 Python 3、XeTeX 与 Pandoc# MacOS brew install glslviewer brew install --cask mactex-no-gui brew install pandoc python# 树莓派 (Raspbian) sudo apt-get install texlive-xetex pandoc python2.7然后克隆仓库并编译cd ~ git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git cd thebookofshaders make clean pdf # 生成 book.pdf make clean epub # 生成 book.epub可用 Calibre 等工具转成 .mobi 供 Kindle 使用这一流程的自动化实现位于 Makefile 与 src/parseBook.py后者读取各章README.md把其中的codeAndCanvas交互代码块替换为 GLSL 代码片段并调用glslViewer --headless -e wait,0.5 -E screenshot,...将每个 shader 渲染成 PNG 插图再调用 Pandoc 依次生成 tex/pdf/epub。方式四参与开源共建第 00 章末尾邀请读者直接使用本书的在线仓库来帮助解决问题issue与分享代码PR。仓库中每个章节目录00/至18/都同时维护着英文与多种语言中文、西班牙语、日语、韩语、法语、德语、俄语等的README-*.md版本例如本章的西班牙语版即 00/README-es.md中文版为 00/README-ch.md多语言页面通过?lanxx参数切换见 00/index.php 的语言选择逻辑。小结第 00 章是全书的引言它用梵高手绘与 CMYK 半色调网点着色器的对比把读者直接带入 fragment shaders 的并行思维世界用古腾堡印刷术的类比说明这项技术的历史性地位同时诚实划定了本书的边界——它专注于 GLSL 片段着色器本身既不深入 OpenGL/WebGL 体系也不展开数学推导。对本仓库而言这一章同时也是一份工程地图00/cmyk-halftone.frag 展示了标准 shader 结构与 uniform 用法src/main.js 揭示了交互式 canvas 的装配机制appendix/ 与 Makefile 则覆盖了离线阅读、树莓派运行、PDF/EPUB 输出三条完整的使用路径。读者只需一个支持 WebGL 的浏览器就可以按下一章按钮正式开始《The Book of Shaders》的片段着色器之旅。赞分享【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载相关推荐The Book of Shaders 序章精读从 CMYK 半调着色器出发理解 Fragment Shader 的并行本质The Book of Shaders 序章精读从 CMYK 半调着色器出发理解 Fragment Shader 的并行本质 《The Book of ShThe Book of Shaders 教程The Book of Shaders 教程 1. 项目介绍 The Book of Shaders 是一个由 Patricio Gonzalez Vivo 和如何用VectorChord构建高性价比向量搜索引擎100万向量存储成本仅需2.5美元如何用VectorChord构建高性价比向量搜索引擎100万向量存储成本仅需2.5美元 VectorChordvchord是一款为PostgreSQL设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考