1struct Globals {
2 viewport_size: vec2<f32>,
3 pad: vec2<u32>,
4}
5
6var<uniform> globals: Globals;
7
8const M_PI_F: f32 = 3.1415926;
9
10struct ViewId {
11 lo: u32,
12 hi: u32,
13}
14
15struct Bounds {
16 origin: vec2<f32>,
17 size: vec2<f32>,
18}
19struct Corners {
20 top_left: f32,
21 top_right: f32,
22 bottom_right: f32,
23 bottom_left: f32,
24}
25struct Edges {
26 top: f32,
27 right: f32,
28 bottom: f32,
29 left: f32,
30}
31struct Hsla {
32 h: f32,
33 s: f32,
34 l: f32,
35 a: f32,
36}
37
38fn to_device_position_impl(position: vec2<f32>) -> vec4<f32> {
39 let device_position = position / globals.viewport_size * vec2<f32>(2.0, -2.0) + vec2<f32>(-1.0, 1.0);
40 return vec4<f32>(device_position, 0.0, 1.0);
41}
42
43fn to_device_position(unit_vertex: vec2<f32>, bounds: Bounds) -> vec4<f32> {
44 let position = unit_vertex * vec2<f32>(bounds.size) + bounds.origin;
45 return to_device_position_impl(position);
46}
47
48fn distance_from_clip_rect_impl(position: vec2<f32>, clip_bounds: Bounds) -> vec4<f32> {
49 let tl = position - clip_bounds.origin;
50 let br = clip_bounds.origin + clip_bounds.size - position;
51 return vec4<f32>(tl.x, br.x, tl.y, br.y);
52}
53
54fn distance_from_clip_rect(unit_vertex: vec2<f32>, bounds: Bounds, clip_bounds: Bounds) -> vec4<f32> {
55 let position = unit_vertex * vec2<f32>(bounds.size) + bounds.origin;
56 return distance_from_clip_rect_impl(position, clip_bounds);
57}
58
59fn hsla_to_rgba(hsla: Hsla) -> vec4<f32> {
60 let h = hsla.h * 6.0; // Now, it's an angle but scaled in [0, 6) range
61 let s = hsla.s;
62 let l = hsla.l;
63 let a = hsla.a;
64
65 let c = (1.0 - abs(2.0 * l - 1.0)) * s;
66 let x = c * (1.0 - abs(h % 2.0 - 1.0));
67 let m = l - c / 2.0;
68
69 var color = vec4<f32>(m, m, m, a);
70
71 if (h >= 0.0 && h < 1.0) {
72 color.r += c;
73 color.g += x;
74 } else if (h >= 1.0 && h < 2.0) {
75 color.r += x;
76 color.g += c;
77 } else if (h >= 2.0 && h < 3.0) {
78 color.g += c;
79 color.b += x;
80 } else if (h >= 3.0 && h < 4.0) {
81 color.g += x;
82 color.b += c;
83 } else if (h >= 4.0 && h < 5.0) {
84 color.r += x;
85 color.b += c;
86 } else {
87 color.r += c;
88 color.b += x;
89 }
90
91 return color;
92}
93
94fn over(below: vec4<f32>, above: vec4<f32>) -> vec4<f32> {
95 let alpha = above.a + below.a * (1.0 - above.a);
96 let color = (above.rgb * above.a + below.rgb * below.a * (1.0 - above.a)) / alpha;
97 return vec4<f32>(color, alpha);
98}
99
100// A standard gaussian function, used for weighting samples
101fn gaussian(x: f32, sigma: f32) -> f32{
102 return exp(-(x * x) / (2.0 * sigma * sigma)) / (sqrt(2.0 * M_PI_F) * sigma);
103}
104
105// This approximates the error function, needed for the gaussian integral
106fn erf(v: vec2<f32>) -> vec2<f32> {
107 let s = sign(v);
108 let a = abs(v);
109 let r1 = 1.0 + (0.278393 + (0.230389 + 0.078108 * (a * a)) * a) * a;
110 let r2 = r1 * r1;
111 return s - s / (r2 * r2);
112}
113
114fn blur_along_x(x: f32, y: f32, sigma: f32, corner: f32, half_size: vec2<f32>) -> f32 {
115 let delta = min(half_size.y - corner - abs(y), 0.0);
116 let curved = half_size.x - corner + sqrt(max(0.0, corner * corner - delta * delta));
117 let integral = 0.5 + 0.5 * erf((x + vec2<f32>(-curved, curved)) * (sqrt(0.5) / sigma));
118 return integral.y - integral.x;
119}
120
121fn pick_corner_radius(point: vec2<f32>, radii: Corners) -> f32 {
122 if (point.x < 0.0) {
123 if (point.y < 0.0) {
124 return radii.top_left;
125 } else {
126 return radii.bottom_left;
127 }
128 } else {
129 if (point.y < 0.0) {
130 return radii.top_right;
131 } else {
132 return radii.bottom_right;
133 }
134 }
135}
136
137// --- quads --- //
138
139struct Quad {
140 view_id: ViewId,
141 layer_id: u32,
142 order: u32,
143 bounds: Bounds,
144 content_mask: Bounds,
145 background: Hsla,
146 border_color: Hsla,
147 corner_radii: Corners,
148 border_widths: Edges,
149}
150var<storage, read> b_quads: array<Quad>;
151
152struct QuadVarying {
153 @builtin(position) position: vec4<f32>,
154 @location(0) @interpolate(flat) background_color: vec4<f32>,
155 @location(1) @interpolate(flat) border_color: vec4<f32>,
156 @location(2) @interpolate(flat) quad_id: u32,
157 //TODO: use `clip_distance` once Naga supports it
158 @location(3) clip_distances: vec4<f32>,
159}
160
161@vertex
162fn vs_quad(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> QuadVarying {
163 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
164 let quad = b_quads[instance_id];
165
166 var out = QuadVarying();
167 out.position = to_device_position(unit_vertex, quad.bounds);
168 out.background_color = hsla_to_rgba(quad.background);
169 out.border_color = hsla_to_rgba(quad.border_color);
170 out.quad_id = instance_id;
171 out.clip_distances = distance_from_clip_rect(unit_vertex, quad.bounds, quad.content_mask);
172 return out;
173}
174
175@fragment
176fn fs_quad(input: QuadVarying) -> @location(0) vec4<f32> {
177 // Alpha clip first, since we don't have `clip_distance`.
178 if (any(input.clip_distances < vec4<f32>(0.0))) {
179 return vec4<f32>(0.0);
180 }
181
182 let quad = b_quads[input.quad_id];
183 let half_size = quad.bounds.size / 2.0;
184 let center = quad.bounds.origin + half_size;
185 let center_to_point = input.position.xy - center;
186
187 let corner_radius = pick_corner_radius(center_to_point, quad.corner_radii);
188
189 let rounded_edge_to_point = abs(center_to_point) - half_size + corner_radius;
190 let distance =
191 length(max(vec2<f32>(0.0), rounded_edge_to_point)) +
192 min(0.0, max(rounded_edge_to_point.x, rounded_edge_to_point.y)) -
193 corner_radius;
194
195 let vertical_border = select(quad.border_widths.left, quad.border_widths.right, center_to_point.x > 0.0);
196 let horizontal_border = select(quad.border_widths.top, quad.border_widths.bottom, center_to_point.y > 0.0);
197 let inset_size = half_size - corner_radius - vec2<f32>(vertical_border, horizontal_border);
198 let point_to_inset_corner = abs(center_to_point) - inset_size;
199
200 var border_width = 0.0;
201 if (point_to_inset_corner.x < 0.0 && point_to_inset_corner.y < 0.0) {
202 border_width = 0.0;
203 } else if (point_to_inset_corner.y > point_to_inset_corner.x) {
204 border_width = horizontal_border;
205 } else {
206 border_width = vertical_border;
207 }
208
209 var color = input.background_color;
210 if (border_width > 0.0) {
211 let inset_distance = distance + border_width;
212 // Blend the border on top of the background and then linearly interpolate
213 // between the two as we slide inside the background.
214 let blended_border = over(input.background_color, input.border_color);
215 color = mix(blended_border, input.background_color,
216 saturate(0.5 - inset_distance));
217 }
218
219 return color * vec4<f32>(1.0, 1.0, 1.0, saturate(0.5 - distance));
220}
221
222// --- shadows --- //
223
224struct Shadow {
225 view_id: ViewId,
226 layer_id: u32,
227 order: u32,
228 bounds: Bounds,
229 corner_radii: Corners,
230 content_mask: Bounds,
231 color: Hsla,
232 blur_radius: f32,
233 pad: u32,
234}
235var<storage, read> b_shadows: array<Shadow>;
236
237struct ShadowVarying {
238 @builtin(position) position: vec4<f32>,
239 @location(0) @interpolate(flat) color: vec4<f32>,
240 @location(1) @interpolate(flat) shadow_id: u32,
241 //TODO: use `clip_distance` once Naga supports it
242 @location(3) clip_distances: vec4<f32>,
243}
244
245@vertex
246fn vs_shadow(@builtin(vertex_index) vertex_id: u32, @builtin(instance_index) instance_id: u32) -> ShadowVarying {
247 let unit_vertex = vec2<f32>(f32(vertex_id & 1u), 0.5 * f32(vertex_id & 2u));
248 let shadow = b_shadows[instance_id];
249
250 let margin = 3.0 * shadow.blur_radius;
251 // Set the bounds of the shadow and adjust its size based on the shadow's
252 // spread radius to achieve the spreading effect
253 var bounds = shadow.bounds;
254 bounds.origin -= vec2<f32>(margin);
255 bounds.size += 2.0 * vec2<f32>(margin);
256
257 var out = ShadowVarying();
258 out.position = to_device_position(unit_vertex, shadow.bounds);
259 out.color = hsla_to_rgba(shadow.color);
260 out.shadow_id = instance_id;
261 out.clip_distances = distance_from_clip_rect(unit_vertex, shadow.bounds, shadow.content_mask);
262 return out;
263}
264
265@fragment
266fn fs_shadow(input: ShadowVarying) -> @location(0) vec4<f32> {
267 // Alpha clip first, since we don't have `clip_distance`.
268 if (any(input.clip_distances < vec4<f32>(0.0))) {
269 return vec4<f32>(0.0);
270 }
271
272 let shadow = b_shadows[input.shadow_id];
273 let half_size = shadow.bounds.size / 2.0;
274 let center = shadow.bounds.origin + half_size;
275 let center_to_point = input.position.xy - center;
276
277 let corner_radius = pick_corner_radius(center_to_point, shadow.corner_radii);
278
279 // The signal is only non-zero in a limited range, so don't waste samples
280 let low = center_to_point.y - half_size.y;
281 let high = center_to_point.y + half_size.y;
282 let start = clamp(-3.0 * shadow.blur_radius, low, high);
283 let end = clamp(3.0 * shadow.blur_radius, low, high);
284
285 // Accumulate samples (we can get away with surprisingly few samples)
286 let step = (end - start) / 4.0;
287 var y = start + step * 0.5;
288 var alpha = 0.0;
289 for (var i = 0; i < 4; i += 1) {
290 let blur = blur_along_x(center_to_point.x, center_to_point.y - y,
291 shadow.blur_radius, corner_radius, half_size);
292 alpha += blur * gaussian(y, shadow.blur_radius) * step;
293 y += step;
294 }
295
296 return input.color * vec4<f32>(1.0, 1.0, 1.0, alpha);
297}
298
299// --- path rasterization --- //
300
301struct PathVertex {
302 xy_position: vec2<f32>,
303 st_position: vec2<f32>,
304 content_mask: Bounds,
305}
306var<storage, read> b_path_vertices: array<PathVertex>;
307
308struct PathRasterizationVarying {
309 @builtin(position) position: vec4<f32>,
310 @location(0) st_position: vec2<f32>,
311 //TODO: use `clip_distance` once Naga supports it
312 @location(3) clip_distances: vec4<f32>,
313}
314
315@vertex
316fn vs_path_rasterization(@builtin(vertex_index) vertex_id: u32) -> PathRasterizationVarying {
317 let v = b_path_vertices[vertex_id];
318
319 var out = PathRasterizationVarying();
320 out.position = to_device_position_impl(v.xy_position);
321 out.st_position = v.st_position;
322 out.clip_distances = distance_from_clip_rect_impl(v.xy_position, v.content_mask);
323 return out;
324}
325
326@fragment
327fn fs_path_rasterization(input: PathRasterizationVarying) -> @location(0) f32 {
328 let dx = dpdx(input.st_position);
329 let dy = dpdy(input.st_position);
330 if (any(input.clip_distances < vec4<f32>(0.0))) {
331 return 0.0;
332 }
333
334 let gradient = 2.0 * input.st_position * vec2<f32>(dx.x, dy.x) - vec2<f32>(dx.y, dy.y);
335 let f = input.st_position.x * input.st_position.x - input.st_position.y;
336 let distance = f / length(gradient);
337 return saturate(0.5 - distance);
338}