How do I build a camera-facing matrix with a position using gl-matrix?

134 Views Asked by At

I'm building a simple particle system using javascript, webgl2, and gl-matrix. I have a circle mesh, some colors, some positions, a camera view matrix and a projection matrix. I can render un-rotated dots like this:

render(viewMatrix, projectionMatrix){
  const matrix = mat4.create();
  for (let index = 0; index < this.particleCount; index++){
    mat4.fromTranslation(matrix, this.positions[index]);
    mat4.multiply(matrix, viewMatrix, matrix);
    mat4.multiply(matrix, projectionMatrix, matrix);
    this.renderer.render(this.mesh, this.indices, this.colors[index], matrix, this.gl.TRIANGLE_FAN);
  }
}

This produces the following render: particles not facing the camera

Obviously, they're not facing the camera.

I'm certain there's a way to derive a single matrix that combines the camera's facing and up vectors with the position of the center of the circle, but matrix math is voodoo witch magic to me. How do I build a matrix (either including the projection or not) that translates using the position of the particle and rotates using the matrix of the camera? Do I need to know the position of the camera?

0

There are 0 best solutions below