struct Globals { viewport_size: vec2, pad: vec2, } var globals: Globals; var t_sprite: texture_2d; var s_sprite: sampler; const M_PI_F: f32 = 3.1415926; const GRAYSCALE_FACTORS: vec3 = vec3(0.2126, 0.7152, 0.0722); struct ViewId { lo: u32, hi: u32, } struct Bounds { origin: vec2, size: vec2, } struct Corners { top_left: f32, top_right: f32, bottom_right: f32, bottom_left: f32, } struct Edges { top: f32, right: f32, bottom: f32, left: f32, } struct Hsla { h: f32, s: f32, l: f32, a: f32, } struct AtlasTextureId { index: u32, kind: u32, } struct AtlasBounds { origin: vec2, size: vec2, } struct AtlasTile { texture_id: AtlasTextureId, tile_id: u32, padding: u32, bounds: AtlasBounds, } fn to_device_position_impl(position: vec2) -> vec4 { let device_position = position / globals.viewport_size * vec2(2.0, -2.0) + vec2(-1.0, 1.0); return vec4(device_position, 0.0, 1.0); } fn to_device_position(unit_vertex: vec2, bounds: Bounds) -> vec4 { let position = unit_vertex * vec2(bounds.size) + bounds.origin; return to_device_position_impl(position); } fn to_tile_position(unit_vertex: vec2, tile: AtlasTile) -> vec2 { let atlas_size = vec2(textureDimensions(t_sprite, 0)); return (vec2(tile.bounds.origin) + unit_vertex * vec2(tile.bounds.size)) / atlas_size; } fn distance_from_clip_rect_impl(position: vec2, clip_bounds: Bounds) -> vec4 { let tl = position - clip_bounds.origin; let br = clip_bounds.origin + clip_bounds.size - position; return vec4(tl.x, br.x, tl.y, br.y); } fn distance_from_clip_rect(unit_vertex: vec2, bounds: Bounds, clip_bounds: Bounds) -> vec4 { let position = unit_vertex * vec2(bounds.size) + bounds.origin; return distance_from_clip_rect_impl(position, clip_bounds); } fn hsla_to_rgba(hsla: Hsla) -> vec4 { let h = hsla.h * 6.0; // Now, it's an angle but scaled in [0, 6) range let s = hsla.s; let l = hsla.l; let a = hsla.a; let c = (1.0 - abs(2.0 * l - 1.0)) * s; let x = c * (1.0 - abs(h % 2.0 - 1.0)); let m = l - c / 2.0; var color = vec4(m, m, m, a); if (h >= 0.0 && h < 1.0) { color.r += c; color.g += x; } else if (h >= 1.0 && h < 2.0) { color.r += x; color.g += c; } else if (h >= 2.0 && h < 3.0) { color.g += c; color.b += x; } else if (h >= 3.0 && h < 4.0) { color.g += x; color.b += c; } else if (h >= 4.0 && h < 5.0) { color.r += x; color.b += c; } else { color.r += c; color.b += x; } return color; } fn over(below: vec4, above: vec4) -> vec4 { let alpha = above.a + below.a * (1.0 - above.a); let color = (above.rgb * above.a + below.rgb * below.a * (1.0 - above.a)) / alpha; return vec4(color, alpha); } // A standard gaussian function, used for weighting samples fn gaussian(x: f32, sigma: f32) -> f32{ return exp(-(x * x) / (2.0 * sigma * sigma)) / (sqrt(2.0 * M_PI_F) * sigma); } // This approximates the error function, needed for the gaussian integral fn erf(v: vec2) -> vec2 { let s = sign(v); let a = abs(v); let r1 = 1.0 + (0.278393 + (0.230389 + 0.078108 * (a * a)) * a) * a; let r2 = r1 * r1; return s - s / (r2 * r2); } fn blur_along_x(x: f32, y: f32, sigma: f32, corner: f32, half_size: vec2) -> f32 { let delta = min(half_size.y - corner - abs(y), 0.0); let curved = half_size.x - corner + sqrt(max(0.0, corner * corner - delta * delta)); let integral = 0.5 + 0.5 * erf((x + vec2(-curved, curved)) * (sqrt(0.5) / sigma)); return integral.y - integral.x; } fn pick_corner_radius(point: vec2, radii: Corners) -> f32 { if (point.x < 0.0) { if (point.y < 0.0) { return radii.top_left; } else { return radii.bottom_left; } } else { if (point.y < 0.0) { return radii.top_right; } else { return radii.bottom_right; } } } fn quad_sdf(point: vec2, bounds: Bounds, corner_radii: Corners) -> f32 { let half_size = bounds.size / 2.0; let center = bounds.origin + half_size; let center_to_point = point - center; let corner_radius = pick_corner_radius(center_to_point, corner_radii); let rounded_edge_to_point = abs(center_to_point) - half_size + corner_radius; return length(max(vec2(0.0), rounded_edge_to_point)) + min(0.0, max(rounded_edge_to_point.x, rounded_edge_to_point.y)) - corner_radius; } // --- quads --- // struct Quad { view_id: ViewId, layer_id: u32, order: u32, bounds: Bounds, content_mask: Bounds, background: Hsla, border_color: Hsla, corner_radii: Corners, border_widths: Edges, } var b_quads: array; struct QuadVarying { @builtin(position) position: vec4, @location(0) @interpolate(flat) background_color: vec4, @location(1) @interpolate(flat) border_color: vec4, @location(2) @interpolate(flat) quad_id: u32, //TODO: use `clip_distance` once Naga supports it @location(3) clip_distances: vec4, } @vertex fn vs_quad(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> QuadVarying { let unit_vertex = vec2(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u)); let quad = b_quads[instance_id]; var out = QuadVarying(); out.position = to_device_position(unit_vertex, quad.bounds); out.background_color = hsla_to_rgba(quad.background); out.border_color = hsla_to_rgba(quad.border_color); out.quad_id = instance_id; out.clip_distances = distance_from_clip_rect(unit_vertex, quad.bounds, quad.content_mask); return out; } @fragment fn fs_quad(input: QuadVarying) -> @location(0) vec4 { // Alpha clip first, since we don't have `clip_distance`. if (any(input.clip_distances < vec4(0.0))) { return vec4(0.0); } let quad = b_quads[input.quad_id]; let half_size = quad.bounds.size / 2.0; let center = quad.bounds.origin + half_size; let center_to_point = input.position.xy - center; let corner_radius = pick_corner_radius(center_to_point, quad.corner_radii); let rounded_edge_to_point = abs(center_to_point) - half_size + corner_radius; let distance = length(max(vec2(0.0), rounded_edge_to_point)) + min(0.0, max(rounded_edge_to_point.x, rounded_edge_to_point.y)) - corner_radius; let vertical_border = select(quad.border_widths.left, quad.border_widths.right, center_to_point.x > 0.0); let horizontal_border = select(quad.border_widths.top, quad.border_widths.bottom, center_to_point.y > 0.0); let inset_size = half_size - corner_radius - vec2(vertical_border, horizontal_border); let point_to_inset_corner = abs(center_to_point) - inset_size; var border_width = 0.0; if (point_to_inset_corner.x < 0.0 && point_to_inset_corner.y < 0.0) { border_width = 0.0; } else if (point_to_inset_corner.y > point_to_inset_corner.x) { border_width = horizontal_border; } else { border_width = vertical_border; } var color = input.background_color; if (border_width > 0.0) { let inset_distance = distance + border_width; // Blend the border on top of the background and then linearly interpolate // between the two as we slide inside the background. let blended_border = over(input.background_color, input.border_color); color = mix(blended_border, input.background_color, saturate(0.5 - inset_distance)); } return color * vec4(1.0, 1.0, 1.0, saturate(0.5 - distance)); } // --- shadows --- // struct Shadow { view_id: ViewId, layer_id: u32, order: u32, bounds: Bounds, corner_radii: Corners, content_mask: Bounds, color: Hsla, blur_radius: f32, pad: u32, } var b_shadows: array; struct ShadowVarying { @builtin(position) position: vec4, @location(0) @interpolate(flat) color: vec4, @location(1) @interpolate(flat) shadow_id: u32, //TODO: use `clip_distance` once Naga supports it @location(3) clip_distances: vec4, } @vertex fn vs_shadow(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> ShadowVarying { let unit_vertex = vec2(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u)); var shadow = b_shadows[instance_id]; let margin = 3.0 * shadow.blur_radius; // Set the bounds of the shadow and adjust its size based on the shadow's // spread radius to achieve the spreading effect shadow.bounds.origin -= vec2(margin); shadow.bounds.size += 2.0 * vec2(margin); var out = ShadowVarying(); out.position = to_device_position(unit_vertex, shadow.bounds); out.color = hsla_to_rgba(shadow.color); out.shadow_id = instance_id; out.clip_distances = distance_from_clip_rect(unit_vertex, shadow.bounds, shadow.content_mask); return out; } @fragment fn fs_shadow(input: ShadowVarying) -> @location(0) vec4 { // Alpha clip first, since we don't have `clip_distance`. if (any(input.clip_distances < vec4(0.0))) { return vec4(0.0); } let shadow = b_shadows[input.shadow_id]; let half_size = shadow.bounds.size / 2.0; let center = shadow.bounds.origin + half_size; let center_to_point = input.position.xy - center; let corner_radius = pick_corner_radius(center_to_point, shadow.corner_radii); // The signal is only non-zero in a limited range, so don't waste samples let low = center_to_point.y - half_size.y; let high = center_to_point.y + half_size.y; let start = clamp(-3.0 * shadow.blur_radius, low, high); let end = clamp(3.0 * shadow.blur_radius, low, high); // Accumulate samples (we can get away with surprisingly few samples) let step = (end - start) / 4.0; var y = start + step * 0.5; var alpha = 0.0; for (var i = 0; i < 4; i += 1) { let blur = blur_along_x(center_to_point.x, center_to_point.y - y, shadow.blur_radius, corner_radius, half_size); alpha += blur * gaussian(y, shadow.blur_radius) * step; y += step; } return input.color * vec4(1.0, 1.0, 1.0, alpha); } // --- path rasterization --- // struct PathVertex { xy_position: vec2, st_position: vec2, content_mask: Bounds, } var b_path_vertices: array; struct PathRasterizationVarying { @builtin(position) position: vec4, @location(0) st_position: vec2, //TODO: use `clip_distance` once Naga supports it @location(3) clip_distances: vec4, } @vertex fn vs_path_rasterization(@builtin(vertex_index) vertex_id: u32) -> PathRasterizationVarying { let v = b_path_vertices[vertex_id]; var out = PathRasterizationVarying(); out.position = to_device_position_impl(v.xy_position); out.st_position = v.st_position; out.clip_distances = distance_from_clip_rect_impl(v.xy_position, v.content_mask); return out; } @fragment fn fs_path_rasterization(input: PathRasterizationVarying) -> @location(0) f32 { let dx = dpdx(input.st_position); let dy = dpdy(input.st_position); if (any(input.clip_distances < vec4(0.0))) { return 0.0; } let gradient = 2.0 * input.st_position.xx * vec2(dx.x, dy.x) - vec2(dx.y, dy.y); let f = input.st_position.x * input.st_position.x - input.st_position.y; let distance = f / length(gradient); return saturate(0.5 - distance); } // --- paths --- // struct PathSprite { bounds: Bounds, color: Hsla, tile: AtlasTile, } var b_path_sprites: array; struct PathVarying { @builtin(position) position: vec4, @location(0) tile_position: vec2, @location(1) color: vec4, } @vertex fn vs_path(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> PathVarying { let unit_vertex = vec2(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u)); let sprite = b_path_sprites[instance_id]; // Don't apply content mask because it was already accounted for when rasterizing the path. var out = PathVarying(); out.position = to_device_position(unit_vertex, sprite.bounds); out.tile_position = to_tile_position(unit_vertex, sprite.tile); out.color = hsla_to_rgba(sprite.color); return out; } @fragment fn fs_path(input: PathVarying) -> @location(0) vec4 { let sample = textureSample(t_sprite, s_sprite, input.tile_position).r; let mask = 1.0 - abs(1.0 - sample % 2.0); return input.color * mask; } // --- underlines --- // struct Underline { view_id: ViewId, layer_id: u32, order: u32, bounds: Bounds, content_mask: Bounds, color: Hsla, thickness: f32, wavy: u32, } var b_underlines: array; struct UnderlineVarying { @builtin(position) position: vec4, @location(0) @interpolate(flat) color: vec4, @location(1) @interpolate(flat) underline_id: u32, //TODO: use `clip_distance` once Naga supports it @location(3) clip_distances: vec4, } @vertex fn vs_underline(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> UnderlineVarying { let unit_vertex = vec2(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u)); let underline = b_underlines[instance_id]; var out = UnderlineVarying(); out.position = to_device_position(unit_vertex, underline.bounds); out.color = hsla_to_rgba(underline.color); out.underline_id = instance_id; out.clip_distances = distance_from_clip_rect(unit_vertex, underline.bounds, underline.content_mask); return out; } @fragment fn fs_underline(input: UnderlineVarying) -> @location(0) vec4 { // Alpha clip first, since we don't have `clip_distance`. if (any(input.clip_distances < vec4(0.0))) { return vec4(0.0); } let underline = b_underlines[input.underline_id]; if ((underline.wavy & 0xFFu) == 0u) { return vec4(0.0); } let half_thickness = underline.thickness * 0.5; let st = (input.position.xy - underline.bounds.origin) / underline.bounds.size.y - vec2(0.0, 0.5); let frequency = M_PI_F * 3.0 * underline.thickness / 8.0; let amplitude = 1.0 / (2.0 * underline.thickness); let sine = sin(st.x * frequency) * amplitude; let dSine = cos(st.x * frequency) * amplitude * frequency; let distance = (st.y - sine) / sqrt(1.0 + dSine * dSine); let distance_in_pixels = distance * underline.bounds.size.y; let distance_from_top_border = distance_in_pixels - half_thickness; let distance_from_bottom_border = distance_in_pixels + half_thickness; let alpha = saturate(0.5 - max(-distance_from_bottom_border, distance_from_top_border)); return input.color * vec4(1.0, 1.0, 1.0, alpha); } // --- monochrome sprites --- // struct MonochromeSprite { view_id: ViewId, layer_id: u32, order: u32, bounds: Bounds, content_mask: Bounds, color: Hsla, tile: AtlasTile, } var b_mono_sprites: array; struct MonoSpriteVarying { @builtin(position) position: vec4, @location(0) tile_position: vec2, @location(1) @interpolate(flat) color: vec4, @location(3) clip_distances: vec4, } @vertex fn vs_mono_sprite(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> MonoSpriteVarying { let unit_vertex = vec2(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u)); let sprite = b_mono_sprites[instance_id]; var out = MonoSpriteVarying(); out.position = to_device_position(unit_vertex, sprite.bounds); out.tile_position = to_tile_position(unit_vertex, sprite.tile); out.color = hsla_to_rgba(sprite.color); out.clip_distances = distance_from_clip_rect(unit_vertex, sprite.bounds, sprite.content_mask); return out; } @fragment fn fs_mono_sprite(input: MonoSpriteVarying) -> @location(0) vec4 { let sample = textureSample(t_sprite, s_sprite, input.tile_position).r; // Alpha clip after using the derivatives. if (any(input.clip_distances < vec4(0.0))) { return vec4(0.0); } return input.color * vec4(1.0, 1.0, 1.0, sample); } // --- polychrome sprites --- // struct PolychromeSprite { view_id: ViewId, layer_id: u32, order: u32, bounds: Bounds, content_mask: Bounds, corner_radii: Corners, tile: AtlasTile, grayscale: u32, pad: u32, } var b_poly_sprites: array; struct PolySpriteVarying { @builtin(position) position: vec4, @location(0) tile_position: vec2, @location(1) @interpolate(flat) sprite_id: u32, @location(3) clip_distances: vec4, } @vertex fn vs_poly_sprite(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> PolySpriteVarying { let unit_vertex = vec2(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u)); let sprite = b_poly_sprites[instance_id]; var out = PolySpriteVarying(); out.position = to_device_position(unit_vertex, sprite.bounds); out.tile_position = to_tile_position(unit_vertex, sprite.tile); out.sprite_id = instance_id; out.clip_distances = distance_from_clip_rect(unit_vertex, sprite.bounds, sprite.content_mask); return out; } @fragment fn fs_poly_sprite(input: PolySpriteVarying) -> @location(0) vec4 { let sample = textureSample(t_sprite, s_sprite, input.tile_position); // Alpha clip after using the derivatives. if (any(input.clip_distances < vec4(0.0))) { return vec4(0.0); } let sprite = b_poly_sprites[input.sprite_id]; let distance = quad_sdf(input.position.xy, sprite.bounds, sprite.corner_radii); var color = sample; if ((sprite.grayscale & 0xFFu) != 0u) { let grayscale = dot(color.rgb, GRAYSCALE_FACTORS); color = vec4(vec3(grayscale), sample.a); } color.a *= saturate(0.5 - distance); return color;; } // --- surface sprites --- //