WebGL context can't render simplest screen

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:

clearColor(0,0,0,1)
clearDepth(1)
clear(COLOR_BUFFER_BIT | DEPTH_BUFFER_BIT)
useProgram([Program 2])
bindBuffer(ARRAY_BUFFER, [Buffer 5])
vertexAttribPointer(0, 2, FLOAT, false, 0, 0)
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!

Not sure if this is actually the problem here, but regardless you're missing a world-space -> clip-space transformation in your vertex shader. Basically, you need to multiply your input vertex data with a special (model-view-)projection matrix. See this. — elmov
@elmov Thanks for the input. My shader was initially doing that but I removed it trying to rule out the problem was on my transformation matrices. AFAIK, the code above should be rendering fine within the clip space as the vertex go from -1 to +1 (and I believe the clipspace is exactly from (-1, -1) to (1, 1), do you know if this is wrong? — uorbe001

Victor.Palyvoda Victor.Palyvoda · Accepted Answer · 2013-08-18T14:19:15

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/

WebGL context can't render simplest screen

2 Answers