第23章抗锯齿技术

课程目录第23章抗锯齿技术

第23章抗锯齿技术：MSAA原理与实现，FXAA后处理抗锯齿

说到抗锯齿，我印象特别深。刚入行那会儿，画了个漂亮的3D场景，结果一运行，楼梯边缘全是"狗牙"。项目经理看了一眼，说了句"这画面太糙了"，然后转身走了。嗯，从那天起，我就跟抗锯齿杠上了。

说白了，锯齿就是采样不足导致的。你想想看，屏幕上的像素是离散的，但我们要渲染的几何体是连续的。一个三角形边缘刚好落在像素中间，那这个像素该不该亮？亮多少？这就是锯齿问题的根源。

核心观点：抗锯齿的本质就是"用更多的采样信息来逼近真实的边缘"。MSAA是硬件层面的多采样，FXAA是图像处理层面的后处理。

23.1 锯齿是怎么产生的？

先看一个简单的例子。一条斜线穿过像素网格，每个像素只能取一个颜色值。如果像素中心在线的左边，就取背景色；在线的右边，就取前景色。结果就是一条锯齿状的线。

为什么会这样？因为我们的采样频率不够高。奈奎斯特采样定理告诉我们，采样频率至少要是信号最高频率的两倍。但屏幕像素的采样频率是固定的，高频信号（比如锐利的边缘）就会被"混叠"成低频的锯齿。

我在项目中遇到过最典型的场景：远处铁丝网的渲染。铁丝网本身很细，在屏幕上可能只有1-2个像素宽。如果不做抗锯齿，铁丝网要么消失，要么变成断断续续的虚线，非常难看。

23.2 MSAA：多重采样抗锯齿

MSAA的全称是Multisample Anti-Aliasing。它的思路很直接：每个像素不是只采样一次，而是采样多次。

23.2.1 MSAA的工作原理

普通渲染时，每个像素只计算一次颜色。MSAA则把每个像素分成多个子采样点，比如4x MSAA就是4个子采样点。每个子采样点都有自己的颜色、深度和模板值。

关键来了：MSAA只对边缘像素做多重采样。如果一个像素完全在三角形内部，所有子采样点的结果都一样，那就只计算一次。只有边缘像素才需要计算多个子采样点。这就是MSAA比超采样（SSAA）高效的原因。

我的经验：4x MSAA是性价比最高的选择。8x MSAA画质提升有限，但性能开销翻倍。我在项目里一般默认用4x MSAA，除非目标设备性能特别强。

23.2.2 在OpenGL ES中开启MSAA

在Android上开启MSAA，主要靠EGL配置。我习惯这样写：

// 配置EGL时设置MSAA
int[] attribList = {
    EGL10.EGL_RED_SIZE, 8,
    EGL10.EGL_GREEN_SIZE, 8,
    EGL10.EGL_BLUE_SIZE, 8,
    EGL10.EGL_ALPHA_SIZE, 8,
    EGL10.EGL_DEPTH_SIZE, 16,
    EGL10.EGL_SAMPLE_BUFFERS, 1,  // 开启采样缓冲区
    EGL10.EGL_SAMPLES, 4,         // 4x MSAA
    EGL10.EGL_RENDERABLE_TYPE, EGL14.EGL_OPENGL_ES2_BIT,
    EGL10.EGL_NONE
};

如果你用的是GLSurfaceView，更简单：

// 在GLSurfaceView中设置
glSurfaceView.setEGLConfigChooser(8, 8, 8, 8, 16, 0, 4);
// 最后一个参数4就是采样数，设为0则关闭MSAA

注意：不是所有设备都支持4x MSAA。我曾经在一台老款平板上踩过坑，设置4x MSAA后EGL初始化失败。建议先查询设备支持的采样数，或者用2x MSAA做降级方案。

23.2.3 MSAA的局限性

MSAA虽然好，但不是万能的。它主要解决几何边缘的锯齿，对纹理锯齿效果有限。另外，MSAA需要额外的显存和带宽，在移动设备上功耗较高。

我记得有个项目，用4x MSAA后帧率从60fps掉到了45fps。后来发现是GPU带宽不够，换成2x MSAA才稳住。所以啊，MSAA不是越高越好，得看设备性能。

23.3 FXAA：快速近似抗锯齿

FXAA是NVIDIA提出的一种后处理抗锯齿技术。它不修改渲染管线，而是在渲染完成后对最终图像做一次处理。

23.3.1 FXAA的原理

FXAA的思路很巧妙：先检测图像中的边缘，然后对边缘像素做模糊处理。具体分三步：

亮度计算：把RGB转为亮度值，方便边缘检测
边缘检测：用索贝尔算子检测亮度变化剧烈的区域
边缘混合：对检测到的边缘像素，沿边缘方向做混合

说白了，FXAA就是"找茬然后抹平"。它不关心几何体，只看像素颜色。所以它对所有类型的锯齿都有效，包括纹理锯齿和着色锯齿。

23.3.2 FXAA的着色器实现

这里我给出一份精简版的FXAA实现。嗯，我在项目里实际用过的版本：

// 顶点着色器
attribute vec4 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;
uniform vec2 uTexelSize;  // 1/屏幕宽度, 1/屏幕高度

void main() {
    gl_Position = aPosition;
    vTexCoord = aTexCoord;
}

// 片元着色器
precision mediump float;
varying vec2 vTexCoord;
uniform sampler2D uTexture;
uniform vec2 uTexelSize;

void main() {
    // 1. 计算当前像素亮度
    vec3 colorCenter = texture2D(uTexture, vTexCoord).rgb;
    float lumaCenter = dot(colorCenter, vec3(0.299, 0.587, 0.114));
    
    // 2. 采样周围4个方向
    float lumaNW = dot(texture2D(uTexture, vTexCoord + vec2(-1.0, -1.0) * uTexelSize).rgb, 
                       vec3(0.299, 0.587, 0.114));
    float lumaNE = dot(texture2D(uTexture, vTexCoord + vec2(1.0, -1.0) * uTexelSize).rgb, 
                       vec3(0.299, 0.587, 0.114));
    float lumaSW = dot(texture2D(uTexture, vTexCoord + vec2(-1.0, 1.0) * uTexelSize).rgb, 
                       vec3(0.299, 0.587, 0.114));
    float lumaSE = dot(texture2D(uTexture, vTexCoord + vec2(1.0, 1.0) * uTexelSize).rgb, 
                       vec3(0.299, 0.587, 0.114));
    
    // 3. 计算水平和垂直方向的梯度
    float lumaH = abs(lumaNW + lumaNE - lumaSW - lumaSE) * 2.0;
    float lumaV = abs(lumaNW + lumaSW - lumaNE - lumaSE) * 2.0;
    
    // 4. 判断是否为边缘
    float edgeThreshold = 0.1;
    float isEdge = max(lumaH, lumaV) > edgeThreshold ? 1.0 : 0.0;
    
    // 5. 如果是边缘，沿边缘方向混合
    vec3 colorBlurred = (texture2D(uTexture, vTexOffset + vec2(0.0, -0.5) * uTexelSize).rgb +
                         texture2D(uTexture, vTexOffset + vec2(0.0, 0.5) * uTexelSize).rgb +
                         texture2D(uTexture, vTexOffset + vec2(-0.5, 0.0) * uTexelSize).rgb +
                         texture2D(uTexture, vTexOffset + vec2(0.5, 0.0) * uTexelSize).rgb) * 0.25;
    
    gl_FragColor = vec4(mix(colorCenter, colorBlurred, isEdge * 0.5), 1.0);
}

优化建议：上面的代码是教学版，实际项目中我会用更高效的实现。比如用LOD采样减少纹理读取次数，或者用预计算查找表代替条件判断。FXAA的优化空间很大，我见过有人把性能提升了3倍。

23.3.3 FXAA的优缺点

对比项	MSAA	FXAA
性能开销	较高（带宽消耗大）	低（一次后处理）
画质	好（保留细节）	一般（会模糊纹理）
适用范围	几何边缘	所有锯齿
实现难度	简单（配置即可）	中等（需要写着色器）
移动端适配	部分设备不支持	所有设备支持

我个人习惯是：高端设备用MSAA，中低端设备用FXAA。如果设备性能实在不行，就关闭抗锯齿，但把分辨率调高一点，也能缓解锯齿问题。

23.4 知识体系总览

下面这张图总结了本章的核心内容，我画的时候特意把MSAA和FXAA的流程做了对比：

23.5 实战建议

最后说说我的选择策略。在移动端做抗锯齿，我一般遵循这几个原则：

先查设备：用GL_MAX_SAMPLES查询设备支持的采样数，不要硬编码
分层策略：高端设备用4x MSAA，中端用2x MSAA，低端用FXAA
动态开关：在设置里给用户选择权，有些人宁愿锯齿也要省电
组合使用：MSAA + FXAA不是不行，但效果提升有限，性能开销翻倍

避坑指南：我曾经在一个项目里同时开了MSAA和FXAA，结果画面糊成一团。后来发现FXAA会把MSAA已经处理过的边缘再模糊一次，过度平滑了。记住，抗锯齿不是越多越好，选一个就够了。

嗯，抗锯齿这块就讲这么多。说白了，MSAA是"硬件帮你多采样"，FXAA是"软件帮你抹边缘"。两者各有千秋，关键看你的目标设备和性能要求。

公众号:蓝海资料掘金营，微信deep3321

📚 课程目录