Basic Vector Sprite Upscaling
This is basically a simpler version of the HQ4X shader I posted: NekotoArts HQ4X Shader
Instead of using HQX it just uses a vector between similar pixels and draws a line.
This can be cleaner than the HQ4X Shader and less muddy in some cases.
Still though, I’m not sure how useful this is.
Shader code
shader_type canvas_item;
/*
Made with a whole lot of nightmare fuel.
Logic's Under Pressure and Bobby Tarantino II Albums was in rotation during
the making process.
Hope you enjoy!
You're auto-friended to me if you're a Logic fan
RattPack all day!
*/
//upscaling multiplier amount
const float SCALE = 10.0;
//image mipmap level, for base upscaling
const int ML = 0;
//equality threshold of 2 colors before forming lines
uniform float THRESHOLD = 0.1;
//anti aliasing scaling, smaller value make lines more blurry
uniform float AA_SCALE = 2.0;
//draw diagonal line connecting 2 pixels if within threshold
vec4 diag(vec4 sum, vec2 uv, vec2 p1, vec2 p2, sampler2D iChannel0, float LINE_THICKNESS) {
vec4 v1 = texelFetch(iChannel0,ivec2(uv+vec2(p1.x,p1.y)),ML),
v2 = texelFetch(iChannel0,ivec2(uv+vec2(p2.x,p2.y)),ML);
if (length(v1-v2) < THRESHOLD) {
vec2 dir = p2-p1,
lp = uv-(floor(uv+p1)+.5);
dir = normalize(vec2(dir.y,-dir.x));
float l = clamp((LINE_THICKNESS-dot(lp,dir))*AA_SCALE,0.,1.);
sum = mix(sum,v1,l);
}
return sum;
}
void fragment()
{
float LINE_THICKNESS = 0.4;
vec2 ip = UV;
ip = UV * (1.0 / TEXTURE_PIXEL_SIZE);
//start with nearest pixel as 'background'
vec4 s = texelFetch(TEXTURE,ivec2(ip),ML);
//draw anti aliased diagonal lines of surrounding pixels as 'foreground'
s = diag(s,ip,vec2(-1,0),vec2(0,1), TEXTURE, LINE_THICKNESS);
s = diag(s,ip,vec2(0,1),vec2(1,0), TEXTURE, LINE_THICKNESS);
s = diag(s,ip,vec2(1,0),vec2(0,-1), TEXTURE, LINE_THICKNESS);
s = diag(s,ip,vec2(0,-1),vec2(-1,0), TEXTURE, LINE_THICKNESS);
COLOR = s;
}
Would be awesome to make this a screen filter (upscale the whole screen and not just the sprite)
I second this request please! How can we make this into a screen based texture?
The number of texture samples can be reduced from 9 to 5 by sampling outside of the “diag” function.
ShaderCode:
shader_type canvas_item; /* Made with a whole lot of nightmare fuel. Logic's Under Pressure and Bobby Tarantino II Albums was in rotation during the making process. Hope you enjoy! You're auto-friended to me if you're a Logic fan RattPack all day! */ //upscaling multiplier amount const float SCALE = 10.0; //image mipmap level, for base upscaling const int ML = 0; //equality threshold of 2 colors before forming lines uniform float THRESHOLD = 0.001; //anti aliasing scaling, smaller value make lines more blurry uniform float AA_SCALE = 11.0; //draw diagonal line connecting 2 pixels if within threshold vec4 diag(vec4 sum, vec2 uv, vec2 p1, vec2 p2, vec4 c1, vec4 c2, float LINE_THICKNESS) { if (length(c1 - c2) < THRESHOLD) { vec2 dir = p2-p1, lp = uv-(floor(uv+p1)+.5); dir = normalize(vec2(dir.y,-dir.x)); float l = clamp((LINE_THICKNESS-dot(lp,dir))*AA_SCALE,0.,1.); sum = mix(sum,c1,l); } return sum; } void fragment() { float LINE_THICKNESS = 0.4; vec2 ip = UV; ip = UV * (1.0 / TEXTURE_PIXEL_SIZE); vec4 texCenter = texelFetch(TEXTURE,ivec2(ip),ML); vec4 texLeft = texelFetch(TEXTURE,ivec2(ip+vec2(-1,0)),ML); vec4 texUp = texelFetch(TEXTURE,ivec2(ip+vec2(0,1)),ML); vec4 texRight = texelFetch(TEXTURE,ivec2(ip+vec2(1,0)),ML); vec4 texDown = texelFetch(TEXTURE,ivec2(ip+vec2(0,-1)),ML); //start with nearest pixel as 'background' vec4 s = texCenter; //draw anti aliased diagonal lines of surrounding pixels as 'foreground' s = diag(s,ip,vec2(-1,0),vec2(0,1), texLeft, texUp, LINE_THICKNESS); s = diag(s,ip,vec2(0,1),vec2(1,0), texUp, texRight, LINE_THICKNESS); s = diag(s,ip,vec2(1,0),vec2(0,-1), texRight, texDown, LINE_THICKNESS); s = diag(s,ip,vec2(0,-1),vec2(-1,0), texDown, texLeft, LINE_THICKNESS); COLOR = s; }I really love the look this creates! But does anyone know how to get rid of those weird diamond artifacts like the ones you see in the example dude’s sandals?
Hello, can you tell me how do I use this shader with spatial type? I pass a texture to the shader but hqx doesn’t work on it (although other features are applied, for example blur).