GLSL: Points disappear when using gl-matrix projection + model view matrices - matrix

Question

I'm working on learning WebGL and am confused by a very elementary problem to do with model-view and projection matrices.
In the snippet below, if I use the following line to set the point positions, the points render:
gl_Position = vec4(aVertexPosition, 1.0);
However, if I try to use the projection matrix and the model view matrix, the points disappear:
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
If uPMatrix and uMVMatrix are identity matrices (as I thought they should be, as I'm not intentionally manipulating them), then the gl_Position value should be set and the points should be rendered (the following works):
gl_Position = mat4(1.0) * mat4(1.0) * vec4(aVertexPosition, 1.0);
However, logging the uPMatrix and uMVMatrix values in the render() loop, I can see that the projection matrix (uPMatrix) values are not an identity matrix! Does anyone know why this is the case? Full snippet below:
var canvas,
gl,
fs,
vs,
glProgram,
vertexBuffer,
vertexIndexBuffer,
colorBuffer,
positionVal,
colorVal,
points = [],
mvMatrix = mat4.create(),
pMatrix = mat4.create(),
angle = 0.00;
function initWebgl() {
canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
try {
gl = canvas.getContext('webgl')
} catch(err) {
alert('Your browser does not support Webgl')
}
// set the default background color
gl.clearColor(0.9, 0.9, 0.9, 1.0)
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
}
function initCamera() {
// set camera area, fov, near clip, far clip, and translation
gl.viewport(0, 0, canvas.width, canvas.height)
mat4.perspective(45, canvas.width/canvas.height, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0, 0, 0]);
}
function initShaders() {
vs = buildShader('#shader-vs', gl.VERTEX_SHADER)
fs = buildShader('#shader-fs', gl.FRAGMENT_SHADER)
}
function buildShader(selector, type) {
var src = document.querySelector(selector).innerHTML;
var shader = gl.createShader(type)
gl.shaderSource(shader, src)
gl.compileShader(shader)
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.warn('Shader error', selector, gl.getShaderInfoLog(shader))
}
return shader;
}
function initProgram() {
glProgram = gl.createProgram()
gl.attachShader(glProgram, vs)
gl.attachShader(glProgram, fs)
gl.linkProgram(glProgram)
if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
console.warn('Program link error')
}
gl.useProgram(glProgram)
}
function updatePositions() {
mat4.identity(mvMatrix)
//mat4.translate(mvMatrix, [0.0, 0.0, 0.0])
//mat4.rotate(mvMatrix, angle, [0.0, 0.0, 0.0])
angle += 0.01;
}
function getBuffers() {
// vertex buffer
points = [
-0.5, 0.5, 0.0,
0.0, 0.0, 0.0,
-0.5, -0.5, 0.0,
]
var vertexData = new Float32Array(points);
vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW)
}
function drawBuffers() {
// identify and bind vertex position attributes
var aVertexPosition = gl.getAttribLocation(glProgram, 'aVertexPosition')
gl.enableVertexAttribArray(aVertexPosition)
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0.0, 0.0)
// draw the data
gl.drawArrays(gl.POINTS, 0, 3)
}
function getMatrixUniforms() {
glProgram.pMatrixUniform = gl.getUniformLocation(glProgram, 'uPMatrix')
glProgram.mvMatrixUniform = gl.getUniformLocation(glProgram, 'uMVMatrix')
}
function setMatrixUniforms() {
gl.uniformMatrix4fv(glProgram.pMatrixUniform, false, pMatrix)
gl.uniformMatrix4fv(glProgram.mvMatrixUniform, false, mvMatrix)
}
function render() {
updatePositions()
drawBuffers()
setMatrixUniforms()
requestAnimationFrame(render, canvas)
}
initWebgl()
initCamera()
initShaders()
initProgram()
getMatrixUniforms()
getBuffers()
render()
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
width: 100%;
overflow: hidden;
background: skyblue;
}
<script src="https://rawgit.com/duhaime/955402641534b89babd41c8de8bc91f6/raw/5d86d54f7237f4cf2b206dcf0a3d453ba95acd1d/gl-matrix.js"></script>
<script id='shader-vs' type='x-shader/x-vertex'>
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying highp vec3 vPos;
void main() {
gl_PointSize = 5.0;
// this works
gl_Position = vec4(aVertexPosition, 1.0);
// this makes all points disappear
//gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vPos = vec3(aVertexPosition);
}
</script>
<script id='shader-fs' type='x-shader/x-fragment'>
varying highp vec3 vPos;
void main() {
highp vec3 blue = vec3(1.0, 1.0, 1.0);
highp vec3 red = vec3(1.0, 0.0, 0.0);
gl_FragColor = vec4(mix(blue, red, 1.0), 1.0);
}
</script>
<canvas />

Answer 1

The gl-matrix library initializes matrices with zeros, and I was only transforming the model-view matrix, not the projection matrix, to an identity matrix. I should have been initializing the projection matrix as an identity matrix:
function initCamera() {
// set camera area, fov, near clip, far clip, and translation
gl.viewport(0, 0, canvas.width, canvas.height)
mat4.perspective(45, canvas.width/canvas.height, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.identity(pMatrix);
mat4.translate(mvMatrix, [0, 0, 0]);
}
[Is it customary for users to initialize their mv and p matrices to identity matrices?]