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