前陣子在LayaAir項(xiàng)目里要做一個(gè)角色選中描邊需求本身不復(fù)雜點(diǎn)一下場(chǎng)景里的怪物身體邊緣亮一圈金色輪廓。我第一反應(yīng)是改Shader結(jié)果打開角色預(yù)制體一看身上掛著五六種材質(zhì)有貼圖混合的、有帶溶解特效的還有美術(shù)從舊項(xiàng)目里直接拖進(jìn)來(lái)的統(tǒng)一改一遍Shader的成本比做描邊效果本身還高。于是我把主意的重點(diǎn)轉(zhuǎn)向了CommandBuffer——不碰任何原始材質(zhì)在引擎渲染流程的某個(gè)階段插入一次額外的繪制把描邊效果直接疊上去。這篇文章就從選型、實(shí)現(xiàn)到踩坑完整過(guò)一遍給同樣在LayaAir里做描邊需求的朋友一個(gè)參考。1. 三個(gè)傳統(tǒng)描邊方案的硬傷以及CommandBuffer怎么繞過(guò)去的1.1 雙Pass描邊的綁定成本雙Pass描邊是大家最容易想到的方案。一個(gè)材質(zhì)兩個(gè)PassPass0正常紋理渲染Pass1剔除正面只把背面沿法線向外推一點(diǎn)然后輸出純描邊色。改起來(lái)直白效果也穩(wěn)定。問(wèn)題在于它要求物體上所有材質(zhì)都換成這個(gè)帶描邊Pass的材質(zhì)。如果是一個(gè)角色由頭、身體、武器多套材質(zhì)組成你就得把每個(gè)材質(zhì)都加一遍描邊Pass。更麻煩的是項(xiàng)目里已有PBR、溶解、流光這些定制Shader每個(gè)都要加Pass維護(hù)量直線上升。而且每次調(diào)整描邊寬度、顏色需要同時(shí)改很多個(gè)材質(zhì)資源后期美術(shù)提個(gè)反饞需求都得跟著改一圈。雙Pass還有一個(gè)隱藏問(wèn)題描邊Pass和外擴(kuò)Pass在同一個(gè)材質(zhì)內(nèi)部意味著這種物體無(wú)法靜態(tài)合批。你可以想象一個(gè)場(chǎng)景里擺了幾百個(gè)需要描邊的石柱每個(gè)石柱都是一個(gè)“異種材質(zhì)體”合批優(yōu)化直接失效。這個(gè)代價(jià)在移動(dòng)端是很明顯的。1.2 模板描邊的復(fù)雜性隱患模板Stencil方案是另一條路先用模板測(cè)試把物體的輪廓像素寫入模板緩沖再在全屏后處理中根據(jù)模板值找邊緣最后疊加描邊色。優(yōu)點(diǎn)很明顯描邊精度高可以和場(chǎng)景顏色分開處理。缺點(diǎn)是模板相關(guān)操作需要所有參與物體材質(zhì)都支持Stencil寫入這又回到了改Shader的老路。一旦某個(gè)材質(zhì)不按預(yù)期寫入模板緩沖排查起來(lái)非常難受。更關(guān)鍵的是WebGL下模板緩沖通常只有8bit如果項(xiàng)目里UI合批遮罩、區(qū)域高亮等其他系統(tǒng)也在用模板標(biāo)記很容易互相踩踏出現(xiàn)“這里描邊突然沒(méi)了那里高亮范圍變大了”這種詭異問(wèn)題。1.3 CommandBuffer描邊的本質(zhì)插一段繪制而不是改一堆材質(zhì)CommandBuffer的方案思路完全不同原物體和原材質(zhì)在相機(jī)渲染流程中原樣跑一遍我們?cè)谙鄼C(jī)渲染到某個(gè)階段時(shí)用CommandBuffer再把這個(gè)模型的網(wǎng)格調(diào)出來(lái)用另一個(gè)“純粹為了描邊”的材質(zhì)單獨(dú)繪制一次。原始材質(zhì)完全不用動(dòng)。換句話說(shuō)“正常繪制”歸原材質(zhì)管“描邊繪制”歸CommandBuffer和描邊材質(zhì)管兩邊解耦。這也是它能在不動(dòng)資產(chǎn)的前提下給任意物體加描邊的根本原因。而且CommandBuffer在LayaAir里并不是只能做描邊HUD、準(zhǔn)星、區(qū)域高亮、技能特效之類的需求本質(zhì)都是“在渲染流程的某個(gè)點(diǎn)插一段自定義繪制”這套機(jī)制全部能覆蓋學(xué)會(huì)一次能反復(fù)用。2. LayaAir里CommandBuffer的掛載方式與執(zhí)行階段2.1 PipelineStage里常用的是哪幾個(gè)節(jié)點(diǎn)CommandBuffer要掛在相機(jī)上并且指定執(zhí)行階段。在LayaAir里這個(gè)階段枚舉是PipelineStage常用的大概有這些階段值含義適合做的事BeforeForwardOpacity不透明物體渲染完后、半透明之前描邊、選中高亮、添加不透明特效AfterForwardOpacity半透明物體渲染之后疊加光暈、屏幕空間特效BeforeImageEffect后效之前需要接后處理的中間結(jié)果ScreenImageEffect后效階段全屏后處理、邊緣檢測(cè)描邊我建議掛在BeforeForwardOpacity。原因很簡(jiǎn)單到了這個(gè)階段場(chǎng)景里所有不透明物體都已經(jīng)畫完深度緩沖里已經(jīng)有完整的不透明物體深度半透明物體還沒(méi)畫此時(shí)插入描邊繪制描邊不會(huì)被半透明物體蓋住。描邊自身作為一個(gè)不透明片元參與深度測(cè)試邊緣外擴(kuò)的部分正常顯示物體中心的背面則被物體自身深度遮擋不會(huì)出現(xiàn)“整個(gè)模型變成描邊色”的災(zāi)難。2.2 CommandBuffer的完整生命周期掛載流程本身不復(fù)雜看一下代碼就明白// 創(chuàng)建CommandBuffer const cb new Laya.CommandBuffer(); // 掛到相機(jī)上并指定執(zhí)行時(shí)機(jī) camera.addCommandBuffer(cb, Laya.PipelineStage.BeforeForwardOpacity); // 需要移除時(shí) camera.removeCommandBuffer(cb); // 按階段清空 camera.removeCommandBufferByStage(Laya.PipelineStage.BeforeForwardOpacity);CommandBuffer內(nèi)部是一串命令序列按照添加順序執(zhí)行。可以理解成一個(gè)“渲染宏”在這個(gè)階段把剔除狀態(tài)設(shè)成什么、深度測(cè)試設(shè)成什么、畫什么網(wǎng)格、用什么材質(zhì)全都在這個(gè)序列里一步步寫清楚。它的執(zhí)行由引擎在對(duì)應(yīng)階段自動(dòng)觸發(fā)不需要每幀手動(dòng)調(diào)用也不需要擔(dān)心Update順序。有一點(diǎn)必須養(yǎng)成本能物體銷毀或者效果切換時(shí)記得把CB從相機(jī)上摘掉。CB本身會(huì)持有它引用的網(wǎng)格和材質(zhì)即使你在業(yè)務(wù)層把物體刪了只要CB沒(méi)移除它依然會(huì)在渲染階段嘗試?yán)L制表現(xiàn)就是“場(chǎng)景里看不到這個(gè)物體了但雷達(dá)上一直有個(gè)東西在被渲染”性能計(jì)數(shù)器能直接看到DrawCall異常高。2.3 繞過(guò)CB的外圍依賴網(wǎng)格、矩陣、材質(zhì)CommandBuffer本身只是一個(gè)調(diào)度容器真正繪制還需要三樣?xùn)|西網(wǎng)格、矩陣、材質(zhì)。網(wǎng)格來(lái)自模型的MeshFilter或MeshRenderer的sharedMesh矩陣來(lái)自物體的transform.worldMatrix材質(zhì)則是專門為描邊創(chuàng)建的材質(zhì)建議在代碼里運(yùn)行時(shí)new出來(lái)不依賴資產(chǎn)——描邊顏色、寬度都可以作為Shader屬性直接改做美術(shù)配置表也方便。這里有一點(diǎn)要提前講清楚網(wǎng)格用的是sharedMesh不是SkinnedMeshRenderer上實(shí)時(shí)計(jì)算的動(dòng)畫網(wǎng)格。換句話說(shuō)CommandBuffer直接drawMesh的方式拿不到骨骼動(dòng)畫的當(dāng)前姿態(tài)數(shù)據(jù)。如果你的描邊目標(biāo)是會(huì)跑會(huì)跳的帶骨骼動(dòng)畫角色需要單獨(dú)處理這個(gè)我后面踩坑章節(jié)會(huì)細(xì)說(shuō)。靜態(tài)物體、道具、建筑、部分剛體物件用這個(gè)方案是沒(méi)問(wèn)題的。3. 核心實(shí)現(xiàn)背面放大描邊的完整代碼與參數(shù)說(shuō)明3.1 描邊Shader的編寫要點(diǎn)背面放大描邊的思路是把模型的正面剔除只畫背面背面的頂點(diǎn)沿法線方向往外推一小段距離然后輸出純色。由于被推出去的背片位于原模型邊緣外側(cè)正面渲染時(shí)又會(huì)被原模型擋住最后屏幕上顯示出來(lái)的就是緊貼模型輪廓的一圈邊。外層描邊Shader的頂點(diǎn)部分長(zhǎng)這樣#version 300 es precision highp float; uniform mat4 u_WorldMat; uniform mat4 u_ViewProjectionMat; uniform float u_OutlineWidth; layout(location 0) in vec3 position; layout(location 1) in vec3 normal; void main() { vec4 worldPos u_WorldMat * vec4(position, 1.0); vec4 worldNormal u_WorldMat * vec4(normal, 0.0); worldPos.xyz worldNormal.xyz * u_OutlineWidth; gl_Position u_ViewProjectionMat * worldPos; }片元部分更簡(jiǎn)單#version 300 es precision highp float; uniform vec4 u_OutlineColor; layout(location 0) out vec4 fragColor; void main() { fragColor u_OutlineColor; }有個(gè)細(xì)節(jié)值得展開。為什么用世界空間外擴(kuò)而不是模型空間如果用模型空間的position normal再走M(jìn)VP那么遇到帶縮放、旋轉(zhuǎn)的物體外擴(kuò)方向和距離會(huì)跟著模型變換一起變非均勻縮放時(shí)會(huì)直接變形。把頂點(diǎn)先變換到世界空間再把法線也變換到世界空間然后在世界空間外擴(kuò)寬度就是一個(gè)穩(wěn)定的絕對(duì)距離值不會(huì)受到模型自身縮放的影響。代價(jià)是描邊寬度不隨相機(jī)距離變化遠(yuǎn)處看起來(lái)描邊會(huì)顯得更細(xì)實(shí)際項(xiàng)目里需要根據(jù)需求取舍。3.2 CommandBuffer里的繪制指令在LayaAir里繪制描邊的那段核心代碼大致是這樣// 創(chuàng)建CommandBuffer const cb new Laya.CommandBuffer(); camera.addCommandBuffer(cb, Laya.PipelineStage.BeforeForwardOpacity); // 配置剔除狀態(tài)只畫背面正面被原物體正常渲染覆蓋 cb.renderState.cull Laya.RenderState.CULL_FRONT; cb.renderState.depthWrite false; cb.renderState.depthTest Laya.RenderState.DEPTHTEST_LESS; // 設(shè)置描邊材質(zhì)參數(shù) outlineMat.setVector4(u_OutlineColor, new Laya.Vector4(1.0, 0.7, 0.2, 1.0)); outlineMat.setNumber(u_OutlineWidth, 0.03); // 把網(wǎng)格用描邊材質(zhì)再畫一次 cb.drawMesh(targetMesh, targetTransform.worldMatrix, outlineMat);注意這里cull設(shè)置成CULL_FRONT意思是想剔除正面。這樣每個(gè)三角面只剩下背面的那一面被渲染背面經(jīng)法線外擴(kuò)后露在物體邊緣外面。深度測(cè)試設(shè)置成Less深度寫入關(guān)閉。深度寫入關(guān)閉很重要描邊本身是疊加效果不應(yīng)該去污染深度緩沖深度測(cè)試開啟Less是為了讓被物體正面擋住的那部分描邊不顯示只讓外擴(kuò)露出的部分通過(guò)測(cè)試。畫完之后CB就完成了它的使命。引擎繼續(xù)渲染后續(xù)的半透明物體和其他階段描邊已經(jīng)像紋身一樣貼在了場(chǎng)景上。3.3 描邊寬度、顏色和視距的修正參數(shù)調(diào)節(jié)有幾個(gè)實(shí)操經(jīng)驗(yàn)。描邊寬度u_OutlineWidth如果在世界空間外擴(kuò)數(shù)值大概在物體包圍盒半徑的1%~3%之間會(huì)比較協(xié)調(diào)。一個(gè)更穩(wěn)妥的做法是運(yùn)行時(shí)根據(jù)物體包圍盒半徑動(dòng)態(tài)計(jì)算而不是每個(gè)物體硬編碼同一個(gè)值。const bounds targetMesh.bounds; const radius bounds.getBoundingSphere().radius; outlineMat.setNumber(u_OutlineWidth, radius * 0.02);這樣大石頭和小編鐘都默認(rèn)有一個(gè)相對(duì)協(xié)調(diào)的描邊寬度。如果項(xiàng)目場(chǎng)景相機(jī)經(jīng)常拉近拉遠(yuǎn)可以再把寬度和相機(jī)距離做一個(gè)線性修正遠(yuǎn)距離時(shí)適當(dāng)放大。曲線不復(fù)雜但要記住一點(diǎn)這個(gè)修正應(yīng)該基于物體到相機(jī)的距離而不是所有物體用同一個(gè)全局修正否則場(chǎng)景里不同位置的物體描邊粗細(xì)會(huì)明顯不一致。發(fā)光效果也在這個(gè)基礎(chǔ)上做。普通純色描邊直接輸出u_OutlineColor即可如果想做“描邊亮一圈再淡出”可以在片元Shader里根據(jù)片元到模型邊緣的距離做漸變或者疊加噪聲做動(dòng)態(tài)閃爍都屬于后期錦上添花。4. 實(shí)測(cè)階段踩過(guò)的坑剔除方向、深度寫入和多相機(jī)4.1 法線外擴(kuò)后描邊消失的排查鏈路我第一次接上這套方案把模型拖進(jìn)場(chǎng)景期待看到金色描邊結(jié)果是屏幕上干干凈凈連個(gè)毛邊都沒(méi)有控制臺(tái)也不報(bào)錯(cuò)。這種“沒(méi)反應(yīng)”的問(wèn)題最難查因?yàn)闆](méi)有報(bào)錯(cuò)信息可以看。排查鏈路大致是這樣的先打印camera上的CommandBuffer列表確認(rèn)CB真的掛上去了。這一步查完發(fā)現(xiàn)沒(méi)問(wèn)題。然后打印目標(biāo)網(wǎng)格的頂點(diǎn)數(shù)和包圍盒確認(rèn)drawMesh引用的網(wǎng)格有數(shù)據(jù)。也沒(méi)問(wèn)題。接著懷疑剔除方向。描邊材質(zhì)設(shè)置了CULL_FRONT只畫背面。但我在編輯器里檢查場(chǎng)景里的模型Transform發(fā)現(xiàn)它的Scale是(-1,1,1)——這是美術(shù)在建模軟件里翻轉(zhuǎn)了坐標(biāo)軸導(dǎo)入引擎后經(jīng)常會(huì)出現(xiàn)負(fù)縮放。負(fù)縮放會(huì)翻轉(zhuǎn)三角形繞序原本的正面變成了背面原本的背面變成了正面。我這邊設(shè)置CULL_FRONT反而把真正的背面剔除了結(jié)果整個(gè)描邊都沒(méi)了。排查到這里根因找到了。解決辦法有兩個(gè)要么在創(chuàng)建CB時(shí)根據(jù)模型的縮放手動(dòng)切換剔除方向要么在模型導(dǎo)入時(shí)統(tǒng)一收斂負(fù)縮放要么干脆在Shader里計(jì)算外擴(kuò)時(shí)先用法線矩陣修正方向。最穩(wěn)妥的還是確保進(jìn)入引擎的模型沒(méi)有負(fù)縮放一勞永逸。4.2 深度寫入導(dǎo)致透明物體下描邊露餡第二個(gè)坑出現(xiàn)在有半透明物體遮擋的情況下。場(chǎng)景里放了一面半透明的玻璃墻玻璃后面有一座需要描邊的雕像。開啟描邊之后發(fā)現(xiàn)雕像應(yīng)被玻璃遮擋的部分居然透過(guò)玻璃把描邊輪廓完整呈現(xiàn)了看起來(lái)就像玻璃上畫了一個(gè)描邊貼花。原因是我前面說(shuō)的CB里把深度寫入關(guān)掉了。深度寫入false意味著描邊片元不會(huì)被記錄進(jìn)深度緩沖所以一個(gè)位于玻璃后面的描邊片元雖然會(huì)正常參與深度測(cè)試但半透明玻璃本身已經(jīng)因?yàn)樯疃葴y(cè)試的關(guān)系把玻璃后面的東西遮住了如果描邊在玻璃之后繪制而且深度測(cè)試通過(guò)就不會(huì)被玻璃擋住。實(shí)際是半透明物體的渲染順序和深度測(cè)試共同作用的結(jié)果。解決方法保持depthTest為L(zhǎng)ess但不要對(duì)描邊和半透明物體同時(shí)做過(guò)于寬松的深度測(cè)試更簡(jiǎn)單的是描邊物體和半透明遮擋物的層級(jí)關(guān)系本來(lái)就不應(yīng)該有穿透。如果你確實(shí)需要“透明物體也擋描邊”就得把描邊也納入到不透明渲染管線靠半透明的渲染順序解決。這類問(wèn)題沒(méi)有銀彈只能在渲染階段上做取舍。我最后做的決策是項(xiàng)目里所有描邊都放在BeforeForwardOpacity半透明物體如果恰好擋住了描邊物體描邊會(huì)被透明物體的顏色混合蓋住視覺(jué)上基本可接受因?yàn)榇蟛糠置柽叾际怯迷诳山换サ膶?shí)體上沒(méi)人會(huì)把它放在玻璃后面還要求不被遮擋。4.3 多相機(jī)和多個(gè)CommandBuffer的順序問(wèn)題項(xiàng)目里存在多個(gè)相機(jī)時(shí)比如主相機(jī)、UI相機(jī)、小地圖相機(jī)CommandBuffer就很容易掛錯(cuò)相機(jī)。有些新手直接把CB掛到所有相機(jī)上結(jié)果同一個(gè)描邊被畫了兩遍有些掛在UI相機(jī)上描邊根本不會(huì)出現(xiàn)在主畫面里因?yàn)樵赨I相機(jī)的渲染流程里根本沒(méi)有場(chǎng)景幾何數(shù)據(jù)的深度。解決方案是明確一個(gè)原則CommandBuffer只掛到渲染場(chǎng)景的相機(jī)上而且只掛一次。如果項(xiàng)目里用了多個(gè)場(chǎng)景相機(jī)做畫面拼接需要先確定哪個(gè)相機(jī)負(fù)責(zé)最終畫面輸出就掛在哪個(gè)相機(jī)上。UI相機(jī)盡量不要掛場(chǎng)景相關(guān)的CB它渲染的是屏幕空間UI深度信息基本無(wú)效。多個(gè)CB掛同一個(gè)相機(jī)的執(zhí)行順序按添加順序執(zhí)行。如果你同時(shí)需要描邊又需要HUD先加的CB先跑后加的CB后跑。一旦發(fā)現(xiàn)效果互相覆蓋優(yōu)先檢查是不是CB添加順序錯(cuò)了而不是去調(diào)Shader優(yōu)先級(jí)。4.4 蒙皮動(dòng)畫網(wǎng)格的適用邊界這是整個(gè)方案最大的適用范圍局限必須單獨(dú)拎出來(lái)說(shuō)。前面提到過(guò)cb.drawMesh用的是sharedMesh這是網(wǎng)格在綁定骨骼那一刻的“靜態(tài)姿勢(shì)”。如果描邊目標(biāo)是一個(gè)正在播放跑步動(dòng)畫的角色你拿到的sharedMesh頂點(diǎn)還在綁定姿勢(shì)上畫出來(lái)的描邊是T-Pose的輪廓和動(dòng)畫里的跑步姿態(tài)完全對(duì)不上效果會(huì)非常詭異。所以CommandBuffer直接drawMesh的描邊方案最合適的是靜態(tài)物體可拾取的道具、場(chǎng)景里的箱子、機(jī)關(guān)按鈕、交互點(diǎn)。帶骨骼動(dòng)畫的角色描邊雖然理論上可以通過(guò)蒙皮數(shù)據(jù)重建頂點(diǎn)但在LayaAir的CommandBuffer里手動(dòng)處理蒙皮計(jì)算成本很高綜合下來(lái)不劃算。如果你的需求是大量角色選中描邊建議還是回到雙Pass材質(zhì)方案或者用全屏邊緣檢測(cè)配合目標(biāo)物體標(biāo)記。其實(shí)項(xiàng)目里也遇到了這個(gè)問(wèn)題一批需要描邊的NPC會(huì)播放待機(jī)動(dòng)畫我一度想用CommandBuffer的OnWillRenderObject之類的鉤子去拿當(dāng)前幀蒙皮網(wǎng)格但設(shè)計(jì)復(fù)雜度太高最后這批NPC改用了帶描邊Pass的專用材質(zhì)而場(chǎng)景里的靜態(tài)交互物繼續(xù)用CommandBuffer方案。兩者并存各管一攤。5. 擴(kuò)展思路全屏深度邊緣檢測(cè)與性能權(quán)衡5.1 深度邊緣檢測(cè)的原理如果你不想動(dòng)模型的網(wǎng)格也不想給靜態(tài)物體單獨(dú)創(chuàng)建描邊材質(zhì)還有一個(gè)更重的思路全屏深度邊緣檢測(cè)。原理是利用深度緩沖里連續(xù)像素的深度變化來(lái)判斷哪里是幾何邊緣然后疊加描邊色。在CommandBuffer里這個(gè)思路常用的做法是把當(dāng)前已經(jīng)渲染好的場(chǎng)景RGB和Depth通過(guò)一個(gè)全屏后處理Shader處理Shader采樣當(dāng)前像素周圍若干點(diǎn)的深度值如果深度差異超過(guò)閾值就認(rèn)為這個(gè)像素處于邊緣位置。核心邏輯可以濃縮成一段GLSLfloat depth texture(u_depthTex, v_uv).r; float d0 texture(u_depthTex, v_uv vec2(1.0, 0.0) * u_texelSize).r; float d1 texture(u_depthTex, v_uv vec2(-1.0, 0.0) * u_texelSize).r; float d2 texture(u_depthTex, v_uv vec2(0.0, 1.0) * u_texelSize).r; float d3 texture(u_depthTex, v_uv vec2(0.0, -1.0) * u_texelSize).r; float diff abs(d0 - depth) abs(d1 - depth) abs(d2 - depth) abs(d3 - depth); float edge step(0.02, diff); vec4 outline vec4(u_OutlineColor.rgb, 1.0); vec4 base texture(u_sceneTex, v_uv); fragColor mix(base, outline, edge);這段Shader會(huì)描出場(chǎng)景中所有幾何邊緣不只是你選中的那個(gè)物體。如果你只想描特定物體就得配合標(biāo)記方案要么把目標(biāo)物體單獨(dú)寫進(jìn)一張RT要么用Stencil把目標(biāo)像素標(biāo)記出來(lái)然后在后處理時(shí)只對(duì)標(biāo)記區(qū)域找邊緣。標(biāo)記這一步在技術(shù)上有一定復(fù)雜度但也不是不能用。如果項(xiàng)目本身就是全屏后處理風(fēng)格的畫面比如水墨風(fēng)、網(wǎng)點(diǎn)風(fēng)這套方案反而能和整體風(fēng)格統(tǒng)一。5.2 三種方案的性能對(duì)比與選型建議做圖形性能對(duì)比不能拍腦袋直接看核心數(shù)據(jù)。我在一個(gè)1080p的測(cè)試場(chǎng)景里各跑了一遍場(chǎng)景中有50個(gè)需要描邊的物體NVIDIA 1660級(jí)顯卡WebGL2模式方案DrawCall增量像素填充開銷適用場(chǎng)景雙Pass材質(zhì)描邊每個(gè)物體1低帶骨骼動(dòng)畫角色、要求效果精度最高CommandBuffer背面外擴(kuò)每個(gè)物體1低靜態(tài)交互物、道具、不改造資產(chǎn)的場(chǎng)景全屏深度邊緣檢測(cè)每幀2~3全屏高全屏統(tǒng)一描邊風(fēng)格、后處理風(fēng)畫面CommandBuffer背面外擴(kuò)因?yàn)橹焕L制描邊物體本身的背片填充量很低移動(dòng)端也可以接受。但如果場(chǎng)景里同時(shí)有幾百個(gè)物體需要描邊DrawCall增量就會(huì)被放大這時(shí)候就要考慮是不是應(yīng)該用“只有選中/高亮物體才開描邊”的策略而不是所有物體全天候描邊。很多游戲里選中描邊本來(lái)就應(yīng)該是臨時(shí)狀態(tài)這個(gè)優(yōu)化是必要的業(yè)務(wù)邏輯不只是性能邏輯。5.3 幾個(gè)可以繼續(xù)做的方向沿著CommandBuffer描邊這條路后續(xù)能做的事情挺多。一個(gè)是把描邊和透明度動(dòng)畫結(jié)合起來(lái)選中時(shí)描邊從透明漸變?yōu)閷?shí)色取消選中再漸隱過(guò)渡不突兀。實(shí)現(xiàn)方式就是在代碼里每幀改u_OutlineColor的alpha或者在描邊材質(zhì)上疊一個(gè)透明混合狀態(tài)成本不高但對(duì)視覺(jué)品質(zhì)提升很直接。另一個(gè)是把描邊和閃爍提示結(jié)合起來(lái)比如任務(wù)目標(biāo)道具會(huì)一直以呼吸頻率閃爍。這種動(dòng)態(tài)效果在純色描邊Shader上加一個(gè)正弦波系數(shù)就行。還有一個(gè)是區(qū)域高亮。拿一個(gè)圓柱體網(wǎng)格用半透明材質(zhì)在CommandBuffer里畫一圈配合深度測(cè)試做地下城副本區(qū)域的邊界提示效果比貼地面UI好很多而且不會(huì)受到地形起伏的影響。這些方向本質(zhì)上都是同一個(gè)套路在合適的時(shí)間點(diǎn)、用合適的材質(zhì)、把合適的網(wǎng)格再畫一遍。理解了CommandBuffer的定位后面都是小特技。6. 寫在最后的幾點(diǎn)實(shí)操體會(huì)做這個(gè)功能最大的感受是CommandBuffer描邊最值錢的地方不是在“描邊”本身而是它提供了一種不侵入資產(chǎn)就能干預(yù)渲染結(jié)果的能力。以前一個(gè)描邊需求要從Shader開始一路改到材質(zhì)、合批、動(dòng)畫系統(tǒng)現(xiàn)在只需要在相機(jī)上掛一段命令剩下的交給引擎調(diào)度。這種架構(gòu)上的清爽感用起來(lái)之后回不去的。另外有一點(diǎn)建議如果項(xiàng)目里同時(shí)存在多個(gè)類似的渲染增強(qiáng)功能最好維護(hù)一個(gè)簡(jiǎn)單的CommandBuffer管理器統(tǒng)一記錄每個(gè)相機(jī)上掛了哪些CB誰(shuí)負(fù)責(zé)什么階段順序如何。不然后面美術(shù)提需求、程序員改邏輯時(shí)很容易在“為什么突然多了一個(gè)CB但找不到創(chuàng)建點(diǎn)”這種事情上浪費(fèi)時(shí)間。我就是前期偷懶沒(méi)建管理器后期排查多相機(jī)問(wèn)題花了半個(gè)下午把這個(gè)坑寫出來(lái)希望能幫你省下這半天。