從頂點着色器讀取變量以便在webgl中渲染

Question

我想實現移動和靜態對象之間的碰撞檢測器。我想這樣做的方法是每次檢查頂點着色器中移動對象的任何頂點是否與靜態對象的位置相交。

通過這樣做，我會在頂點着色器中得到碰撞點，但我想在js文件中使用該變量進行渲染。 有沒有辦法做到這一點。

Answer 1

在WebGL 1中，您不能直接從頂點着色器讀取任何數據。最好的辦法是使用頂點着色器來影響片段着色器中渲染的像素。所以你可以例如設置gl_Position，所以如果測試失敗，則渲染失敗，如果測試通過，則呈現單個像素。或者您可以根據您的測試結果設置不同的設置某些顏色。然後，您可以使用gl.readPixels來讀取像素，也可以將您寫入的紋理傳遞給另一個着色器，並在不同的繪製調用中使用。

在WebGL2中，您可以使用變換反饋來允許頂點着色器將其變化寫入緩衝區。然後，您可以使用緩存在其他繪製調用或閱讀它的內容與gl.getSubBuffer

在WebGL2你也可以做遮擋查詢，這意味着你可以嘗試畫一些東西，測試，如果它實際上是畫，或者如果深度緩衝防止它從被繪製。