Skip to content

Instantly share code, notes, and snippets.

@8mist

8mist/fragment.glsl

Created July 19, 2023 13:08
Show Gist options
  • Save 8mist/394f81ae5cb8e7f015a11cd2c4ad43d1 to your computer and use it in GitHub Desktop.
Save 8mist/394f81ae5cb8e7f015a11cd2c4ad43d1 to your computer and use it in GitHub Desktop.
Download ZIP
Create border-radius like CSS in Shader
Raw
fragment.glsl
precision highp float;
uniform float u_alpha;
uniform sampler2D t_map;
varying vec2 v_uv;
float fn_border_radius(vec2 position, vec2 half_size, float corner_radius) {
position = abs(position) - half_size + corner_radius;
return length(max(position, 0.)) + min(max(position.x, position.y), 0.) - corner_radius;
}
void main() {
vec3 color = vec3(0.5);
vec2 uv = v_uv;
float border_radius = fn_border_radius(uv - vec2(0.5) * vec2(1. / 1.4, 1.), vec2(0.5) * vec2(1. / 1.4, 1.), 0.1);
float square = step(0., border_radius);
color = texture2D(t_map, uv).rgb;
float alpha = (1. - square) * u_alpha;
gl_FragColor = vec4(color * alpha, alpha);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment