-2

我不确定这是否是正确的协议，但我有一个项目位于：

https://github.com/mkarbowski/angry-bears

这是我对 WebGL 游戏的尝试。我已经使用 OpenGL ES 2.0 与 android 一起工作过，所以我认为 WebGL 不会有太大的飞跃。但是整个无法调试脚本正在杀死我。更不用说缺乏有意义的错误了。

4

1 回答 1

7

好吧，首先你会遇到 GL 错误。找出原因可能会很好。

您可以使用“调试上下文”来查找它们。请参阅WebGL Wiki 中的此条目

我添加了包含那里引用的文件，并将这一行添加到您在 engine.js 中的代码中，第 26 行

gl = WebGLDebugUtils.makeDebugContext(gl, function(err, funcName, args) {
  throw WebGLDebugUtils.glEnumToString(err) + ": " + funcName;
});

在 gltexture.js 你有这样的代码

texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.texture);

this.texture 没有定义。可能你之前是想这样定义就行了？

this.texture = gl.createTexture();

然后您用于加载图像的 onload 回调使用“this”，但在回调的上下文中没有“this”。解决这个问题的最简单方法是声明另一个变量“that”或创建一个属性并使用bind。

that = this;  // define that
image = new Image();
image.onload = function() {
  loaded = true;
  gl.bindTexture(gl.TEXTURE_2D, that.texture);  // using that
  return gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};

这摆脱了错误

按照代码。下一件事，而不是检查纹理是否加载到 GLUtils.useTexture 我刚刚添加

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, 
                  gl.RGBA, gl.UNSIGNED_BYTE, 
                  new Uint8Array([255,0,0,255]));

到 GLTexture 所以它总是以一个 1 像素的纹理开始，如果真正的纹理加载，它将被替换。

接下来，您的 TriangleTest.draw 正在每帧创建一个缓冲区。可能不是你想要的。

然后我开始在你的代码周围添加 console.log 东西。我将透明颜色更改为随机

 gl.clearColor(0, 0, Math.random(), 1);

这样我就可以看到程序正在运行。

我发现您在 useCamera 中传递的矩阵没有投影矩阵。我将其设置为标识，然后更改顶点，使它们位于剪辑空间中，只是为了在屏幕前获得一些东西。那有一个黑色的三角形。

所以我查看了你的 GLUtils.useTexture。在其中你调用 texture.getTexture() 这是一个不存在的函数。将其更改为

gl.bindTexture(gl.TEXTURE_2D, texture.texture)

现在它渲染了一些东西。

其他随机评论

  • 使用开发工具（在 Chrome 或 Safari 中）。Firefox 中的 Ctrl-Shift-J 或 Cmd-Shift-J 或类似工具
  • 有时WebGL Inspector会有所帮助。
  • console.log 和 console.error 是你的朋友。console.error 至少在 Chrome 中为您提供堆栈跟踪。
  • 停止使用 setTimeout。而是使用requestAnimationFrame。一个优点是，如果您的代码死了，它将停止。使用 setTimeout，浏览器将不断调用，使其难以调试。另一个优点是，当您的页面不是前端选项卡时，它通过不 DoSing 他们的系统来表明您关心您的用户。
  • 打印和检查所有 WebGL 调用会很有帮助。按照上面调试上下文的示例，很容易编写一个包装器，它 (a) 打印每个调用并 (b) 检查没有未定义的参数。（例如，参见WebGL Wiki ）
  • 如果您使用的是 Chrome，请尝试 Chrome 20 (Chrome Canary)。它为 WebGL 错误提供了更多错误消息。Firefox 也是如此。

祝你的项目好运

于 2012-05-09T03:17:41.637 回答