如何调试 WebGL 未捕获的类型错误

Question

我来了

Uncaught TypeError: Type error

当我启用了 WebGL Inspector（在 Chrome 中）时，此错误源自以“VM”开头并以数字序列结尾的文件（不确定是什么代码拥有它——它是核心浏览器行为还是WebGLInspector？）。这条线。

// Call real function
var result = originalFunction.apply(context.rawgl, arguments);

我启用了the debug context 并记录了所有 WebGL 调用。这是中断的呼叫：

uniform1i(3, 0)

在 WebGL 检查器中，我看到索引 3 处的制服是我片段着色器中的 uniform sampler2D uSampler。 API 文档说这是一个 GLint，所以类型是正确的。我也尝试先设置一些其他制服，但它们也因同样的错误而失败。

我正在修改我在遵循教程后编写的一些现有代码，其中我要添加的内容之一是交错的顶点数据。我确信这是根本原因，但是，这是我第三次遇到这样的错误，我唯一的办法就是修改代码直到它消失。感觉很随意，令人沮丧。

还有更多的调试技术吗？我认为这是着色器中的错误。有什么方法可以从他们那里获取堆栈跟踪吗？

Answer 1

uniform1i(3, 0)

不是有效的 WebGL。统一函数需要一个 WebGLUniformLocation 对象，该对象只能通过调用 gl.getUniformLocation 获得

这与 OpenGL 不同。原因是你不允许在统一的位置上做数学。在 OpenGL 开发人员经常犯这个错误。他们会做这样的事情

--in shader--
uniform float arrayOfFloats[4];

--in code--
GLint location = glGetUniformLocation(program, "arrayOfFloats");

glUniform1f(location, 123.0f);
glUniform1f(location + 1, 456.0f);  // BAD!!! 

第二行不是有效的 OpenGL，但它可能会根据驱动程序工作。

在 WebGL 中，他们希望避免出现此类错误，因为网页需要在任何地方都可以工作，而 OpenGL 程序只需要在编译它们的平台上工作。为了让它在他们有gl.getUniformLocation 的任何地方都能工作，返回一个对象，这样你就不能对结果进行数学运算。

上述代码在OpenGL中的正确写法是

--in shader--
uniform float arrayOfFloats[4];

--in code--
GLint location0 = glGetUniformLocation(program, "arrayOfFloats[0]");
GLint location1 = glGetUniformLocation(program, "arrayOfFloats[1]");

glUniform1f(location0, 123.0f);
glUniform1f(location1, 456.0f);  

而在 WebGL 中是

--in shader--
uniform float arrayOfFloats[4];

--in code--
var location0 = gl.getUniformLocation(program, "arrayOfFloats[0]");
var location1 = gl.getUniformLocation(program, "arrayOfFloats[1]");

gl.uniform1f(location0, 123.0);
gl.uniform1f(location1, 456.0);