WebGL not drawing a simple triangle

Question

I checked gl.getError(), but it returned 0. Help guys, it's probably something very simple, which makes it the worst to pick out.

"Source"

//how I generated buffers
this.genBuffers = function() {
  if(this.c == 0) {
    gl.bindBuffer(gl.ARRAY_BUFFER,this.vBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(this.vertices),gl.STATIC_DRAW);
    this.vBuffer.vectorSize = 3;
    this.vBuffer.numElements = this.vertices.length/3;

    gl.bindBuffer(gl.ARRAY_BUFFER,this.nBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(this.normals),gl.STATIC_DRAW);
    this.nBuffer.vectorSize = 3;
    this.nBuffer.numElements = this.normals.length/3;      

  }

}  
// PART OF SHADER FUNCTION
this.program = gl.createProgram();
this.loadShader= function(id) {
var shaderScript = document.getElementById(id);
var str = shaderScript.textContent;
var shader;
if (shaderScript.type == "frag") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "vert") {
    shader = gl.createShader(gl.VERTEX_SHADER);
} else {
    return null;
}

gl.shaderSource(shader, str);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(shader));
    return null;
}

return shader;  
}  
this.vert = this.loadShader(vertS);
this.frag = this.loadShader(fragS);
gl.attachShader(this.program, this.vert);
gl.attachShader(this.program, this.frag);
gl.linkProgram(this.program);
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
    alert("Could not initialise shaders");
}

this.useProgram = function() {
gl.useProgram(this.program);
}
this.loadInput = function() {
  this.uMUniform = gl.getUniformLocation(this.program, "uMMatrix");
  this.uVUniform = gl.getUniformLocation(this.program, "uVMatrix");
  this.uPUniform = gl.getUniformLocation(this.program, "uPMatrix");
  this.aVertexAttribute = gl.getAttribLocation(this.program, "aVertex");
  this.aNormalAttribute = gl.getAttribLocation(this.program, "aNormal");
  gl.enableVertexAttribArray(this.aVertexAttribute);
  // gl.enableVertexAttribArray(this.aNormalAttribute);
}
this.setMatrixUniforms = function() {    
gl.uniformMatrix4fv(this.uMUniform, false, this.pipeline.mMatrix);
gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);
gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);  
}
this.render = function() {
gl.enable(gl.DEPTH_TEST);
gl.clearColor(Math.random(),Math.random(),Math.random(),1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);  
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);  

  //mat4.translate(this.pipeline.vMatrix, [-1.5, 0.0, -7.0]);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, this.pipeline.pMatrix);  
gl.bindBuffer(gl.ARRAY_BUFFER, this.mesh.vBuffer);
gl.vertexAttribPointer(this.aVertexAttribute, this.mesh.vBuffer.vectorSize, gl.FLOAT, false, 0, 0);
this.setMatrixUniforms();  
gl.drawArrays(gl.TRIANGLES, 0, this.mesh.vBuffer.numElements);
}

I checked gl.getError right after drawing but still, no error. I also checked everything else to see whether or not it was in place, it seemed to be all good. Don't know what's causing it

Answer 1

You are sending uVMatrix uniform twice:

this.setMatrixUniforms = function() {    
    gl.uniformMatrix4fv(this.uMUniform, false, this.pipeline.mMatrix);
    gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);
    gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);
}

You want something like:

this.setMatrixUniforms = function() {    
    gl.uniformMatrix4fv(this.uMUniform, false, this.pipeline.mMatrix);
    gl.uniformMatrix4fv(this.uVUniform, false, this.pipeline.vMatrix);
    gl.uniformMatrix4fv(this.uPUniform, false, this.pipeline.pMatrix);
}

You also need to initialize the other matrices to identity:

function Pipeline() {
    this.mMatrix = mat4.identity();
    this.vMatrix = mat4.identity();
    this.pMatrix = mat4.create();
}

In order to have mat4.identity() I upgraded the glMatrix library to a newer version:

<script src = "gl-matrix-1.3.7.js"></script>

Find full changes here: http://pastebin.com/9m9N0eq8