現(xiàn)詳解)
簡介smaaDemo是一份面向圖形渲染開發(fā)者與圖形學(xué)學(xué)習(xí)者的OpenGL、Vulkan雙API抗鋸齒演示工程聚焦亞像素形態(tài)抗鋸齒SMAA這一后期處理技術(shù)幫助讀者理解邊緣檢測、鄰域搜索與色彩混合三階段算法并對比MSAA、SSAA、FXAA等方案在畫質(zhì)與性能上的取舍。壓縮包為zip格式整體約22.84MB內(nèi)含C源代碼、GLSL或SPIR-V著色器、紋理與測試場景資源以及Makefile或CMakeLists.txt構(gòu)建腳本和SMAA質(zhì)量等級等配置文件便于直接編譯運(yùn)行與調(diào)參實(shí)驗(yàn)。目前已有238人學(xué)習(xí)關(guān)注。通過研讀該項(xiàng)目讀者可掌握在OpenGL與Vulkan中搭建后期處理管線、集成SMAA并優(yōu)化渲染性能的完整思路同時(shí)加深對紋理采樣與著色器編程等高級特性的理解適合具備一定圖形編程基礎(chǔ)、希望提升畫面質(zhì)量與渲染效率的開發(fā)者參考實(shí)踐。1. 從鋸齒邊緣說起smaaDemo 到底演示了什么如果你寫過 OpenGL 或 Vulkan 的渲染管線大概率被鋸齒邊緣折磨過。MSAA 靠硬件多重采樣開銷隨采樣數(shù)線性上漲FXAA 是后處理快但糊而 SMAASubpixel Morphological Antialiasing亞像素形態(tài)抗鋸齒走的是另一條路——它先用邊緣檢測找出需要處理的像素再根據(jù)局部形態(tài)模式做混合權(quán)重計(jì)算最后在亞像素級別修正顏色。smaaDemo 就是把這套流程用 OpenGL 和 Vulkan 兩條后端各實(shí)現(xiàn)了一遍的演示工程代碼結(jié)構(gòu)清晰適合拿來對照學(xué)習(xí)或直接摳出核心 pass 塞進(jìn)自己的渲染器。它解決的是「想要接近 MSAA 的畫質(zhì)、又不想付 MSAA 的帶寬和顯存代價(jià)」這個(gè)矛盾適合已經(jīng)能跑通基礎(chǔ)渲染管線、想深入理解后處理抗鋸齒的圖形開發(fā)者。2. SMAA 的三段式管線邊緣檢測、形態(tài)計(jì)算、鄰域混合2.1 為什么不是一步到位SMAA 的核心思路是把抗鋸齒拆成三個(gè)獨(dú)立的 pass每個(gè) pass 只做一件事。這種拆分不是為了好看而是因?yàn)檫吘墮z測和混合權(quán)重計(jì)算對紋理采樣的需求完全不同——前者需要精確的亮度對比后者需要大范圍的鄰域信息。如果硬塞進(jìn)一個(gè) shader要么采樣次數(shù)爆炸要么精度不夠。第一個(gè) pass 是邊緣檢測。它把場景顏色紋理轉(zhuǎn)成亮度然后對每個(gè)像素檢查上下左右四個(gè)方向的亮度差超過閾值就標(biāo)記為邊緣。輸出是一張邊緣紋理每個(gè)通道存不同方向的邊緣信息。第二個(gè) pass 是形態(tài)計(jì)算也叫 pattern 計(jì)算。它讀取邊緣紋理在 3x3 鄰域內(nèi)統(tǒng)計(jì)邊緣的分布模式查一張預(yù)計(jì)算的模式表得出每個(gè)像素的混合權(quán)重。第三個(gè) pass 是鄰域混合用權(quán)重去采樣原始顏色紋理的周圍像素做加權(quán)平均。這三個(gè) pass 的輸入輸出關(guān)系很清晰顏色紋理 → 邊緣紋理 → 權(quán)重紋理 → 最終顏色。smaaDemo 里 OpenGL 和 Vulkan 的實(shí)現(xiàn)都遵循這個(gè)結(jié)構(gòu)區(qū)別只在于資源綁定和管線狀態(tài)的管理方式。2.2 邊緣檢測的閾值怎么定邊緣檢測的閾值直接決定哪些像素會被當(dāng)成邊緣。閾值太低平坦區(qū)域也會被誤判白白增加后續(xù)計(jì)算量閾值太高細(xì)邊緣被漏掉抗鋸齒效果打折。常見做法是用亮度差和局部對比度兩個(gè)條件聯(lián)合判斷。// 邊緣檢測片段著色器核心邏輯簡化版 vec3 luma vec3(0.299, 0.587, 0.114); float lumaM dot(texture(texColor, uv).rgb, luma); float lumaL dot(texture(texColor, uv - vec2(texelSize.x, 0.0)).rgb, luma); float lumaR dot(texture(texColor, uv vec2(texelSize.x, 0.0)).rgb, luma); float lumaT dot(texture(texColor, uv - vec2(0.0, texelSize.y)).rgb, luma); float lumaB dot(texture(texColor, uv vec2(0.0, texelSize.y)).rgb, luma); float edgeH abs(lumaL lumaR - 2.0 * lumaM); // 水平方向二階差分 float edgeV abs(lumaT lumaB - 2.0 * lumaM); // 垂直方向二階差分 float edge max(edgeH, edgeV); // 閾值判斷低于閾值的直接歸零 float threshold 0.1; edge step(threshold, edge);這段代碼里texelSize是紋理尺寸的倒數(shù)用來把 UV 偏移換算成一個(gè)像素的距離。luma權(quán)重是標(biāo)準(zhǔn)的 Rec.709 亮度系數(shù)。閾值 0.1 是個(gè)經(jīng)驗(yàn)值實(shí)際項(xiàng)目里可以根據(jù)場景對比度調(diào)整——高動態(tài)范圍場景可能需要 0.05 到 0.15 之間試。注意這里用的是二階差分而不是簡單的一階差分因?yàn)槎A差分對細(xì)邊緣更敏感同時(shí)能抑制漸變區(qū)域的誤判。2.3 形態(tài)計(jì)算與模式表形態(tài)計(jì)算 pass 是 SMAA 最「玄學(xué)」的部分。它讀取邊緣紋理在 3x3 鄰域內(nèi)把每個(gè)像素的邊緣標(biāo)記拼成一個(gè) 8 位模式碼然后查一張預(yù)計(jì)算的查找表得到混合權(quán)重。這張表是離線生成的smaaDemo 里以紋理形式加載。// 形態(tài)計(jì)算片段著色器簡化 // 從邊緣紋理讀取 3x3 鄰域 float e[9]; e[0] texture(texEdge, uv vec2(-texelSize.x, -texelSize.y)).r; e[1] texture(texEdge, uv vec2(0.0, -texelSize.y)).r; // ... 省略中間幾個(gè) e[8] texture(texEdge, uv vec2(texelSize.x, texelSize.y)).r; // 拼模式碼每個(gè)方向一個(gè) bit int pattern 0; pattern | (e[1] 0.5) ? 1 : 0; pattern | (e[3] 0.5) ? 2 : 0; pattern | (e[5] 0.5) ? 4 : 0; pattern | (e[7] 0.5) ? 8 : 0; // 查表得到混合權(quán)重 vec2 weights texture(texArea, vec2(float(pattern) / 16.0, 0.5)).rg;模式碼只用了上下左右四個(gè)方向的邊緣標(biāo)記共 16 種組合。查找表texArea存的是每種組合對應(yīng)的混合權(quán)重。這里有個(gè)容易翻車的點(diǎn)模式碼的 bit 順序必須和查找表生成時(shí)的順序完全一致否則權(quán)重全亂。smaaDemo 里 OpenGL 和 Vulkan 的紋理坐標(biāo)原點(diǎn)不同如果直接照搬查找表Vulkan 下可能需要翻轉(zhuǎn) Y 軸。2.4 鄰域混合的采樣策略最后一個(gè) pass 用權(quán)重去采樣原始顏色。權(quán)重是個(gè)二維向量分別控制水平和垂直方向的混合偏移量。采樣時(shí)不是簡單取周圍四個(gè)像素而是根據(jù)權(quán)重做雙線性插值這樣能用更少的采樣點(diǎn)得到平滑結(jié)果。// 鄰域混合片段著色器簡化 vec2 weights texture(texWeight, uv).rg; vec2 offset weights * texelSize; // 對角線方向采樣 vec3 color texture(texColor, uv).rgb * 0.5; color texture(texColor, uv vec2(-offset.x, -offset.y)).rgb * 0.125; color texture(texColor, uv vec2(offset.x, -offset.y)).rgb * 0.125; color texture(texColor, uv vec2(-offset.x, offset.y)).rgb * 0.125; color texture(texColor, uv vec2(offset.x, offset.y)).rgb * 0.125;權(quán)重越大采樣點(diǎn)離中心越遠(yuǎn)混合范圍越廣。這種對角線采樣模式是 SMAA 的經(jīng)典做法五個(gè)采樣點(diǎn)就能覆蓋大部分邊緣形態(tài)。如果場景里斜邊緣特別多可以改成八方向采樣但開銷會上去。smaaDemo 默認(rèn)用的是五采樣版本在畫質(zhì)和性能之間取了個(gè)平衡。3. OpenGL 與 Vulkan 雙后端資源綁定和管線差異3.1 紋理和幀緩沖的創(chuàng)建OpenGL 和 Vulkan 在資源管理上的差異在 SMAA 這種多 pass 后處理里體現(xiàn)得特別明顯。OpenGL 用glGenTextures和glGenFramebuffers就能搞定Vulkan 則要手動管理內(nèi)存分配、圖像布局轉(zhuǎn)換和管線屏障。// OpenGL 創(chuàng)建中間紋理邊緣紋理、權(quán)重紋理 GLuint CreateTexture(int w, int h, GLenum internalFormat) { GLuint tex; glGenTextures(1, tex); glBindTexture(GL_TEXTURE_2D, tex); glTexImage2D(GL_TEXTURE_2D, 0, internalFormat, w, h, 0, GL_RGBA, GL_UNSIGNED_BYTE, nullptr); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); return tex; }OpenGL 這邊沒什么好說的注意GL_CLAMP_TO_EDGE必須設(shè)否則邊緣像素采樣會出問題。Vulkan 那邊就麻煩多了每個(gè)中間紋理都要配一個(gè)VkImage、VkDeviceMemory、VkImageView還要在渲染前把圖像布局從VK_IMAGE_LAYOUT_UNDEFINED轉(zhuǎn)到VK_IMAGE_LAYOUT_COLOR_ATTACHMENT_OPTIMAL渲染完再轉(zhuǎn)到VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL。smaaDemo 里把這些封裝成了輔助函數(shù)但第一次看 Vulkan 代碼的人很容易被這一堆布局轉(zhuǎn)換繞暈。3.2 管線狀態(tài)對象的配置SMAA 的三個(gè) pass 各自需要不同的著色器和渲染狀態(tài)。OpenGL 用glUseProgram切換著色器用glEnable/glDisable控制混合和深度測試。Vulkan 則要預(yù)先創(chuàng)建三個(gè)VkPipeline每個(gè)管線綁定對應(yīng)的著色器模塊和管線狀態(tài)。// Vulkan 管線創(chuàng)建的關(guān)鍵配置以邊緣檢測 pass 為例 VkPipelineColorBlendAttachmentState blendAttachment{}; blendAttachment.blendEnable VK_FALSE; // 后處理不需要混合 blendAttachment.colorWriteMask VK_COLOR_COMPONENT_R_BIT | VK_COLOR_COMPONENT_G_BIT | VK_COLOR_COMPONENT_B_BIT | VK_COLOR_COMPONENT_A_BIT; VkPipelineDepthStencilStateCreateInfo depthStencil{}; depthStencil.depthTestEnable VK_FALSE; // 后處理關(guān)閉深度測試 depthStencil.depthWriteEnable VK_FALSE; depthStencil.stencilTestEnable VK_FALSE;后處理 pass 必須關(guān)掉深度測試和混合否則中間紋理會被污染。Vulkan 里這些狀態(tài)是管線創(chuàng)建時(shí)固定的不能像 OpenGL 那樣運(yùn)行時(shí)改。所以三個(gè) pass 要?jiǎng)?chuàng)建三個(gè)獨(dú)立的管線對象雖然代碼量大但運(yùn)行時(shí)切換開銷比 OpenGL 小。3.3 全屏三角形的繪制SMAA 的每個(gè) pass 都是全屏操作不需要頂點(diǎn)緩沖直接用gl_VertexID或gl_VertexIndex生成全屏三角形。// 頂點(diǎn)著色器無頂點(diǎn)緩沖用頂點(diǎn)索引生成全屏三角形 #version 450 void main() { // 三個(gè)頂點(diǎn)覆蓋整個(gè)裁剪空間 vec2 pos vec2((gl_VertexIndex 1) 2, gl_VertexIndex 2); gl_Position vec4(pos * 2.0 - 1.0, 0.0, 1.0); }這個(gè)技巧在 OpenGL 和 Vulkan 里都通用gl_VertexIndex在 Vulkan 里對應(yīng)gl_VertexIndexOpenGL 里是gl_VertexID。三個(gè)頂點(diǎn)就能覆蓋整個(gè)屏幕比畫兩個(gè)三角形的四邊形省一個(gè)頂點(diǎn)。注意 Vulkan 的裁剪空間 Y 軸方向和 OpenGL 相反如果發(fā)現(xiàn)畫面上下顛倒在頂點(diǎn)著色器里把 Y 分量取反就行。4. 避坑與排查SMAA 集成時(shí)最容易翻車的五個(gè)點(diǎn)4.1 邊緣檢測閾值過高導(dǎo)致細(xì)邊緣丟失現(xiàn)象場景里細(xì)小的幾何邊緣比如欄桿、電線完全沒有抗鋸齒效果粗邊緣正常。原因邊緣檢測的閾值設(shè)得太高細(xì)邊緣的亮度差沒超過閾值被當(dāng)成平坦區(qū)域跳過了。解決把閾值從 0.1 降到 0.05 左右試同時(shí)觀察平坦區(qū)域有沒有出現(xiàn)噪點(diǎn)。如果噪點(diǎn)太多說明閾值降過頭了需要在邊緣檢測里加一個(gè)局部對比度判斷只有亮度差和局部對比度同時(shí)超過閾值才標(biāo)記為邊緣。4.2 Vulkan 下畫面上下顛倒現(xiàn)象OpenGL 后端正常Vulkan 后端畫面上下翻轉(zhuǎn)。原因Vulkan 的裁剪空間 Y 軸指向和 OpenGL 相反全屏三角形的頂點(diǎn)位置沒做適配。解決在 Vulkan 的頂點(diǎn)著色器里把gl_Position.y取反或者在創(chuàng)建交換鏈時(shí)設(shè)置VkSurfaceCapabilitiesKHR的currentTransform為VK_SURFACE_TRANSFORM_IDENTITY_BIT_KHR并手動處理。smaaDemo 里用的是頂點(diǎn)著色器取反的方案改動最小。4.3 中間紋理格式選錯(cuò)導(dǎo)致精度不足現(xiàn)象抗鋸齒后邊緣出現(xiàn)明顯的色帶或階梯畫質(zhì)比預(yù)期差很多。原因邊緣紋理和權(quán)重紋理用了GL_RGB或VK_FORMAT_R8G8B8_UNORM精度不夠權(quán)重計(jì)算時(shí)量化誤差被放大。解決邊緣紋理用GL_RG8或VK_FORMAT_R8G8_UNORM就夠權(quán)重紋理建議用GL_RGBA8或VK_FORMAT_R8G8B8A8_UNORM。如果場景動態(tài)范圍很大可以考慮用GL_RGBA16F但帶寬開銷會上去。smaaDemo 默認(rèn)用的是 8 位格式大部分場景夠用。4.4 查找表紋理的采樣坐標(biāo)算錯(cuò)現(xiàn)象抗鋸齒效果完全不對邊緣出現(xiàn)奇怪的色塊或條紋。原因模式碼到查找表 UV 的映射算錯(cuò)了比如把 16 種模式映射到了 0 到 1 的 UV 范圍但沒考慮紋理過濾。解決查找表紋理的過濾方式必須設(shè)為GL_NEAREST或VK_FILTER_NEAREST因?yàn)槟Ｊ酱a是離散的線性過濾會混入相鄰模式的權(quán)重。UV 計(jì)算時(shí)用(pattern 0.5) / 16.0而不是pattern / 16.0確保采樣點(diǎn)落在紋素中心。4.5 多 pass 之間的同步問題現(xiàn)象Vulkan 后端偶爾出現(xiàn)畫面撕裂或中間紋理內(nèi)容錯(cuò)亂OpenGL 后端正常。原因Vulkan 的渲染 pass 之間沒有正確設(shè)置管線屏障或圖像布局轉(zhuǎn)換GPU 在寫邊緣紋理的同時(shí)下一個(gè) pass 已經(jīng)在讀它了。解決每個(gè) pass 結(jié)束后加vkCmdPipelineBarrier把圖像布局從COLOR_ATTACHMENT_OPTIMAL轉(zhuǎn)到SHADER_READ_ONLY_OPTIMAL并設(shè)置srcStageMask為COLOR_ATTACHMENT_OUTPUT、dstStageMask為FRAGMENT_SHADER。OpenGL 驅(qū)動會自動處理這些同步所以 OpenGL 后端不容易出這個(gè)問題但 Vulkan 必須手動管理。5. 進(jìn)階技巧把 SMAA 塞進(jìn)延遲渲染管線5.1 延遲渲染下的邊緣檢測調(diào)整延遲渲染管線里顏色緩沖存的是 G-Buffer 的 albedo不是最終光照結(jié)果。如果直接對 albedo 做邊緣檢測光照變化劇烈的區(qū)域會被誤判為邊緣。常見做法是用深度和法線做邊緣檢測或者等光照 pass 完成后再對最終顏色做 SMAA。smaaDemo 默認(rèn)是對最終顏色做后處理這個(gè)順序在延遲渲染里也適用。但如果你的管線有多個(gè)光照 passSMAA 應(yīng)該放在所有光照合成之后、色調(diào)映射之前。色調(diào)映射會壓縮動態(tài)范圍改變亮度差如果在色調(diào)映射之后做邊緣檢測閾值需要重新調(diào)。5.2 時(shí)間性抗鋸齒與 SMAA 的配合如果項(xiàng)目里已經(jīng)用了 TAA時(shí)間性抗鋸齒SMAA 可以作為補(bǔ)充處理 TAA 搞不定的高頻邊緣。做法是把 SMAA 放在 TAA 之后用 TAA 的歷史累積結(jié)果作為 SMAA 的輸入。這樣 TAA 負(fù)責(zé)靜態(tài)場景的收斂SMAA 負(fù)責(zé)動態(tài)邊緣的即時(shí)修正。// 渲染順序幾何 → 光照 → TAA → SMAA → 色調(diào)映射 → UI // 注意 SMAA 的輸入紋理必須是 TAA 的輸出不能是原始顏色 RenderPass geometryPass(); RenderPass lightingPass(); RenderPass taaPass(); // 時(shí)間性抗鋸齒 RenderPass smaaEdgePass(); // SMAA 邊緣檢測 RenderPass smaaWeightPass(); // SMAA 形態(tài)計(jì)算 RenderPass smaaBlendPass(); // SMAA 鄰域混合 RenderPass tonemapPass(); RenderPass uiPass();這個(gè)順序下SMAA 的閾值可以比單獨(dú)使用時(shí)稍微高一點(diǎn)因?yàn)?TAA 已經(jīng)處理掉了一部分低頻鋸齒。我一般會把閾值從 0.1 提到 0.12 到 0.15 之間具體看場景。5.3 性能驗(yàn)證與參數(shù)調(diào)優(yōu)SMAA 的開銷主要在三個(gè) pass 的紋理采樣上。邊緣檢測每個(gè)像素采樣 5 次形態(tài)計(jì)算采樣 9 次鄰域混合采樣 5 次總共 19 次紋理采樣。在 1080p 分辨率下這個(gè)開銷對現(xiàn)代 GPU 來說不算大但在移動端或者集成顯卡上需要關(guān)注。驗(yàn)證方法很簡單用 GPU 計(jì)時(shí)器分別測三個(gè) pass 的耗時(shí)然后逐個(gè)關(guān)掉看幀率變化。如果邊緣檢測耗時(shí)占比過高說明閾值太低導(dǎo)致邊緣像素太多如果鄰域混合耗時(shí)高說明采樣模式可以簡化。參數(shù)調(diào)優(yōu)的優(yōu)先級先調(diào)邊緣檢測閾值再調(diào)查找表精度最后調(diào)采樣模式。閾值影響最大查找表精度影響畫質(zhì)采樣模式影響性能。我一般會準(zhǔn)備三套參數(shù)高質(zhì)量閾值 0.05、八方向采樣、平衡閾值 0.1、五方向采樣、性能閾值 0.15、四方向采樣根據(jù)目標(biāo)平臺切換。從那以后我每次集成 SMAA 都強(qiáng)制走一遍「先關(guān)掉所有 pass 看基準(zhǔn)幀率再逐個(gè)打開看增量」的流程避免把性能問題歸咎于錯(cuò)誤的 pass。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取 SMAA抗鋸齒原理與OpenGL/Vulkan雙后端實(shí)現(xiàn)詳解
簡介smaaDemo是一份面向圖形渲染開發(fā)者與圖形學(xué)學(xué)習(xí)者的OpenGL、Vulkan雙API抗鋸齒演示工程聚焦亞像素形態(tài)抗鋸齒SMAA這一后期處理技術(shù)幫助讀者理解邊緣檢測、鄰域搜索與色彩混合三階段算法并對比MSAA、SSAA、FXAA等方案在畫質(zhì)與性能上的取舍。壓縮包為zip格式整體約22.84MB內(nèi)含C源代碼、GLSL或SPIR-V著色器、紋理與測試場景資源以及Makefile或CMakeLists.txt構(gòu)建腳本和SMAA質(zhì)量等級等配置文件便于直接編譯運(yùn)行與調(diào)參實(shí)驗(yàn)。目前已有238人學(xué)習(xí)關(guān)注。通過研讀該項(xiàng)目讀者可掌握在OpenGL與Vulkan中搭建后期處理管線、集成SMAA并優(yōu)化渲染性能的完整思路同時(shí)加深對紋理采樣與著色器編程等高級特性的理解適合具備一定圖形編程基礎(chǔ)、希望提升畫面質(zhì)量與渲染效率的開發(fā)者參考實(shí)踐。1. 從鋸齒邊緣說起smaaDemo 到底演示了什么如果你寫過 OpenGL 或 Vulkan 的渲染管線大概率被鋸齒邊緣折磨過。MSAA 靠硬件多重采樣開銷隨采樣數(shù)線性上漲FXAA 是后處理快但糊而 SMAASubpixel Morphological Antialiasing亞像素形態(tài)抗鋸齒走的是另一條路——它先用邊緣檢測找出需要處理的像素再根據(jù)局部形態(tài)模式做混合權(quán)重計(jì)算最后在亞像素級別修正顏色。smaaDemo 就是把這套流程用 OpenGL 和 Vulkan 兩條后端各實(shí)現(xiàn)了一遍的演示工程代碼結(jié)構(gòu)清晰適合拿來對照學(xué)習(xí)或直接摳出核心 pass 塞進(jìn)自己的渲染器。它解決的是「想要接近 MSAA 的畫質(zhì)、又不想付 MSAA 的帶寬和顯存代價(jià)」這個(gè)矛盾適合已經(jīng)能跑通基礎(chǔ)渲染管線、想深入理解后處理抗鋸齒的圖形開發(fā)者。2. SMAA 的三段式管線邊緣檢測、形態(tài)計(jì)算、鄰域混合2.1 為什么不是一步到位SMAA 的核心思路是把抗鋸齒拆成三個(gè)獨(dú)立的 pass每個(gè) pass 只做一件事。這種拆分不是為了好看而是因?yàn)檫吘墮z測和混合權(quán)重計(jì)算對紋理采樣的需求完全不同——前者需要精確的亮度對比后者需要大范圍的鄰域信息。如果硬塞進(jìn)一個(gè) shader要么采樣次數(shù)爆炸要么精度不夠。第一個(gè) pass 是邊緣檢測。它把場景顏色紋理轉(zhuǎn)成亮度然后對每個(gè)像素檢查上下左右四個(gè)方向的亮度差超過閾值就標(biāo)記為邊緣。輸出是一張邊緣紋理每個(gè)通道存不同方向的邊緣信息。第二個(gè) pass 是形態(tài)計(jì)算也叫 pattern 計(jì)算。它讀取邊緣紋理在 3x3 鄰域內(nèi)統(tǒng)計(jì)邊緣的分布模式查一張預(yù)計(jì)算的模式表得出每個(gè)像素的混合權(quán)重。第三個(gè) pass 是鄰域混合用權(quán)重去采樣原始顏色紋理的周圍像素做加權(quán)平均。這三個(gè) pass 的輸入輸出關(guān)系很清晰顏色紋理 → 邊緣紋理 → 權(quán)重紋理 → 最終顏色。smaaDemo 里 OpenGL 和 Vulkan 的實(shí)現(xiàn)都遵循這個(gè)結(jié)構(gòu)區(qū)別只在于資源綁定和管線狀態(tài)的管理方式。2.2 邊緣檢測的閾值怎么定邊緣檢測的閾值直接決定哪些像素會被當(dāng)成邊緣。閾值太低平坦區(qū)域也會被誤判白白增加后續(xù)計(jì)算量閾值太高細(xì)邊緣被漏掉抗鋸齒效果打折。常見做法是用亮度差和局部對比度兩個(gè)條件聯(lián)合判斷。// 邊緣檢測片段著色器核心邏輯簡化版 vec3 luma vec3(0.299, 0.587, 0.114); float lumaM dot(texture(texColor, uv).rgb, luma); float lumaL dot(texture(texColor, uv - vec2(texelSize.x, 0.0)).rgb, luma); float lumaR dot(texture(texColor, uv vec2(texelSize.x, 0.0)).rgb, luma); float lumaT dot(texture(texColor, uv - vec2(0.0, texelSize.y)).rgb, luma); float lumaB dot(texture(texColor, uv vec2(0.0, texelSize.y)).rgb, luma); float edgeH abs(lumaL lumaR - 2.0 * lumaM); // 水平方向二階差分 float edgeV abs(lumaT lumaB - 2.0 * lumaM); // 垂直方向二階差分 float edge max(edgeH, edgeV); // 閾值判斷低于閾值的直接歸零 float threshold 0.1; edge step(threshold, edge);這段代碼里texelSize是紋理尺寸的倒數(shù)用來把 UV 偏移換算成一個(gè)像素的距離。luma權(quán)重是標(biāo)準(zhǔn)的 Rec.709 亮度系數(shù)。閾值 0.1 是個(gè)經(jīng)驗(yàn)值實(shí)際項(xiàng)目里可以根據(jù)場景對比度調(diào)整——高動態(tài)范圍場景可能需要 0.05 到 0.15 之間試。注意這里用的是二階差分而不是簡單的一階差分因?yàn)槎A差分對細(xì)邊緣更敏感同時(shí)能抑制漸變區(qū)域的誤判。2.3 形態(tài)計(jì)算與模式表形態(tài)計(jì)算 pass 是 SMAA 最「玄學(xué)」的部分。它讀取邊緣紋理在 3x3 鄰域內(nèi)把每個(gè)像素的邊緣標(biāo)記拼成一個(gè) 8 位模式碼然后查一張預(yù)計(jì)算的查找表得到混合權(quán)重。這張表是離線生成的smaaDemo 里以紋理形式加載。// 形態(tài)計(jì)算片段著色器簡化 // 從邊緣紋理讀取 3x3 鄰域 float e[9]; e[0] texture(texEdge, uv vec2(-texelSize.x, -texelSize.y)).r; e[1] texture(texEdge, uv vec2(0.0, -texelSize.y)).r; // ... 省略中間幾個(gè) e[8] texture(texEdge, uv vec2(texelSize.x, texelSize.y)).r; // 拼模式碼每個(gè)方向一個(gè) bit int pattern 0; pattern | (e[1] 0.5) ? 1 : 0; pattern | (e[3] 0.5) ? 2 : 0; pattern | (e[5] 0.5) ? 4 : 0; pattern | (e[7] 0.5) ? 8 : 0; // 查表得到混合權(quán)重 vec2 weights texture(texArea, vec2(float(pattern) / 16.0, 0.5)).rg;模式碼只用了上下左右四個(gè)方向的邊緣標(biāo)記共 16 種組合。查找表texArea存的是每種組合對應(yīng)的混合權(quán)重。這里有個(gè)容易翻車的點(diǎn)模式碼的 bit 順序必須和查找表生成時(shí)的順序完全一致否則權(quán)重全亂。smaaDemo 里 OpenGL 和 Vulkan 的紋理坐標(biāo)原點(diǎn)不同如果直接照搬查找表Vulkan 下可能需要翻轉(zhuǎn) Y 軸。2.4 鄰域混合的采樣策略最后一個(gè) pass 用權(quán)重去采樣原始顏色。權(quán)重是個(gè)二維向量分別控制水平和垂直方向的混合偏移量。采樣時(shí)不是簡單取周圍四個(gè)像素而是根據(jù)權(quán)重做雙線性插值這樣能用更少的采樣點(diǎn)得到平滑結(jié)果。// 鄰域混合片段著色器簡化 vec2 weights texture(texWeight, uv).rg; vec2 offset weights * texelSize; // 對角線方向采樣 vec3 color texture(texColor, uv).rgb * 0.5; color texture(texColor, uv vec2(-offset.x, -offset.y)).rgb * 0.125; color texture(texColor, uv vec2(offset.x, -offset.y)).rgb * 0.125; color texture(texColor, uv vec2(-offset.x, offset.y)).rgb * 0.125; color texture(texColor, uv vec2(offset.x, offset.y)).rgb * 0.125;權(quán)重越大采樣點(diǎn)離中心越遠(yuǎn)混合范圍越廣。這種對角線采樣模式是 SMAA 的經(jīng)典做法五個(gè)采樣點(diǎn)就能覆蓋大部分邊緣形態(tài)。如果場景里斜邊緣特別多可以改成八方向采樣但開銷會上去。smaaDemo 默認(rèn)用的是五采樣版本在畫質(zhì)和性能之間取了個(gè)平衡。3. OpenGL 與 Vulkan 雙后端資源綁定和管線差異3.1 紋理和幀緩沖的創(chuàng)建OpenGL 和 Vulkan 在資源管理上的差異在 SMAA 這種多 pass 后處理里體現(xiàn)得特別明顯。OpenGL 用glGenTextures和glGenFramebuffers就能搞定Vulkan 則要手動管理內(nèi)存分配、圖像布局轉(zhuǎn)換和管線屏障。// OpenGL 創(chuàng)建中間紋理邊緣紋理、權(quán)重紋理 GLuint CreateTexture(int w, int h, GLenum internalFormat) { GLuint tex; glGenTextures(1, tex); glBindTexture(GL_TEXTURE_2D, tex); glTexImage2D(GL_TEXTURE_2D, 0, internalFormat, w, h, 0, GL_RGBA, GL_UNSIGNED_BYTE, nullptr); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); return tex; }OpenGL 這邊沒什么好說的注意GL_CLAMP_TO_EDGE必須設(shè)否則邊緣像素采樣會出問題。Vulkan 那邊就麻煩多了每個(gè)中間紋理都要配一個(gè)VkImage、VkDeviceMemory、VkImageView還要在渲染前把圖像布局從VK_IMAGE_LAYOUT_UNDEFINED轉(zhuǎn)到VK_IMAGE_LAYOUT_COLOR_ATTACHMENT_OPTIMAL渲染完再轉(zhuǎn)到VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL。smaaDemo 里把這些封裝成了輔助函數(shù)但第一次看 Vulkan 代碼的人很容易被這一堆布局轉(zhuǎn)換繞暈。3.2 管線狀態(tài)對象的配置SMAA 的三個(gè) pass 各自需要不同的著色器和渲染狀態(tài)。OpenGL 用glUseProgram切換著色器用glEnable/glDisable控制混合和深度測試。Vulkan 則要預(yù)先創(chuàng)建三個(gè)VkPipeline每個(gè)管線綁定對應(yīng)的著色器模塊和管線狀態(tài)。// Vulkan 管線創(chuàng)建的關(guān)鍵配置以邊緣檢測 pass 為例 VkPipelineColorBlendAttachmentState blendAttachment{}; blendAttachment.blendEnable VK_FALSE; // 后處理不需要混合 blendAttachment.colorWriteMask VK_COLOR_COMPONENT_R_BIT | VK_COLOR_COMPONENT_G_BIT | VK_COLOR_COMPONENT_B_BIT | VK_COLOR_COMPONENT_A_BIT; VkPipelineDepthStencilStateCreateInfo depthStencil{}; depthStencil.depthTestEnable VK_FALSE; // 后處理關(guān)閉深度測試 depthStencil.depthWriteEnable VK_FALSE; depthStencil.stencilTestEnable VK_FALSE;后處理 pass 必須關(guān)掉深度測試和混合否則中間紋理會被污染。Vulkan 里這些狀態(tài)是管線創(chuàng)建時(shí)固定的不能像 OpenGL 那樣運(yùn)行時(shí)改。所以三個(gè) pass 要?jiǎng)?chuàng)建三個(gè)獨(dú)立的管線對象雖然代碼量大但運(yùn)行時(shí)切換開銷比 OpenGL 小。3.3 全屏三角形的繪制SMAA 的每個(gè) pass 都是全屏操作不需要頂點(diǎn)緩沖直接用gl_VertexID或gl_VertexIndex生成全屏三角形。// 頂點(diǎn)著色器無頂點(diǎn)緩沖用頂點(diǎn)索引生成全屏三角形 #version 450 void main() { // 三個(gè)頂點(diǎn)覆蓋整個(gè)裁剪空間 vec2 pos vec2((gl_VertexIndex 1) 2, gl_VertexIndex 2); gl_Position vec4(pos * 2.0 - 1.0, 0.0, 1.0); }這個(gè)技巧在 OpenGL 和 Vulkan 里都通用gl_VertexIndex在 Vulkan 里對應(yīng)gl_VertexIndexOpenGL 里是gl_VertexID。三個(gè)頂點(diǎn)就能覆蓋整個(gè)屏幕比畫兩個(gè)三角形的四邊形省一個(gè)頂點(diǎn)。注意 Vulkan 的裁剪空間 Y 軸方向和 OpenGL 相反如果發(fā)現(xiàn)畫面上下顛倒在頂點(diǎn)著色器里把 Y 分量取反就行。4. 避坑與排查SMAA 集成時(shí)最容易翻車的五個(gè)點(diǎn)4.1 邊緣檢測閾值過高導(dǎo)致細(xì)邊緣丟失現(xiàn)象場景里細(xì)小的幾何邊緣比如欄桿、電線完全沒有抗鋸齒效果粗邊緣正常。原因邊緣檢測的閾值設(shè)得太高細(xì)邊緣的亮度差沒超過閾值被當(dāng)成平坦區(qū)域跳過了。解決把閾值從 0.1 降到 0.05 左右試同時(shí)觀察平坦區(qū)域有沒有出現(xiàn)噪點(diǎn)。如果噪點(diǎn)太多說明閾值降過頭了需要在邊緣檢測里加一個(gè)局部對比度判斷只有亮度差和局部對比度同時(shí)超過閾值才標(biāo)記為邊緣。4.2 Vulkan 下畫面上下顛倒現(xiàn)象OpenGL 后端正常Vulkan 后端畫面上下翻轉(zhuǎn)。原因Vulkan 的裁剪空間 Y 軸指向和 OpenGL 相反全屏三角形的頂點(diǎn)位置沒做適配。解決在 Vulkan 的頂點(diǎn)著色器里把gl_Position.y取反或者在創(chuàng)建交換鏈時(shí)設(shè)置VkSurfaceCapabilitiesKHR的currentTransform為VK_SURFACE_TRANSFORM_IDENTITY_BIT_KHR并手動處理。smaaDemo 里用的是頂點(diǎn)著色器取反的方案改動最小。4.3 中間紋理格式選錯(cuò)導(dǎo)致精度不足現(xiàn)象抗鋸齒后邊緣出現(xiàn)明顯的色帶或階梯畫質(zhì)比預(yù)期差很多。原因邊緣紋理和權(quán)重紋理用了GL_RGB或VK_FORMAT_R8G8B8_UNORM精度不夠權(quán)重計(jì)算時(shí)量化誤差被放大。解決邊緣紋理用GL_RG8或VK_FORMAT_R8G8_UNORM就夠權(quán)重紋理建議用GL_RGBA8或VK_FORMAT_R8G8B8A8_UNORM。如果場景動態(tài)范圍很大可以考慮用GL_RGBA16F但帶寬開銷會上去。smaaDemo 默認(rèn)用的是 8 位格式大部分場景夠用。4.4 查找表紋理的采樣坐標(biāo)算錯(cuò)現(xiàn)象抗鋸齒效果完全不對邊緣出現(xiàn)奇怪的色塊或條紋。原因模式碼到查找表 UV 的映射算錯(cuò)了比如把 16 種模式映射到了 0 到 1 的 UV 范圍但沒考慮紋理過濾。解決查找表紋理的過濾方式必須設(shè)為GL_NEAREST或VK_FILTER_NEAREST因?yàn)槟Ｊ酱a是離散的線性過濾會混入相鄰模式的權(quán)重。UV 計(jì)算時(shí)用(pattern 0.5) / 16.0而不是pattern / 16.0確保采樣點(diǎn)落在紋素中心。4.5 多 pass 之間的同步問題現(xiàn)象Vulkan 后端偶爾出現(xiàn)畫面撕裂或中間紋理內(nèi)容錯(cuò)亂OpenGL 后端正常。原因Vulkan 的渲染 pass 之間沒有正確設(shè)置管線屏障或圖像布局轉(zhuǎn)換GPU 在寫邊緣紋理的同時(shí)下一個(gè) pass 已經(jīng)在讀它了。解決每個(gè) pass 結(jié)束后加vkCmdPipelineBarrier把圖像布局從COLOR_ATTACHMENT_OPTIMAL轉(zhuǎn)到SHADER_READ_ONLY_OPTIMAL并設(shè)置srcStageMask為COLOR_ATTACHMENT_OUTPUT、dstStageMask為FRAGMENT_SHADER。OpenGL 驅(qū)動會自動處理這些同步所以 OpenGL 后端不容易出這個(gè)問題但 Vulkan 必須手動管理。5. 進(jìn)階技巧把 SMAA 塞進(jìn)延遲渲染管線5.1 延遲渲染下的邊緣檢測調(diào)整延遲渲染管線里顏色緩沖存的是 G-Buffer 的 albedo不是最終光照結(jié)果。如果直接對 albedo 做邊緣檢測光照變化劇烈的區(qū)域會被誤判為邊緣。常見做法是用深度和法線做邊緣檢測或者等光照 pass 完成后再對最終顏色做 SMAA。smaaDemo 默認(rèn)是對最終顏色做后處理這個(gè)順序在延遲渲染里也適用。但如果你的管線有多個(gè)光照 passSMAA 應(yīng)該放在所有光照合成之后、色調(diào)映射之前。色調(diào)映射會壓縮動態(tài)范圍改變亮度差如果在色調(diào)映射之后做邊緣檢測閾值需要重新調(diào)。5.2 時(shí)間性抗鋸齒與 SMAA 的配合如果項(xiàng)目里已經(jīng)用了 TAA時(shí)間性抗鋸齒SMAA 可以作為補(bǔ)充處理 TAA 搞不定的高頻邊緣。做法是把 SMAA 放在 TAA 之后用 TAA 的歷史累積結(jié)果作為 SMAA 的輸入。這樣 TAA 負(fù)責(zé)靜態(tài)場景的收斂SMAA 負(fù)責(zé)動態(tài)邊緣的即時(shí)修正。// 渲染順序幾何 → 光照 → TAA → SMAA → 色調(diào)映射 → UI // 注意 SMAA 的輸入紋理必須是 TAA 的輸出不能是原始顏色 RenderPass geometryPass(); RenderPass lightingPass(); RenderPass taaPass(); // 時(shí)間性抗鋸齒 RenderPass smaaEdgePass(); // SMAA 邊緣檢測 RenderPass smaaWeightPass(); // SMAA 形態(tài)計(jì)算 RenderPass smaaBlendPass(); // SMAA 鄰域混合 RenderPass tonemapPass(); RenderPass uiPass();這個(gè)順序下SMAA 的閾值可以比單獨(dú)使用時(shí)稍微高一點(diǎn)因?yàn)?TAA 已經(jīng)處理掉了一部分低頻鋸齒。我一般會把閾值從 0.1 提到 0.12 到 0.15 之間具體看場景。5.3 性能驗(yàn)證與參數(shù)調(diào)優(yōu)SMAA 的開銷主要在三個(gè) pass 的紋理采樣上。邊緣檢測每個(gè)像素采樣 5 次形態(tài)計(jì)算采樣 9 次鄰域混合采樣 5 次總共 19 次紋理采樣。在 1080p 分辨率下這個(gè)開銷對現(xiàn)代 GPU 來說不算大但在移動端或者集成顯卡上需要關(guān)注。驗(yàn)證方法很簡單用 GPU 計(jì)時(shí)器分別測三個(gè) pass 的耗時(shí)然后逐個(gè)關(guān)掉看幀率變化。如果邊緣檢測耗時(shí)占比過高說明閾值太低導(dǎo)致邊緣像素太多如果鄰域混合耗時(shí)高說明采樣模式可以簡化。參數(shù)調(diào)優(yōu)的優(yōu)先級先調(diào)邊緣檢測閾值再調(diào)查找表精度最后調(diào)采樣模式。閾值影響最大查找表精度影響畫質(zhì)采樣模式影響性能。我一般會準(zhǔn)備三套參數(shù)高質(zhì)量閾值 0.05、八方向采樣、平衡閾值 0.1、五方向采樣、性能閾值 0.15、四方向采樣根據(jù)目標(biāo)平臺切換。從那以后我每次集成 SMAA 都強(qiáng)制走一遍「先關(guān)掉所有 pass 看基準(zhǔn)幀率再逐個(gè)打開看增量」的流程避免把性能問題歸咎于錯(cuò)誤的 pass。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取