0

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?

whiterook6
  • 3,270
  • 3
  • 34
  • 77
  • If you're planning on keeping a 2D shape as representation of your particles you might want to look into rendering `gl.POINTS` primitives. You'd just write all world-space positions to a buffer, upload it and call `gl.drawArrays(gl.POINTS,0,numParticles)`, that'd be a lot more efficient than your current code too. – LJᛃ Feb 28 '21 at 22:50
  • @LJᛃ I was under the impression that gl.POINTS only draws ugly squares, but I'll have a second look. Thanks! – whiterook6 Mar 01 '21 at 00:58
  • Put this in your fragment shader and you'll have disks: `if(length(gl_PointCoord*2.-1.)>1.) discard;` – LJᛃ Mar 01 '21 at 01:53

0 Answers0