javascript - 在 WebGL 中调试 ELSL 着色器

Question

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

Answer 1

如果你想单步执行 GLSL，我不知道有什么。如果您想单步执行 WebGL API 调用 WebGL inspector和 Web Tracing Framework都会这样做

对于 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 步:简化顶点着色器

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