Draw points with different point size - webgl

Question

I have to draw something and I need to use two or more size points. I don't know how to get it, I only have one point size from my vertex shader.
<script id="myVertexShader"
type="x-shader/x-vertex">#version 300 es
in vec3 VertexPosition;
in vec4 VertexColor;
out vec4 colorOut;
uniform float pointSize;
void main() {
colorOut = VertexColor;
gl_Position = vec4(VertexPosition, 1.0);
gl_PointSize = 10.0;
}
</script>

Answer 1

Answer: You set gl_PointSize
Examples:
Using a constant
gl_PointSize = 20.0;
Using a uniform
uniform float pointSize;
gl_PointSize = pointSize;
Using some arbitrary formula
// base the size on the red and blue colors
gl_PointSize = abs(VertexColor.r * VertexColor.b) * 20.0;
Using a an attribute
attrbute float VertexSize;
...
gl_PointSize = VertexSize;
Any combination of the above (eg:
attrbute float VertexSize;
uniform float baseSize;
// use a uniform, an atribute, some random formula, and a constant
gl_PointSize = baseSize + VertexSize + abs(VertexColor.r * VertexColor.b) * 10.0;
PS: the forumla above is nonsense. The point is you set gl_PointSize. How you set it is up to you.
Note there are issues with gl.POINTS
WebGL implementations have a maximum point size. That maximum size is not required > 1.0. So if you want to draw points of any size you can not use gl.POINTS
WebGL doesn't guarantee whether or not large points who's center is outside the viewport will be drawn. So if you want to draw sizes larger than 1.0 and you want them to behave the same across devices you can't use gl.POINTS
See this