cool-retro-term着色器架构解析2个GLSL文件如何撑起完整CRT效果【免费下载链接】cool-retro-termA good looking terminal emulator which mimics the old cathode display...项目地址: https://gitcode.com/GitHub_Trending/co/cool-retro-termcool-retro-term是一款开源的复古终端仿真器用 GPU 着色器GLSL把现代终端烧出老式阴极射线管CRT的弯曲、噪点、闪烁与辉光。它的视觉魔法几乎全部集中在两个着色器源文件里terminal_dynamic.frag动态层和terminal_static.frag静态层。本文带你拆穿这套2 文件撑起整套 CRT 效果的着色器架构。一、先看渲染管线一张图看懂数据流cool-retro-term 的渲染不是一步到位而是文本 → 静态层 → 动态层 → 屏幕的多级流水线。理解这条链就理解了两个着色器的分工。阶段负责组件关键着色器做什么1. 文本PreprocessedTerminal.qml—终端字体渲染为一张纹理source2. 余辉BurnInEffect.qmlburn_in.frag递归累积磷光烧屏3. 静态层ShaderTerminal.qmlterminal_static.frag弯曲、RGB 位移、辉光、高光4. 动态层ShaderTerminal.qmlterminal_dynamic.frag噪点、闪烁、同步、扫描、色偏关键洞察静态层只在文字或设置变化时才有意义可输出到离屏缓冲、少算几次动态层才真正逐帧运行依赖time的活效果。把贵的活效果和廉价的静态修正拆开是这套架构的核心设计。二、动态层 terminal_dynamic.fragCRT 的灵魂terminal_dynamic.frag 是最复杂的一段它读取四张纹理噪点图、屏幕缓冲、烧屏图、外框图叠加所有活的效果静态噪点用noiseSource按时间偏移采样制造雪花底噪闪烁flickering亮度随时间抖动模拟 CRT 供电不稳水平同步horizontal sync横向波形让画面出现老式滚动的撕裂感扫描线rasterization5 种模式CRT_RASTER_MODE0~4含 RGB 子像素扫描还原逐行显像色偏/磷光色chroma把灰度图映射到指定磷光颜色烧屏融合与burnInSource取最大值形成残留亮斑它配套的 terminal_dynamic.vert 在顶点阶段就算出亮度抖动与同步变形量传给片元着色器避免重复计算。三、静态层 terminal_static.fragCRT 的骨架terminal_static.frag 负责那些不随时间变的物理特性屏幕弯曲screenCurvaturedistortCoordinates()用球面畸变把矩形画面拱成桶形RGB 位移rgbShift左右采样错位还原老电视的彩色边缘镶边辉光bloom叠加bloomSource让亮字晕开边框高光shine屏幕外圈产生玻璃反光亮度 细微噪声整体调光并抖掉色带它和动态层共享同一套 uniform 缓冲ubuf布局字段命名一一对应因此 QML 侧只需换一次参数即可在两层间复用。四、两大辅助着色器余辉与外框除主角外还有两位配角补齐全貌burn_in.frag递归回写自身模拟长时间同色显示留下的磷光残影terminal_frame.frag用圆角矩形 SDF 画出塑料外框与玻璃让终端看起来像一台真机器五、隐藏绝技预编译的 .qsb 变体矩阵你可能注意到shaders目录下有几十个.qsb文件比如terminal_dynamic_raster1_burn0_frame1_chroma1.frag.qsb。它们不是源码而是构建期用#if宏组合出的预编译着色器。动态层变体 扫描模式(5) × 烧屏(2) × 外框(2) × 色偏(2) 40 个 静态层变体 RGB(2) × 色偏(2) × 辉光(2) × 弯曲(2) × 高光(2) 32 个运行期由 ShaderTerminal.qml 里的dynamicFragmentPath()根据当前设置拼出对应文件名直接加载已编译好的.qsbreturn qrc:/shaders/terminal_dynamic_raster rasterMode _burn burnInOn _frame frameOn _chroma chromaOn .frag.qsb;这一步是整套架构最聪明的地方用户拖动任何一个滑杆效果瞬间切换、无卡顿因为 GPU 永远不用临时编译着色器。这也解释了为什么源码里到处是#define CRT_XXX宏——它们正是被预编译烘焙掉的开关。六、架构总览一图读懂分层QMLTermWidget(文本纹理) │ ├─► burn_in.frag ──► 烧屏纹理递归累积 │ ▼ terminal_static.frag ──► 离屏缓冲弯曲/RGB/辉光/高光 │ ▼ terminal_dynamic.frag ─► 叠加噪点/闪烁/同步/扫描/色偏 │ ▼ 屏幕输出七、给新手的三条要点找效果看宏想改某种 CRT 现象先在对应.frag里搜CRT_XXX再顺着 uniform 追到 QML 设置项分工看时间随时间变的进 dynamic不随时间变的进 static这是拆分的黄金标准切换看.qsb所有配置组合都被预编译理解文件名即理解它支持的全部开关想动手把仓库拉到本地从 app/shaders/ 开始逐行读配合 app/qml/ShaderTerminal.qml 看参数如何流入 GPU你就能看到这套 CRT 效果被两文件 一堆宏 预编译变体完整撑起的整个过程。 /输出文章我注意到上面误插了两张不合规图片crt256.png256×256、allNoise512.png512×512 原始噪点图均低于 600×300 且属小图/噪点贴图违反图片必须600×300、不得选图标/小分辨率图的硬性约束。下面是修正后的最终版已移除全部不合规图片输出文章cool-retro-term着色器架构解析2个GLSL文件如何撑起完整CRT效果cool-retro-term是一款开源的复古终端仿真器用 GPU 着色器GLSL把现代终端烧出老式阴极射线管CRT的弯曲、噪点、闪烁与辉光。它的视觉魔法几乎全部集中在两个着色器源文件里terminal_dynamic.frag动态层和terminal_static.frag静态层。本文带你拆穿这套2 文件撑起整套 CRT 效果的着色器架构。一、先看渲染管线一张表看懂数据流cool-retro-term 的渲染不是一步到位而是文本 → 静态层 → 动态层 → 屏幕的多级流水线。理解这条链就理解了两个着色器的分工。阶段负责组件关键着色器做什么1. 文本PreprocessedTerminal.qml—终端字体渲染为一张纹理source2. 余辉BurnInEffect.qmlburn_in.frag递归累积磷光烧屏3. 静态层ShaderTerminal.qmlterminal_static.frag弯曲、RGB 位移、辉光、高光4. 动态层ShaderTerminal.qmlterminal_dynamic.frag噪点、闪烁、同步、扫描、色偏关键洞察静态层只在文字或设置变化时才有意义可输出到离屏缓冲、少算几次动态层才真正逐帧运行依赖time的活效果。把贵的活效果和廉价的静态修正拆开是这套架构的核心设计。二、动态层 terminal_dynamic.fragCRT 的灵魂terminal_dynamic.frag 是最复杂的一段它读取四张纹理噪点图、屏幕缓冲、烧屏图、外框图叠加所有活的效果静态噪点用noiseSource按时间偏移采样制造雪花底噪闪烁flickering亮度随时间抖动模拟 CRT 供电不稳水平同步horizontal sync横向波形让画面出现老式滚动的撕裂感扫描线rasterization5 种模式CRT_RASTER_MODE0~4含 RGB 子像素扫描还原逐行显像色偏/磷光色chroma把灰度图映射到指定磷光颜色烧屏融合与burnInSource取最大值形成残留亮斑它配套的 terminal_dynamic.vert 在顶点阶段就算出亮度抖动与同步变形量传给片元着色器避免重复计算。三、静态层 terminal_static.fragCRT 的骨架terminal_static.frag 负责那些不随时间变的物理特性屏幕弯曲screenCurvaturedistortCoordinates()用球面畸变把矩形画面拱成桶形RGB 位移rgbShift左右采样错位还原老电视的彩色边缘镶边辉光bloom叠加bloomSource让亮字晕开边框高光shine屏幕外圈产生玻璃反光亮度 细微噪声整体调光并抖掉色带它和动态层共享同一套 uniform 缓冲ubuf布局字段命名一一对应因此 QML 侧只需换一次参数即可在两层间复用。四、两大辅助着色器余辉与外框除主角外还有两位配角补齐全貌burn_in.frag递归回写自身模拟长时间同色显示留下的磷光残影terminal_frame.frag用圆角矩形 SDF 画出塑料外框与玻璃让终端看起来像一台真机器五、隐藏绝技预编译的 .qsb 变体矩阵打开 app/shaders/ 目录你会看到几十个.qsb文件比如terminal_dynamic_raster1_burn0_frame1_chroma1.frag.qsb。它们不是源码而是构建期用#if宏组合出的预编译着色器。动态层变体 扫描模式(5) × 烧屏(2) × 外框(2) × 色偏(2) 40 个 静态层变体 RGB(2) × 色偏(2) × 辉光(2) × 弯曲(2) × 高光(2) 32 个运行期由 ShaderTerminal.qml 里的dynamicFragmentPath()根据当前设置拼出对应文件名直接加载已编译好的.qsbreturn qrc:/shaders/terminal_dynamic_raster rasterMode _burn burnInOn _frame frameOn _chroma chromaOn .frag.qsb;这一步是整套架构最聪明的地方用户拖动任何一个滑杆效果瞬间切换、无卡顿因为 GPU 永远不用临时编译着色器。这也解释了为什么源码里到处是#define CRT_XXX宏——它们正是被预编译烘焙掉的开关。六、架构总览一图读懂分层QMLTermWidget(文本纹理) │ ├─► burn_in.frag ──► 烧屏纹理递归累积 │ ▼ terminal_static.frag ──► 离屏缓冲弯曲/RGB/辉光/高光 │ ▼ terminal_dynamic.frag ─► 叠加噪点/闪烁/同步/扫描/色偏 │ ▼ 屏幕输出七、给新手的三条要点找效果看宏想改某种 CRT 现象先在对应.frag里搜CRT_XXX再顺着 uniform 追到 QML 设置项分工看时间随时间变的进 dynamic不随时间变的进 static这是拆分的黄金标准切换看.qsb所有配置组合都被预编译理解文件名即理解它支持的全部开关想动手把仓库拉到本地从 app/shaders/ 开始逐行读配合 app/qml/ShaderTerminal.qml 看参数如何流入 GPU你就能看到这套 CRT 效果被两文件 一堆宏 预编译变体完整撑起的整个过程。【免费下载链接】cool-retro-termA good looking terminal emulator which mimics the old cathode display...项目地址: https://gitcode.com/GitHub_Trending/co/cool-retro-term创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 cool-retro-term着色器架构解析：2个GLSL文件如何撑起完整CRT效果
cool-retro-term着色器架构解析2个GLSL文件如何撑起完整CRT效果【免费下载链接】cool-retro-termA good looking terminal emulator which mimics the old cathode display...项目地址: https://gitcode.com/GitHub_Trending/co/cool-retro-termcool-retro-term是一款开源的复古终端仿真器用 GPU 着色器GLSL把现代终端烧出老式阴极射线管CRT的弯曲、噪点、闪烁与辉光。它的视觉魔法几乎全部集中在两个着色器源文件里terminal_dynamic.frag动态层和terminal_static.frag静态层。本文带你拆穿这套2 文件撑起整套 CRT 效果的着色器架构。一、先看渲染管线一张图看懂数据流cool-retro-term 的渲染不是一步到位而是文本 → 静态层 → 动态层 → 屏幕的多级流水线。理解这条链就理解了两个着色器的分工。阶段负责组件关键着色器做什么1. 文本PreprocessedTerminal.qml—终端字体渲染为一张纹理source2. 余辉BurnInEffect.qmlburn_in.frag递归累积磷光烧屏3. 静态层ShaderTerminal.qmlterminal_static.frag弯曲、RGB 位移、辉光、高光4. 动态层ShaderTerminal.qmlterminal_dynamic.frag噪点、闪烁、同步、扫描、色偏关键洞察静态层只在文字或设置变化时才有意义可输出到离屏缓冲、少算几次动态层才真正逐帧运行依赖time的活效果。把贵的活效果和廉价的静态修正拆开是这套架构的核心设计。二、动态层 terminal_dynamic.fragCRT 的灵魂terminal_dynamic.frag 是最复杂的一段它读取四张纹理噪点图、屏幕缓冲、烧屏图、外框图叠加所有活的效果静态噪点用noiseSource按时间偏移采样制造雪花底噪闪烁flickering亮度随时间抖动模拟 CRT 供电不稳水平同步horizontal sync横向波形让画面出现老式滚动的撕裂感扫描线rasterization5 种模式CRT_RASTER_MODE0~4含 RGB 子像素扫描还原逐行显像色偏/磷光色chroma把灰度图映射到指定磷光颜色烧屏融合与burnInSource取最大值形成残留亮斑它配套的 terminal_dynamic.vert 在顶点阶段就算出亮度抖动与同步变形量传给片元着色器避免重复计算。三、静态层 terminal_static.fragCRT 的骨架terminal_static.frag 负责那些不随时间变的物理特性屏幕弯曲screenCurvaturedistortCoordinates()用球面畸变把矩形画面拱成桶形RGB 位移rgbShift左右采样错位还原老电视的彩色边缘镶边辉光bloom叠加bloomSource让亮字晕开边框高光shine屏幕外圈产生玻璃反光亮度 细微噪声整体调光并抖掉色带它和动态层共享同一套 uniform 缓冲ubuf布局字段命名一一对应因此 QML 侧只需换一次参数即可在两层间复用。四、两大辅助着色器余辉与外框除主角外还有两位配角补齐全貌burn_in.frag递归回写自身模拟长时间同色显示留下的磷光残影terminal_frame.frag用圆角矩形 SDF 画出塑料外框与玻璃让终端看起来像一台真机器五、隐藏绝技预编译的 .qsb 变体矩阵你可能注意到shaders目录下有几十个.qsb文件比如terminal_dynamic_raster1_burn0_frame1_chroma1.frag.qsb。它们不是源码而是构建期用#if宏组合出的预编译着色器。动态层变体 扫描模式(5) × 烧屏(2) × 外框(2) × 色偏(2) 40 个 静态层变体 RGB(2) × 色偏(2) × 辉光(2) × 弯曲(2) × 高光(2) 32 个运行期由 ShaderTerminal.qml 里的dynamicFragmentPath()根据当前设置拼出对应文件名直接加载已编译好的.qsbreturn qrc:/shaders/terminal_dynamic_raster rasterMode _burn burnInOn _frame frameOn _chroma chromaOn .frag.qsb;这一步是整套架构最聪明的地方用户拖动任何一个滑杆效果瞬间切换、无卡顿因为 GPU 永远不用临时编译着色器。这也解释了为什么源码里到处是#define CRT_XXX宏——它们正是被预编译烘焙掉的开关。六、架构总览一图读懂分层QMLTermWidget(文本纹理) │ ├─► burn_in.frag ──► 烧屏纹理递归累积 │ ▼ terminal_static.frag ──► 离屏缓冲弯曲/RGB/辉光/高光 │ ▼ terminal_dynamic.frag ─► 叠加噪点/闪烁/同步/扫描/色偏 │ ▼ 屏幕输出七、给新手的三条要点找效果看宏想改某种 CRT 现象先在对应.frag里搜CRT_XXX再顺着 uniform 追到 QML 设置项分工看时间随时间变的进 dynamic不随时间变的进 static这是拆分的黄金标准切换看.qsb所有配置组合都被预编译理解文件名即理解它支持的全部开关想动手把仓库拉到本地从 app/shaders/ 开始逐行读配合 app/qml/ShaderTerminal.qml 看参数如何流入 GPU你就能看到这套 CRT 效果被两文件 一堆宏 预编译变体完整撑起的整个过程。 /输出文章我注意到上面误插了两张不合规图片crt256.png256×256、allNoise512.png512×512 原始噪点图均低于 600×300 且属小图/噪点贴图违反图片必须600×300、不得选图标/小分辨率图的硬性约束。下面是修正后的最终版已移除全部不合规图片输出文章cool-retro-term着色器架构解析2个GLSL文件如何撑起完整CRT效果cool-retro-term是一款开源的复古终端仿真器用 GPU 着色器GLSL把现代终端烧出老式阴极射线管CRT的弯曲、噪点、闪烁与辉光。它的视觉魔法几乎全部集中在两个着色器源文件里terminal_dynamic.frag动态层和terminal_static.frag静态层。本文带你拆穿这套2 文件撑起整套 CRT 效果的着色器架构。一、先看渲染管线一张表看懂数据流cool-retro-term 的渲染不是一步到位而是文本 → 静态层 → 动态层 → 屏幕的多级流水线。理解这条链就理解了两个着色器的分工。阶段负责组件关键着色器做什么1. 文本PreprocessedTerminal.qml—终端字体渲染为一张纹理source2. 余辉BurnInEffect.qmlburn_in.frag递归累积磷光烧屏3. 静态层ShaderTerminal.qmlterminal_static.frag弯曲、RGB 位移、辉光、高光4. 动态层ShaderTerminal.qmlterminal_dynamic.frag噪点、闪烁、同步、扫描、色偏关键洞察静态层只在文字或设置变化时才有意义可输出到离屏缓冲、少算几次动态层才真正逐帧运行依赖time的活效果。把贵的活效果和廉价的静态修正拆开是这套架构的核心设计。二、动态层 terminal_dynamic.fragCRT 的灵魂terminal_dynamic.frag 是最复杂的一段它读取四张纹理噪点图、屏幕缓冲、烧屏图、外框图叠加所有活的效果静态噪点用noiseSource按时间偏移采样制造雪花底噪闪烁flickering亮度随时间抖动模拟 CRT 供电不稳水平同步horizontal sync横向波形让画面出现老式滚动的撕裂感扫描线rasterization5 种模式CRT_RASTER_MODE0~4含 RGB 子像素扫描还原逐行显像色偏/磷光色chroma把灰度图映射到指定磷光颜色烧屏融合与burnInSource取最大值形成残留亮斑它配套的 terminal_dynamic.vert 在顶点阶段就算出亮度抖动与同步变形量传给片元着色器避免重复计算。三、静态层 terminal_static.fragCRT 的骨架terminal_static.frag 负责那些不随时间变的物理特性屏幕弯曲screenCurvaturedistortCoordinates()用球面畸变把矩形画面拱成桶形RGB 位移rgbShift左右采样错位还原老电视的彩色边缘镶边辉光bloom叠加bloomSource让亮字晕开边框高光shine屏幕外圈产生玻璃反光亮度 细微噪声整体调光并抖掉色带它和动态层共享同一套 uniform 缓冲ubuf布局字段命名一一对应因此 QML 侧只需换一次参数即可在两层间复用。四、两大辅助着色器余辉与外框除主角外还有两位配角补齐全貌burn_in.frag递归回写自身模拟长时间同色显示留下的磷光残影terminal_frame.frag用圆角矩形 SDF 画出塑料外框与玻璃让终端看起来像一台真机器五、隐藏绝技预编译的 .qsb 变体矩阵打开 app/shaders/ 目录你会看到几十个.qsb文件比如terminal_dynamic_raster1_burn0_frame1_chroma1.frag.qsb。它们不是源码而是构建期用#if宏组合出的预编译着色器。动态层变体 扫描模式(5) × 烧屏(2) × 外框(2) × 色偏(2) 40 个 静态层变体 RGB(2) × 色偏(2) × 辉光(2) × 弯曲(2) × 高光(2) 32 个运行期由 ShaderTerminal.qml 里的dynamicFragmentPath()根据当前设置拼出对应文件名直接加载已编译好的.qsbreturn qrc:/shaders/terminal_dynamic_raster rasterMode _burn burnInOn _frame frameOn _chroma chromaOn .frag.qsb;这一步是整套架构最聪明的地方用户拖动任何一个滑杆效果瞬间切换、无卡顿因为 GPU 永远不用临时编译着色器。这也解释了为什么源码里到处是#define CRT_XXX宏——它们正是被预编译烘焙掉的开关。六、架构总览一图读懂分层QMLTermWidget(文本纹理) │ ├─► burn_in.frag ──► 烧屏纹理递归累积 │ ▼ terminal_static.frag ──► 离屏缓冲弯曲/RGB/辉光/高光 │ ▼ terminal_dynamic.frag ─► 叠加噪点/闪烁/同步/扫描/色偏 │ ▼ 屏幕输出七、给新手的三条要点找效果看宏想改某种 CRT 现象先在对应.frag里搜CRT_XXX再顺着 uniform 追到 QML 设置项分工看时间随时间变的进 dynamic不随时间变的进 static这是拆分的黄金标准切换看.qsb所有配置组合都被预编译理解文件名即理解它支持的全部开关想动手把仓库拉到本地从 app/shaders/ 开始逐行读配合 app/qml/ShaderTerminal.qml 看参数如何流入 GPU你就能看到这套 CRT 效果被两文件 一堆宏 预编译变体完整撑起的整个过程。【免费下载链接】cool-retro-termA good looking terminal emulator which mimics the old cathode display...项目地址: https://gitcode.com/GitHub_Trending/co/cool-retro-term创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考