WebGL not displaying content

Question

i am mainly developing in C++ and decided to compile one of my projects to WebAssembly and build a website upon it. Since I have written some 3D-Engine in C++ before, I decided to use WebGL on the website. I have translated my shader template class. I have reduced the problem to a two-dimensional problem.

---

Task

First, I will describe what I am trying to do. I am going to render a 2D FEM-grid which consists of FEM-elements which is any type of polygon. The nodes of those polygons contain values which I am trying to display. I already wrote code to break the polygons down to triangles. Initially I am just trying to render two dimensional triangles with their node values being interpolated.

---

Shader Code

I wrote some template shader class in WebGL which handles the construction and compilation of the shaders and has been copied from my C++ 3D-Engine. Since the code itself is somewhat long, I am not going to post it here but eventually show a list of executed OpenGL commands. The shaders I am currently using to debug my problem are the following:

Vertex-Shader:

precision mediump float;
attribute vec2 position;
            
varying vec2 fragPos;
void main(){
   gl_Position = vec4(position,0,1.0);
   fragPos     = position;
}
            
---------------------------------------------------------------

Fragment-Shader:

precision mediump float;
varying vec2 fragPos;
            
uniform sampler2D elementValues;
uniform int elementValuesDimension;
            
void main(){
    gl_FragColor  = vec4(0.8,0.2,0.0,1.0);
}

As you can see, I am not going for any interpolation in this debug case but just trying to some red-ish color within my fragment shader.

---

Executed Commands

I went ahead and used webgl-debug.js to show all the operations done. For this case, you can see the vertices and indices matching a simple quad spanning [0,0.6]x[0,0.6] which should be well within the clip space.

This can be broken into a few parts:

1. Enable uint32 as indexing

gl.getExtension(OES_element_index_uint)

2. Create two buffers for vertex coordinates and indices

gl.createBuffer()
gl.createBuffer()
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, [object WebGLBuffer])
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, 0,1,2,0,2,3, gl.STATIC_DRAW)
gl.bindBuffer(gl.ARRAY_BUFFER, [object WebGLBuffer])
gl.bufferData(gl.ARRAY_BUFFER, 0,0,0,0.6000000238418579,0.6000000238418579,0.6000000238418579,0.6000000238418579,0, gl.STATIC_DRAW)

3. Create and compile the shaders

gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vertex_shader_src);
gl.compileShader([object WebGLShader]);
gl.getShaderParameter([object WebGLShader], gl.COMPILE_STATUS);
gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragment_shader_src);
gl.compileShader([object WebGLShader]);
gl.getShaderParameter([object WebGLShader], gl.COMPILE_STATUS);

gl.createProgram()

gl.attachShader([object WebGLProgram], [object WebGLShader])
gl.attachShader([object WebGLProgram], [object WebGLShader])
gl.linkProgram([object WebGLProgram])
gl.validateProgram([object WebGLProgram])

4. Get Locations of the uniforms (which are unused) as well as the location of the attribute

gl.getUniformLocation([object WebGLProgram], elementValues)
gl.getUniformLocation([object WebGLProgram], elementValuesDimension)
gl.getAttribLocation([object WebGLProgram], position)

5. Verify that linking has worked

gl.getProgramParameter([object WebGLProgram], gl.LINK_STATUS)

6. Main Rendering Loop. Initially clear the displayed stuff

gl.clearColor(0.5, 0.5, 0.5, 1)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
gl.disable(gl.CULL_FACE)
gl.viewport(0, 0, 700, 600)

7. Activate the shader and bind the buffers

gl.useProgram([object WebGLProgram])
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, [object WebGLBuffer])
gl.bindBuffer(gl.ARRAY_BUFFER, [object WebGLBuffer])

8. Connect the vertices to the first attribute

gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0)

9. Render Call.

gl.drawElements(gl.TRIANGLES, 4, gl.UNSIGNED_INT, 0)

Sadly when the commands above are executed, I am unable to see anything except a gray screen:

I am very happy for any help!

Greetings Finn

Answer 1

Thanks to teddybeard and a lot more time on this problem spent than I was hoping, two issues have shown up:

1. l.bufferData(gl.ELEMENT_ARRAY_BUFFER, 0,1,2,0,2,3, gl.STATIC_DRAW) contains 6 vertices but the drawElements command only took 4 values. This is obviously a bug but should still have rendered atleast one of the two triangles.
2. Secondly, I forgot to enable the vertex attribute in the shader. gl.enableVertexAttribArray(1); solved the problem.