1struct GlobalParams {
2 viewport_size: vec2<f32>,
3 premultiplied_alpha: u32,
4 pad: u32,
5}
6
7var<uniform> globals: GlobalParams;
8var t_sprite: texture_2d<f32>;
9var s_sprite: sampler;
10
11const M_PI_F: f32 = 3.1415926;
12const GRAYSCALE_FACTORS: vec3<f32> = vec3<f32>(0.2126, 0.7152, 0.0722);
13
14struct Bounds {
15 origin: vec2<f32>,
16 size: vec2<f32>,
17}
18
19struct Corners {
20 top_left: f32,
21 top_right: f32,
22 bottom_right: f32,
23 bottom_left: f32,
24}
25
26struct Edges {
27 top: f32,
28 right: f32,
29 bottom: f32,
30 left: f32,
31}
32
33struct Hsla {
34 h: f32,
35 s: f32,
36 l: f32,
37 a: f32,
38}
39
40struct LinearColorStop {
41 color: Hsla,
42 percentage: f32,
43}
44
45struct Background {
46 // 0u is Solid
47 // 1u is LinearGradient
48 tag: u32,
49 // 0u is sRGB linear color
50 // 1u is Oklab color
51 color_space: u32,
52 solid: Hsla,
53 angle: f32,
54 colors: array<LinearColorStop, 2>,
55 pad: u32,
56}
57
58struct AtlasTextureId {
59 index: u32,
60 kind: u32,
61}
62
63struct AtlasBounds {
64 origin: vec2<i32>,
65 size: vec2<i32>,
66}
67
68struct AtlasTile {
69 texture_id: AtlasTextureId,
70 tile_id: u32,
71 padding: u32,
72 bounds: AtlasBounds,
73}
74
75struct TransformationMatrix {
76 rotation_scale: mat2x2<f32>,
77 translation: vec2<f32>,
78}
79
80fn to_device_position_impl(position: vec2<f32>) -> vec4<f32> {
81 let device_position = position / globals.viewport_size * vec2<f32>(2.0, -2.0) + vec2<f32>(-1.0, 1.0);
82 return vec4<f32>(device_position, 0.0, 1.0);
83}
84
85fn to_device_position(unit_vertex: vec2<f32>, bounds: Bounds) -> vec4<f32> {
86 let position = unit_vertex * vec2<f32>(bounds.size) + bounds.origin;
87 return to_device_position_impl(position);
88}
89
90fn to_device_position_transformed(unit_vertex: vec2<f32>, bounds: Bounds, transform: TransformationMatrix) -> vec4<f32> {
91 let position = unit_vertex * vec2<f32>(bounds.size) + bounds.origin;
92 //Note: Rust side stores it as row-major, so transposing here
93 let transformed = transpose(transform.rotation_scale) * position + transform.translation;
94 return to_device_position_impl(transformed);
95}
96
97fn to_tile_position(unit_vertex: vec2<f32>, tile: AtlasTile) -> vec2<f32> {
98 let atlas_size = vec2<f32>(textureDimensions(t_sprite, 0));
99 return (vec2<f32>(tile.bounds.origin) + unit_vertex * vec2<f32>(tile.bounds.size)) / atlas_size;
100}
101
102fn distance_from_clip_rect_impl(position: vec2<f32>, clip_bounds: Bounds) -> vec4<f32> {
103 let tl = position - clip_bounds.origin;
104 let br = clip_bounds.origin + clip_bounds.size - position;
105 return vec4<f32>(tl.x, br.x, tl.y, br.y);
106}
107
108fn distance_from_clip_rect(unit_vertex: vec2<f32>, bounds: Bounds, clip_bounds: Bounds) -> vec4<f32> {
109 let position = unit_vertex * vec2<f32>(bounds.size) + bounds.origin;
110 return distance_from_clip_rect_impl(position, clip_bounds);
111}
112
113// https://gamedev.stackexchange.com/questions/92015/optimized-linear-to-srgb-glsl
114fn srgb_to_linear(srgb: vec3<f32>) -> vec3<f32> {
115 let cutoff = srgb < vec3<f32>(0.04045);
116 let higher = pow((srgb + vec3<f32>(0.055)) / vec3<f32>(1.055), vec3<f32>(2.4));
117 let lower = srgb / vec3<f32>(12.92);
118 return select(higher, lower, cutoff);
119}
120
121fn linear_to_srgb(linear: vec3<f32>) -> vec3<f32> {
122 let cutoff = linear < vec3<f32>(0.0031308);
123 let higher = vec3<f32>(1.055) * pow(linear, vec3<f32>(1.0 / 2.4)) - vec3<f32>(0.055);
124 let lower = linear * vec3<f32>(12.92);
125 return select(higher, lower, cutoff);
126}
127
128/// Convert a linear color to sRGBA space.
129fn linear_to_srgba(color: vec4<f32>) -> vec4<f32> {
130 return vec4<f32>(linear_to_srgb(color.rgb), color.a);
131}
132
133/// Convert a sRGBA color to linear space.
134fn srgba_to_linear(color: vec4<f32>) -> vec4<f32> {
135 return vec4<f32>(srgb_to_linear(color.rgb), color.a);
136}
137
138/// Hsla to linear RGBA conversion.
139fn hsla_to_rgba(hsla: Hsla) -> vec4<f32> {
140 let h = hsla.h * 6.0; // Now, it's an angle but scaled in [0, 6) range
141 let s = hsla.s;
142 let l = hsla.l;
143 let a = hsla.a;
144
145 let c = (1.0 - abs(2.0 * l - 1.0)) * s;
146 let x = c * (1.0 - abs(h % 2.0 - 1.0));
147 let m = l - c / 2.0;
148 var color = vec3<f32>(m);
149
150 if (h >= 0.0 && h < 1.0) {
151 color.r += c;
152 color.g += x;
153 } else if (h >= 1.0 && h < 2.0) {
154 color.r += x;
155 color.g += c;
156 } else if (h >= 2.0 && h < 3.0) {
157 color.g += c;
158 color.b += x;
159 } else if (h >= 3.0 && h < 4.0) {
160 color.g += x;
161 color.b += c;
162 } else if (h >= 4.0 && h < 5.0) {
163 color.r += x;
164 color.b += c;
165 } else {
166 color.r += c;
167 color.b += x;
168 }
169
170 // Input colors are assumed to be in sRGB space,
171 // but blending and rendering needs to happen in linear space.
172 // The output will be converted to sRGB by either the target
173 // texture format or the swapchain color space.
174 let linear = srgb_to_linear(color);
175 return vec4<f32>(linear, a);
176}
177
178/// Convert a linear sRGB to Oklab space.
179/// Reference: https://bottosson.github.io/posts/oklab/#converting-from-linear-srgb-to-oklab
180fn linear_srgb_to_oklab(color: vec4<f32>) -> vec4<f32> {
181 let l = 0.4122214708 * color.r + 0.5363325363 * color.g + 0.0514459929 * color.b;
182 let m = 0.2119034982 * color.r + 0.6806995451 * color.g + 0.1073969566 * color.b;
183 let s = 0.0883024619 * color.r + 0.2817188376 * color.g + 0.6299787005 * color.b;
184
185 let l_ = pow(l, 1.0 / 3.0);
186 let m_ = pow(m, 1.0 / 3.0);
187 let s_ = pow(s, 1.0 / 3.0);
188
189 return vec4<f32>(
190 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_,
191 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_,
192 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_,
193 color.a
194 );
195}
196
197/// Convert an Oklab color to linear sRGB space.
198fn oklab_to_linear_srgb(color: vec4<f32>) -> vec4<f32> {
199 let l_ = color.r + 0.3963377774 * color.g + 0.2158037573 * color.b;
200 let m_ = color.r - 0.1055613458 * color.g - 0.0638541728 * color.b;
201 let s_ = color.r - 0.0894841775 * color.g - 1.2914855480 * color.b;
202
203 let l = l_ * l_ * l_;
204 let m = m_ * m_ * m_;
205 let s = s_ * s_ * s_;
206
207 return vec4<f32>(
208 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
209 -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
210 -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s,
211 color.a
212 );
213}
214
215fn over(below: vec4<f32>, above: vec4<f32>) -> vec4<f32> {
216 let alpha = above.a + below.a * (1.0 - above.a);
217 let color = (above.rgb * above.a + below.rgb * below.a * (1.0 - above.a)) / alpha;
218 return vec4<f32>(color, alpha);
219}
220
221// A standard gaussian function, used for weighting samples
222fn gaussian(x: f32, sigma: f32) -> f32{
223 return exp(-(x * x) / (2.0 * sigma * sigma)) / (sqrt(2.0 * M_PI_F) * sigma);
224}
225
226// This approximates the error function, needed for the gaussian integral
227fn erf(v: vec2<f32>) -> vec2<f32> {
228 let s = sign(v);
229 let a = abs(v);
230 let r1 = 1.0 + (0.278393 + (0.230389 + (0.000972 + 0.078108 * a) * a) * a) * a;
231 let r2 = r1 * r1;
232 return s - s / (r2 * r2);
233}
234
235fn blur_along_x(x: f32, y: f32, sigma: f32, corner: f32, half_size: vec2<f32>) -> f32 {
236 let delta = min(half_size.y - corner - abs(y), 0.0);
237 let curved = half_size.x - corner + sqrt(max(0.0, corner * corner - delta * delta));
238 let integral = 0.5 + 0.5 * erf((x + vec2<f32>(-curved, curved)) * (sqrt(0.5) / sigma));
239 return integral.y - integral.x;
240}
241
242fn pick_corner_radius(point: vec2<f32>, radii: Corners) -> f32 {
243 if (point.x < 0.0) {
244 if (point.y < 0.0) {
245 return radii.top_left;
246 } else {
247 return radii.bottom_left;
248 }
249 } else {
250 if (point.y < 0.0) {
251 return radii.top_right;
252 } else {
253 return radii.bottom_right;
254 }
255 }
256}
257
258fn quad_sdf(point: vec2<f32>, bounds: Bounds, corner_radii: Corners) -> f32 {
259 let half_size = bounds.size / 2.0;
260 let center = bounds.origin + half_size;
261 let center_to_point = point - center;
262 let corner_radius = pick_corner_radius(center_to_point, corner_radii);
263 let rounded_edge_to_point = abs(center_to_point) - half_size + corner_radius;
264 return length(max(vec2<f32>(0.0), rounded_edge_to_point)) +
265 min(0.0, max(rounded_edge_to_point.x, rounded_edge_to_point.y)) -
266 corner_radius;
267}
268
269// Abstract away the final color transformation based on the
270// target alpha compositing mode.
271fn blend_color(color: vec4<f32>, alpha_factor: f32) -> vec4<f32> {
272 let alpha = color.a * alpha_factor;
273 let multiplier = select(1.0, alpha, globals.premultiplied_alpha != 0u);
274 return vec4<f32>(color.rgb * multiplier, alpha);
275}
276
277
278struct GradientColor {
279 solid: vec4<f32>,
280 color0: vec4<f32>,
281 color1: vec4<f32>,
282}
283
284fn prepare_gradient_color(tag: u32, color_space: u32,
285 solid: Hsla, colors: array<LinearColorStop, 2>) -> GradientColor {
286 var result = GradientColor();
287
288 if (tag == 0u) {
289 result.solid = hsla_to_rgba(solid);
290 } else if (tag == 1u) {
291 // The hsla_to_rgba is returns a linear sRGB color
292 result.color0 = hsla_to_rgba(colors[0].color);
293 result.color1 = hsla_to_rgba(colors[1].color);
294
295 // Prepare color space in vertex for avoid conversion
296 // in fragment shader for performance reasons
297 if (color_space == 0u) {
298 // sRGB
299 result.color0 = linear_to_srgba(result.color0);
300 result.color1 = linear_to_srgba(result.color1);
301 } else if (color_space == 1u) {
302 // Oklab
303 result.color0 = linear_srgb_to_oklab(result.color0);
304 result.color1 = linear_srgb_to_oklab(result.color1);
305 }
306 }
307
308 return result;
309}
310
311fn gradient_color(background: Background, position: vec2<f32>, bounds: Bounds,
312 sold_color: vec4<f32>, color0: vec4<f32>, color1: vec4<f32>) -> vec4<f32> {
313 var background_color = vec4<f32>(0.0);
314
315 switch (background.tag) {
316 default: {
317 return sold_color;
318 }
319 case 1u: {
320 // Linear gradient background.
321 // -90 degrees to match the CSS gradient angle.
322 let radians = (background.angle % 360.0 - 90.0) * M_PI_F / 180.0;
323 var direction = vec2<f32>(cos(radians), sin(radians));
324 let stop0_percentage = background.colors[0].percentage;
325 let stop1_percentage = background.colors[1].percentage;
326
327 // Expand the short side to be the same as the long side
328 if (bounds.size.x > bounds.size.y) {
329 direction.y *= bounds.size.y / bounds.size.x;
330 } else {
331 direction.x *= bounds.size.x / bounds.size.y;
332 }
333
334 // Get the t value for the linear gradient with the color stop percentages.
335 let half_size = bounds.size / 2.0;
336 let center = bounds.origin + half_size;
337 let center_to_point = position - center;
338 var t = dot(center_to_point, direction) / length(direction);
339 // Check the direct to determine the use x or y
340 if (abs(direction.x) > abs(direction.y)) {
341 t = (t + half_size.x) / bounds.size.x;
342 } else {
343 t = (t + half_size.y) / bounds.size.y;
344 }
345
346 // Adjust t based on the stop percentages
347 t = (t - stop0_percentage) / (stop1_percentage - stop0_percentage);
348 t = clamp(t, 0.0, 1.0);
349
350 switch (background.color_space) {
351 default: {
352 background_color = srgba_to_linear(mix(color0, color1, t));
353 }
354 case 1u: {
355 let oklab_color = mix(color0, color1, t);
356 background_color = oklab_to_linear_srgb(oklab_color);
357 }
358 }
359 }
360 }
361
362 return background_color;
363}
364
365// --- quads --- //
366
367struct Quad {
368 order: u32,
369 pad: u32,
370 bounds: Bounds,
371 content_mask: Bounds,
372 background: Background,
373 border_color: Hsla,
374 corner_radii: Corners,
375 border_widths: Edges,
376}
377var<storage, read> b_quads: array<Quad>;
378
379struct QuadVarying {
380 @builtin(position) position: vec4<f32>,
381 @location(0) @interpolate(flat) border_color: vec4<f32>,
382 @location(1) @interpolate(flat) quad_id: u32,
383 // TODO: use `clip_distance` once Naga supports it
384 @location(2) clip_distances: vec4<f32>,
385 @location(3) @interpolate(flat) background_solid: vec4<f32>,
386 @location(4) @interpolate(flat) background_color0: vec4<f32>,
387 @location(5) @interpolate(flat) background_color1: vec4<f32>,
388}
389
390@vertex
391fn vs_quad(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> QuadVarying {
392 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
393 let quad = b_quads[instance_id];
394
395 var out = QuadVarying();
396 out.position = to_device_position(unit_vertex, quad.bounds);
397
398 let gradient = prepare_gradient_color(
399 quad.background.tag,
400 quad.background.color_space,
401 quad.background.solid,
402 quad.background.colors
403 );
404 out.background_solid = gradient.solid;
405 out.background_color0 = gradient.color0;
406 out.background_color1 = gradient.color1;
407 out.border_color = hsla_to_rgba(quad.border_color);
408 out.quad_id = instance_id;
409 out.clip_distances = distance_from_clip_rect(unit_vertex, quad.bounds, quad.content_mask);
410 return out;
411}
412
413@fragment
414fn fs_quad(input: QuadVarying) -> @location(0) vec4<f32> {
415 // Alpha clip first, since we don't have `clip_distance`.
416 if (any(input.clip_distances < vec4<f32>(0.0))) {
417 return vec4<f32>(0.0);
418 }
419
420 let quad = b_quads[input.quad_id];
421 let half_size = quad.bounds.size / 2.0;
422 let center = quad.bounds.origin + half_size;
423 let center_to_point = input.position.xy - center;
424
425 let background_color = gradient_color(quad.background, input.position.xy, quad.bounds,
426 input.background_solid, input.background_color0, input.background_color1);
427
428 // Fast path when the quad is not rounded and doesn't have any border.
429 if (quad.corner_radii.top_left == 0.0 && quad.corner_radii.bottom_left == 0.0 &&
430 quad.corner_radii.top_right == 0.0 &&
431 quad.corner_radii.bottom_right == 0.0 && quad.border_widths.top == 0.0 &&
432 quad.border_widths.left == 0.0 && quad.border_widths.right == 0.0 &&
433 quad.border_widths.bottom == 0.0) {
434 return blend_color(background_color, 1.0);
435 }
436
437 let corner_radius = pick_corner_radius(center_to_point, quad.corner_radii);
438 let rounded_edge_to_point = abs(center_to_point) - half_size + corner_radius;
439 let distance =
440 length(max(vec2<f32>(0.0), rounded_edge_to_point)) +
441 min(0.0, max(rounded_edge_to_point.x, rounded_edge_to_point.y)) -
442 corner_radius;
443
444 let vertical_border = select(quad.border_widths.left, quad.border_widths.right, center_to_point.x > 0.0);
445 let horizontal_border = select(quad.border_widths.top, quad.border_widths.bottom, center_to_point.y > 0.0);
446 let inset_size = half_size - corner_radius - vec2<f32>(vertical_border, horizontal_border);
447 let point_to_inset_corner = abs(center_to_point) - inset_size;
448
449 var border_width = 0.0;
450 if (point_to_inset_corner.x < 0.0 && point_to_inset_corner.y < 0.0) {
451 border_width = 0.0;
452 } else if (point_to_inset_corner.y > point_to_inset_corner.x) {
453 border_width = horizontal_border;
454 } else {
455 border_width = vertical_border;
456 }
457
458 var color = background_color;
459 if (border_width > 0.0) {
460 let inset_distance = distance + border_width;
461 // Blend the border on top of the background and then linearly interpolate
462 // between the two as we slide inside the background.
463 let blended_border = over(background_color, input.border_color);
464 color = mix(blended_border, background_color,
465 saturate(0.5 - inset_distance));
466 }
467
468 return blend_color(color, saturate(0.5 - distance));
469}
470
471// --- shadows --- //
472
473struct Shadow {
474 order: u32,
475 blur_radius: f32,
476 bounds: Bounds,
477 corner_radii: Corners,
478 content_mask: Bounds,
479 color: Hsla,
480}
481var<storage, read> b_shadows: array<Shadow>;
482
483struct ShadowVarying {
484 @builtin(position) position: vec4<f32>,
485 @location(0) @interpolate(flat) color: vec4<f32>,
486 @location(1) @interpolate(flat) shadow_id: u32,
487 //TODO: use `clip_distance` once Naga supports it
488 @location(3) clip_distances: vec4<f32>,
489}
490
491@vertex
492fn vs_shadow(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> ShadowVarying {
493 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
494 var shadow = b_shadows[instance_id];
495
496 let margin = 3.0 * shadow.blur_radius;
497 // Set the bounds of the shadow and adjust its size based on the shadow's
498 // spread radius to achieve the spreading effect
499 shadow.bounds.origin -= vec2<f32>(margin);
500 shadow.bounds.size += 2.0 * vec2<f32>(margin);
501
502 var out = ShadowVarying();
503 out.position = to_device_position(unit_vertex, shadow.bounds);
504 out.color = hsla_to_rgba(shadow.color);
505 out.shadow_id = instance_id;
506 out.clip_distances = distance_from_clip_rect(unit_vertex, shadow.bounds, shadow.content_mask);
507 return out;
508}
509
510@fragment
511fn fs_shadow(input: ShadowVarying) -> @location(0) vec4<f32> {
512 // Alpha clip first, since we don't have `clip_distance`.
513 if (any(input.clip_distances < vec4<f32>(0.0))) {
514 return vec4<f32>(0.0);
515 }
516
517 let shadow = b_shadows[input.shadow_id];
518 let half_size = shadow.bounds.size / 2.0;
519 let center = shadow.bounds.origin + half_size;
520 let center_to_point = input.position.xy - center;
521
522 let corner_radius = pick_corner_radius(center_to_point, shadow.corner_radii);
523
524 // The signal is only non-zero in a limited range, so don't waste samples
525 let low = center_to_point.y - half_size.y;
526 let high = center_to_point.y + half_size.y;
527 let start = clamp(-3.0 * shadow.blur_radius, low, high);
528 let end = clamp(3.0 * shadow.blur_radius, low, high);
529
530 // Accumulate samples (we can get away with surprisingly few samples)
531 let step = (end - start) / 4.0;
532 var y = start + step * 0.5;
533 var alpha = 0.0;
534 for (var i = 0; i < 4; i += 1) {
535 let blur = blur_along_x(center_to_point.x, center_to_point.y - y,
536 shadow.blur_radius, corner_radius, half_size);
537 alpha += blur * gaussian(y, shadow.blur_radius) * step;
538 y += step;
539 }
540
541 return blend_color(input.color, alpha);
542}
543
544// --- path rasterization --- //
545
546struct PathVertex {
547 xy_position: vec2<f32>,
548 st_position: vec2<f32>,
549 content_mask: Bounds,
550}
551var<storage, read> b_path_vertices: array<PathVertex>;
552
553struct PathRasterizationVarying {
554 @builtin(position) position: vec4<f32>,
555 @location(0) st_position: vec2<f32>,
556 //TODO: use `clip_distance` once Naga supports it
557 @location(3) clip_distances: vec4<f32>,
558}
559
560@vertex
561fn vs_path_rasterization(@builtin(vertex_index) vertex_id: u32) -> PathRasterizationVarying {
562 let v = b_path_vertices[vertex_id];
563
564 var out = PathRasterizationVarying();
565 out.position = to_device_position_impl(v.xy_position);
566 out.st_position = v.st_position;
567 out.clip_distances = distance_from_clip_rect_impl(v.xy_position, v.content_mask);
568 return out;
569}
570
571@fragment
572fn fs_path_rasterization(input: PathRasterizationVarying) -> @location(0) f32 {
573 let dx = dpdx(input.st_position);
574 let dy = dpdy(input.st_position);
575 if (any(input.clip_distances < vec4<f32>(0.0))) {
576 return 0.0;
577 }
578
579 let gradient = 2.0 * input.st_position.xx * vec2<f32>(dx.x, dy.x) - vec2<f32>(dx.y, dy.y);
580 let f = input.st_position.x * input.st_position.x - input.st_position.y;
581 let distance = f / length(gradient);
582 return saturate(0.5 - distance);
583}
584
585// --- paths --- //
586
587struct PathSprite {
588 bounds: Bounds,
589 color: Background,
590 tile: AtlasTile,
591}
592var<storage, read> b_path_sprites: array<PathSprite>;
593
594struct PathVarying {
595 @builtin(position) position: vec4<f32>,
596 @location(0) tile_position: vec2<f32>,
597 @location(1) @interpolate(flat) instance_id: u32,
598 @location(2) @interpolate(flat) color_solid: vec4<f32>,
599 @location(3) @interpolate(flat) color0: vec4<f32>,
600 @location(4) @interpolate(flat) color1: vec4<f32>,
601}
602
603@vertex
604fn vs_path(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> PathVarying {
605 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
606 let sprite = b_path_sprites[instance_id];
607 // Don't apply content mask because it was already accounted for when rasterizing the path.
608
609 var out = PathVarying();
610 out.position = to_device_position(unit_vertex, sprite.bounds);
611 out.tile_position = to_tile_position(unit_vertex, sprite.tile);
612 out.instance_id = instance_id;
613
614 let gradient = prepare_gradient_color(
615 sprite.color.tag,
616 sprite.color.color_space,
617 sprite.color.solid,
618 sprite.color.colors
619 );
620 out.color_solid = gradient.solid;
621 out.color0 = gradient.color0;
622 out.color1 = gradient.color1;
623 return out;
624}
625
626@fragment
627fn fs_path(input: PathVarying) -> @location(0) vec4<f32> {
628 let sample = textureSample(t_sprite, s_sprite, input.tile_position).r;
629 let mask = 1.0 - abs(1.0 - sample % 2.0);
630 let sprite = b_path_sprites[input.instance_id];
631 let background = sprite.color;
632 let color = gradient_color(background, input.position.xy, sprite.bounds,
633 input.color_solid, input.color0, input.color1);
634 return blend_color(color, mask);
635}
636
637// --- underlines --- //
638
639struct Underline {
640 order: u32,
641 pad: u32,
642 bounds: Bounds,
643 content_mask: Bounds,
644 color: Hsla,
645 thickness: f32,
646 wavy: u32,
647}
648var<storage, read> b_underlines: array<Underline>;
649
650struct UnderlineVarying {
651 @builtin(position) position: vec4<f32>,
652 @location(0) @interpolate(flat) color: vec4<f32>,
653 @location(1) @interpolate(flat) underline_id: u32,
654 //TODO: use `clip_distance` once Naga supports it
655 @location(3) clip_distances: vec4<f32>,
656}
657
658@vertex
659fn vs_underline(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> UnderlineVarying {
660 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
661 let underline = b_underlines[instance_id];
662
663 var out = UnderlineVarying();
664 out.position = to_device_position(unit_vertex, underline.bounds);
665 out.color = hsla_to_rgba(underline.color);
666 out.underline_id = instance_id;
667 out.clip_distances = distance_from_clip_rect(unit_vertex, underline.bounds, underline.content_mask);
668 return out;
669}
670
671@fragment
672fn fs_underline(input: UnderlineVarying) -> @location(0) vec4<f32> {
673 // Alpha clip first, since we don't have `clip_distance`.
674 if (any(input.clip_distances < vec4<f32>(0.0))) {
675 return vec4<f32>(0.0);
676 }
677
678 let underline = b_underlines[input.underline_id];
679 if ((underline.wavy & 0xFFu) == 0u)
680 {
681 return blend_color(input.color, input.color.a);
682 }
683
684 let half_thickness = underline.thickness * 0.5;
685 let st = (input.position.xy - underline.bounds.origin) / underline.bounds.size.y - vec2<f32>(0.0, 0.5);
686 let frequency = M_PI_F * 3.0 * underline.thickness / 3.0;
687 let amplitude = 1.0 / (4.0 * underline.thickness);
688 let sine = sin(st.x * frequency) * amplitude;
689 let dSine = cos(st.x * frequency) * amplitude * frequency;
690 let distance = (st.y - sine) / sqrt(1.0 + dSine * dSine);
691 let distance_in_pixels = distance * underline.bounds.size.y;
692 let distance_from_top_border = distance_in_pixels - half_thickness;
693 let distance_from_bottom_border = distance_in_pixels + half_thickness;
694 let alpha = saturate(0.5 - max(-distance_from_bottom_border, distance_from_top_border));
695 return blend_color(input.color, alpha * input.color.a);
696}
697
698// --- monochrome sprites --- //
699
700struct MonochromeSprite {
701 order: u32,
702 pad: u32,
703 bounds: Bounds,
704 content_mask: Bounds,
705 color: Hsla,
706 tile: AtlasTile,
707 transformation: TransformationMatrix,
708}
709var<storage, read> b_mono_sprites: array<MonochromeSprite>;
710
711struct MonoSpriteVarying {
712 @builtin(position) position: vec4<f32>,
713 @location(0) tile_position: vec2<f32>,
714 @location(1) @interpolate(flat) color: vec4<f32>,
715 @location(3) clip_distances: vec4<f32>,
716}
717
718@vertex
719fn vs_mono_sprite(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> MonoSpriteVarying {
720 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
721 let sprite = b_mono_sprites[instance_id];
722
723 var out = MonoSpriteVarying();
724 out.position = to_device_position_transformed(unit_vertex, sprite.bounds, sprite.transformation);
725
726 out.tile_position = to_tile_position(unit_vertex, sprite.tile);
727 out.color = hsla_to_rgba(sprite.color);
728 out.clip_distances = distance_from_clip_rect(unit_vertex, sprite.bounds, sprite.content_mask);
729 return out;
730}
731
732@fragment
733fn fs_mono_sprite(input: MonoSpriteVarying) -> @location(0) vec4<f32> {
734 let sample = textureSample(t_sprite, s_sprite, input.tile_position).r;
735 // Alpha clip after using the derivatives.
736 if (any(input.clip_distances < vec4<f32>(0.0))) {
737 return vec4<f32>(0.0);
738 }
739 return blend_color(input.color, sample);
740}
741
742// --- polychrome sprites --- //
743
744struct PolychromeSprite {
745 order: u32,
746 pad: u32,
747 grayscale: u32,
748 opacity: f32,
749 bounds: Bounds,
750 content_mask: Bounds,
751 corner_radii: Corners,
752 tile: AtlasTile,
753}
754var<storage, read> b_poly_sprites: array<PolychromeSprite>;
755
756struct PolySpriteVarying {
757 @builtin(position) position: vec4<f32>,
758 @location(0) tile_position: vec2<f32>,
759 @location(1) @interpolate(flat) sprite_id: u32,
760 @location(3) clip_distances: vec4<f32>,
761}
762
763@vertex
764fn vs_poly_sprite(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> PolySpriteVarying {
765 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
766 let sprite = b_poly_sprites[instance_id];
767
768 var out = PolySpriteVarying();
769 out.position = to_device_position(unit_vertex, sprite.bounds);
770 out.tile_position = to_tile_position(unit_vertex, sprite.tile);
771 out.sprite_id = instance_id;
772 out.clip_distances = distance_from_clip_rect(unit_vertex, sprite.bounds, sprite.content_mask);
773 return out;
774}
775
776@fragment
777fn fs_poly_sprite(input: PolySpriteVarying) -> @location(0) vec4<f32> {
778 let sample = textureSample(t_sprite, s_sprite, input.tile_position);
779 // Alpha clip after using the derivatives.
780 if (any(input.clip_distances < vec4<f32>(0.0))) {
781 return vec4<f32>(0.0);
782 }
783
784 let sprite = b_poly_sprites[input.sprite_id];
785 let distance = quad_sdf(input.position.xy, sprite.bounds, sprite.corner_radii);
786
787 var color = sample;
788 if ((sprite.grayscale & 0xFFu) != 0u) {
789 let grayscale = dot(color.rgb, GRAYSCALE_FACTORS);
790 color = vec4<f32>(vec3<f32>(grayscale), sample.a);
791 }
792 return blend_color(color, sprite.opacity * saturate(0.5 - distance));
793}
794
795// --- surfaces --- //
796
797struct SurfaceParams {
798 bounds: Bounds,
799 content_mask: Bounds,
800}
801
802var<uniform> surface_locals: SurfaceParams;
803var t_y: texture_2d<f32>;
804var t_cb_cr: texture_2d<f32>;
805var s_surface: sampler;
806
807const ycbcr_to_RGB = mat4x4<f32>(
808 vec4<f32>( 1.0000f, 1.0000f, 1.0000f, 0.0),
809 vec4<f32>( 0.0000f, -0.3441f, 1.7720f, 0.0),
810 vec4<f32>( 1.4020f, -0.7141f, 0.0000f, 0.0),
811 vec4<f32>(-0.7010f, 0.5291f, -0.8860f, 1.0),
812);
813
814struct SurfaceVarying {
815 @builtin(position) position: vec4<f32>,
816 @location(0) texture_position: vec2<f32>,
817 @location(3) clip_distances: vec4<f32>,
818}
819
820@vertex
821fn vs_surface(@builtin(vertex_index) vertex_id: u32) -> SurfaceVarying {
822 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
823
824 var out = SurfaceVarying();
825 out.position = to_device_position(unit_vertex, surface_locals.bounds);
826 out.texture_position = unit_vertex;
827 out.clip_distances = distance_from_clip_rect(unit_vertex, surface_locals.bounds, surface_locals.content_mask);
828 return out;
829}
830
831@fragment
832fn fs_surface(input: SurfaceVarying) -> @location(0) vec4<f32> {
833 // Alpha clip after using the derivatives.
834 if (any(input.clip_distances < vec4<f32>(0.0))) {
835 return vec4<f32>(0.0);
836 }
837
838 let y_cb_cr = vec4<f32>(
839 textureSampleLevel(t_y, s_surface, input.texture_position, 0.0).r,
840 textureSampleLevel(t_cb_cr, s_surface, input.texture_position, 0.0).rg,
841 1.0);
842
843 return ycbcr_to_RGB * y_cb_cr;
844}