Newer
Older
view_proj: mat4x4<f32>,
world_position: vec3<f32>,
_padding_1: i32,
_padding_2: i32,
_padding_3: i32,
@builtin(position) position: vec4<f32>,
@location(0) color: vec4<f32>,
@location(1) uv: vec3<f32>,
@location(2) pos: vec2<f32>,
@location(3) size: vec2<f32>,
@location(4) border_radius: f32,
@location(5) pixel_position: vec2<f32>,
@location(0) vertex_position: vec3<f32>,
@location(1) vertex_color: vec4<f32>,
@location(2) vertex_uv: vec4<f32>,
@location(3) vertex_pos_size: vec4<f32>,
) -> VertexOutput {
var out: VertexOutput;
out.color = vertex_color;
out.pos = (vertex_position.xy - vertex_pos_size.xy);
out.position = view.view_proj * vec4<f32>(vertex_position, 1.0);
out.pixel_position = out.position.xy;
out.uv = vertex_uv.xyz;
out.size = vertex_pos_size.zw;
out.border_radius = vertex_uv.w;
// Where P is the position in pixel space, B is the size of the box adn R is the radius of the current corner.
fn sdRoundBox(p: vec2<f32>, b: vec2<f32>, r: f32) -> f32 {
var q = abs(p) - b + r;
return min(max(q.x, q.y), 0.0) + length(max(q, vec2<f32>(0.0))) - r;
@fragment
fn fragment(in: VertexOutput) -> @location(0) vec4<f32> {
var size = in.size;
var pos = in.pos.xy * 2.0;
// Lock border to max size. This is similar to how HTML/CSS handles border radius.
var bs = min(in.border_radius * 2.0, min(size.x, size.y));
var rect_dist = sdRoundBox(
pos - size,
size,
bs,
rect_dist = 1.0 - smoothstep(0.0, fwidth(rect_dist), rect_dist);
return vec4<f32>(in.color.rgb, rect_dist * in.color.a);
var tex_dimensions = textureDimensions(font_texture);
var msdf_unit = vec2<f32>(px_range, px_range) / vec2<f32>(f32(tex_dimensions.x), f32(tex_dimensions.y));
var x = textureSample(font_texture, font_sampler, vec2<f32>(in.uv.x, 1.0 - in.uv.y), i32(in.uv.z));
var sig_dist = (v - 0.5) * dot(msdf_unit, 0.5 / fwidth(in.uv.xy));
var bs = min(in.border_radius, min(in.size.x, in.size.y));
var mask = sdRoundBox(
in.pos.xy * 2.0 - (in.size.xy),
in.size.xy,
bs,
);
var color = textureSample(image_texture, image_sampler, vec2<f32>(in.uv.x, 1.0 - in.uv.y));
return vec4<f32>(color.rgb * in.color.rgb, color.a * in.color.a * mask);