注：文章譯自
，原作者杉本雅広(
本次的demo的執行結果
上次介紹了索引快取。以及使用ibo來畫圖，使用索引快取能夠迴圈利用反覆的頂點，能夠提高畫圖效率。這之後的文章，假設沒有特殊的原因的話。基本上都會使用索引快取，通過drawelements來畫圖。
這次來說一下遮擋剔除和深度測試,這是兩個重要的概念。內容並非那麼難。
首先來看遮擋剔除，假設看過之前的文章，應該知道［遮擋剔除］的概念，之前的文章（六。頂點和多邊形）中有過說明。
簡單的說，遮擋剔除就是以多邊形內外側為基準，推斷是否繪製這個多邊形。
而多邊形的內側和外側的推斷方法。在之前的文章中已經具體說明了。為了加深印象，這裡再說一遍。
webgl中，預設規定遮擋剔除是無效的。不管以如何的順序來定義頂點都會繪製所有的多邊形。
可是，遮擋剔除有效的時候，僅僅有滿足特定的條件的多邊形才會進行繪製。看不見的部分是不會繪製的，這樣就會減弱座標計算等負擔。
為了設定webgl中的遮擋剔除為有效，須要像enable函式中傳入適當的引數，這個enable函式不光是用來控制遮擋剔除的，還有其它非常多各種各樣的引數，依據指定的引數不同會把對應的功能設定為有效。
將遮擋剔除設定為有效的話，須要傳入內建常量gl.cull_face ，以下是**舉例。
>將遮擋剔除設定為有效的**演示樣例
gl.enable(gl.cull_face);>>遮擋剔除的內側和外側切換的方法
多邊形的內側和外側是依據頂點的連線順序來推斷的，而這個推斷基準反過來的情況也是有的，形成多邊形的頂點的連線順序是順時針的時候是外側。逆時針的時候為內側。想要反過來推斷的話。順時針就變成了內側。
順時針統稱為cw。由於［順時針］的英語是clockwise。cw就是它的頭文字。
而逆時針統稱為ccw，由於［逆時針］的英語為counterclockwise。改變webgl中遮擋剔除的內側和外側的推斷標準的函式是frontface，引數就是剛才提到的cw和ccw。
將順時針設定為［外側］的**：gl.frontface(gl.cw);
將順時針設定為［內側］的**：gl.frontface(gl.ccw);
接著來說深度測試。
剛才提到的設定遮擋剔除的函式enable，也能夠用來設定深度有效。將常量gl.depth_test作為引數傳給enable函式的話，就能夠將深度測試設定為有效。相同的。使用disable函式能夠將其設定為無效。
深度測試的預設值是無效的。那將深度測試設定為有效有什麼用處呢，為什麼要設定深度有效呢？
深度測試能夠聯想到［深度］這個詞。三維空間中表示向裡的方向時是不可缺少的乙個元素。directx中叫做z測試。要表示乙個物體在你面前呢，還是向里一段距離呢，所以深度測試就是必須的了。
webgl中發出畫圖命令的時候。是在乙個模擬的三維空間中繪製模型的，這時候依據繪製的先後順序，先繪製的東西會被後繪製的東西覆蓋掉，這跟物體是在當前還是在裡面是沒關係的。
而實際上，在遠處的物體應該被在近處的物體所覆蓋。
將深度測試設定為有效的話。就是對模型的深度進行評價。評價合格的東西會繪製到畫面上。不合格的東西就不會進行繪製了。
和剛才的遮擋剔除一樣，將深度測試設定為有效或無效使用的是enable函式和disable函式。
>將深度測試設定為有效的**演示樣例
gl.enable(gl.depth_test);>指定一般深度測試的評價方法
gl.depthfunc(gl.lequal);這次。介紹了遮擋剔除和深度測試。不管那乙個都是使用enable函式來設定有效，使用disable函式來設定無效。enable和disable這兩個函式的引數是一致的，依據傳入的引數不同，能夠設定各種屬性設定為有效或者無效。
遮擋剔除設定為有效的話，內側的多邊形就不會描畫了，這樣就減輕了畫圖的負擔。深度測試在模擬有深度概念的三維空間時有著非常關鍵的資料。指定為正確的評價方法的話，就能像現實世界一樣。近處的物體會將遠處的物體遮擋住。
這次做的demo，能夠自由切換遮擋剔除的有效和無效，並且能夠自由指定多邊形的內測和外側，demo頁面的單選框選中或者不選。能夠切換對應的狀態，而深度測試也時能夠自由切換有效或是無效的，能夠通過實際操作來觀察一下，深入理解一下遮擋剔除和深度測試。
demo中繪製了四個角的多邊形，一共繪製了兩個四邊形。乙個是沿著x軸旋轉，還有乙個是沿著y軸旋轉。並且這兩個四邊形都繞著原點進行著旋轉移動，將深度測試設定為有效的話，裡面的四邊形就會被外面的四邊形遮住了。
細緻看demo的**的話，就應該能知道，這兩個四邊形都各自是乙個面向裡側。乙個面向外側的三角形組成的。這種話。將遮擋剔除設定為有效的話，多邊形的上下部分就僅僅能繪製乙個了。
頂點的連線順序，看一下定義的索引快取的陣列的話。就明確了，以下是**。
>定義索引的陣列的**
// 儲存頂點屬性的陣列
var position = [
0.0, 1.0, 0.0,
1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
0.0, -1.0, 0.0
];// 儲存頂點的索引的陣列
var index = [
0, 1, 2,
1, 2, 3
];
這次的demo能夠通過以下的鏈結來測試。
遮擋剔除和深度測試的demo
s/sample_007/
**lufy_legend的部落格
剔除重複 WebGL 遮擋剔除和深度測試
該demo的執行結果 上次介紹了索引快取，以及使用ibo來繪圖，使用索引快取可以迴圈利用重複的頂點，能夠提高繪圖效率。這之後的文章，如果沒有特殊的原因的話，基本上都會使用索引快取，通過drawelements來繪圖。這次來說一下遮擋剔除和深度測試,這是兩個重要的概念，內容並不是那麼難。首先來看遮擋剔...
深搜和廣搜入門
1.描述 對每乙個可能的分支路徑深入到不能再深為止，並且每個結點只能訪問一次。一條路走到黑，走不了再倒回去 2.演算法過程 void dfs 狀態 1.判斷當前狀態是否合法，合法則繼續執行，否則則回到上次呼叫 2.遍歷每個新狀態，如果新狀態合法，dfs 新狀態 3.示例 洛谷 p2802回家 inc...
ionic入門之深鏈結和延遲載入
延遲載入聽起來像是乙個複雜的過程，但實際上是非常直截了當。從概念上講，一段 隨著應用程式請求而載入。ngmodules是可以組織我們的應用程式頁，並將它們分開在不同的資料塊的方式。使用空白的面板，起動應用程式。ionic start lazyloadingblank blank cd lazyloa...