在WebGL中調試ELSL着色器

Question

在WebGL中是否有大致等同於打印命令的東西，或者可以支持它的某些擴展，甚至可以讓我為其編寫支持的API？

Answer 1

如果您想遍歷GLSL，我什么都不知道。 如果您要逐步瀏覽WebGL API，則WebGL檢查器和Web跟蹤框架都將執行此操作

對於GLSL，我一無所知。 通常調試GLSL我會簡化

步驟1：在片段着色器中輸出純色。

我通常只是去片段着色器並添加

gl_FragColor = vec4(1,0,0,1);
return;

如果在正確的位置在屏幕上看到紅色，則可以認為問題出在片段着色器而不是頂點着色器中。

步驟2：顯示每條數據

假設我認為問題出在片段着色器中，我可以嘗試顯示不同的輸入。 例子：

顯示法線

gl_FragColor = vec4(normal * 0.5 + 0.5, 1);

顯示一些紋理坐標

gl_FragColor = vec4(texCoord, 0, 1);

等等。然后，我查看所看到的內容，看看它是否符合我的期望。 如果有燈光，我可能會跳過並僅繪制紋理。 如果紋理為空白，則可能是紋理設置問題。 如果紋理正確，則可能是照明問題。

等等...

步驟3：簡化頂點着色器

如果我認為問題出在頂點着色器中，那么我可能仍會將片段着色器設置為最簡單的方法。 也許是純色，或者只是紋理，或者只是法線。 然后，我將把東西從頂點着色器中拉出來。 只是通過倉位，沒有法線，沒有其他數據。 我在做矩陣數學嗎？ 刪除它，傳遞一個矩陣，確保我在屏幕上看到我知道可以正常工作的東西。 等等等