webgl繪圖順序，模板緩衝

Question

我通過learningwebgl.com閱讀，什麼使我困惑的是，它繪製了我作爲最後一個元素綁定的第一個緩衝區？

http://jsfiddle.net/Cx8gG/1/

red triangle 
green square 
blue square 

我期望看到只有藍色正方形，因爲一切變得透支，輸出似乎是相反的順序？

我也讀過關於模板緩衝區，所以我試圖做的是創建一個蒙版（紅色），然後應該在藍色方塊上有一個綠色三角形。

面具的作品（http://jsfiddle.net/D3QNg/3/），但我不知道這是對的還是我只是幸運。

希望得到一些幫助。

Answer 1

它這樣做是因爲您啓用了深度緩衝在行203

gl.enable(gl.DEPTH_TEST); 

深度緩衝適用於繪製的每個像素的深度。在默認模式下，當試圖繪製一個像素時，WebGL將檢查已經存在的像素的深度，只有當新像素的深度爲LESS時，那麼之前的像素纔會繪製新的像素。

由於所有形狀的深度均爲0.0，因此第一個填充0.0的像素的深度緩衝區。您繪製的下一個形狀的深度爲0.0，對於每個不小於已有0.0的像素，因此這些像素不會被覆蓋

如果您註釋掉可啓用深度測試的行，則會得到結果你在期待。

注意，用深度測試激活，您可以通過調用gl.depthFunc（docs）