WebGL學習筆記（十五）：模板緩衝

能夠用來幹啥？

模板緩衝通常用來實現一些地面反射投影和相似鏡子的特殊效果，以下：

開啓模板緩衝

默認狀況下，模板緩衝是關閉的，模板緩衝若是處於關閉狀態，運行模板相關的代碼不會報錯，可是不會出現預期的效果。

使用下面的代碼能夠開啓模板緩衝：

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

使用流程

模板緩衝能夠肯定下次渲染時，指定的像素是否要進行剔除，能夠理解爲每一個像素只有 0（丟棄） 和 1（保留） 兩個數值。

具體使用模板緩衝大致流程以下：

1. 啓用模板測試；
2. 設定模板參數；
3. 渲染物體，同時根據本次渲染出來的內容更新模板緩衝的內容，注意本次渲染會正常更新顏色緩衝和深度緩衝（若是深度緩衝開啓）；
4. 設定模板參數；
5. 渲染（其它）物體，此次根據模板緩衝的內容丟棄特定的片斷；
6. 禁用模板測試；

經過使用模板緩衝，咱們能夠根據場景中已繪製的其它物體的片斷，來決定是否丟棄特定的片斷。

當你啓用模板測試以後，全部的渲染調用都會以某種方式影響着模板緩衝。

模板相關方法

常規方法

1 // 清除模板緩衝，模板緩衝全部像素值都爲0。
2 gl.clear(gl.STENCIL_BUFFER_BIT);
3 // 開啓模板測試
4 gl.enable(gl.STENCIL_TEST);
5 // 關閉模板測試
6 gl.disable(gl.STENCIL_TEST);

gl.stencilMask

glStencilMask容許咱們設置一個位掩碼(Bitmask)，它會與將要寫入緩衝的模板值進行與(AND)運算；

gl.stencilMask(0xFF); // 每一位寫入模板緩衝時都保持原樣
gl.stencilMask(0x00); // 每一位在寫入模板緩衝時都會變成0（禁用寫入）

gl.stencilFunc

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/stencilFunc

肯定後續的渲染，和當前模板緩衝中的像素模板值對比以後，是否丟棄掉渲染的結果。

glStencilFunc(GLenum func, GLint ref, GLuint mask)

func可選值以下：

GL_ALWAYS：不和模板緩衝中的值進行對比，全部渲染出的像素值都進行正常繪製；

GL_NEVER：不和模板緩衝中的值進行對比，全部渲染出的像素值都丟棄；

GL_LESS、GL_LEQUAL、GL_GREATER、GL_GEQUAL、GL_EQUAL、GL_NOTEQUAL：按照規則對比模板緩衝中的值和渲染出來的值進行釋放丟棄渲染結果的斷定。

ref 和 mask：

配合func參數使用，具體規則請看MDN。

gl.stencilOp

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/stencilOp

設定如何根據下一次渲染的結果來更新模板緩衝中的值。

glStencilOp(GLenum sfail, GLenum dpfail, GLenum dppass)

1. sfail：模板測試失敗時採起的行爲。
2. dpfail：模板測試經過，但深度測試失敗時採起的行爲。
3. dppass：模板測試和深度測試都經過時採起的行爲。

具體能夠傳遞的參數以下：

• KEEP（不改變，這也是默認值）
• ZERO（回零）
• REPLACE（使用測試條件中的設定值來代替當前模板值，stencilFunc方法中的ref參數）
• INCR（增長1，但若是已是最大值，則保持不變）
• INCR_WRAP（增長1，但若是已是最大值，則從零從新開始）
• DECR（減小1，但若是已是零，則保持不變）
• DECR_WRAP（減小1，但若是已是零，則從新設置爲最大值）
• INVERT（按位取反）

示例

https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_15/index.html

上下箭頭控制小方塊的移動。