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

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 />

duhaime duhaime · Accepted Answer · 2018-02-01T04:26:45

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?]

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

1 Answers