【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载本指南对应《The Book of Shaders》第 4 章04/README-fr.md的技术主线如何把书中每一章编写的 Fragment Shader 真正跑起来。文章将带你走完作者为本书构建的完整工具生态浏览器显示、命令行渲染、在线编辑、分享与画廊策展并给出在 Three.js、Processing、openFrameworks、SFML 四大主流框架中接入这些 shader 的可运行代码同时结合本仓库04/ 示例目录 与 src/ 站点资源的源码级证据进行印证。读完你即可拥有从写一行 GLSL到在任意平台展示作品的完整实战能力。一、工具生态总览显示、创建、分享、策展这一章的核心是一套由作者Patricio Gonzalez Vivo为本书构建的 shader 工具生态系统覆盖了 shader 工作流的四个环节环节工具典型用途显示DisplayglslCanvas在浏览器canvas中直接渲染独立的 fragment shader本书所有在线示例均由此驱动命令行ConsoleglslViewer在 bash 脚本或 Unix 管道中运行 shader类似 ImageMagick 的用法也是树莓派上编译 shader 的利器创建CreateglslEditor带辅助小部件widgets的 GLSL 编辑器内嵌于本书示例也可作为独立 Web 应用运行分享ShareglslEditor 在线版导出 shader 的唯一 URL或直接导出到 openFrame.io 艺术展示平台策展CurateglslGallery将多个 shader 组织成画廊嵌入任意网站这套工具最重要的特性是跨平台一致同一份 shader 代码无需任何改动即可在 Linux 桌面、macOS、Windows、Raspberry Pi 以及浏览器上以相同方式运行——这也是后续所有章节示例能够复制即用的前提。二、在浏览器中显示glslCanvasglslCanvas 让运行一个独立 shader变得极其简单只需要在 HTML 中放置一个带glslCanvas类的canvas元素并通过data-fragment-url属性指向你的.frag文件即可canvas classglslCanvas>glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -E screenshot,yourOutputImage.pngyourShader.frag要渲染的 fragment shaderyourInputImage.png可选输入纹理-w 500 -h 500输出窗口/图像尺寸为 500×500-E screenshot,yourOutputImage.png执行截图命令把渲染结果保存为yourOutputImage.png。小提示不同翻译版本对该命令的写法略有差异例如 04/README-ch.md 中使用的是-s 1 -o yourOutputImage.png的形式含义同为保存一帧输出图像实际参数以你所安装的 glslViewer 版本帮助为准。glslViewer 的另一大价值是树莓派由于它能够在树莓派上直接编译并全屏显示 shaderopenFrame.io 正是基于它来展示 shader 艺术作品。此外如果你习惯离线使用 SublimeText 编写代码可以安装 glslViewer 的 SublimeText 插件包在编辑器内一键预览 shader见下方 glslViewer 运行效果。四、编写与分享glslEditor为了降低 GLSL 编码的抽象感作者开发了 glslEditor 编辑器它内嵌在本书的实时示例中参见 src/main.js 中.codeAndCanvas元素的解析逻辑编辑器以 250px 画布跟随、右侧浮动、带导出按钮等选项初始化提供一系列实用小部件让代码编辑过程看得见、摸得着。你也可以在浏览器中将其作为独立 Web 应用打开使用。分享能力无论是内嵌版还是独立版编辑器都提供导出按钮——你可以把 shader 保存到线上并获得一个唯一 URL 用于分享甚至可以直接导出为 openFrame.io 兼容格式让 shader 进入数字艺术展框如下方导出流程动图所示。五、策展你的作品glslGallery分享代码只是把 shader 当作艺术作品分享的开始。glslGallery 是一个画廊工具用于把多个 shader 组织成可嵌入任何网站的展示画廊适合作品集或教学页面批量陈列。至此从编写 → 显示 → 分享 → 策展的完整闭环打通。六、贯穿全书的 uniform 命名约定在进入框架集成之前有必要先明确一个约定本书所有 shader 统一使用以下 uniform 变量名从仓库中的示例 shader 可以清楚看到这一规律uniform vec2 u_resolution;画布/窗口分辨率像素用于把gl_FragCoord归一化到 0.0~1.0uniform float u_time;运行以来的秒数驱动动画uniform vec2 u_mouse;或vec3鼠标位置驱动交互。例如 04/processing/data/shader.frag 与 04/sfml/data/shader.frag 中的标准头部即为此约定而主站源码 src/moon/moon.frag 甚至额外使用了u_tex0、u_tex0Resolution这类纹理 uniform。理解了这套命名后续所有框架示例的对应关系就一目了然框架侧只需负责在每一帧把这三个值喂给 GPU 即可。七、在 Three.js 中运行Three.js 是 WebGL 生态中最知名的框架之一。在浏览器中你可以完全复用第二章学到的 shader 代码把它粘贴到下面 HTML 中idfragmentShader的 script 标签里body div idcontainer/div script srcjs/three.min.js/script script idvertexShader typex-shader/x-vertex void main() { gl_Position vec4( position, 1.0 ); } /script script idfragmentShader typex-shader/x-fragment uniform vec2 u_resolution; uniform float u_time; void main() { vec2 st gl_FragCoord.xy/u_resolution.xy; gl_FragColorvec4(st.x,st.y,0.0,1.0); } /script script var container; var camera, scene, renderer, clock; var uniforms; init(); animate(); function init() { container document.getElementById( container ); camera new THREE.Camera(); camera.position.z 1; scene new THREE.Scene(); clock new THREE.Clock(); var geometry new THREE.PlaneBufferGeometry( 2, 2 ); uniforms { u_time: { type: f, value: 1.0 }, u_resolution: { type: v2, value: new THREE.Vector2() }, u_mouse: { type: v2, value: new THREE.Vector2() } }; var material new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: document.getElementById( vertexShader ).textContent, fragmentShader: document.getElementById( fragmentShader ).textContent } ); var mesh new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( resize, onWindowResize, false ); document.onmousemove function(e){ uniforms.u_mouse.value.x e.pageX uniforms.u_mouse.value.y e.pageY } } function onWindowResize( event ) { renderer.setSize( window.innerWidth, window.innerHeight ); uniforms.u_resolution.value.x renderer.domElement.width; uniforms.u_resolution.value.y renderer.domElement.height; } function animate() { requestAnimationFrame( animate ); render(); } function render() { uniforms.u_time.value clock.getDelta(); renderer.render( scene, camera ); } /script /body要点拆解顶点着色器示例给出的是一个最简顶点着色器直接把顶点位置原样输出渲染结果是一张覆盖屏幕的 2×2 平面uniforms 容器u_timef类型、u_resolutionv2、u_mousev2在 JS 侧以{ type, value }形式声明与 GLSL 声明一一对应每帧更新render()中通过clock.getDelta()累加u_timeonWindowResize()中刷新u_resolution鼠标移动事件更新u_mouse——这正是第六节所述约定在 Three.js 中的落地方式。仓库中的完整版本见 04/three_js/index.html它在文档示例基础上额外预置了u_mouse的声明与鼠标事件处理可直接打开运行。八、在 Processing 中运行Processing 会在 sketch 的data文件夹中查找名为shader.frag的 shader 文件所以请把书中的示例代码复制进data目录并正确命名PShader shader; void setup() { size(640, 360, P2D); noStroke(); shader loadShader(shader.frag); } void draw() { shader.set(u_resolution, float(width), float(height)); shader.set(u_mouse, float(mouseX), float(mouseY)); shader.set(u_time, millis() / 1000.0); shader(shader); rect(0,0,width,height); }loadShader(shader.frag)加载并编译着色器shader.set(...)向 uniform 传值注意u_time用millis() / 1000.0换算为秒shader(shader)用自定义着色器替换默认管线rect(0,0,width,height)绘制全屏矩形作为广告牌让每个像素都被 shader 处理。兼容旧版本在 Processing 2.1 之前的版本中运行需要在 shader 开头加入一行#define PROCESSING_COLOR_SHADER完整 shader 形如#ifdef GL_ES precision mediump float; #endif #define PROCESSING_COLOR_SHADER uniform vec2 u_resolution; uniform vec3 u_mouse; uniform float u_time; void main() { vec2 st gl_FragCoord.st/u_resolution; gl_FragColor vec4(st.x,st.y,0.0,1.0); }注意此版本中u_mouse声明为vec3。仓库中的完整 sketch 见 04/processing/processing.pde它额外实现了keyPressed()热重载——每次按键都会重新loadShader(shader.frag)方便边改边看配套的 shader 文件位于 04/processing/data/shader.frag。九、在 openFrameworks 中运行与 Processing 类似openFrameworks 也会从data文件夹查找 shader 文件因此需要把.frag文件复制进去并在程序中指定文件名void ofApp::draw(){ ofShader shader; shader.load(,shader.frag); shader.begin(); shader.setUniform1f(u_time, ofGetElapsedTimef()); shader.setUniform2f(u_resolution, ofGetWidth(), ofGetHeight()); ofRect(0,0,ofGetWidth(), ofGetHeight()); shader.end(); }shader.load(, shader.frag)第一个参数是顶点着色器路径留空表示用默认顶点着色器第二个是 fragment shadershader.begin() / shader.end()在两者之间替换渲染管线setUniform1f / setUniform2f分别设置float与vec2类型的 uniform。仓库中的完整工程见 04/openFrameworks/src/ofApp.cpp类声明在 ofApp.h它不仅补全了u_mouse的传递setUniform2f(u_mouse, mouseX, mouseY)还在keyPressed()中实现了按键热重载ofApp.cpp。如果希望以更简洁的方式使用 glslViewer/glslCanvas 规范中的全套 uniforms多缓冲、材质 shader、热重载、以及树莓派上的 OpenGL ES 自动转换文档推荐使用 ofxShader 插件代码可以简化为 allocate load render 三步。十、仓库补充在 SFML 中运行完整 CMake 工程除了文档正文的三个框架本仓库还额外提供了一个 SFMLC 多媒体库的完整可构建示例位于 04/sfml/04/sfml/src/main.cpp创建 800×800 渲染窗口通过shader.loadFromFile(data/shader.frag, sf::Shader::Fragment)加载片段着色器在主循环中用shader.setUniform(u_resolution, ...)、shader.setUniform(u_mouse, ...)、shader.setUniform(u_time, ...)更新三个标准 uniform最后window.draw(shape, shader)以着色器渲染全屏矩形04/sfml/CMakeLists.txt要求 CMake ≥ 3.15、C17通过find_package(SFML 2.5 COMPONENTS graphics REQUIRED)查找依赖并把data目录随目标一起安装04/sfml/data/shader.frag与 Processing 版完全相同的标准 shader 头。由此可见同一份 shader 文件可以在这些框架之间原样复用——这正是本章工具生态与 uniform 约定设计的直接收益。十一、总结从代码到作品的完整路径本章建立了一套可复用的 shader 工作流写用 glslEditor网页版或内嵌版编写调试借助小部件实时观察输出跑浏览器用 glslCanvas 一行canvas嵌入命令行用 glslViewer 接入脚本/管道甚至部署到树莓派或 openFrame.io接入在 Three.js / Processing / openFrameworks / SFML 中只需按u_resolution、u_time、u_mouse约定喂值即可复用书中全部示例分享与策展通过在线编辑器导出唯一 URL或借助 glslGallery 构建可嵌入任意网站的作品画廊。这套约定与工具链将贯穿全书后续所有章节——从 05 章造型函数 开始你在每个章节学到的 shader都可以用本章的方法立即运行、调试与分享。仓库中 04/ 目录下各框架的完整源码是你对照学习的最佳起点。赞分享【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载相关推荐The Book of Shaders 第 04 章实战用 glslCanvas、glslViewer、glslEditor 与三大框架运行你的 Fragment ShaderThe Book of Shaders 第 04 章实战用 glslCanvas、glslViewer、glslEditor 与三大框架运行你的 FragmeThe Book of Shaders 第4章实战用 glslCanvas、glslViewer、glslEditor 与三大框架运行你的 GLSL ShaderThe Book of Shaders 第4章实战用 glslCanvas、glslViewer、glslEditor 与三大框架运行你的 GLSL ShadAnt Design Pagination「更多分页」深度解析省略号折叠与前后跳转按钮的源码实现Ant Design Pagination「更多分页」深度解析省略号折叠与前后跳转按钮的源码实现 导读 本文围绕 Ant Design 官方演示 更多分页说明上一篇Windows 11绕过硬件限制的完整指南让老电脑轻松升级的终极方案下一篇如何让老电脑也能安装Windows 113个简单技巧打破硬件限制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考