Clipping Tilemaps

Looking forward to seeing more about your project!

Proof of concept!

It’s kind of hard to tell on the bottom - the next step is obviously going to be adding separating lines - and I obviously haven’t applied it to the sprites yet, but we have our 3-pane radial split screen. Huzzah!

Here’s the fragment code:

varying mediump vec4 position;
varying mediump vec2 var_texcoord0;

uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint;
uniform lowp vec4 window_size;
uniform lowp vec4 sector;

uniform float PI = 3.1415926535897932384626433832795;

void main()
{
	// Pre-multiply alpha since all runtime textures already are
	lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
	
	// New code
	vec2 center = sector.xy;
	float right_edge = window_size.x;
	float start = sector.z;
	float end = sector.w;

	vec2 startVec = vec2(-cos(PI * start), sin(PI * start));
	vec2 endVec = vec2(-cos(PI * end), sin(PI * end));
	
	if (right_edge < gl_FragCoord.x || distance(gl_FragCoord.xy, center) <= 3)
	{
		gl_FragColor = vec4(0,0,0,0);
	}
	else
	{
		vec2 p = gl_FragCoord.xy - center;
		if (dot(p, startVec) > 0 && 0 > dot(p, endVec))
		{
			gl_FragColor = texture2D(texture_sampler, var_texcoord0.xy) * tint_pm;
		}
		else
		{
			gl_FragColor = vec4(0, 0, 0, 0);
		}
	}
}

One thing worth noting is that I intentionally misplaced the 0 line - if I was doing proper maths, the vertical line going down from the center would be to the right instead, and it would be going counterclockwise instead of clockwise; but it serves my purposes better to number the sections 1, 2, and 3 from the bottom left, and then segment them from (0, 2/3), (2/3, 4/3), (4/3, 2). And of course wedging pi in after the fact, for readability. If someone were to want to fix it, it all lies in the comparisons between the dot products and 0.

5 Likes

I had a feeling it might work something like this, and it turns out I was right: Adding lines to the display was as simple as substituting the desired line width (in positive and negative values) for the 0 you compared the dot products to:

if (dot(p, startVec) > 1 && -1 > dot(p, endVec))

results in:

3 Likes