GLSL CRT物理模拟算法：从电子束扫描到荧光衰减的实时渲染

在数字复古美学的复兴浪潮中，CRT（阴极射线管）显示效果已成为游戏开发、影视后期和数字艺术中不可或缺的视觉元素。然而，大多数 CRT 着色器仅停留在表面效果模拟，缺乏对物理过程的深入还原。本文将深入解析 CRT 扫描线生成、荧光衰减模型、电子束聚焦模拟等核心物理现象的 GLSL 算法实现，构建一个可配置的实时 CRT 效果渲染引擎。

CRT 物理模拟的核心挑战

CRT 显示器的物理过程包含三个关键环节：电子束扫描、荧光激发和衰减、几何光学效应。在 GLSL 中实现这些效果需要解决以下技术挑战：

1. 时间同步：模拟电子束以每秒数十次的频率扫描屏幕
2. 空间连续性：确保扫描线之间的平滑过渡
3. 物理准确性：还原荧光粉的真实衰减特性
4. 实时性能：在 WebGL 环境下保持 60fps 以上的渲染性能

BlurBusters 的 CRT 电子束模拟器项目展示了如何通过时间模拟减少显示运动模糊，其核心思想是将 CRT 的瞬时显示特性转化为现代显示器的持续发光特性。

扫描线生成算法：时间同步与相位控制

扫描线是 CRT 最显著的特征之一。在物理 CRT 中，电子束从左到右、从上到下逐行扫描屏幕，每行扫描时间约 64 微秒（对于 480i 60Hz 信号）。在 GLSL 中，我们需要模拟这种时间依赖的亮度变化。

基础扫描线函数

// 扫描线强度计算
float scanlineIntensity(vec2 uv, float time, float scanSpeed) {
    // 计算扫描线位置
    float scanPos = mod(time * scanSpeed + uv.y * 1.5, 1.0);
    
    // 使用高斯函数模拟电子束剖面
    float beamWidth = 0.02; // 电子束宽度
    float intensity = exp(-pow(scanPos - 0.5, 2.0) / (2.0 * beamWidth * beamWidth));
    
    // 添加扫描线间隔
    float lineSpacing = 0.5; // 扫描线间距
    float linePattern = sin(uv.y * iResolution.y * lineSpacing * 3.14159);
    
    return intensity * (0.7 + 0.3 * linePattern);
}

时间同步机制

为了实现准确的扫描同步，需要将渲染时间与显示刷新率对齐：

// 计算基于刷新率的扫描相位
float getScanPhase(float time, float refreshRate) {
    // 将时间转换为扫描周期
    float scanPeriod = 1.0 / refreshRate;
    float phase = mod(time, scanPeriod) / scanPeriod;
    
    // 添加场序交错（对于隔行扫描）
    float fieldPhase = mod(floor(time * refreshRate), 2.0) * 0.5;
    
    return mod(phase + fieldPhase, 1.0);
}

可配置参数

构建可配置的扫描线系统需要以下参数：

• SCAN_SPEED：扫描线爬行速度（默认 1.0）
• BEAM_WIDTH：电子束宽度（0.01-0.05）
• LINE_VISIBILITY：扫描线可见度（0.0-1.0）
• INTERLACE_ENABLED：隔行扫描开关

荧光衰减模型：时间常数与颜色通道差异

荧光衰减是 CRT 最具特色的视觉效果之一。当电子束离开某个像素点后，荧光粉会继续发光一段时间，形成拖影效果。不同颜色的荧光粉具有不同的衰减特性。

P22 荧光粉衰减特性

根据 3P22Lambda 项目的研究，标准 P22 荧光粉的衰减特性如下：

• 主要衰减阶段：约 83 毫秒（5-6 个 60fps 帧）
• 余辉阶段：最长可达 4 秒
• 颜色差异：绿色通道衰减最慢，红色次之，蓝色最快

指数衰减实现

// 荧光衰减模拟
vec3 phosphorDecay(vec3 currentColor, vec3 previousColor, float deltaTime) {
    // 各颜色通道的衰减时间常数（单位：秒）
    vec3 tau = vec3(0.083, 0.095, 0.070); // R, G, B
    
    // 计算衰减因子
    vec3 decayFactor = exp(-deltaTime / tau);
    
    // 应用衰减
    return max(currentColor, previousColor * decayFactor);
}

帧缓冲累积技术

为了实现准确的荧光衰减，需要使用帧缓冲来存储历史颜色信息：

// 使用双缓冲技术实现荧光衰减
uniform sampler2D previousFrame;
uniform float frameTime;

vec3 applyPhosphorEffect(vec2 uv, vec3 currentColor) {
    vec3 prevColor = texture2D(previousFrame, uv).rgb;
    
    // 应用衰减
    vec3 decayed = phosphorDecay(currentColor, prevColor, frameTime);
    
    // 添加非线性响应（CRT的gamma特性）
    decayed = pow(decayed, vec3(2.2));
    
    return decayed;
}

可配置衰减参数

• DECAY_TIME_R：红色衰减时间（0.07-0.10 秒）
• DECAY_TIME_G：绿色衰减时间（0.08-0.12 秒）
• DECAY_TIME_B：蓝色衰减时间（0.05-0.08 秒）
• AFTERGLOW_STRENGTH：余辉强度（0.0-1.0）

电子束聚焦与几何失真模拟

CRT 的电子束并非理想的点光源，而是具有一定截面的高斯分布。此外，CRT 屏幕的曲面特性会导致几何失真。

电子束扩散模拟

// 电子束扩散效果
vec3 beamDiffusion(vec2 uv, sampler2D source, float focus) {
    // 聚焦参数：0.0=完全失焦，1.0=完美聚焦
    float spread = mix(0.01, 0.001, focus);
    
    // 高斯采样核
    vec3 color = vec3(0.0);
    float totalWeight = 0.0;
    
    for (int i = -2; i <= 2; i++) {
        for (int j = -2; j <= 2; j++) {
            vec2 offset = vec2(i, j) * spread;
            float weight = exp(-dot(offset, offset) / (2.0 * spread * spread));
            
            color += texture2D(source, uv + offset).rgb * weight;
            totalWeight += weight;
        }
    }
    
    return color / totalWeight;
}

屏幕曲率模拟

CRT 屏幕的球面曲率会导致图像边缘的枕形失真：

// 曲率失真
vec2 applyCurvature(vec2 uv, float curvature) {
    // 将UV坐标转换到[-1, 1]范围
    vec2 centered = uv * 2.0 - 1.0;
    
    // 计算距离中心的距离
    float distance = length(centered);
    
    // 应用曲率变换
    float distortion = 1.0 - curvature * distance * distance;
    
    // 防止过度扭曲
    distortion = max(distortion, 0.5);
    
    // 应用变换并转换回[0, 1]范围
    vec2 distorted = centered * distortion;
    return (distorted + 1.0) * 0.5;
}

色差效应

由于电子枪中不同颜色电子束的聚焦特性略有差异，CRT 会出现色差效应：

// 色差模拟
vec3 chromaticAberration(vec2 uv, sampler2D source, float strength) {
    vec2 offset = vec2(strength * 0.001, 0.0);
    
    float r = texture2D(source, uv - offset).r;
    float g = texture2D(source, uv).g;
    float b = texture2D(source, uv + offset).b;
    
    return vec3(r, g, b);
}

可配置的实时 CRT 渲染引擎架构

基于上述算法，我们可以构建一个模块化的 CRT 渲染引擎：

参数系统设计

// CRT效果参数结构
struct CRTParameters {
    // 扫描线参数
    float scanSpeed;
    float beamWidth;
    float lineVisibility;
    bool interlaceEnabled;
    
    // 荧光衰减参数
    vec3 decayTimes;
    float afterglowStrength;
    
    // 几何参数
    float curvature;
    float focus;
    float chromaticAberration;
    
    // 颜色参数
    float brightness;
    float contrast;
    float saturation;
    float gamma;
};

渲染管线

完整的 CRT 渲染管线包含以下步骤：

1. 输入处理：接收原始纹理并应用基础颜色校正
2. 几何变换：应用曲率和枕形失真
3. 扫描线合成：添加时间同步的扫描线效果
4. 电子束模拟：应用聚焦和扩散效果
5. 荧光衰减：处理时间累积的衰减效果
6. 后处理：添加色差、噪点等次要效果

性能优化策略

在 WebGL 环境中实现实时 CRT 渲染需要以下优化：

1. 纹理采样优化：使用 mipmap 和适当的过滤模式
2. 计算简化：在可接受的质量损失下减少采样次数
3. 预处理：将不变的计算移到 CPU 端
4. LOD 系统：根据视图距离调整效果强度

实际应用与调参指南

游戏开发中的应用

在复古风格游戏中，CRT 效果可以显著增强沉浸感。以下是一些实际应用建议：

1. 2D 像素游戏：使用较强的扫描线和荧光衰减效果
2. 3D 复古游戏：适当减弱效果以避免视觉疲劳
3. 文字冒险游戏：重点模拟 CRT 的柔和边缘和温暖色调

参数调优参考值

根据不同的使用场景，推荐以下参数配置：

轻度 CRT 效果（现代复古风格）

• 扫描线可见度：0.3-0.5
• 荧光衰减时间：0.05-0.08 秒
• 曲率：0.1-0.2
• 色差：0.001-0.003

中度 CRT 效果（经典游戏模拟）

• 扫描线可见度：0.5-0.7
• 荧光衰减时间：0.08-0.10 秒
• 曲率：0.2-0.3
• 色差：0.003-0.005

重度 CRT 效果（极限复古体验）

• 扫描线可见度：0.7-0.9
• 荧光衰减时间：0.10-0.12 秒
• 曲率：0.3-0.4
• 色差：0.005-0.008

性能监控指标

在实现 CRT 效果时，需要监控以下性能指标：

1. 帧时间：确保保持在 16.67ms（60fps）以下
2. 纹理带宽：控制纹理采样次数
3. 着色器指令数：优化复杂计算
4. 内存使用：合理管理帧缓冲

技术局限性与未来方向

当前技术限制

1. 物理准确性：完全准确的荧光衰减模拟需要多帧历史数据，增加内存和计算开销
2. 实时性能：高质量 CRT 效果在移动设备上可能性能不足
3. 颜色精度：WebGL 的有限精度可能影响衰减计算的准确性

未来改进方向

1. 机器学习优化：使用神经网络预测荧光衰减，减少计算复杂度
2. 硬件加速：利用现代 GPU 的硬件特性优化效果
3. 动态调整：根据内容类型自动调整效果强度
4. 跨平台优化：针对不同硬件平台进行专门优化

结语

CRT 物理模拟算法的实现不仅是对复古美学的追求，更是对显示技术历史的数字保存。通过深入理解电子束扫描、荧光衰减等物理过程，我们可以在现代硬件上准确还原 CRT 显示器的独特视觉效果。

本文提供的 GLSL 算法和参数系统为开发者构建可配置的 CRT 渲染引擎提供了完整的技术框架。无论是游戏开发、影视制作还是数字艺术创作，这些技术都能帮助创作者在数字世界中重现 CRT 的温暖与魅力。

随着显示技术的不断发展，对传统显示效果的模拟将成为连接过去与未来的重要桥梁。通过不断优化算法和探索新的实现方式，我们可以确保这些经典视觉效果在数字时代得到妥善保存和传承。

---

资料来源：

1. BlurBusters CRT Beam Simulator - 实时 CRT 电子束模拟器项目
2. 3P22Lambda - CRT 荧光衰减模拟器项目
3. libretro/glsl-shaders - 开源 CRT 着色器集合