dot.frag

//Use gl.POINTS to draw a dot

uniform vec3 color;

void main() {

	// Map ( [0,0] , [1,1] ) => ( [-1,-1], [1,1] )
	vec2 coord = ( gl_PointCoord - vec2(0.5, 0.5) ) * 2.0;
	
	// Step it so that it's a hard transition
	float alpha = step( 0.0, 1.0 - length( coord ) );
	
	// Set the color to white with an alpha
	gl_FragColor = vec4( color, alpha );
}

dot2.frag

//Another method, with smoother borders

precision mediump float;

void main() {

	// Map coord range ( [0,0] , [1,1] ) => ( [-1,-1], [1,1] )
	vec2 coord = ( gl_PointCoord - vec2(0.5, 0.5) ) * 2.0;

	float alpha = 1.0 - smoothstep(
		0.9,
		1.0,
		length(coord)
	);

	vec3 color = vec3( 0.0, 0.5, 0.5 );

	// Set the color to white with an alpha
	gl_FragColor = vec4( color, alpha );
}

So I'm just now getting around to these. They're not working right off the bat for my ThreeJS point cloud that's using these as its fragmentshader. I assume there's some config I'll have to do to my shaderMaterial? i.e. Whatever triggers the gl.enable(gl.BLEND)?

Edit: The shaderMaterial just needed the following properties added:

blending: THREE.NormalBlending,
depthTest: false,
transparent: true

Thanks, Greg! 👍

Follow up question: Do you know of a way to draw circles and still depth test?