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?

3
  • 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. Commented Feb 28, 2021 at 22:50
  • @LJᛃ I was under the impression that gl.POINTS only draws ugly squares, but I'll have a second look. Thanks! Commented Mar 1, 2021 at 0:58
  • Put this in your fragment shader and you'll have disks: if(length(gl_PointCoord*2.-1.)>1.) discard; Commented Mar 1, 2021 at 1:53

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.