Question

我一直试图在webgl上渲染一些非常基本的东西，为了找到问题所在，我已经把渲染变成了我能想到的最基本的东西，但是我甚至无法画出一个由于某种原因简单的广场。我真正想要渲染的场景更复杂，但正如我所说，我已经把它愚蠢地试图找到问题但仍然没有运气。我希望有人可以看看并找到我所缺少的东西，我认为这是一个设置步骤。

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

clearColor（0,0,0,1）
clearDepth（1）
清除（COLOR_BUFFER_BIT | DEPTH_BUFFER_BIT）
useProgram（[Program 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)

程序（程序2）数据是：

LINK_STATUS true
VALIDATE_STATUS false
DELETE_STATUS false
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 false
CULL_FACE_MODE BACK
FRONT_FACE CCW
BLEND false
DEPTH_TEST false
VIEWPORT 0,0 640 x 480
SCISSOR_TEST false
SCISSOR_BOX 0,0 640 x 480
COLOR_WRITEMASK true，true，true，true
DEPTH_WRITEMASK true
STENCIL_WRITEMASK 0xffffffff
FRAMEBUFFER_BINDING null

我期望从设置/命令中看到的是占用整个剪辑空间的红色四边形，但我看到的只是清除屏幕，因为drawArrays似乎没有做任何事情。有人能发现我失踪的东西吗？任何有关如何调试此功能的提示也非常受欢迎！

Answer 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 /

Answer 2

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

gl.enableVertexAttribArray(program.attributes.aPosition);

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

2 个答案: