Tying it all Together

Use the methods we have defined to write a clear, well structured, program.

117                 var gl             = getGLContext('drawingSurface');
•
•              {We have already seen the vertex and shader definitions}
•
149 
150                 // Here we create and compile the vertex shader. This will compile to code for your specific
151                 // graphics card.
152                 var vertexShader = compileShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
153 
154                 // And then compile the fragment shader too.
155                 var fragmentShader = compileShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
156 
157                 // As you might expect, we are going to run some code, so we need a program.
158                 var program = createProgram(gl, vertexShader, fragmentShader);
159 
160                 // Make this the currently active program
161                 gl.useProgram(program);
162 
163                 // This is a handle to what will be a buffer
164                 var vertexPositionBuffer = createBuffer(vertices);
165 
166                 // Bind the buffer to a specific shader attribute
167                 bindBuffer(vertexPositionBuffer, 'position', 3, gl.FLOAT, 12, 0);
168 
169                 // Finally run the program. Render, or draw, the data. Here we tell it to draw triangles starting
170                 // with element zero of the vertexPositionBuffer, and that there are three vertices. So there is
171                 // one triangle.
172                 gl.drawArrays(gl.TRIANGLES, 0, 3);
(0,1) (-1,-1) (1,-1)

Notes

This shows the main elements that will be present in most OpenGL programs.