利用 Rust 和 GPU 以 120 FPS 渲染用户界面

struct RectangleFragmentInput {
    float4 position [[position]];
    float2 origin [[flat]];
    float2 size [[flat]];
    float4 background_color [[flat]];
    float corner_radius [[flat]];
};
 
vertex RectangleFragmentInput rect_vertex(
    uint unit_vertex_id [[vertex_id]],
    uint rect_id [[instance_id]],
    constant float2 *unit_vertices [[buffer(GPUIRectInputIndexVertices)]],
    constant GPUIRect *rects [[buffer(GPUIRectInputIndexRects)]],
    constant GPUIUniforms *uniforms [[buffer(GPUIRectInputIndexUniforms)]]
) {
    float2 position = unit_vertex * rect.size + rect.origin;
    // `to_device_position` translates the 2D coordinates into clip space.
    float4 device_position = to_device_position(position, viewport_size);
    return RectangleFragmentInput {
      device_position,
      rect.origin,
      rect.size,
      rect.background_color,
      rect.corner_radius
    };
}

float rect_sdf(
    float2 absolute_pixel_position,
    float2 origin,
    float2 size,
    float corner_radius
) {
    float2 half_size = size / 2.;
    float2 rect_center = origin + half_size;
 
    // Change coordinate space so that the rectangle's center is at the origin,
    // taking advantage of the problem's symmetry.
    float2 pixel_position = abs(absolute_pixel_position - rect_center);
 
    // Shrink rectangle by the corner radius.
    float2 shrunk_corner_position = half_size - corner_radius;
 
    // Determine the distance vector from the pixel to the rectangle corner,
    // disallowing negative components to simplify the three cases.
    float2 pixel_to_shrunk_corner = max(float2(0., 0.), pixel_position - shrunk_corner_position);
 
    float distance_to_shrunk_corner = length(pixel_to_shrunk_corner);
 
    // Subtract the corner radius from the calculated distance to produce a
    // rectangle having the desired size.
    float distance = distance_to_shrunk_corner - corner_radius;
 
    return distance;
}
 
fragment float4 rect_fragment(RectangleFragmentInput input [[stage_in]]) {
    float distance = rect_sdf(
        input.position.xy,
        input.origin,
        input.size,
        input.corner_radius,
    );
    if (distance > 0.0) {
        return float4(0., 0., 0., 0.);
    } else {
        return input.background_color;
    }
}

float rect_shadow(float2 pixel_position, float2 origin, float2 size, float sigma) {
    float2 bottom_right = origin + size;
    float2 x_distance = float2(pixel_position.x - origin.x, pixel_position.x - bottom_right.x);
    float2 y_distance = float2(pixel_position.y - origin.y, pixel_position.y - bottom_right.y);
    float2 integral_x = 0.5 + 0.5 * erf(x_distance * (sqrt(0.5) / sigma));
    float2 integral_y = 0.5 + 0.5 * erf(y_distance * (sqrt(0.5) / sigma));
    return (integral_x.x - integral_x.y) * (integral_y.x - integral_y.y);
}

float blur_along_x(float x, float y, float sigma, float corner, float2 half_size) {
    float delta = min(half_size.y - corner - abs(y), 0.);
    float curved = half_size.x - corner + sqrt(max(0., corner * corner - delta * delta));
    float2 integral = 0.5 + 0.5 * erf((x + float2(-curved, curved)) * (sqrt(0.5) / sigma));
    return integral.y - integral.x;
}
 
float shadow_rounded(float2 pixel_position, float2 origin, float2 size, float corner_radius, float sigma) {
    float2 half_size = size / 2.;
    float2 center = origin + half_size;
    float2 point = pixel_position - center;
 
    float low = point.y - half_size.y;
    float high = point.y + half_size.y;
    float start = clamp(-3. * sigma, low, high);
    float end = clamp(3. * sigma, low, high);
 
    float step = (end - start) / 4.;
    float y = start + step * 0.5;
    float alpha = 0.;
    for (int i = 0; i < 4; i++) {
        alpha += blur_along_x(point.x, point.y - y, sigma, corner_radius, half_size) * gaussian(y, sigma) * step;
        y += step;
    }
 
    return alpha;
}

typedef struct {
  float2 target_origin;
  float2 atlas_origin;
  float2 size;
  float4 color;
} GPUIGlyph;

struct GlyphFragmentInput {
    float4 position [[position]];
    float2 atlas_position;
    float4 color [[flat]];
};
 
vertex GlyphFragmentInput glyph_vertex(
    uint unit_vertex_id [[vertex_id]],
    uint glyph_id [[instance_id]],
    constant float2 *unit_vertices [[buffer(GPUIGlyphVertexInputIndexVertices)]],
    constant GPUIGlyph *glyphs [[buffer(GPUIGlyphVertexInputIndexGlyphs)]],
    constant GPUIUniforms *uniforms [[buffer(GPUIGlyphInputIndexUniforms)]]
) {
    float2 unit_vertex = unit_vertices[unit_vertex_id];
    GPUIGlyph glyph = glyphs[glyph_id];
    float2 position = unit_vertex * glyph.size + glyph.origin;
    float4 device_position = to_device_position(position, uniforms->viewport_size);
    float2 atlas_position = (unit_vertex * glyph.size + glyph.atlas_origin) / uniforms->atlas_size;
 
    return GlyphFragmentInput {
        device_position,
        atlas_position,
        glyph.color,
    };
}
 
fragment float4 glyph_fragment(
    GlyphFragmentInput input [[stage_in]],
    texture2d<float> atlas [[ texture(GPUIGlyphFragmentInputIndexAtlas) ]]
) {
    constexpr sampler atlas_sampler(mag_filter::linear, min_filter::linear);
    float4 color = input.color;
    float4 sample = atlas.sample(atlas_sampler, input.atlas_position);
    color.a *= sample.a;
    return color;
}

pub trait Element {
    fn layout(&mut self, constraint: SizeConstraint) -> Size;
    fn paint(&mut self, origin: (f32, f32), size: Size, scene: &mut Scene);
}

pub struct SizeConstraint {
    pub min: Size,
    pub max: Size,
}
 
pub struct Size {
    pub width: f32,
    pub height: f32,
}

pub struct Border {
    child: Box<dyn Element>,
    thickness: f32,
    color: Color,
}
 
impl Element for Border {
    fn layout(&mut self, mut constraint: SizeConstraint) -> Size {
        constraint.max.x -= self.thickness;
        constraint.max.y -= self.thickness;
        let (width, height) = self.child.layout(constraint);
        Size {
            width: width + self.thickness,
            height: height + self.thickness,
        }
    }
 
    fn paint(&mut self, origin: (f32, f32), size: Size, scene: &mut Scene) {
        // ...
    }
}

pub struct Scene {
    layers: Vec<Layer>
}
 
struct Layer {
    shadows: Vec<Shadow>,
    rectangles: Vec<Rectangle>,
    glyphs: Vec<Glyph>,
    icons: Vec<Icon>,
    image: Vec<Image>
}

impl Element for Border {
    fn layout(&mut self, mut constraint: SizeConstraint) -> Size {
        // ...
    }
 
    fn paint(&mut self, origin: (f32, f32), mut size: Size, scene: &mut Scene) {
        scene.push_rectangle(Rectangle {
            origin,
            size,
            border_color: self.color,
            border_thickness: self.thickness,
        });
 
        let (mut child_x, mut child_y) = origin;
        child_x += self.thickness;
        child_y += self.thickness;
 
        let mut child_size = size;
        child_size.width -= self.thickness;
        child_size.height -= self.thickness;
 
        self.child.paint((child_x, child_y), child_size, scene);
    }
}