1#include <metal_stdlib>
2#include <simd/simd.h>
3
4using namespace metal;
5
6float4 hsla_to_rgba(Hsla hsla);
7float4 to_device_position(float2 unit_vertex, Bounds_ScaledPixels bounds,
8 Bounds_ScaledPixels clip_bounds,
9 constant Size_DevicePixels *viewport_size);
10float2 to_tile_position(float2 unit_vertex, AtlasTile tile,
11 constant Size_DevicePixels *atlas_size);
12float quad_sdf(float2 point, Bounds_ScaledPixels bounds,
13 Corners_ScaledPixels corner_radii);
14float gaussian(float x, float sigma);
15float2 erf(float2 x);
16float blur_along_x(float x, float y, float sigma, float corner,
17 float2 half_size);
18
19struct QuadVertexOutput {
20 float4 position [[position]];
21 float4 background_color [[flat]];
22 float4 border_color [[flat]];
23 uint quad_id [[flat]];
24};
25
26vertex QuadVertexOutput quad_vertex(uint unit_vertex_id [[vertex_id]],
27 uint quad_id [[instance_id]],
28 constant float2 *unit_vertices
29 [[buffer(QuadInputIndex_Vertices)]],
30 constant Quad *quads
31 [[buffer(QuadInputIndex_Quads)]],
32 constant Size_DevicePixels *viewport_size
33 [[buffer(QuadInputIndex_ViewportSize)]]) {
34 float2 unit_vertex = unit_vertices[unit_vertex_id];
35 Quad quad = quads[quad_id];
36 float4 device_position = to_device_position(
37 unit_vertex, quad.bounds, quad.content_mask.bounds, viewport_size);
38 float4 background_color = hsla_to_rgba(quad.background);
39 float4 border_color = hsla_to_rgba(quad.border_color);
40 return QuadVertexOutput{device_position, background_color, border_color,
41 quad_id};
42}
43
44fragment float4 quad_fragment(QuadVertexOutput input [[stage_in]],
45 constant Quad *quads
46 [[buffer(QuadInputIndex_Quads)]]) {
47 Quad quad = quads[input.quad_id];
48 float2 half_size =
49 float2(quad.bounds.size.width, quad.bounds.size.height) / 2.;
50 float2 center =
51 float2(quad.bounds.origin.x, quad.bounds.origin.y) + half_size;
52 float2 center_to_point = input.position.xy - center;
53 float corner_radius;
54 if (center_to_point.x < 0.) {
55 if (center_to_point.y < 0.) {
56 corner_radius = quad.corner_radii.top_left;
57 } else {
58 corner_radius = quad.corner_radii.bottom_left;
59 }
60 } else {
61 if (center_to_point.y < 0.) {
62 corner_radius = quad.corner_radii.top_right;
63 } else {
64 corner_radius = quad.corner_radii.bottom_right;
65 }
66 }
67
68 float2 rounded_edge_to_point =
69 fabs(center_to_point) - half_size + corner_radius;
70 float distance =
71 length(max(0., rounded_edge_to_point)) +
72 min(0., max(rounded_edge_to_point.x, rounded_edge_to_point.y)) -
73 corner_radius;
74
75 float vertical_border = center_to_point.x <= 0. ? quad.border_widths.left
76 : quad.border_widths.right;
77 float horizontal_border = center_to_point.y <= 0. ? quad.border_widths.top
78 : quad.border_widths.bottom;
79 float2 inset_size =
80 half_size - corner_radius - float2(vertical_border, horizontal_border);
81 float2 point_to_inset_corner = fabs(center_to_point) - inset_size;
82 float border_width;
83 if (point_to_inset_corner.x < 0. && point_to_inset_corner.y < 0.) {
84 border_width = 0.;
85 } else if (point_to_inset_corner.y > point_to_inset_corner.x) {
86 border_width = horizontal_border;
87 } else {
88 border_width = vertical_border;
89 }
90
91 float4 color;
92 if (border_width == 0.) {
93 color = input.background_color;
94 } else {
95 float inset_distance = distance + border_width;
96
97 // Decrease border's opacity as we move inside the background.
98 input.border_color.a *= 1. - saturate(0.5 - inset_distance);
99
100 // Alpha-blend the border and the background.
101 float output_alpha = input.border_color.a +
102 input.background_color.a * (1. - input.border_color.a);
103 float3 premultiplied_border_rgb =
104 input.border_color.rgb * input.border_color.a;
105 float3 premultiplied_background_rgb =
106 input.background_color.rgb * input.background_color.a;
107 float3 premultiplied_output_rgb =
108 premultiplied_border_rgb +
109 premultiplied_background_rgb * (1. - input.border_color.a);
110 color = float4(premultiplied_output_rgb, output_alpha);
111 }
112
113 return color * float4(1., 1., 1., saturate(0.5 - distance));
114}
115
116struct ShadowVertexOutput {
117 float4 position [[position]];
118 float4 color [[flat]];
119 uint shadow_id [[flat]];
120};
121
122vertex ShadowVertexOutput shadow_vertex(
123 uint unit_vertex_id [[vertex_id]], uint shadow_id [[instance_id]],
124 constant float2 *unit_vertices [[buffer(ShadowInputIndex_Vertices)]],
125 constant Shadow *shadows [[buffer(ShadowInputIndex_Shadows)]],
126 constant Size_DevicePixels *viewport_size
127 [[buffer(ShadowInputIndex_ViewportSize)]]) {
128 float2 unit_vertex = unit_vertices[unit_vertex_id];
129 Shadow shadow = shadows[shadow_id];
130
131 float margin = 3. * shadow.blur_radius;
132 // Set the bounds of the shadow and adjust its size based on the shadow's
133 // spread radius to achieve the spreading effect
134 Bounds_ScaledPixels bounds = shadow.bounds;
135 bounds.origin.x -= margin;
136 bounds.origin.y -= margin;
137 bounds.size.width += 2. * margin;
138 bounds.size.height += 2. * margin;
139
140 float4 device_position = to_device_position(
141 unit_vertex, bounds, shadow.content_mask.bounds, viewport_size);
142 float4 color = hsla_to_rgba(shadow.color);
143
144 return ShadowVertexOutput{
145 device_position,
146 color,
147 shadow_id,
148 };
149}
150
151fragment float4 shadow_fragment(ShadowVertexOutput input [[stage_in]],
152 constant Shadow *shadows
153 [[buffer(ShadowInputIndex_Shadows)]]) {
154 Shadow shadow = shadows[input.shadow_id];
155
156 float2 origin = float2(shadow.bounds.origin.x, shadow.bounds.origin.y);
157 float2 size = float2(shadow.bounds.size.width, shadow.bounds.size.height);
158 float2 half_size = size / 2.;
159 float2 center = origin + half_size;
160 float2 point = input.position.xy - center;
161 float corner_radius;
162 if (point.x < 0.) {
163 if (point.y < 0.) {
164 corner_radius = shadow.corner_radii.top_left;
165 } else {
166 corner_radius = shadow.corner_radii.bottom_left;
167 }
168 } else {
169 if (point.y < 0.) {
170 corner_radius = shadow.corner_radii.top_right;
171 } else {
172 corner_radius = shadow.corner_radii.bottom_right;
173 }
174 }
175
176 // The signal is only non-zero in a limited range, so don't waste samples
177 float low = point.y - half_size.y;
178 float high = point.y + half_size.y;
179 float start = clamp(-3. * shadow.blur_radius, low, high);
180 float end = clamp(3. * shadow.blur_radius, low, high);
181
182 // Accumulate samples (we can get away with surprisingly few samples)
183 float step = (end - start) / 4.;
184 float y = start + step * 0.5;
185 float alpha = 0.;
186 for (int i = 0; i < 4; i++) {
187 alpha += blur_along_x(point.x, point.y - y, shadow.blur_radius,
188 corner_radius, half_size) *
189 gaussian(y, shadow.blur_radius) * step;
190 y += step;
191 }
192
193 return input.color * float4(1., 1., 1., alpha);
194}
195
196struct UnderlineVertexOutput {
197 float4 position [[position]];
198 float4 color [[flat]];
199 uint underline_id [[flat]];
200};
201
202vertex UnderlineVertexOutput underline_vertex(
203 uint unit_vertex_id [[vertex_id]], uint underline_id [[instance_id]],
204 constant float2 *unit_vertices [[buffer(UnderlineInputIndex_Vertices)]],
205 constant Underline *underlines [[buffer(UnderlineInputIndex_Underlines)]],
206 constant Size_DevicePixels *viewport_size
207 [[buffer(ShadowInputIndex_ViewportSize)]]) {
208 float2 unit_vertex = unit_vertices[unit_vertex_id];
209 Underline underline = underlines[underline_id];
210 float4 device_position =
211 to_device_position(unit_vertex, underline.bounds,
212 underline.content_mask.bounds, viewport_size);
213 float4 color = hsla_to_rgba(underline.color);
214 return UnderlineVertexOutput{device_position, color, underline_id};
215}
216
217fragment float4 underline_fragment(UnderlineVertexOutput input [[stage_in]],
218 constant Underline *underlines
219 [[buffer(UnderlineInputIndex_Underlines)]]) {
220 Underline underline = underlines[input.underline_id];
221 if (underline.wavy) {
222 float half_thickness = underline.thickness * 0.5;
223 float2 origin =
224 float2(underline.bounds.origin.x, underline.bounds.origin.y);
225 float2 st = ((input.position.xy - origin) / underline.bounds.size.height) -
226 float2(0., 0.5);
227 float frequency = (M_PI_F * (3. * underline.thickness)) / 8.;
228 float amplitude = 1. / (2. * underline.thickness);
229 float sine = sin(st.x * frequency) * amplitude;
230 float dSine = cos(st.x * frequency) * amplitude * frequency;
231 float distance = (st.y - sine) / sqrt(1. + dSine * dSine);
232 float distance_in_pixels = distance * underline.bounds.size.height;
233 float distance_from_top_border = distance_in_pixels - half_thickness;
234 float distance_from_bottom_border = distance_in_pixels + half_thickness;
235 float alpha = saturate(
236 0.5 - max(-distance_from_bottom_border, distance_from_top_border));
237 return input.color * float4(1., 1., 1., alpha);
238 } else {
239 return input.color;
240 }
241}
242
243struct MonochromeSpriteVertexOutput {
244 float4 position [[position]];
245 float2 tile_position;
246 float4 color [[flat]];
247 uint sprite_id [[flat]];
248};
249
250vertex MonochromeSpriteVertexOutput monochrome_sprite_vertex(
251 uint unit_vertex_id [[vertex_id]], uint sprite_id [[instance_id]],
252 constant float2 *unit_vertices [[buffer(SpriteInputIndex_Vertices)]],
253 constant MonochromeSprite *sprites [[buffer(SpriteInputIndex_Sprites)]],
254 constant Size_DevicePixels *viewport_size
255 [[buffer(SpriteInputIndex_ViewportSize)]],
256 constant Size_DevicePixels *atlas_size
257 [[buffer(SpriteInputIndex_AtlasTextureSize)]]) {
258
259 float2 unit_vertex = unit_vertices[unit_vertex_id];
260 MonochromeSprite sprite = sprites[sprite_id];
261 // Don't apply content mask at the vertex level because we don't have time
262 // to make sampling from the texture match the mask.
263 float4 device_position = to_device_position(unit_vertex, sprite.bounds,
264 sprite.bounds, viewport_size);
265 float2 tile_position = to_tile_position(unit_vertex, sprite.tile, atlas_size);
266 float4 color = hsla_to_rgba(sprite.color);
267 return MonochromeSpriteVertexOutput{device_position, tile_position, color,
268 sprite_id};
269}
270
271fragment float4 monochrome_sprite_fragment(
272 MonochromeSpriteVertexOutput input [[stage_in]],
273 constant MonochromeSprite *sprites [[buffer(SpriteInputIndex_Sprites)]],
274 texture2d<float> atlas_texture [[texture(SpriteInputIndex_AtlasTexture)]]) {
275 MonochromeSprite sprite = sprites[input.sprite_id];
276 constexpr sampler atlas_texture_sampler(mag_filter::linear,
277 min_filter::linear);
278 float4 sample =
279 atlas_texture.sample(atlas_texture_sampler, input.tile_position);
280 float clip_distance = quad_sdf(input.position.xy, sprite.content_mask.bounds,
281 Corners_ScaledPixels{0., 0., 0., 0.});
282 float4 color = input.color;
283 color.a *= sample.a * saturate(0.5 - clip_distance);
284 return color;
285}
286
287struct PolychromeSpriteVertexOutput {
288 float4 position [[position]];
289 float2 tile_position;
290 uint sprite_id [[flat]];
291};
292
293vertex PolychromeSpriteVertexOutput polychrome_sprite_vertex(
294 uint unit_vertex_id [[vertex_id]], uint sprite_id [[instance_id]],
295 constant float2 *unit_vertices [[buffer(SpriteInputIndex_Vertices)]],
296 constant PolychromeSprite *sprites [[buffer(SpriteInputIndex_Sprites)]],
297 constant Size_DevicePixels *viewport_size
298 [[buffer(SpriteInputIndex_ViewportSize)]],
299 constant Size_DevicePixels *atlas_size
300 [[buffer(SpriteInputIndex_AtlasTextureSize)]]) {
301
302 float2 unit_vertex = unit_vertices[unit_vertex_id];
303 PolychromeSprite sprite = sprites[sprite_id];
304 // Don't apply content mask at the vertex level because we don't have time
305 // to make sampling from the texture match the mask.
306 float4 device_position = to_device_position(unit_vertex, sprite.bounds,
307 sprite.bounds, viewport_size);
308 float2 tile_position = to_tile_position(unit_vertex, sprite.tile, atlas_size);
309 return PolychromeSpriteVertexOutput{device_position, tile_position,
310 sprite_id};
311}
312
313fragment float4 polychrome_sprite_fragment(
314 PolychromeSpriteVertexOutput input [[stage_in]],
315 constant PolychromeSprite *sprites [[buffer(SpriteInputIndex_Sprites)]],
316 texture2d<float> atlas_texture [[texture(SpriteInputIndex_AtlasTexture)]]) {
317 PolychromeSprite sprite = sprites[input.sprite_id];
318 constexpr sampler atlas_texture_sampler(mag_filter::linear,
319 min_filter::linear);
320 float4 sample =
321 atlas_texture.sample(atlas_texture_sampler, input.tile_position);
322 float quad_distance =
323 quad_sdf(input.position.xy, sprite.bounds, sprite.corner_radii);
324 float clip_distance = quad_sdf(input.position.xy, sprite.content_mask.bounds,
325 Corners_ScaledPixels{0., 0., 0., 0.});
326 float distance = max(quad_distance, clip_distance);
327
328 float4 color = sample;
329 if (sprite.grayscale) {
330 float grayscale = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
331 color.r = grayscale;
332 color.g = grayscale;
333 color.b = grayscale;
334 }
335 color.a *= saturate(0.5 - distance);
336 return color;
337}
338
339struct PathRasterizationVertexOutput {
340 float4 position [[position]];
341 float2 st_position;
342 float clip_rect_distance [[clip_distance]][4];
343};
344
345struct PathRasterizationFragmentInput {
346 float4 position [[position]];
347 float2 st_position;
348};
349
350vertex PathRasterizationVertexOutput path_rasterization_vertex(
351 uint vertex_id [[vertex_id]],
352 constant PathVertex_ScaledPixels *vertices
353 [[buffer(PathRasterizationInputIndex_Vertices)]],
354 constant Size_DevicePixels *atlas_size
355 [[buffer(PathRasterizationInputIndex_AtlasTextureSize)]]) {
356 PathVertex_ScaledPixels v = vertices[vertex_id];
357 float2 vertex_position = float2(v.xy_position.x, v.xy_position.y);
358 float2 viewport_size = float2(atlas_size->width, atlas_size->height);
359 return PathRasterizationVertexOutput{
360 float4(vertex_position / viewport_size * float2(2., -2.) +
361 float2(-1., 1.),
362 0., 1.),
363 float2(v.st_position.x, v.st_position.y),
364 {v.xy_position.x - v.content_mask.bounds.origin.x,
365 v.content_mask.bounds.origin.x + v.content_mask.bounds.size.width -
366 v.xy_position.x,
367 v.xy_position.y - v.content_mask.bounds.origin.y,
368 v.content_mask.bounds.origin.y + v.content_mask.bounds.size.height -
369 v.xy_position.y}};
370}
371
372fragment float4 path_rasterization_fragment(PathRasterizationFragmentInput input
373 [[stage_in]]) {
374 float2 dx = dfdx(input.st_position);
375 float2 dy = dfdy(input.st_position);
376 float2 gradient = float2((2. * input.st_position.x) * dx.x - dx.y,
377 (2. * input.st_position.x) * dy.x - dy.y);
378 float f = (input.st_position.x * input.st_position.x) - input.st_position.y;
379 float distance = f / length(gradient);
380 float alpha = saturate(0.5 - distance);
381 return float4(alpha, 0., 0., 1.);
382}
383
384struct PathSpriteVertexOutput {
385 float4 position [[position]];
386 float2 tile_position;
387 float4 color [[flat]];
388 uint sprite_id [[flat]];
389};
390
391vertex PathSpriteVertexOutput path_sprite_vertex(
392 uint unit_vertex_id [[vertex_id]], uint sprite_id [[instance_id]],
393 constant float2 *unit_vertices [[buffer(SpriteInputIndex_Vertices)]],
394 constant PathSprite *sprites [[buffer(SpriteInputIndex_Sprites)]],
395 constant Size_DevicePixels *viewport_size
396 [[buffer(SpriteInputIndex_ViewportSize)]],
397 constant Size_DevicePixels *atlas_size
398 [[buffer(SpriteInputIndex_AtlasTextureSize)]]) {
399
400 float2 unit_vertex = unit_vertices[unit_vertex_id];
401 PathSprite sprite = sprites[sprite_id];
402 // Don't apply content mask because it was already accounted for when
403 // rasterizing the path.
404 float4 device_position = to_device_position(unit_vertex, sprite.bounds,
405 sprite.bounds, viewport_size);
406 float2 tile_position = to_tile_position(unit_vertex, sprite.tile, atlas_size);
407 float4 color = hsla_to_rgba(sprite.color);
408 return PathSpriteVertexOutput{device_position, tile_position, color,
409 sprite_id};
410}
411
412fragment float4 path_sprite_fragment(
413 PathSpriteVertexOutput input [[stage_in]],
414 constant PathSprite *sprites [[buffer(SpriteInputIndex_Sprites)]],
415 texture2d<float> atlas_texture [[texture(SpriteInputIndex_AtlasTexture)]]) {
416 PathSprite sprite = sprites[input.sprite_id];
417 constexpr sampler atlas_texture_sampler(mag_filter::linear,
418 min_filter::linear);
419 float4 sample =
420 atlas_texture.sample(atlas_texture_sampler, input.tile_position);
421 float mask = 1. - abs(1. - fmod(sample.r, 2.));
422 float4 color = input.color;
423 color.a *= mask;
424 return color;
425}
426
427float4 hsla_to_rgba(Hsla hsla) {
428 float h = hsla.h * 6.0; // Now, it's an angle but scaled in [0, 6) range
429 float s = hsla.s;
430 float l = hsla.l;
431 float a = hsla.a;
432
433 float c = (1.0 - fabs(2.0 * l - 1.0)) * s;
434 float x = c * (1.0 - fabs(fmod(h, 2.0) - 1.0));
435 float m = l - c / 2.0;
436
437 float r = 0.0;
438 float g = 0.0;
439 float b = 0.0;
440
441 if (h >= 0.0 && h < 1.0) {
442 r = c;
443 g = x;
444 b = 0.0;
445 } else if (h >= 1.0 && h < 2.0) {
446 r = x;
447 g = c;
448 b = 0.0;
449 } else if (h >= 2.0 && h < 3.0) {
450 r = 0.0;
451 g = c;
452 b = x;
453 } else if (h >= 3.0 && h < 4.0) {
454 r = 0.0;
455 g = x;
456 b = c;
457 } else if (h >= 4.0 && h < 5.0) {
458 r = x;
459 g = 0.0;
460 b = c;
461 } else {
462 r = c;
463 g = 0.0;
464 b = x;
465 }
466
467 float4 rgba;
468 rgba.x = (r + m);
469 rgba.y = (g + m);
470 rgba.z = (b + m);
471 rgba.w = a;
472 return rgba;
473}
474
475float4 to_device_position(float2 unit_vertex, Bounds_ScaledPixels bounds,
476 Bounds_ScaledPixels clip_bounds,
477 constant Size_DevicePixels *input_viewport_size) {
478 float2 position =
479 unit_vertex * float2(bounds.size.width, bounds.size.height) +
480 float2(bounds.origin.x, bounds.origin.y);
481 position.x = max(clip_bounds.origin.x, position.x);
482 position.x = min(clip_bounds.origin.x + clip_bounds.size.width, position.x);
483 position.y = max(clip_bounds.origin.y, position.y);
484 position.y = min(clip_bounds.origin.y + clip_bounds.size.height, position.y);
485
486 float2 viewport_size = float2((float)input_viewport_size->width,
487 (float)input_viewport_size->height);
488 float2 device_position =
489 position / viewport_size * float2(2., -2.) + float2(-1., 1.);
490 return float4(device_position, 0., 1.);
491}
492
493float2 to_tile_position(float2 unit_vertex, AtlasTile tile,
494 constant Size_DevicePixels *atlas_size) {
495 float2 tile_origin = float2(tile.bounds.origin.x, tile.bounds.origin.y);
496 float2 tile_size = float2(tile.bounds.size.width, tile.bounds.size.height);
497 return (tile_origin + unit_vertex * tile_size) /
498 float2((float)atlas_size->width, (float)atlas_size->height);
499}
500
501float quad_sdf(float2 point, Bounds_ScaledPixels bounds,
502 Corners_ScaledPixels corner_radii) {
503 float2 half_size = float2(bounds.size.width, bounds.size.height) / 2.;
504 float2 center = float2(bounds.origin.x, bounds.origin.y) + half_size;
505 float2 center_to_point = point - center;
506 float corner_radius;
507 if (center_to_point.x < 0.) {
508 if (center_to_point.y < 0.) {
509 corner_radius = corner_radii.top_left;
510 } else {
511 corner_radius = corner_radii.bottom_left;
512 }
513 } else {
514 if (center_to_point.y < 0.) {
515 corner_radius = corner_radii.top_right;
516 } else {
517 corner_radius = corner_radii.bottom_right;
518 }
519 }
520
521 float2 rounded_edge_to_point =
522 abs(center_to_point) - half_size + corner_radius;
523 float distance =
524 length(max(0., rounded_edge_to_point)) +
525 min(0., max(rounded_edge_to_point.x, rounded_edge_to_point.y)) -
526 corner_radius;
527
528 return distance;
529}
530
531// A standard gaussian function, used for weighting samples
532float gaussian(float x, float sigma) {
533 return exp(-(x * x) / (2. * sigma * sigma)) / (sqrt(2. * M_PI_F) * sigma);
534}
535
536// This approximates the error function, needed for the gaussian integral
537float2 erf(float2 x) {
538 float2 s = sign(x);
539 float2 a = abs(x);
540 x = 1. + (0.278393 + (0.230389 + 0.078108 * (a * a)) * a) * a;
541 x *= x;
542 return s - s / (x * x);
543}
544
545float blur_along_x(float x, float y, float sigma, float corner,
546 float2 half_size) {
547 float delta = min(half_size.y - corner - abs(y), 0.);
548 float curved =
549 half_size.x - corner + sqrt(max(0., corner * corner - delta * delta));
550 float2 integral =
551 0.5 + 0.5 * erf((x + float2(-curved, curved)) * (sqrt(0.5) / sigma));
552 return integral.y - integral.x;
553}