Curver Development: Rounded Corners

April 22, 2016 - Admin Tags:
rounded curve corners

Previously I mentioned I was experimenting with rendering stroked curves. The initial naive implementation rendered a textured quad (splash) at each pixel along the curve. Here I discuss a different approach.

Rounded Corners & Ends

The new approach renders circles at hard edges and curve ends only, and renders the rest of the curve cheaply using geometry as displayed in the above image. The circles are rendered using point sprites scaled appropriately. The renderer only needs to update a dynamic index buffer and render the point sprites using vertexes already filled in the vertex buffer when rendering the curve's geometry.

Circles can be rendered either by using a texture on the point sprite quad or using a pixel shader. The pixel shader produces more accurate results, but the texture approach can be used if pixel shader performance becomes an issue. Here is the code for the pixel shader:

float4 PS_CurvePoints( float2 uv : TEXCOORD0 ) : COLOR0
	//return float4( g_CurveColor.rgb, tex2D( strokeSampler, uv ).a );
	uv = uv*2 - float2(1,1); // map uv coords from [0,1] to [-1,1].
	float dist = uv.x * uv.x + uv.y * uv.y;
	// no anti-aliasing:
	//if( dist > 1 )
	//	return float4(1,1,1,0);
	//return g_CurveColor;
	// anti-aliasing:
	float idist = 1 - dist;
	float2 dd = float2( ddx(idist), ddx(idist) );
	float gradientLength = length(dd);
	float thresholdWidth = 1.0 * gradientLength;
	float c = saturate((idist / thresholdWidth) + 0.5);
	return float4( g_CurveColor.rgb, c );


This approach is not without problems. When the difference in thickness between a corner and the adjacent nodes is great, the circle will bulge out in undesired locations and break the smoothness of the curve. See the highlighted area in the screen capture below.

rounded corners issue

In practical use this usually goes unnoticed. Researching for a solution to this problem may not be needed depending on what tactics will be used to optimize rendering in Curver as development progresses.

demonstration video

We are preparing to launch Curver for early access adopters soon. Wish us luck!