1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
/// The WGSL source of the solid-colour pipeline.
///
/// The pipeline draws flat-coloured triangles: fills, strokes, area strips,
/// and label backgrounds. The vertex stage maps the chart's CSS-pixel
/// coordinates into clip space through the uniform transform, and the
/// fragment stage premultiplies the colour so the blend state can use the
/// standard "source over" equation.
pub const WEBGPU_SOLID_SHADER: &str = r#"
struct Uniforms {
scale: vec2<f32>,
offset: vec2<f32>,
};
@group(0) @binding(0) var<uniform> uniforms: Uniforms;
struct VsOut {
@builtin(position) position: vec4<f32>,
@location(0) color: vec4<f32>,
};
@vertex
fn vs_main(@location(0) position: vec2<f32>, @location(1) color: vec4<f32>) -> VsOut {
var out: VsOut;
out.position = vec4<f32>(position * uniforms.scale + uniforms.offset, 0.0, 1.0);
out.color = color;
return out;
}
@fragment
fn fs_main(in: VsOut) -> @location(0) vec4<f32> {
return vec4<f32>(in.color.rgb * in.color.a, in.color.a);
}
"#;
/// The WGSL source of the textured pipeline.
///
/// The pipeline draws triangles that sample a texture: glyph quads read the
/// glyph atlas, and image quads read the image itself. Both use the same
/// layout, so the two share one pipeline and differ only in the bind group
/// bound to group one.
pub const WEBGPU_TEXTURED_SHADER: &str = r#"
struct Uniforms {
scale: vec2<f32>,
offset: vec2<f32>,
};
@group(0) @binding(0) var<uniform> uniforms: Uniforms;
@group(1) @binding(0) var atlas_sampler: sampler;
@group(1) @binding(1) var atlas_texture: texture_2d<f32>;
struct VsOut {
@builtin(position) position: vec4<f32>,
@location(0) uv: vec2<f32>,
@location(1) color: vec4<f32>,
};
@vertex
fn vs_main(
@location(0) position: vec2<f32>,
@location(1) uv: vec2<f32>,
@location(2) color: vec4<f32>,
) -> VsOut {
var out: VsOut;
out.position = vec4<f32>(position * uniforms.scale + uniforms.offset, 0.0, 1.0);
out.uv = uv;
out.color = color;
return out;
}
@fragment
fn fs_main(in: VsOut) -> @location(0) vec4<f32> {
let texel = textureSample(atlas_texture, atlas_sampler, in.uv);
let alpha = texel.a * in.color.a;
return vec4<f32>(in.color.rgb * in.color.a * texel.rgb, alpha);
}
"#;
/// The vertex name of the solid pipeline's entry point.
pub const WEBGPU_VERTEX_ENTRY_POINT: &str = "vs_main";
/// The vertex name of the textured pipeline's entry point.
pub const WEBGPU_FRAGMENT_ENTRY_POINT: &str = "fs_main";
/// The byte stride of one solid vertex: two `f32` positions and four
/// normalised colour bytes.
pub const WEBGPU_SOLID_VERTEX_STRIDE: u32 = 12;
/// The byte stride of one textured vertex: two `f32` positions, two `f32`
/// texture coordinates, and four normalised colour bytes.
pub const WEBGPU_TEXTURED_VERTEX_STRIDE: u32 = 20;
/// The byte size of the uniform buffer holding the clip-space transform.
pub const WEBGPU_UNIFORM_SIZE: u32 = 16;
/// The `GPUBufferUsage.VERTEX` flag.
pub const WEBGPU_BUFFER_USAGE_VERTEX: u32 = 0x0020;
/// The `GPUBufferUsage.INDEX` flag.
pub const WEBGPU_BUFFER_USAGE_INDEX: u32 = 0x0010;
/// The `GPUBufferUsage.COPY_DST` flag.
pub const WEBGPU_BUFFER_USAGE_COPY_DST: u32 = 0x0008;
/// The `GPUBufferUsage.UNIFORM` flag.
pub const WEBGPU_BUFFER_USAGE_UNIFORM: u32 = 0x0040;
/// The `GPUTextureUsage.COPY_DST` flag.
pub const WEBGPU_TEXTURE_USAGE_COPY_DST: u32 = 0x0002;
/// The `GPUTextureUsage.TEXTURE_BINDING` flag.
pub const WEBGPU_TEXTURE_USAGE_TEXTURE_BINDING: u32 = 0x0004;
/// The `GPUTextureUsage.RENDER_ATTACHMENT` flag.
pub const WEBGPU_TEXTURE_USAGE_RENDER_ATTACHMENT: u32 = 0x0010;
/// The `GPUShaderStage.VERTEX` flag.
pub const WEBGPU_SHADER_STAGE_VERTEX: u32 = 0x0001;
/// The `GPUShaderStage.FRAGMENT` flag.
pub const WEBGPU_SHADER_STAGE_FRAGMENT: u32 = 0x0002;
/// The context id a canvas is asked for when the backend is created.
pub const WEBGPU_CONTEXT_ID: &str = "webgpu";
/// The alpha mode the canvas context is configured with.
///
/// The chart draws with premultiplied alpha so that the blend state can use
/// the "one, one-minus-src-alpha" equation, which is what Canvas2D does
/// internally as well.
pub const WEBGPU_ALPHA_MODE: &str = "premultiplied";
/// The texture format the glyph atlas and the images are uploaded as.
pub const WEBGPU_TEXTURE_FORMAT: &str = "rgba8unorm";
/// The power preference the adapter is requested with.
pub const WEBGPU_POWER_PREFERENCE: &str = "high-performance";
/// The JavaScript method name `requestAdapter` on `GPU`.
pub const WEBGPU_METHOD_REQUEST_ADAPTER: &str = "requestAdapter";
/// The JavaScript method name `requestDevice` on `GPUAdapter`.
pub const WEBGPU_METHOD_REQUEST_DEVICE: &str = "requestDevice";
/// The JavaScript method name `getPreferredCanvasFormat` on `GPU`.
pub const WEBGPU_METHOD_GET_PREFERRED_CANVAS_FORMAT: &str = "getPreferredCanvasFormat";
/// The JavaScript method name `configure` on `GPUCanvasContext`.
pub const WEBGPU_METHOD_CONFIGURE: &str = "configure";
/// The JavaScript method name `createCommandEncoder` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_COMMAND_ENCODER: &str = "createCommandEncoder";
/// The JavaScript method name `createBuffer` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_BUFFER: &str = "createBuffer";
/// The JavaScript method name `createTexture` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_TEXTURE: &str = "createTexture";
/// The JavaScript method name `createSampler` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_SAMPLER: &str = "createSampler";
/// The JavaScript method name `createShaderModule` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_SHADER_MODULE: &str = "createShaderModule";
/// The JavaScript method name `createRenderPipeline` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_RENDER_PIPELINE: &str = "createRenderPipeline";
/// The JavaScript method name `createBindGroupLayout` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_BIND_GROUP_LAYOUT: &str = "createBindGroupLayout";
/// The JavaScript method name `createPipelineLayout` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_PIPELINE_LAYOUT: &str = "createPipelineLayout";
/// The JavaScript method name `createBindGroup` on `GPUDevice`.
pub const WEBGPU_METHOD_CREATE_BIND_GROUP: &str = "createBindGroup";
/// The JavaScript method name `beginRenderPass` on `GPUCommandEncoder`.
pub const WEBGPU_METHOD_BEGIN_RENDER_PASS: &str = "beginRenderPass";
/// The JavaScript method name `finish` on `GPUCommandEncoder`.
pub const WEBGPU_METHOD_FINISH: &str = "finish";
/// The JavaScript method name `submit` on `GPUQueue`.
pub const WEBGPU_METHOD_SUBMIT: &str = "submit";
/// The JavaScript method name `writeBuffer` on `GPUQueue`.
pub const WEBGPU_METHOD_WRITE_BUFFER: &str = "writeBuffer";
/// The JavaScript method name `copyExternalImageToTexture` on `GPUQueue`.
pub const WEBGPU_METHOD_COPY_EXTERNAL_IMAGE: &str = "copyExternalImageToTexture";
/// The JavaScript method name `getCurrentTexture` on `GPUCanvasContext`.
pub const WEBGPU_METHOD_GET_CURRENT_TEXTURE: &str = "getCurrentTexture";
/// The JavaScript method name `createView` on `GPUTexture`.
pub const WEBGPU_METHOD_CREATE_VIEW: &str = "createView";
/// The JavaScript method name `destroy` on `GPUBuffer` and `GPUTexture`.
pub const WEBGPU_METHOD_DESTROY: &str = "destroy";
/// The JavaScript method name `setPipeline` on `GPURenderPassEncoder`.
pub const WEBGPU_METHOD_SET_PIPELINE: &str = "setPipeline";
/// The JavaScript method name `setVertexBuffer` on `GPURenderPassEncoder`.
pub const WEBGPU_METHOD_SET_VERTEX_BUFFER: &str = "setVertexBuffer";
/// The JavaScript method name `setIndexBuffer` on `GPURenderPassEncoder`.
pub const WEBGPU_METHOD_SET_INDEX_BUFFER: &str = "setIndexBuffer";
/// The JavaScript method name `setBindGroup` on `GPURenderPassEncoder`.
pub const WEBGPU_METHOD_SET_BIND_GROUP: &str = "setBindGroup";
/// The JavaScript method name `setScissorRect` on `GPURenderPassEncoder`.
pub const WEBGPU_METHOD_SET_SCISSOR_RECT: &str = "setScissorRect";
/// The JavaScript method name `drawIndexed` on `GPURenderPassEncoder`.
pub const WEBGPU_METHOD_DRAW_INDEXED: &str = "drawIndexed";
/// The JavaScript method name `end` on `GPURenderPassEncoder`.
pub const WEBGPU_METHOD_END: &str = "end";
/// The JavaScript property name `view` inside a colour attachment.
pub const WEBGPU_PROPERTY_VIEW: &str = "view";
/// The JavaScript property name `gpu` on the navigator.
pub const WEBGPU_PROPERTY_GPU: &str = "gpu";
/// The descriptor key of a bind group layout entry's binding number.
pub const WEBGPU_KEY_BINDING: &str = "binding";
/// The descriptor key of a bind group layout entry's visibility.
pub const WEBGPU_KEY_VISIBILITY: &str = "visibility";
/// The descriptor key of a bind group entry's resource.
pub const WEBGPU_KEY_RESOURCE: &str = "resource";
/// The descriptor key of a bind group layout's entries.
pub const WEBGPU_KEY_ENTRIES: &str = "entries";
/// The descriptor key of a bind group's layout.
pub const WEBGPU_KEY_LAYOUT: &str = "layout";
/// The descriptor key of a buffer or texture descriptor's size.
pub const WEBGPU_KEY_SIZE: &str = "size";
/// The descriptor key of a buffer or texture descriptor's usage.
pub const WEBGPU_KEY_USAGE: &str = "usage";
/// The descriptor key of a texture or target descriptor's format.
pub const WEBGPU_KEY_FORMAT: &str = "format";
/// The descriptor key of a texture descriptor's width.
pub const WEBGPU_KEY_WIDTH: &str = "width";
/// The descriptor key of a texture descriptor's height.
pub const WEBGPU_KEY_HEIGHT: &str = "height";
/// The descriptor key of a texture descriptor's depth or array layers.
pub const WEBGPU_KEY_DEPTH_OR_ARRAY_LAYERS: &str = "depthOrArrayLayers";
/// The descriptor key of a vertex attribute's shader location.
pub const WEBGPU_KEY_SHADER_LOCATION: &str = "shaderLocation";
/// The descriptor key of a vertex attribute's offset.
pub const WEBGPU_KEY_OFFSET: &str = "offset";
/// The descriptor key of the vertex state of a render pipeline.
pub const WEBGPU_KEY_VERTEX: &str = "vertex";
/// The descriptor key of a shader module.
pub const WEBGPU_KEY_MODULE: &str = "module";
/// The descriptor key of a shader entry point.
pub const WEBGPU_KEY_ENTRY_POINT: &str = "entryPoint";
/// The descriptor key of a blend factor's source factor.
pub const WEBGPU_KEY_SRC_FACTOR: &str = "srcFactor";
/// The descriptor key of a blend factor's destination factor.
pub const WEBGPU_KEY_DST_FACTOR: &str = "dstFactor";
/// The descriptor key of a blend state's operation.
pub const WEBGPU_KEY_OPERATION: &str = "operation";
/// The descriptor key of a bind group layout entry's buffer type.
pub const WEBGPU_KEY_TYPE: &str = "type";
/// The descriptor key of a texture binding.
pub const WEBGPU_KEY_TEXTURE: &str = "texture";
/// The descriptor key of a texture binding's buffer.
pub const WEBGPU_KEY_BUFFER: &str = "buffer";
/// The descriptor key of a texture copy's source.
pub const WEBGPU_KEY_SOURCE: &str = "source";
/// The descriptor key of a texture copy's vertical flip.
pub const WEBGPU_KEY_FLIP_Y: &str = "flipY";
/// The descriptor key of a texture copy's premultiplied alpha flag.
pub const WEBGPU_KEY_PREMULTIPLIED_ALPHA: &str = "premultipliedAlpha";
/// The vertex buffer step mode that advances per vertex.
pub const WEBGPU_STEP_MODE_VERTEX: &str = "vertex";
/// The vertex format of a two-component float attribute.
pub const WEBGPU_VERTEX_FORMAT_FLOAT32X2: &str = "float32x2";
/// The vertex format of a four-component normalised colour attribute.
pub const WEBGPU_VERTEX_FORMAT_UNORM8X4: &str = "unorm8x4";
/// The sampler filter that interpolates between the sampled texels.
pub const WEBGPU_FILTER_LINEAR: &str = "linear";
/// The sampler address mode that clamps to the edge of the texture.
pub const WEBGPU_ADDRESS_MODE_CLAMP_TO_EDGE: &str = "clamp-to-edge";
/// The blend factor that keeps the source colour.
pub const WEBGPU_BLEND_FACTOR_ONE: &str = "one";
/// The blend factor that fades the source colour by the alpha of the
/// destination.
pub const WEBGPU_BLEND_FACTOR_ONE_MINUS_SRC_ALPHA: &str = "one-minus-src-alpha";
/// The blend operation that adds the source and the destination.
pub const WEBGPU_BLEND_OPERATION_ADD: &str = "add";