WebGL 上下文无法呈现最简单的屏幕答案

【问题标题】：WebGL context can't render simplest screenWebGL 上下文无法呈现最简单的屏幕
【发布时间】：2013-08-18 10:43:19
【问题描述】：

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

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

clearColor(0,0,0,1)
clearDepth(1)
清除（COLOR_BUFFER_BIT | DEPTH_BUFFER_BIT）
使用程序（[程序 2]）
bindBuffer(ARRAY_BUFFER, [缓冲区 5])
vertexAttribPointer(0, 2, FLOAT, false, 0, 0)
drawArrays(TRIANGLES, 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 返回
FRONT_FACE 逆时针
混合错误
DEPTH_TEST 错误
视口 0, 0 640 x 480
SCISSOR_TEST 错误
SCISSOR_BOX 0, 0 640 x 480
COLOR_WRITEMASK true,true,true,true
DEPTH_WRITEMASK 为真
STENCIL_WRITEMASK 0xffffffff
FRAMEBUFFER_BINDING 为空

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

【问题讨论】：

不确定这是否真的是问题所在，但不管您在顶点着色器中是否缺少世界空间 -> 剪辑空间转换。基本上，您需要将输入顶点数据与特殊的（模型-视图-）投影矩阵相乘。见this。
@elmov 感谢您的意见。我的着色器最初是这样做的，但我删除它试图排除问题出在我的转换矩阵上。 AFAIK，当顶点从-1到+1时，上面的代码应该在剪辑空间内渲染得很好（我相信剪辑空间正好是从（-1，-1）到（1，1），你知道吗？这是错的吗？

标签： opengl-es rendering webgl

【解决方案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/

【讨论】：

我可能没有清楚地解释这些命令是什么，这些是webgl-inspector 在命令跟踪中显示的内容（因此它们与“javascript 无关”），我的实际代码在推送数据时调用 Float32Array进入缓冲区。我会检查你的小提琴，看看我是否能发现差异，因为它似乎和我的代码几乎一样。
检查你的小提琴，我发现我缺少的是为我的位置属性启用顶点数组属性（enableVertexAttribArray）。添加该调用解决了我的问题，我终于可以看到一些东西了！我知道这一定是我错过的一些简单的事情......谢谢！

【解决方案2】：

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

gl.enableVertexAttribArray(program.attributes.aPosition);

【讨论】：