在之前的章節(jié)里，我們知道的都是平面上的渲染，直接往屏幕上畫東西就可以了，繪制的內(nèi)容都比較單一。但在 3D 游戲里，我們需要考慮的東西則會多很多。比如在人群中，視野方向的人物模型很多，每一個人物模型都需要繪制，如何讓距離相機(jī)進(jìn)的物體不被離得遠(yuǎn)的遮擋？再比如，街道兩邊有很多帶有玻璃窗的商店，如何通過玻璃窗看到里面的景象？

要實(shí)現(xiàn)這里的功能，就需要涉及到渲染流程的最后一個階段：alpha 測試與混合。在這個階段里 GPU 主要的工作是逐片元操作，將它們的顏色以某種形式合并，得到最終在屏幕上顯示的像素顏色。主要涉及的工作有兩個：對片元進(jìn)行測試并進(jìn)行合并。測試步驟決定了片元最終會不會被顯示出來。在 WebGL 里主要的測試有裁剪測試、透明度測試、模板測試以及深度測試，這幾個測試都是高度可配置的。其中，考量到裁剪測試沒有模板測試來得更加靈活，因此本次就不涉及裁剪測試內(nèi)容。整個測試流程如下圖：

從圖中可以看出，片元著色器輸出的顏色緩沖并不是最終屏幕上呈現(xiàn)的顏色緩沖，還必須經(jīng)過模板、深度和混合測試影響后才能得到最終用來輸出的顏色緩沖。本章重點(diǎn)介紹模板測試和深度測試，混合測試將在下一章中為大家介紹。

Stencil 的本質(zhì)是鏤空，通過這樣的板子就可以方便的畫出某個特定的形狀。模板測試的核心是持有一個模板緩沖，每個像素/片段都有一個模板值，通常每個模板值是 8 位（用掩碼表示），也就是可以有 256 種不同的值，這樣就可以通過設(shè)置我們想要的模板值來丟棄或保留這個片段。一個簡單模板測試?yán)尤缦拢?/p>

通常，用戶在啟用模板緩沖的時候，會將整個模板緩沖中的所有片段的模板值設(shè)置為 0，丟棄所有片段。然后再設(shè)置特定區(qū)域的模板值（大于 0）以及比較函數(shù)。GPU 會讀取用戶設(shè)置的模板值，然后將該值與模板緩沖中該位置的模板值按比較函數(shù)進(jìn)行比較，最終決定是保留還是舍棄該片段，形成鏤空，也就是遮罩效果。在模板測試中，有兩個很重要的方法是 “stencilFunc” 和 “stencilOp”，前者用來控制 stencil 的測試方式，得出測試結(jié)果，后者根據(jù)結(jié)果決定要如何處理緩沖中的數(shù)據(jù)。

`void stencilFunc(GLenum func, GLint ref, GLuint mask)` ：

單純看這些描述可能還不是很理解這里的意思，在這舉個例子：

gl.stencilFunc(gl.GEQUAL,?1,?0xff);?//?此處，mask 采用 16 進(jìn)制的原因是因?yàn)閿?shù)據(jù)在計算機(jī)中的表示最終都是以二進(jìn)制形式存在，但二進(jìn)制寫起來太長了，因此可以采用 16 進(jìn)制或者 8 進(jìn)制解決。進(jìn)制越大，數(shù)的表達(dá)長度也就越短。

這個配置的意思是將值 1&0xff 與 stencil buffer&0xff 進(jìn)行比較，判斷是否滿足 GEQUAL 的條件，滿足則測試通過，否則測試不通過。因此，我們在這里只是想單純的讓 ref 和 stencil buffer 進(jìn)行比較，mask 就不能成為干擾因素，因此設(shè)置為 0xff（11111111），讓它每一位都為 1，“與”計算都會保持原值。如果想禁用模板，則可以設(shè)置 0x00 的值，這樣模板緩沖中的值都是 0。

模板測試通過或者不通過后要對模板緩沖進(jìn)行什么操作，就需要用到 `void stencilOp(GLenum fail, GLenum zfail, GLenum zpass);`

這里的內(nèi)容就比較好理解，通常，我們會對測試失敗時采用保持當(dāng)前值的方式，測試通過時用設(shè)置值替換模板緩沖值。

gl.stencilOp(gl.KEEP,?gl.KEEP,?gl.REPLACE);

模板測試默認(rèn)是處于禁用狀態(tài)，使用時需要手動開啟。

//?默認(rèn)情況下模板測試處于禁用狀態(tài)，需要手動啟用模板測試
gl.enable(gl.STENCIL_TEST);
//?同樣需要在每次迭代之前清除模板緩沖
gl.clear(gl.COLOR_BUFFER_BIT?|?gl.STENCIL_BUFFER_BIT);

這里順帶提醒一下，如果想自己嘗試在 WebGL 上寫模板測試的同學(xué)，遇到模板測試沒有生效的情況，可以檢查一下，在請求上下文的時候是否有要求包含一個模板緩沖區(qū)。

const?gl?=?canvas.getContext("webgl",?{?stencil:?true?});

深度測試是 3D 游戲里不可或缺的重要環(huán)節(jié)，可以幫助實(shí)現(xiàn) 3D 渲染上物體的遮擋效果，如果沒有深度測試，可能會出現(xiàn)前后物體的渲染錯亂或者閃爍的現(xiàn)象。

深度測試的核心跟模板測試類似，也是持有一個深度緩沖，深度緩沖就像顏色緩沖(Color Buffer)（最終生成的像素顏色值的存儲緩沖，最終設(shè)備上呈現(xiàn)的像素顏色就是從這里讀?。┮粯哟鎯α嗣總€片段的深度值，以 16、24 或者 32 位 float 的形式存儲，在大多數(shù)系統(tǒng)中默認(rèn)精度是 24。當(dāng)開啟深度測試的時候，會將當(dāng)前渲染的每一個片段的深度值與深度緩沖的內(nèi)容進(jìn)行對比測試。如果測試通過，深度緩沖則會更新新的深度值，如果測試失敗，片段則會被丟棄。

深度緩沖是在片段著色器運(yùn)行之后（也在模板測試之后），在屏幕空間中運(yùn)行的。屏幕空間坐標(biāo)與 "gl.viewport" 設(shè)置有關(guān)，WebGL 會直接使用 GLSL 的內(nèi)建變量 "gl_FragCoord" 從片段著色器直接訪問?！癵l_FragCoord” 的 x 和 y 分量代表了片段的屏幕空間坐標(biāo)。同時，它也包含了一個 z 分量，這個是用來存儲真正的深度值，最終用它來和深度緩沖中的內(nèi)容進(jìn)行對比。

深度緩沖也有一個重要的函數(shù) “void depthFunc(GLenum func)” 用來設(shè)置深度比較函數(shù)，比較的參數(shù)跟模板緩沖的比較函數(shù)所使用參數(shù)一樣，默認(rèn)參數(shù)為 LESS。深度測試默認(rèn)也是禁用的，同樣需要手動開啟。

const?gl?=?canvas.getContext("webgl",?{?stencil:?true,?depth:?true?});
gl.clear(gl.COLOR_BUFFER_BIT?|?gl.STENCIL_BUFFER_BIT?|?gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);

當(dāng)深度測試通過之后，會將當(dāng)前片段的 z 值存入深度緩沖。當(dāng)前片段的 z（深度）值是介于 0.0 到 1.0 直接的值。從觀察者角度看到場景中物體的 z 值，這個值是投影矩陣作用后又經(jīng)過標(biāo)準(zhǔn)設(shè)備坐標(biāo)變換，最終再轉(zhuǎn)換到 0.0 到 1.0 之間的值。

根據(jù)上面的內(nèi)容相信大家應(yīng)該基本了解了模板測試和深度測試的原理，接下來，我們試試在 ?Cocos Creator 如何應(yīng)用這部分。Cocos Creator 底層默認(rèn)對模板/深度等做了初始化處理，實(shí)現(xiàn)的模塊是在引擎源碼中的 webgl1/webgl2-device.ts 模塊，由于此處我測試使用的是 WebGL1 的后端，因此，我在 Creator 版本安裝目錄下找到 resources->3d->engine->cocos->core->webgl->webgl-device.ts 模塊，可以看到如下初始化內(nèi)容：

這里羅列出的默認(rèn)配置，主要針對 3D 對象配置，由于 2D 對象大多數(shù)包含透明像素，因此底層 2D 管線沒有處理深度部分，這樣就不需要進(jìn)行深度測試，可以在之前像 builtin-sprite 這類 2D Effect 上看到針對深度測試部分都采用了手動關(guān)閉的形式。因此，在接下來的深度模板測試實(shí)踐中，選用的是 3D 對象。嘗試在場景里擺放上 2 個模型，來測試一下深度相關(guān)。人物模型為 O1，場景模型為 O2。模型與相機(jī)的擺放位置如下：

從 《Cocos Shader 系列：基礎(chǔ)入門（五）》中有關(guān)于模板深度緩沖的寫法就可以看出每一個 pass 都可以對模板/深度緩沖進(jìn)行配置。大致的寫法如下：

CCEffect?%{
??techniques:
??-?name:?opaque
????passes:
????-?vert:?...
??????frag:?...
??????properties:?...
??????depthStencilState:
??????????deprhTest:?false
??????...
}%

這樣的寫法通常是為了設(shè)置 pass 初始化時的數(shù)據(jù)，如果需要修改，Cocos Creator 3.x 也針對 Effect 寫法進(jìn)行了封裝。在屬性檢查器面板上每一個材質(zhì)的 pass 下都可以看到 PipelineStates 屬性，可以很方便的進(jìn)行可視化配置。

可配置參數(shù)以及說明如下：

接著，對人物模型 O1 修改一些配置：

• 材質(zhì)關(guān)閉 depthTest，并應(yīng)用。直接在編輯器上可以觀察到由于沒有進(jìn)行深度測試，所以 O1 的繪制內(nèi)容被地面覆蓋，同時自身身上的裝飾物渲染順序也出現(xiàn)錯亂。
  

將所有修改還原，接下來，進(jìn)行模板測試。模板測試需要有兩個基礎(chǔ)操作，一個是將所有的片段清空，一個是設(shè)定特定區(qū)域的模板值。然后，需要繪制的物體只需要選擇在特定的模板值上繪制即可。我這里準(zhǔn)備實(shí)現(xiàn)一個只顯示人物模型上半身的效果。準(zhǔn)備兩個面片（quad），每個面片都有自己的材質(zhì)（Effect 用默認(rèn)的 builtin-standard），A 面片離相機(jī)最近，做人物消失效果；B 面片只有人物上半身大小，位于人物上半身位置，相比于 A 離相機(jī)第二近，做人物只顯示區(qū)域設(shè)置；最后人物在這兩個面片后面。擺放位置如下：

接著，做如下操作：

最后得出的效果如下：

只有模型的上半身顯示了出來，大家可以嘗試著從不同角度來觀察效果。

有關(guān)模板測試和深度測試的內(nèi)容就到這為止，感興趣的同學(xué)可以去增加更多不同的組合實(shí)現(xiàn)特別的效果。在下一個章節(jié)我們將來認(rèn)識一下混合測試（BlendState）和面剔除（CullMode）。

該系列教程視頻版

已更新至 EP09

歡迎點(diǎn)擊【閱讀原文】

前往 B 站觀看交流 ↓