Method of modifying point annotations

According to our understanding, Point annotations use a fixed uniform pixel value to render different spatial positions. Now we want to adjust based on point annotations to bind the size of the point to the actual size, similar to the rendering effect of Ellipsoid annotations.

When comparing with Ellipsoid annotations, we found that the ellipsoid first calculates the coordinates of the spherical vertices corresponding to the input data, and then obtains the coordinates of the vertices in the clipping space through the projection matrix; and the point seems to be the coordinates of the center of the circle in the clipping space. And then go to render a fixed-size circle.
The rendering of the circle is obtained by drawing two triangles by drawquad and judging the distance through the fragment shader, but some details are not understood. First, how the coordinates of the 6 vertices of the quads are obtained through the gl_position of the center position coordinates; Second, how the diameter actually controls the size of the circle.

We tried to directly multiply the ng_markerDiameter and the uModelViewProjection, and another method to multiply the circleCornerOffset with the inverse matrix of the uModelViewProjection , add it back to the original modelposition, and then re-multiply the uModelViewProjection . The above two methods did not achieve the desired effect.

Finally, we want to directly calculate the proper ng_markerDiameter. Is there a suitable calculation method to get the corresponding coefficient directly?

In addition, I would like to ask how to debug the ng and webgl code conveniently. At present, we are using vs+Chrome DevTools, which still feels not very convenient.