Texture magnification antialiasing - Revision history

Vegard: Vegard moved page Pixel art upscaling to Texture magnification antialiasing

2020-04-09T09:37:27Z

Vegard moved page Pixel art upscaling to Texture magnification antialiasing

← Older revision		Revision as of 09:37, 9 April 2020
(No difference)

Vegard: hardware bilinear filtering

2020-04-04T19:36:24Z

hardware bilinear filtering

← Older revision		Revision as of 19:36, 4 April 2020
Line 13:		Line 13:

	What we really want is a filtering algorithm that antialiases only the thin line between the (low-res) pixels. As far as I know, there is no magnification filter in OpenGL that can do this, but we can do it ourselves in a shader.		What we really want is a filtering algorithm that antialiases only the thin line between the (low-res) pixels. As far as I know, there is no magnification filter in OpenGL that can do this, but we can do it ourselves in a shader.

			== Naïve implementation ==

	=== Fragment shader ===		=== Fragment shader ===
Line 55:		Line 57:

	Note that the actual texture sampler must not use any hardware texture filtering! E.g. for <tt>GL_TEXTURE_MAG_FILTER</tt> it should be using <tt>GL_NEAREST</tt>; for <tt>GL_TEXTURE_MIN_FILTER</tt> it might be fine to use linear interpolation or even mipmapping.		Note that the actual texture sampler must not use any hardware texture filtering! E.g. for <tt>GL_TEXTURE_MAG_FILTER</tt> it should be using <tt>GL_NEAREST</tt>; for <tt>GL_TEXTURE_MIN_FILTER</tt> it might be fine to use linear interpolation or even mipmapping.

			== Using hardware bilinear filtering ==

			The algorithm above is implemented using up to 4 weighted (single-texel) texture lookups. It is also possible to implement it using built-in hardware bilinear filtering. In this case, the resulting fragment is still a combination of up to 4 texels, but where the uv coordinate for the texture lookup is modified so that it only interpolates at the 1-pixel boundary between texels.

			This algorithm is implemented in https://www.shadertoy.com/view/ldlSzS and the technique is called "anti-aliased point sampled magnified textures".

			{{TODO\|Show fFragment shader code for this.}}

	=== See also ===		=== See also ===
Line 61:		Line 71:
	* "Pixel planet", a shader using this technique: https://www.shadertoy.com/view/WdSSWD		* "Pixel planet", a shader using this technique: https://www.shadertoy.com/view/WdSSWD
	* "Anti-aliased point sampled magnified textures": https://www.shadertoy.com/view/ldlSzS		* "Anti-aliased point sampled magnified textures": https://www.shadertoy.com/view/ldlSzS
			* "Pixel Art Filtering Comparison": https://www.shadertoy.com/view/ltBfRD

	[[Category:Graphics programming]]		[[Category:Graphics programming]]

Vegard: /* See also */

2020-04-04T19:26:36Z

Vegard: /* See also */

2020-04-04T10:42:37Z

Vegard at 10:37, 4 April 2020

2020-04-04T10:37:56Z

← Older revision		Revision as of 10:37, 4 April 2020
Line 8:		Line 8:
	# preserving a "pixel art" look for textured 3D models		# preserving a "pixel art" look for textured 3D models

	The main problem with upscaling pixel art is when the the upscaled size is not an integer multiple of ~~pixels~~. If you use nearest filtering then your pixel sizes will be uneven; this can be particularly jarring for animations where e.g. a part of a sprite appears to change size as it moves across the screen.{{TODO\|Add images.}} You can't use (bi)linear filtering either, because your pixels will be smeared out into something that no longer looks like pixel art at all (specifically, the problem is that pixel values are interpolated across the ''whole'' upscaled pixel rather than just on pixel borders).		The main problem with upscaling pixel art is when the the upscaled size is not an integer multiple of the original size. If you use nearest filtering then your pixel sizes will be uneven; this can be particularly jarring for animations where e.g. a part of a sprite appears to change size as it moves across the screen.{{TODO\|Add images.}} You can't use (bi)linear filtering either, because your pixels will be smeared out into something that no longer looks like pixel art at all (specifically, the problem is that pixel values are interpolated across the ''whole'' upscaled pixel rather than just on pixel borders).

	One solution for case 1 above is to only upscale to the nearest integer ratio. This will add a border to the image, however, and depending on the actual ratio (and the actual sizes!) this may be highly undesirable (e.g. it wastes a lot of screen space or does not magnify the image sufficiently). For case 2 this doesn't work at all, since the scale factor is not uniform across the screen.		One solution for case 1 above is to only upscale to the nearest integer ratio. This will add a border to the image, however, and depending on the actual ratio (and the actual sizes!) this may be highly undesirable (e.g. it wastes a lot of screen space or does not magnify the image sufficiently). For case 2 this doesn't work at all, since the scale factor is not uniform across the screen.

Vegard at 10:30, 4 April 2020

2020-04-04T10:30:23Z

← Older revision		Revision as of 10:30, 4 April 2020
Line 1:		Line 1:
	[[File:pplanet-nearest.png\|420px\|thumb\|Nearest neighbour texture filtering. Notice the uneven pixel sizes e.g. of the stars on the left.]]		[[File:pplanet-nearest.png\|420px\|thumb\|Nearest neighbour texture filtering. Notice the uneven pixel sizes e.g. of the stars on the left.]]
	[[File:pplanet-linear.png\|420px\|thumb\|Linear texture filtering. This is too blurry to preserve a "pixel art" look.]]		[[File:pplanet-linear.png\|420px\|thumb\|Linear texture filtering. This is too blurry to preserve a "pixel art" look.]]
	[[File:pplanet-pixelaware.png\|420px\|thumb\|Pixel-aware texture filtering using the algorithm below.]]		[[File:pplanet-pixelaware.png\|420px\|thumb\|Pixel-aware texture filtering using the algorithm below. Pixels retain a crisp look while also being much more uniform in size.]]

	There are several uses for upscaling pixel art, here I consider the following cases:		There are several uses for upscaling pixel art, here I consider the following cases:

Vegard: fix nearest neighbour vs. linear

2020-04-04T10:29:26Z

fix nearest neighbour vs. linear

← Older revision		Revision as of 10:29, 4 April 2020
Line 1:		Line 1:
	[[File:pplanet-~~linear~~.png\|420px\|thumb\|~~Linear~~ texture filtering. Notice the uneven pixel sizes e.g. of the stars on the left.]]		[[File:pplanet-nearest.png\|420px\|thumb\|Nearest neighbour texture filtering. Notice the uneven pixel sizes e.g. of the stars on the left.]]
			[[File:pplanet-linear.png\|420px\|thumb\|Linear texture filtering. This is too blurry to preserve a "pixel art" look.]]
	[[File:pplanet-pixelaware.png\|420px\|thumb\|Pixel-aware texture filtering using the algorithm below.]]		[[File:pplanet-pixelaware.png\|420px\|thumb\|Pixel-aware texture filtering using the algorithm below.]]

Vegard: remove TODOs

2020-04-04T07:08:04Z

remove TODOs

← Older revision		Revision as of 07:08, 4 April 2020
Line 7:		Line 7:
	# preserving a "pixel art" look for textured 3D models		# preserving a "pixel art" look for textured 3D models

	The main problem with upscaling pixel art is when the the upscaled size is not an integer multiple of pixels. If you use nearest filtering then your pixel sizes will be uneven; this can be particularly jarring for animations where e.g. a part of a sprite appears to change size as it moves across the screen.{{TODO\|Add images.}} You can't use (bi)linear filtering either, because your pixels will be smeared out into something that no longer looks like pixel art at all (specifically, the problem is that pixel values are interpolated across the ''whole'' upscaled pixel rather than just on pixel borders).~~{{TODO\|Add images.}}~~		The main problem with upscaling pixel art is when the the upscaled size is not an integer multiple of pixels. If you use nearest filtering then your pixel sizes will be uneven; this can be particularly jarring for animations where e.g. a part of a sprite appears to change size as it moves across the screen.{{TODO\|Add images.}} You can't use (bi)linear filtering either, because your pixels will be smeared out into something that no longer looks like pixel art at all (specifically, the problem is that pixel values are interpolated across the ''whole'' upscaled pixel rather than just on pixel borders).

	One solution for case 1 above is to only upscale to the nearest integer ratio. This will add a border to the image, however, and depending on the actual ratio (and the actual sizes!) this may be highly undesirable (e.g. it wastes a lot of screen space or does not magnify the image sufficiently). For case 2 this doesn't work at all, since the scale factor is not uniform across the screen.		One solution for case 1 above is to only upscale to the nearest integer ratio. This will add a border to the image, however, and depending on the actual ratio (and the actual sizes!) this may be highly undesirable (e.g. it wastes a lot of screen space or does not magnify the image sufficiently). For case 2 this doesn't work at all, since the scale factor is not uniform across the screen.

	What we really want is a filtering algorithm that antialiases only the thin line between the (low-res) pixels. As far as I know, there is no magnification filter in OpenGL that can do this, but we can do it ourselves in a shader.~~{{TODO\|Add images.}}~~		What we really want is a filtering algorithm that antialiases only the thin line between the (low-res) pixels. As far as I know, there is no magnification filter in OpenGL that can do this, but we can do it ourselves in a shader.

	=== Fragment shader ===		=== Fragment shader ===

Vegard: add illustrations

2020-04-04T07:07:27Z

add illustrations

← Older revision		Revision as of 07:07, 4 April 2020
Line 1:		Line 1:
			[[File:pplanet-linear.png\|420px\|thumb\|Linear texture filtering. Notice the uneven pixel sizes e.g. of the stars on the left.]]
			[[File:pplanet-pixelaware.png\|420px\|thumb\|Pixel-aware texture filtering using the algorithm below.]]

	There are several uses for upscaling pixel art, here I consider the following cases:		There are several uses for upscaling pixel art, here I consider the following cases:

Vegard: /* Fragment shader */ fixes

2020-04-04T07:02:04Z

Fragment shader: fixes

← Older revision		Revision as of 07:02, 4 April 2020
Line 12:		Line 12:
	=== Fragment shader ===		=== Fragment shader ===

	The first thing we need to do is to calculate the size (in full-scale pixel units) of a single low-res pixel. For case 1 above, where pixel sizes are uniform, we can just use <tt>~~big_screen_size~~ / ~~small_screen_size~~</tt>. For case 2, we can use <tt>fwidth()</tt>.{{TODO\|Explain exactly how this works.}}		The first thing we need to do is to calculate the size (in full-scale pixel units) of a single low-res pixel. For case 1 above, where pixel sizes are uniform, we can just use <tt>small_screen_size / big_screen_size</tt>. For case 2, we can use <tt>fwidth()</tt>.{{TODO\|Explain exactly how this works.}}

	We now need to test if a fragment is within half a pixel of the border of its texel (so within half a pixel of the top, bottom, left, or right in texture space); in that case, we need to blend with the neighbouring texel. The blend factor will depend on how close we are. The reason for using half a pixel instead of one pixel is that the 1 pixel border is shared between two texels, so by checking half a pixel on the right in the left texel and half a pixel on the left in the right texel we effectively get a 1 pixel border when you put them next to each other.{{TODO\|Add illustration.}}		We now need to test if a fragment is within half a pixel of the border of its texel (so within half a pixel of the top, bottom, left, or right in texture space); in that case, we need to blend with the neighbouring texel. The blend factor will depend on how close we are. The reason for using half a pixel instead of one pixel is that the 1 pixel border is shared between two texels, so by checking half a pixel on the right in the left texel and half a pixel on the left in the right texel we effectively get a 1 pixel border when you put them next to each other.{{TODO\|Add illustration.}}

	{{TODO\|The snippet below doesn't actually work at all, because it's mixing up whether <tt>uv</tt> is really in range 0-1 or 0-(texture size - 1).}}
	<source lang="GLSL">		<source lang="GLSL">
	// tex is the texture to sample		// tex is the texture to sample
	// uv is the texture coordinate		// uv is the texture coordinate ranging from 0 to small_screen_size

			#if 0
	vec2 border = .5 * fwidth(uv);		vec2 border = .5 * fwidth(uv);
			#else
			vec2 border = .5 * small_screen_size / big_screen_size;
			#endif

	vec2 uvf = fract(uv);		vec2 uvf = fract(uv);

	// the main color of the texel, assuming we're not at a border		// the main color of the texel, assuming we're not at a border
	vec4 col = ~~texture~~(tex, uv);		vec4 col = texelFetch(tex, ivec2(uv), 0);

	vec4 xcol = col;		vec4 xcol = col;
	if (uvf.x < border.x)		if (uvf.x < border.x)
	xcol = mix(~~texture~~(tex, uv + ~~vec2~~(-1, 0)), col, uvf.x / border.x);		xcol = mix(texelFetchOffset(tex, ivec2(uv), 0, ivec2(-1, 0)), col, uvf.x / border.x);
	else if (1. - uvf.x < border.x)		else if (1. - uvf.x < border.x)
	xcol = mix(~~texture~~(tex, uv + ~~vec2~~(1, 0)), col, (1. - uvf.x) / border.x);		xcol = mix(texelFetchOffset(tex, ivec2(uv), 0, ivec2(1, 0)), col, (1. - uvf.x) / border.x);

	vec4 ycol = col;		vec4 ycol = col;
	if (uvf.y < border.y)		if (uvf.y < border.y)
	ycol = mix(~~texture~~(tex, uv + ~~vec2~~(0, -1)), col, uvf.y / border.y);		ycol = mix(texelFetchOffset(tex, ivec2(uv), 0, ivec2(0, -1)), col, uvf.y / border.y);
	else if (1. - uvf.y < ~~1. -~~ border.y)		else if (1. - uvf.y < border.y)
	ycol = mix(~~texture~~(tex, uv + ~~vec2~~(0, 1)), col, (1. - uvf.y) / border.y);		ycol = mix(texelFetchOffet(tex, ivec2(uv), 0, ivec2(0, 1)), col, (1. - uvf.y) / border.y);
	</source>		</source>

← Older revision		Revision as of 10:42, 4 April 2020
Line 59:		Line 59:

	* https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms (Has many good pointers/references, but does not mention the algorithm above.)		* https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms (Has many good pointers/references, but does not mention the algorithm above.)
			* "Pixel planet", a shader using this technique: https://www.shadertoy.com/view/WdSSWD

	[[Category:Graphics programming]]		[[Category:Graphics programming]]

← Older revision		Revision as of 10:29, 4 April 2020
Line 1:		Line 1:
	[[File:pplanet-~~linear~~.png\|420px\|thumb\|~~Linear~~ texture filtering. Notice the uneven pixel sizes e.g. of the stars on the left.]]		[[File:pplanet-nearest.png\|420px\|thumb\|Nearest neighbour texture filtering. Notice the uneven pixel sizes e.g. of the stars on the left.]]
			[[File:pplanet-linear.png\|420px\|thumb\|Linear texture filtering. This is too blurry to preserve a "pixel art" look.]]
	[[File:pplanet-pixelaware.png\|420px\|thumb\|Pixel-aware texture filtering using the algorithm below.]]		[[File:pplanet-pixelaware.png\|420px\|thumb\|Pixel-aware texture filtering using the algorithm below.]]

← Older revision		Revision as of 19:26, 4 April 2020
Line 60:		Line 60:
	* https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms (Has many good pointers/references, but does not mention the algorithm above.)		* https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms (Has many good pointers/references, but does not mention the algorithm above.)
	* "Pixel planet", a shader using this technique: https://www.shadertoy.com/view/WdSSWD		* "Pixel planet", a shader using this technique: https://www.shadertoy.com/view/WdSSWD
			* "Anti-aliased point sampled magnified textures": https://www.shadertoy.com/view/ldlSzS

	[[Category:Graphics programming]]		[[Category:Graphics programming]]