I am trying to make a point cloud viewer with webgl, every tutorial i have found explain how the projection works with objects like a cube.

but that projection / perspective is not working with points because the point size is not changing.

How do i change my point size based on Z axis.

 var vertCode =
                    'attribute vec3 coordinates;' +
                    'uniform mat4 rMatrix;' +
                    'void main(void) {' +
                       ' gl_Position = rMatrix * vec4(coordinates, 1.0);' +
                       'gl_PointSize = 5.0;'+
                    '}';

[...]

const matrix = glMatrix.mat4.create();
                const projectionMatrix = glMatrix.mat4.create();
                const finalMatrix = glMatrix.mat4.create();
                glMatrix.mat4.perspective(projectionMatrix,
                    75 * Math.PI/180, // vertical field of view ( angle in radian)
                    canvas.width/canvas.width, //aspect ratio
                    1e-4, // near cull distance ... aka null plane
                    1e4 // fat cull distance
                );
                
                
                
                //glMatrix.mat4.translate(matrix, matrix,[-.5,-.5,-.5]);
                
            function animate(){
                requestAnimationFrame(animate);
                glMatrix.mat4.rotateY(matrix, matrix, Math.PI/6)
                
                glMatrix.mat4.multiply(finalMatrix, projectionMatrix, matrix);
                
                gl.uniformMatrix4fv(uniformLocations.matrix, false, matrix);
                gl.drawArrays(gl.POINTS, 0, vertices.length/3);
            }

sub question: right now my code is a constant rotation, any ressource where to look on how to get the mouse event and create one or 2 rotation matrix based on the mouse drag( not quite sure if i can encode x and y rotation in the same matrix )

sub question 2: any idea on how to have round points instead of square one ? do i have to create small sphere ?