WebGL: INVALID_VALUE: attachShader: no object or object deleted. Is this secretly helpful?

Question

I'm starting to get into WebGL and I'm wondering if there is a good place to learn about the error output.

I keep getting the following errors

WebGL: INVALID_VALUE: attachShader: no object or object deleted localhost:1   
WebGL: INVALID_OPERATION: getAttribLocation: program not linked localhost:1
WebGL: INVALID_OPERATION: getUniformLocation: program not linked localhost:1
WebGL: INVALID_OPERATION: useProgram: program not valid localhost:1
WebGL: INVALID_OPERATION: drawElements: attribs not setup correctly 

So, what I can tell from these errors is that my shaders aren't working at

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

and the subsequent errors are about not having a program.

So my question is: How do I figure out what is going wrong in my code?

The program is not being defined somehow, and I do have var program = gl.createProgram(); . So, why does this happen? Where do I look? I'm guessing that this is because my shaders won't compile, but there are 0 errors or warnings coming out of my shaders as far as I can tell. It's obfuscated by the aforementioned code/warnings... Furthermore, chrome mentions these warnings and firefox does not. Neither can initialize the shaders though

Answer 1

I would suggest using some boilerplate code to compile your shaders and link programs

For shaders

/**
 * Creates and compiles a shader.
 *
 * @param {!WebGLRenderingContext} gl The WebGL Context.
 * @param {string} shaderSource The GLSL source code for the shader.
 * @param {number} shaderType The type of shader, VERTEX_SHADER or
 *     FRAGMENT_SHADER.
 * @return {!WebGLShader} The shader.
 */
function compileShader(gl, shaderSource, shaderType) {
  // Create the shader object
  var shader = gl.createShader(shaderType);

  // Set the shader source code.
  gl.shaderSource(shader, shaderSource);

  // Compile the shader
  gl.compileShader(shader);

  // Check if it compiled
  var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (!success) {
    // Something went wrong during compilation; get the error
    throw "could not compile shader:" + gl.getShaderInfoLog(shader);
  }

  return shader;
}

For programs

/**
 * Creates a program from 2 shaders.
 *
 * @param {!WebGLRenderingContext) gl The WebGL context.
 * @param {!WebGLShader} vertexShader A vertex shader.
 * @param {!WebGLShader} fragmentShader A fragment shader.
 * @return {!WebGLProgram} A program.
 */
function createProgram(gl, vertexShader, fragmentShader) {
  // create a program.
  var program = gl.createProgram();

  // attach the shaders.
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  // link the program.
  gl.linkProgram(program);

  // Check if it linked.
  var success = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!success) {
      // something went wrong with the link
      throw ("program filed to link:" + gl.getProgramInfoLog (program));
  }

  return program;
}

You can call it like this

var vertShader = compileShader(gl, vertShaderSource, gl.VERTEX_SHADER);
var fragShader = compileShader(gl, fragShaderSource, gl.FRAGMENT_SHADER);
var program = createProgram(gl, vertShader, fragShader);

That should print the errors to the javascript console if your shaders don't compile or link. It should also give you stack trace so you can tell where in your code the issue is.