1struct Globals {
2 viewport_size: vec2<f32>,
3 pad: vec2<u32>,
4}
5
6var<uniform> globals: Globals;
7var t_tile: texture_2d<f32>;
8var s_tile: sampler;
9
10const M_PI_F: f32 = 3.1415926;
11
12struct ViewId {
13 lo: u32,
14 hi: u32,
15}
16
17struct Bounds {
18 origin: vec2<f32>,
19 size: vec2<f32>,
20}
21struct Corners {
22 top_left: f32,
23 top_right: f32,
24 bottom_right: f32,
25 bottom_left: f32,
26}
27struct Edges {
28 top: f32,
29 right: f32,
30 bottom: f32,
31 left: f32,
32}
33struct Hsla {
34 h: f32,
35 s: f32,
36 l: f32,
37 a: f32,
38}
39
40struct AtlasTextureId {
41 index: u32,
42 kind: u32,
43}
44
45struct AtlasTile {
46 texture_id: AtlasTextureId,
47 tile_id: u32,
48 padding: u32,
49 bounds: Bounds,
50}
51
52fn to_device_position_impl(position: vec2<f32>) -> vec4<f32> {
53 let device_position = position / globals.viewport_size * vec2<f32>(2.0, -2.0) + vec2<f32>(-1.0, 1.0);
54 return vec4<f32>(device_position, 0.0, 1.0);
55}
56
57fn to_device_position(unit_vertex: vec2<f32>, bounds: Bounds) -> vec4<f32> {
58 let position = unit_vertex * vec2<f32>(bounds.size) + bounds.origin;
59 return to_device_position_impl(position);
60}
61
62fn to_tile_position(unit_vertex: vec2<f32>, tile: AtlasTile) -> vec2<f32> {
63 let atlas_size = vec2<f32>(textureDimensions(t_tile, 0));
64 return (tile.bounds.origin + unit_vertex * tile.bounds.size) / atlas_size;
65}
66
67fn distance_from_clip_rect_impl(position: vec2<f32>, clip_bounds: Bounds) -> vec4<f32> {
68 let tl = position - clip_bounds.origin;
69 let br = clip_bounds.origin + clip_bounds.size - position;
70 return vec4<f32>(tl.x, br.x, tl.y, br.y);
71}
72
73fn distance_from_clip_rect(unit_vertex: vec2<f32>, bounds: Bounds, clip_bounds: Bounds) -> vec4<f32> {
74 let position = unit_vertex * vec2<f32>(bounds.size) + bounds.origin;
75 return distance_from_clip_rect_impl(position, clip_bounds);
76}
77
78fn hsla_to_rgba(hsla: Hsla) -> vec4<f32> {
79 let h = hsla.h * 6.0; // Now, it's an angle but scaled in [0, 6) range
80 let s = hsla.s;
81 let l = hsla.l;
82 let a = hsla.a;
83
84 let c = (1.0 - abs(2.0 * l - 1.0)) * s;
85 let x = c * (1.0 - abs(h % 2.0 - 1.0));
86 let m = l - c / 2.0;
87
88 var color = vec4<f32>(m, m, m, a);
89
90 if (h >= 0.0 && h < 1.0) {
91 color.r += c;
92 color.g += x;
93 } else if (h >= 1.0 && h < 2.0) {
94 color.r += x;
95 color.g += c;
96 } else if (h >= 2.0 && h < 3.0) {
97 color.g += c;
98 color.b += x;
99 } else if (h >= 3.0 && h < 4.0) {
100 color.g += x;
101 color.b += c;
102 } else if (h >= 4.0 && h < 5.0) {
103 color.r += x;
104 color.b += c;
105 } else {
106 color.r += c;
107 color.b += x;
108 }
109
110 return color;
111}
112
113fn over(below: vec4<f32>, above: vec4<f32>) -> vec4<f32> {
114 let alpha = above.a + below.a * (1.0 - above.a);
115 let color = (above.rgb * above.a + below.rgb * below.a * (1.0 - above.a)) / alpha;
116 return vec4<f32>(color, alpha);
117}
118
119// A standard gaussian function, used for weighting samples
120fn gaussian(x: f32, sigma: f32) -> f32{
121 return exp(-(x * x) / (2.0 * sigma * sigma)) / (sqrt(2.0 * M_PI_F) * sigma);
122}
123
124// This approximates the error function, needed for the gaussian integral
125fn erf(v: vec2<f32>) -> vec2<f32> {
126 let s = sign(v);
127 let a = abs(v);
128 let r1 = 1.0 + (0.278393 + (0.230389 + 0.078108 * (a * a)) * a) * a;
129 let r2 = r1 * r1;
130 return s - s / (r2 * r2);
131}
132
133fn blur_along_x(x: f32, y: f32, sigma: f32, corner: f32, half_size: vec2<f32>) -> f32 {
134 let delta = min(half_size.y - corner - abs(y), 0.0);
135 let curved = half_size.x - corner + sqrt(max(0.0, corner * corner - delta * delta));
136 let integral = 0.5 + 0.5 * erf((x + vec2<f32>(-curved, curved)) * (sqrt(0.5) / sigma));
137 return integral.y - integral.x;
138}
139
140fn pick_corner_radius(point: vec2<f32>, radii: Corners) -> f32 {
141 if (point.x < 0.0) {
142 if (point.y < 0.0) {
143 return radii.top_left;
144 } else {
145 return radii.bottom_left;
146 }
147 } else {
148 if (point.y < 0.0) {
149 return radii.top_right;
150 } else {
151 return radii.bottom_right;
152 }
153 }
154}
155
156// --- quads --- //
157
158struct Quad {
159 view_id: ViewId,
160 layer_id: u32,
161 order: u32,
162 bounds: Bounds,
163 content_mask: Bounds,
164 background: Hsla,
165 border_color: Hsla,
166 corner_radii: Corners,
167 border_widths: Edges,
168}
169var<storage, read> b_quads: array<Quad>;
170
171struct QuadVarying {
172 @builtin(position) position: vec4<f32>,
173 @location(0) @interpolate(flat) background_color: vec4<f32>,
174 @location(1) @interpolate(flat) border_color: vec4<f32>,
175 @location(2) @interpolate(flat) quad_id: u32,
176 //TODO: use `clip_distance` once Naga supports it
177 @location(3) clip_distances: vec4<f32>,
178}
179
180@vertex
181fn vs_quad(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> QuadVarying {
182 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
183 let quad = b_quads[instance_id];
184
185 var out = QuadVarying();
186 out.position = to_device_position(unit_vertex, quad.bounds);
187 out.background_color = hsla_to_rgba(quad.background);
188 out.border_color = hsla_to_rgba(quad.border_color);
189 out.quad_id = instance_id;
190 out.clip_distances = distance_from_clip_rect(unit_vertex, quad.bounds, quad.content_mask);
191 return out;
192}
193
194@fragment
195fn fs_quad(input: QuadVarying) -> @location(0) vec4<f32> {
196 // Alpha clip first, since we don't have `clip_distance`.
197 if (any(input.clip_distances < vec4<f32>(0.0))) {
198 return vec4<f32>(0.0);
199 }
200
201 let quad = b_quads[input.quad_id];
202 let half_size = quad.bounds.size / 2.0;
203 let center = quad.bounds.origin + half_size;
204 let center_to_point = input.position.xy - center;
205
206 let corner_radius = pick_corner_radius(center_to_point, quad.corner_radii);
207
208 let rounded_edge_to_point = abs(center_to_point) - half_size + corner_radius;
209 let distance =
210 length(max(vec2<f32>(0.0), rounded_edge_to_point)) +
211 min(0.0, max(rounded_edge_to_point.x, rounded_edge_to_point.y)) -
212 corner_radius;
213
214 let vertical_border = select(quad.border_widths.left, quad.border_widths.right, center_to_point.x > 0.0);
215 let horizontal_border = select(quad.border_widths.top, quad.border_widths.bottom, center_to_point.y > 0.0);
216 let inset_size = half_size - corner_radius - vec2<f32>(vertical_border, horizontal_border);
217 let point_to_inset_corner = abs(center_to_point) - inset_size;
218
219 var border_width = 0.0;
220 if (point_to_inset_corner.x < 0.0 && point_to_inset_corner.y < 0.0) {
221 border_width = 0.0;
222 } else if (point_to_inset_corner.y > point_to_inset_corner.x) {
223 border_width = horizontal_border;
224 } else {
225 border_width = vertical_border;
226 }
227
228 var color = input.background_color;
229 if (border_width > 0.0) {
230 let inset_distance = distance + border_width;
231 // Blend the border on top of the background and then linearly interpolate
232 // between the two as we slide inside the background.
233 let blended_border = over(input.background_color, input.border_color);
234 color = mix(blended_border, input.background_color,
235 saturate(0.5 - inset_distance));
236 }
237
238 return color * vec4<f32>(1.0, 1.0, 1.0, saturate(0.5 - distance));
239}
240
241// --- shadows --- //
242
243struct Shadow {
244 view_id: ViewId,
245 layer_id: u32,
246 order: u32,
247 bounds: Bounds,
248 corner_radii: Corners,
249 content_mask: Bounds,
250 color: Hsla,
251 blur_radius: f32,
252 pad: u32,
253}
254var<storage, read> b_shadows: array<Shadow>;
255
256struct ShadowVarying {
257 @builtin(position) position: vec4<f32>,
258 @location(0) @interpolate(flat) color: vec4<f32>,
259 @location(1) @interpolate(flat) shadow_id: u32,
260 //TODO: use `clip_distance` once Naga supports it
261 @location(3) clip_distances: vec4<f32>,
262}
263
264@vertex
265fn vs_shadow(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> ShadowVarying {
266 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
267 let shadow = b_shadows[instance_id];
268
269 let margin = 3.0 * shadow.blur_radius;
270 // Set the bounds of the shadow and adjust its size based on the shadow's
271 // spread radius to achieve the spreading effect
272 var bounds = shadow.bounds;
273 bounds.origin -= vec2<f32>(margin);
274 bounds.size += 2.0 * vec2<f32>(margin);
275
276 var out = ShadowVarying();
277 out.position = to_device_position(unit_vertex, shadow.bounds);
278 out.color = hsla_to_rgba(shadow.color);
279 out.shadow_id = instance_id;
280 out.clip_distances = distance_from_clip_rect(unit_vertex, shadow.bounds, shadow.content_mask);
281 return out;
282}
283
284@fragment
285fn fs_shadow(input: ShadowVarying) -> @location(0) vec4<f32> {
286 // Alpha clip first, since we don't have `clip_distance`.
287 if (any(input.clip_distances < vec4<f32>(0.0))) {
288 return vec4<f32>(0.0);
289 }
290
291 let shadow = b_shadows[input.shadow_id];
292 let half_size = shadow.bounds.size / 2.0;
293 let center = shadow.bounds.origin + half_size;
294 let center_to_point = input.position.xy - center;
295
296 let corner_radius = pick_corner_radius(center_to_point, shadow.corner_radii);
297
298 // The signal is only non-zero in a limited range, so don't waste samples
299 let low = center_to_point.y - half_size.y;
300 let high = center_to_point.y + half_size.y;
301 let start = clamp(-3.0 * shadow.blur_radius, low, high);
302 let end = clamp(3.0 * shadow.blur_radius, low, high);
303
304 // Accumulate samples (we can get away with surprisingly few samples)
305 let step = (end - start) / 4.0;
306 var y = start + step * 0.5;
307 var alpha = 0.0;
308 for (var i = 0; i < 4; i += 1) {
309 let blur = blur_along_x(center_to_point.x, center_to_point.y - y,
310 shadow.blur_radius, corner_radius, half_size);
311 alpha += blur * gaussian(y, shadow.blur_radius) * step;
312 y += step;
313 }
314
315 return input.color * vec4<f32>(1.0, 1.0, 1.0, alpha);
316}
317
318// --- path rasterization --- //
319
320struct PathVertex {
321 xy_position: vec2<f32>,
322 st_position: vec2<f32>,
323 content_mask: Bounds,
324}
325var<storage, read> b_path_vertices: array<PathVertex>;
326
327struct PathRasterizationVarying {
328 @builtin(position) position: vec4<f32>,
329 @location(0) st_position: vec2<f32>,
330 //TODO: use `clip_distance` once Naga supports it
331 @location(3) clip_distances: vec4<f32>,
332}
333
334@vertex
335fn vs_path_rasterization(@builtin(vertex_index) vertex_id: u32) -> PathRasterizationVarying {
336 let v = b_path_vertices[vertex_id];
337
338 var out = PathRasterizationVarying();
339 out.position = to_device_position_impl(v.xy_position);
340 out.st_position = v.st_position;
341 out.clip_distances = distance_from_clip_rect_impl(v.xy_position, v.content_mask);
342 return out;
343}
344
345@fragment
346fn fs_path_rasterization(input: PathRasterizationVarying) -> @location(0) f32 {
347 let dx = dpdx(input.st_position);
348 let dy = dpdy(input.st_position);
349 if (any(input.clip_distances < vec4<f32>(0.0))) {
350 return 0.0;
351 }
352
353 let gradient = 2.0 * input.st_position * vec2<f32>(dx.x, dy.x) - vec2<f32>(dx.y, dy.y);
354 let f = input.st_position.x * input.st_position.x - input.st_position.y;
355 let distance = f / length(gradient);
356 return saturate(0.5 - distance);
357}
358
359// --- paths --- //
360
361struct PathSprite {
362 bounds: Bounds,
363 color: Hsla,
364 tile: AtlasTile,
365}
366var<storage, read> b_path_sprites: array<PathSprite>;
367
368struct PathVarying {
369 @builtin(position) position: vec4<f32>,
370 @location(0) tile_position: vec2<f32>,
371 @location(1) color: vec4<f32>,
372}
373
374@vertex
375fn vs_path(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> PathVarying {
376 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
377 let sprite = b_path_sprites[instance_id];
378 // Don't apply content mask because it was already accounted for when rasterizing the path.
379
380 var out = PathVarying();
381 out.position = to_device_position(unit_vertex, sprite.bounds);
382 out.tile_position = to_tile_position(unit_vertex, sprite.tile);
383 out.color = hsla_to_rgba(sprite.color);
384 return out;
385}
386
387@fragment
388fn fs_path(input: PathVarying) -> @location(0) vec4<f32> {
389 let sample = textureSample(t_tile, s_tile, input.tile_position).r;
390 let mask = 1.0 - abs(1.0 - sample % 2.0);
391 return input.color * mask;
392}
393
394// --- underlines --- //
395
396struct Underline {
397 view_id: ViewId,
398 layer_id: u32,
399 order: u32,
400 bounds: Bounds,
401 content_mask: Bounds,
402 color: Hsla,
403 thickness: f32,
404 wavy: u32,
405}
406var<storage, read> b_underlines: array<Underline>;
407
408struct UnderlineVarying {
409 @builtin(position) position: vec4<f32>,
410 @location(0) @interpolate(flat) color: vec4<f32>,
411 @location(1) @interpolate(flat) underline_id: u32,
412 //TODO: use `clip_distance` once Naga supports it
413 @location(3) clip_distances: vec4<f32>,
414}
415
416@vertex
417fn vs_underline(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> UnderlineVarying {
418 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
419 let underline = b_underlines[instance_id];
420
421 var out = UnderlineVarying();
422 out.position = to_device_position(unit_vertex, underline.bounds);
423 out.color = hsla_to_rgba(underline.color);
424 out.underline_id = instance_id;
425 out.clip_distances = distance_from_clip_rect(unit_vertex, underline.bounds, underline.content_mask);
426 return out;
427}
428
429@fragment
430fn fs_underline(input: UnderlineVarying) -> @location(0) vec4<f32> {
431 // Alpha clip first, since we don't have `clip_distance`.
432 if (any(input.clip_distances < vec4<f32>(0.0))) {
433 return vec4<f32>(0.0);
434 }
435
436 let underline = b_underlines[input.underline_id];
437 if (underline.wavy == 0u)
438 {
439 return vec4<f32>(0.0);
440 }
441
442 let half_thickness = underline.thickness * 0.5;
443 let st = (input.position.xy - underline.bounds.origin) / underline.bounds.size.y - vec2<f32>(0.0, 0.5);
444 let frequency = M_PI_F * 3.0 * underline.thickness / 8.0;
445 let amplitude = 1.0 / (2.0 * underline.thickness);
446 let sine = sin(st.x * frequency) * amplitude;
447 let dSine = cos(st.x * frequency) * amplitude * frequency;
448 let distance = (st.y - sine) / sqrt(1.0 + dSine * dSine);
449 let distance_in_pixels = distance * underline.bounds.size.y;
450 let distance_from_top_border = distance_in_pixels - half_thickness;
451 let distance_from_bottom_border = distance_in_pixels + half_thickness;
452 let alpha = saturate(0.5 - max(-distance_from_bottom_border, distance_from_top_border));
453 return input.color * vec4<f32>(1.0, 1.0, 1.0, alpha);
454}