Improve how points with small radii or stroke widths are rendered.
Before, a point with a radius < 1.5 would look odd, and a point with a
stroke width < 1.5 wouldn't be as antialiased as it should have been.
MODIFY
CHANGELOG.md
CHANGELOG.md
# Change Log
+## Unreleased
+
+### Improvements
+- Points with small radii or thin strokes are rendered better (#1021)
+
## Version 0.19.6
### Features

MODIFY
src/webgl/pointFeature.js
src/webgl/pointFeature.js
@@ -349,11 +349,13 @@ var webgl_pointFeature = function (arg) {
}
s_updateStyleFromArray(key, styleArray, false);
});
+ if (refresh) {
if (m_this.visible() && needsRefresh) {
m_this.draw();
} else if (needsRender) {
m_this.renderer()._render();
}
+ }
return m_this;
};

MODIFY
src/webgl/pointFeaturePoly.frag
src/webgl/pointFeaturePoly.frag
@@ -34,13 +34,15 @@ void main () {
fillColor = vec4(strokeColor.rgb, 0.0);
else
fillColor = fillColorVar;
- // Distance to antialias over
- float antialiasDist = 3.0 / (2.0 * radiusVar);
+ // Distance to antialias over. First number is in pixels
+ float antialiasDist = 1.5 / (radiusVar + strokeWidthVar);
if (rad < endStep) {
- float step = smoothstep (endStep - antialiasDist, endStep, rad);
- gl_FragColor = mix (fillColor, strokeColor, step);
+ float step = smoothstep(max(0.0, endStep - antialiasDist), endStep, rad);
+ vec4 color = mix(fillColor, strokeColor, step);
+ float step2 = smoothstep(max(0.0, 1.0 - antialiasDist), 1.0, rad);
+ gl_FragColor = mix(color, vec4(color.rgb, 0.0), step2);
} else {
- float step = smoothstep (1.0 - antialiasDist, 1.0, rad);
+ float step = smoothstep(max(0.0, 1.0 - antialiasDist), 1.0, rad);
gl_FragColor = mix(strokeColor, vec4(strokeColor.rgb, 0.0), step);
}
}

MODIFY
src/webgl/pointFeatureSprite.frag
src/webgl/pointFeatureSprite.frag
@@ -34,13 +34,15 @@ void main () {
fillColor = vec4(strokeColor.rgb, 0.0);
else
fillColor = fillColorVar;
- // Distance to antialias over
- float antialiasDist = 3.0 / (2.0 * radiusVar);
+ // Distance to antialias over. First number is in pixels
+ float antialiasDist = 1.5 / (radiusVar + strokeWidthVar);
if (rad < endStep) {
- float step = smoothstep (endStep - antialiasDist, endStep, rad);
- gl_FragColor = mix (fillColor, strokeColor, step);
+ float step = smoothstep(max(0.0, endStep - antialiasDist), endStep, rad);
+ vec4 color = mix(fillColor, strokeColor, step);
+ float step2 = smoothstep(max(0.0, 1.0 - antialiasDist), 1.0, rad);
+ gl_FragColor = mix(color, vec4(color.rgb, 0.0), step2);
} else {
- float step = smoothstep (1.0 - antialiasDist, 1.0, rad);
+ float step = smoothstep(max(0.0, 1.0 - antialiasDist), 1.0, rad);
gl_FragColor = mix(strokeColor, vec4(strokeColor.rgb, 0.0), step);
}
}

Improve how points with small radii or stroke widths are rendered.

Before, a point with a radius < 1.5 would look odd, and a point with a
stroke width < 1.5 wouldn't be as antialiased as it should have been.