WebGL code not working - webgl

Question

I am new to WebGL. I am trying to draw a triangle using WebGL. But my program is showing nothing in the console window I am getting the following warnings:
WebGL: INVALID_OPERATION: useProgram: program not valid
(index):96 WebGL: INVALID_OPERATION: getAttribLocation: program not linked
(index):107 WebGL: INVALID_OPERATION: drawArrays: no valid shader program in use
Here is my code:
var gl;
var canvas=document.getElementById("painter");
//Step 1 Create gl Context using experimental-webgl at this stage
try
{
gl=canvas.getContext("experimental-webgl");
}catch(e)
{
alert("WebGL not Supported");
}
// Step 2 Creating the vertex shader. Pass the attribute vec4 from application
var shader_vertex_source="\n\
attribute vec4 vPosition; \n\
void main(vaoid) \n\
{\n\
gl_Position=vPosition;\n\
}";
//Step 3: Create Fragment Shader. Must pass precision variable from application. Normally specify medium precision as it should be //supported by all devices
var shader_fragment_source="\n\
precision mediump float;\n\
void main(void)\n\
{\n\
gl_FragColor=vec4(1.0,0.0,0.0,1.0);\n\
}";
// Step 4: Configure view of WebGL
gl.viewport(0,0,canvas.width,canvas.height);
gl.clearColor(1.0,1.0,1.0,1.0);
// Step 5: Create Vertices of Triangle. Each pair represent a point (-1,-1), (0,1), (1,-1) will be three vertices of triangle
var vertice=new Float32Array([-1,-1,0,1,1,-1]);
// Step 6: Compile the shaders.
var get_shader=function(shadersource,shadertype)
{
var shader=gl.createShader(shadertype);
gl.shaderSource(shader,shadersource);
gl.compileShader(shader);
return shader;
}
// Now using the above function get compiled vertex and fragment shaders. The following two varibales are compiled shaders
var vertex_shader=get_shader(shader_vertex_source,gl.VERTEX_SHADER);
var fragment_shader=get_shader(shader_fragment_source,gl.FRAGMENT_SHADER);
// Step 7: Create a Program
var program=gl.createProgram();
// Step 8 : attach the shaders to the program
gl.attachShader(program,vertex_shader);
gl.attachShader(program,fragment_shader);
// Step 9: Link the program with gl context
gl.linkProgram(program);
// Step 10: Tell the gl Context to use the linked program
gl.useProgram(program);
// Step 11: Create Buffer to GPU. Neede for GPU
var buffer=gl.createBuffer();
// Step 12: Bind the created buffer to the gl Context
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
// Step 13: Now send the data to GPU through the buffer. We are going to sent vertice data and drawing info
gl.bufferData(gl.ARRAY_BUFFER,vertice,gl.STATIC_DRAW);
// Step 14: get the position location attirbute from the program using attribute name
var position=gl.getAttribLocation(program,"vPosition");// Our position attribute name is vPosition
// Step 14: Enable the position variable. As it will be used to draw vertices of triangle
gl.enableVertexAttribArray(position);
// Step 15: Tell to use position that gets data from GPU to draw triangle. 2 here mean use two points from the array at a time to //make a vertex
gl.vertexAttribPointer(position,2,gl.FLOAT,false,0,0);
// Step 16 Render using draw methods
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,3);
I am also attaching jsfiddle Link for better help.

Answer 1

I tried your code, but I edited your function get_shader, with a compilation error check:
var get_shader=function(shadersource,shadertype)
{
var shader=gl.createShader(shadertype);
gl.shaderSource(shader,shadersource);
gl.compileShader(shader);
// Check for any compilation error
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
I got the following error:
ERROR: 0:3: 'vaoid' : syntax error
It was coming from your vertex shader:
var shader_vertex_source="\n\
attribute vec4 vPosition; \n\
void main(vaoid) \n\ // RIGHT HERE !
{\n\
gl_Position=vPosition;\n\
}";
So finally it was just a typing mistake.