Messages

1

Scripting / Re: Rounded corners via glsl shader?

« on: January 08, 2018, 01:29:14 AM »

I wrote a little demo for you which adds antialiased rounded corners without using a masking texture. It's aspect ratio agnostic. Have fun with it.

layout.nut

Code: [Select]

local flw = fe.layout.width
local flh = fe.layout.height
local snap_width = 500
local snap_height = 500
local radius = 0

local snap = fe.add_artwork( "snap", 0, 0, snap_width, snap_height )
snap.x = flw / 2
snap.y = flh / 2
snap.origin_x = snap.width / 2
snap.origin_y = snap.height / 2
snap.preserve_aspect_ratio = true

local snap_shader = fe.add_shader( Shader.Fragment, "shader.frag" );
snap.shader = snap_shader

fe.add_ticks_callback( "tick" )

function tick( tick_time ) {
radius += 2
if( radius > 100 ) radius -= 200
snap_shader.set_param( "radius" , radius)
snap_shader.set_param( "snap_dimensions" , snap.width, snap.height)
if ( snap.preserve_aspect_ratio) snap_shader.set_param( "subimg_dimensions" , snap.subimg_width, snap.subimg_height)
else snap_shader.set_param( "subimg_dimensions" , snap.width, snap.height)
}

shader.frag

Code: [Select]

uniform sampler2D texture;
uniform float radius;
uniform vec2 snap_dimensions;
uniform vec2 subimg_dimensions;
vec2 dimensions;

float roundCorners(vec2 p, vec2 b, float r)
{
    return length(max(abs(p)-b+r,0.0))-r;
}

void main()
{
if (subimg_dimensions.x <= subimg_dimensions.y)
{
dimensions.x = snap_dimensions.x * subimg_dimensions.x / subimg_dimensions.y;
dimensions.y = snap_dimensions.y;
}
else
{
dimensions.x = snap_dimensions.x;
dimensions.y = snap_dimensions.y * subimg_dimensions.y / subimg_dimensions.x;
}
    vec2 halfRes = 0.5 * dimensions;
float b = 1.0 - roundCorners(gl_TexCoord[0].xy * dimensions - halfRes, halfRes, abs(radius));
    vec4 pixel = texture2D(texture, gl_TexCoord[0].xy);
    gl_FragColor = vec4(gl_Color.xyz * pixel, smoothstep(0.0,1.0,b));
}


Your shader is awesome, exactly what I was looking for. Thank a lot!