0

我一直在尝试在 webgl 上渲染一些非常基本的东西，我已经将渲染简化为我能想到的最基本的东西，以便找到问题所在，但我什至无法为一些理由。我真正想要渲染的场景更复杂，但正如我所说，我已经将其简化以试图找到问题，但仍然没有运气。我希望有人可以看看并找到我缺少的任何东西，我认为这是某个时候的设置步骤。

我正在运行的 gl 命令（由 webgl 检查器报告，没有错误）是：

  1. 清除颜色（0,0,0,1）
  2. 清除深度(1)
  3. 清除（COLOR_BUFFER_BIT | DEPTH_BUFFER_BIT）
  4. 使用程序（[程序 2]）
  5. bindBuffer(ARRAY_BUFFER, [缓冲区 5])
  6. vertexAttribPointer(0, 2, FLOAT, false, 0, 0)
  7. drawArrays(三角形, 0, 6)

在那里使用的缓冲区（缓冲区 5）设置如下：

bufferData(ARRAY_BUFFER, [-1,-1,1,-1,-1,1,-1,1,1,-1,1,1], STATIC_DRAW)

而节目（Program 2）数据为：

  • LINK_STATUS 真
  • VALIDATE_STATUS 假
  • DELETE_STATUS 假
  • ACTIVE_UNIFORMS 0
  • ACTIVE_ATTRIBUTES 1

顶点着色器：

#ifdef GL_ES
precision highp float;
#endif

attribute vec2 aPosition;

void main(void) {
    gl_Position = vec4(aPosition, 0, 1);
}

片段着色器：

#ifdef GL_ES
precision highp float;
#endif

void main(void) {
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}

我认为可能相关的其他状态：

  • CULL_FACE 假
  • CULL_FACE_MODE BACK
  • FRONT_FACE 逆时针
  • 混合假
  • DEPTH_TEST 错误
  • 视口 0, 0 640 x 480
  • SCISSOR_TEST 假
  • SCISSOR_BOX 0, 0 640 x 480
  • COLOR_WRITEMASK 真，真，真，真
  • DEPTH_WRITEMASK 真
  • STENCIL_WRITEMASK 0xffffffff
  • FRAMEBUFFER_BINDING 空

我希望从该设置/命令中看到的是一个红色四边形占据了整个剪辑空间，但我看到的只是清除的屏幕，因为 drawArrays 似乎没有做任何事情。谁能发现我错过了什么？任何有关如何调试的提示也将非常受欢迎！

4

2 回答 2

1

这里：

bufferData(ARRAY_BUFFER, [-1,-1,1,-1,-1,1,-1,1,1,-1,1,1], STATIC_DRAW)

替换为：

bufferData(ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]), STATIC_DRAW)

因为 webgl 不知道您在这里传递的是哪种类型（整数或浮点数或字节）。例子：

http：jsfiddle.net/9QxAz/

于 2013-08-18T14:19:15.753 回答
0

阅读@user1724911 的小提琴后，我发现我错过的是启用顶点属性数组 - 愚蠢的简单错误。我真的很惊讶我没有从 webgl 检查员那里得到任何警告，但解决方案只是添加一个调用来启用该属性：

gl.enableVertexAttribArray(program.attributes.aPosition);
于 2013-08-18T16:14:40.303 回答