[SOLVED] How do I get my BufferGeometry, RawShaderMaterial, and GLSL particles to change size? (live code)

How do I get my particles to change size by a factor proportional to the inverse of the distance from the camera?

I.e., the closer you get to the camera the larger the particles appear. The particles must change size individually. I.e., they cannot all change size by the same factor.
Here is an updated live version.

<html>
<head>
<script src='three.min.js'></script>
<script type='text/javascript' src='orbitcontrols.js'></script>
<style>body{margin:0}</style>
</head>
<body>

<script type="x-shader/x-vertex" id="vertex-shader">
	precision highp float;
	
    attribute float alpha;
	attribute vec3 position;
	attribute float size;
	
    varying float v_alpha;
	varying float v_size;
	
	uniform mat4 projectionMatrix;
	uniform mat4 modelViewMatrix;
	
	void main() {
        v_alpha = alpha;
		v_size = size;
        vec4 myPosition = modelViewMatrix * vec4(position, 1.0);
		gl_PointSize = v_size * (1. / -myPosition.z);
        gl_Position = projectionMatrix * myPosition;
		
    }
</script>

<script type="x-shader/x-fragment" id="fragment-shader">
	precision highp float;
	precision highp int;
	uniform vec3 color;

    varying float v_alpha;
	
    void main() {
        gl_FragColor = vec4(color, v_alpha);
    }

</script>

<script>
	//All numeric values use SI units.
	var camera, scene, renderer;
	var gravity = -9.81;
	var particleindex = 0, particleCount = 1000,
    particle_geometry = new THREE.BufferGeometry();
	//Positions as [x,y,z,x,y,z, ...]
	var positions = [];
	//var colors = [];
	var uniforms =
	{
        color: { value: new THREE.Color(0xff0000)},
    };
	var alphas = new Float32Array(particleCount * 1);
	var size = 200.0;
	var sizes = [];
	var particle_emitted = [];
	var particle_velocities = [];
	var particle_has_bounced = [];
	var particle_life = 20;
	
	for(var i = 0; i < particleCount; i++)
	{
		sizes.push(size);
		positions.push(0.0, 0.0, 0.0);
		//colors.push(255, 0, 0);
		alphas[i] = 1.0;
		particle_emitted.push(false);
	}
	
	//var colorAttribute = new THREE.Uint8BufferAttribute(colors, 3);
	//colorAttribute.normalized = true;
	
	particle_geometry.addAttribute('position', 
    new THREE.Float32BufferAttribute(positions, 3));
	//particle_geometry.addAttribute('color', colorAttribute);
	particle_geometry.addAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
	particle_geometry.addAttribute( 'alpha', new THREE.BufferAttribute(alphas, 1));
	
	var material = new THREE.RawShaderMaterial
	({
		uniforms: uniforms,
		vertexShader: document.getElementById( 'vertex-shader' ).textContent,
		fragmentShader: document.getElementById( 'fragment-shader' ).textContent,
		transparent: true
	});
	
	var particleSystem = new THREE.Points(particle_geometry, material),
	height = 0, max_pos_dist_xz = 20, max_neg_dist_xz = max_pos_dist_xz / 2;
	var particle_offset = particle_geometry.attributes.size.array[0];
	var dt = 1 / 60;

	var planegeometry, planematerial, planemesh;
	planegeometry = new THREE.PlaneGeometry(200, 200, 0);
	planematerial = new THREE.MeshBasicMaterial();
	planemesh = new THREE.Mesh(planegeometry, planematerial);
	
	function init()
	{
		camera = new THREE.PerspectiveCamera(70, window.innerWidth /
        window.innerHeight, 0.01, 1e6);
		var controls = new THREE.OrbitControls(camera);
		camera.position.set(100, 500, 100);
		controls.update();
		
		scene = new THREE.Scene();
		
		planemesh.position.y = 0;
		planemesh.rotation.x = -Math.PI / 2;
		scene.add(planemesh);
		
		particleSystem.sortParticles = true;
		particleSystem.visible = false;
		scene.add(particleSystem);
		
		renderer = new THREE.WebGLRenderer({antialias: true});
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);

		particleSystem.visible = true;
	}

	function animate()
	{
		//Set the particle xy position
		if(particleindex < particleCount)
		{	
			if(max_pos_dist_xz > 0)
			{
				max_neg_dist_xz = max_pos_dist_xz / 2;
			}
			
			particle_geometry.attributes.position.setXYZ(particleindex, 
            Math.random() * max_pos_dist_xz - max_neg_dist_xz, height, Math.random()
            * max_pos_dist_xz - max_neg_dist_xz);
			++particleindex;
			++height;
			particle_emitted[particleindex] = true;
		}
		
		var alphas = particleSystem.geometry.attributes.alpha;
		
		for(var i = 0; i < particleCount; i++)
		{		
			if(particle_emitted[i])
			{
				if(alphas.array[i] > 0)
				{
					alphas.array[i] -= dt / particle_life;
				}else
				{
					alphas.array[i] = 0;
				}
			}
			
			//IMPORTANT
			alphas.needsUpdate = true;
			//particle_geometry.colorsNeedUpdate = true;
		}
		
		//IMPORTANT
		particle_geometry.attributes.position.needsUpdate = true;
		
		renderer.render(scene, camera);
		requestAnimationFrame(animate);
	}

	init();
	animate();
</script>
</body>
</html>

the code:
gl_PointSize = v_size * (1. / -myPosition.z)
why here is negative the point z-value ? you can make sure the gl_PointSize always is positive ?