drawing points without images

[ansis]

Implement a shader for drawing points without images. We already have one called debug_point we use in js/render/drawvertices.js for debugging purposes. We should generalize that one, and use it for both points and debuggging vertices.

• rename the debug_point shader to something more appropriate
• edit the fragment shader to make it draw circles instead of squares
• in js/render/drawpoint.js, if an image isn't specified use this shader instead
• add a uniform that controls the number of pixels the circle fades out over (how soft the edge is)
• add a style for the fade distance so that it can be set in the stylesheet by editing js/style/styledeclaration.js

[edenh]

@ansis could you take a look at the shader code? I'm running into an issue where u_size (radius) is halved on retina.

[ansis]

multiply the radius by window.devicePixelRatio before sending it to the shader

[ansis]

Currently the default blur is a fraction of the radius. This means the blurriness of the edge grows as the circle gets bigger. Can you try changing it so that the default is 1-2 pixels no matter what the radius is?

This line can be simplified
gl_FragColor = mix(u_color, vec4(0.0, 0.0, 0.0, 0.0), t); to
gl_FragColor = u_color * (1.0 - t);

mix(a, b, t) is the same as a * (1.0 - t) + b * t. In this case b is always 0 so we can drop that term.

[edenh]

@ansis thanks, I was going to ask you about that. Fixes are here: 2730793

Spotting anything else?

[ansis]

It looks great!

two tiny details:

You can do gl_PointCoord - 0.5 instead of gl_PointCoord - vec2(0.5, 0.5).

And if you switch the first and second parameters for smoothstep you should be able to change 1.0 - t to just t.