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

Question

I'm stuck trying to render some extremely basic stuff on webgl, I've dumbed down the rendering to the most basic thing I can think of in order to find where the issue lies, but I can't even draw a simple square for some reason. The scene I really want to render is more complex, but as I said, I've dumbed it down to try to find the problem and still no luck. I'm hoping someone can take a look and find whatever I'm missing, wich I assume is a setup step at some point.

The gl commands I'm running (as reported by webgl inspector, without errors) are:

1. clearColor(0,0,0,1)
2. clearDepth(1)
3. clear(COLOR_BUFFER_BIT | DEPTH_BUFFER_BIT)
4. useProgram([Program 2])
5. bindBuffer(ARRAY_BUFFER, [Buffer 5])
6. vertexAttribPointer(0, 2, FLOAT, false, 0, 0)
7. drawArrays(TRIANGLES, 0, 6)

The buffer that is being used there (Buffer 5) is setup as follows:

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

And the program (Program 2) data is:

• LINK_STATUS true
• VALIDATE_STATUS false
• DELETE_STATUS false
• ACTIVE_UNIFORMS 0
• ACTIVE_ATTRIBUTES 1

Vertex shader:

#ifdef GL_ES
precision highp float;
#endif

attribute vec2 aPosition;

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

Fragment shader:

#ifdef GL_ES
precision highp float;
#endif

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

Other state I think could be relevant:

• 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

What I expected to see from that setup/commands is a red quad taking up the whole clip space, but what I see is simply the cleared screen, as the drawArrays doesn't seem to be doing anything. Can anybody spot what I'm missing? Any tips on how to debug this would be very welcome too!

Answer 1

Here:

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

replace to:

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

Because webgl doesn't know which type you are passing here (integer or float or byte). Example:

http: jsfiddle.net/9QxAz/

Answer 2

After reading @user1724911's fiddle, I found out what I missed is enabling the vertex attribute array - stupidly simple mistake. I'm actually surprised I didn't get any warning from webgl inspector about this, but the solution was simply to add a call to enable that attribute:

gl.enableVertexAttribArray(program.attributes.aPosition);