如何使用WebGL着色器剪切對象？

Question

我想在不使用布爾操作（聯合，差異等）的情況下剪切WebGL（fragment shaders/vertex shaders）中的對象（一個框）。

我想使用着色器來隱藏對象的某些部分（所以它不是真正的「真正的切割」，因爲它只是隱藏對象）。

編輯

Answer 1

首先，確保頂點着色器經過對片段着色器在世界空間中的位置（或者說，兩者的座標您希望裁剪到相對於固定的空間）。例如（從內存中寫的，未測試）：

varying vec3 positionForClip; 
... 
void main(void) { 
    ... 
    vec4 worldPos = modelMatrix * vertexPosition; 
    positionForClip = worldPos.xyz/worldPos.w; // don't need homogeneous coordinates, so do the divide early 
    gl_Position = viewMatrix * worldPos; 
} 

而在你的片段着色器，你就可以放棄基於在任意平面，或任何其他類型的測試，你想：

varying vec3 positionForClip; 
uniform vec3 planeNormal; 
uniform float planeDistance; 
... 
void main(void) { 
    if (dot(positionForClip, planeNormal) > planeDistance) { 
     // or if (positionForClip.x > 10.0), or whatever 
     discard; 
    } 
    ... 
    gl_FragColor = ...; 
} 

注那麼使用discard可能會導致性能下降，因爲GPU無法在知道所有片段都將被寫入的情況下進行優化。

聲明：我自己沒有研究過這個，只是寫下了一個基於'明顯解決方案'的可能方法。可能有更好的方法，我沒有聽說過。

---

關於你提到的有關多個對象的問題：有很多不同的方式來處理這個問題 - 這是在結束時，所有的自定義代碼。但是當然，可以爲場景中的不同對象使用不同的着色器，只要它們位於不同的頂點數組中。

gl.useProgram(programWhichCuts); 
    gl.drawArrays(); 
    gl.useProgram(programWhichDoesNotCut); 
    gl.drawArrays(); 

如果你是第一次使用多個程序，它幾乎就像使用一個程序除非你做所有的設置（編譯，連接，鏈路）一次。要注意的主要是每個程序都有自己的制服，所以你必須分別爲每個程序初始化你的制服。