在 WebGL 中调试 ELSL 着色器

Question

是否有一些大致相当于 WebGL 中的打印命令的东西，或者一些支持它的扩展，或者甚至是一个允许我编写支持它的 API？

Answer 1

如果你想通过 GLSL，我不知道。如果你想通过 WebGL API 调用WebGL 检查器和Web 跟踪框架都可以做到这一点

对于 GLSL，我什么都不知道。一般调试GLSL我简化

步骤1：在片段着色器中输出纯色。

我只是一般去片段着色器并添加

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

如果我在屏幕上的正确位置看到红色，我可以假设问题出在我的片段着色器而不是我的顶点着色器中。

第二步：显示每条数据

假设我认为问题出在片段着色器中，我可能会尝试显示不同的输入。例子：

显示法线

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

显示一些纹理坐标

gl_FragColor = vec4(texCoord, 0, 1);

等等。然后我看看我所看到的，看看它是否符合我的期望。如果有照明，我可能会跳过并只绘制纹理。如果纹理为空白，则可能是纹理设置问题。如果纹理正确，则可能是光照问题。

等等...

第 3 步：简化顶点着色器

如果我认为问题出在顶点着色器中，我可能仍会将片段着色器设置为最简单的方法。也许是纯色，或者只是纹理，或者只是法线。然后我会开始从顶点着色器中提取东西。只需通过位置，没有法线，没有其他数据。我在做矩阵数学吗？删除它，传入一个矩阵，确保我在屏幕上看到一些我知道应该工作的东西。等等等等。