0
# Configuration and Descriptors
1
2
Configuration interfaces and descriptor objects for creating and configuring GPU resources, pipelines, and state.
3
4
## Capabilities
5
6
### Base Object Descriptor
7
8
Common base interface for all GPU object descriptors.
9
10
```typescript { .api }
11
interface GPUObjectDescriptorBase {
12
/** Optional debug label for the object */
13
label?: string;
14
}
15
```
16
17
### Buffer Configuration
18
19
Descriptors for buffer creation and binding.
20
21
```typescript { .api }
22
interface GPUBufferDescriptor extends GPUObjectDescriptorBase {
23
/** Size of the buffer in bytes */
24
size: GPUSize64;
25
26
/** Buffer usage flags */
27
usage: GPUBufferUsageFlags;
28
29
/** Whether buffer should be mapped at creation */
30
mappedAtCreation?: boolean;
31
}
32
33
interface GPUBufferBinding {
34
/** Buffer to bind */
35
buffer: GPUBuffer;
36
37
/** Byte offset into the buffer */
38
offset?: GPUSize64;
39
40
/** Number of bytes to bind (defaults to entire buffer from offset) */
41
size?: GPUSize64;
42
}
43
```
44
45
### Texture Configuration
46
47
Descriptors for texture and texture view creation.
48
49
```typescript { .api }
50
interface GPUTextureDescriptor extends GPUObjectDescriptorBase {
51
/** Texture dimensions */
52
size: GPUExtent3D;
53
54
/** Number of mip levels (default: 1) */
55
mipLevelCount?: GPUIntegerCoordinate;
56
57
/** Samples per texel for multisampling (default: 1) */
58
sampleCount?: GPUSize32;
59
60
/** Texture dimension (default: "2d") */
61
dimension?: GPUTextureDimension;
62
63
/** Pixel format */
64
format: GPUTextureFormat;
65
66
/** Usage flags */
67
usage: GPUTextureUsageFlags;
68
69
/** View formats that can be used with this texture */
70
viewFormats?: Iterable<GPUTextureFormat>;
71
}
72
73
interface GPUTextureViewDescriptor extends GPUObjectDescriptorBase {
74
/** View format (defaults to texture format) */
75
format?: GPUTextureFormat;
76
77
/** View dimension (defaults to texture dimension) */
78
dimension?: GPUTextureViewDimension;
79
80
/** Texture aspect to view */
81
aspect?: GPUTextureAspect;
82
83
/** Base mip level */
84
baseMipLevel?: GPUIntegerCoordinate;
85
86
/** Number of mip levels (defaults to all remaining) */
87
mipLevelCount?: GPUIntegerCoordinate;
88
89
/** Base array layer */
90
baseArrayLayer?: GPUIntegerCoordinate;
91
92
/** Number of array layers (defaults to all remaining) */
93
arrayLayerCount?: GPUIntegerCoordinate;
94
}
95
```
96
97
### Sampler Configuration
98
99
Descriptor for sampler state configuration.
100
101
```typescript { .api }
102
interface GPUSamplerDescriptor extends GPUObjectDescriptorBase {
103
/** Address mode for U coordinate (default: "clamp-to-edge") */
104
addressModeU?: GPUAddressMode;
105
106
/** Address mode for V coordinate (default: "clamp-to-edge") */
107
addressModeV?: GPUAddressMode;
108
109
/** Address mode for W coordinate (default: "clamp-to-edge") */
110
addressModeW?: GPUAddressMode;
111
112
/** Magnification filter (default: "nearest") */
113
magFilter?: GPUFilterMode;
114
115
/** Minification filter (default: "nearest") */
116
minFilter?: GPUFilterMode;
117
118
/** Mipmap filter (default: "nearest") */
119
mipmapFilter?: GPUMipmapFilterMode;
120
121
/** Minimum LOD clamp (default: 0) */
122
lodMinClamp?: number;
123
124
/** Maximum LOD clamp (default: 32) */
125
lodMaxClamp?: number;
126
127
/** Comparison function for depth textures */
128
compare?: GPUCompareFunction;
129
130
/** Maximum anisotropy (default: 1) */
131
maxAnisotropy?: number;
132
}
133
```
134
135
### Bind Group Configuration
136
137
Descriptors for bind groups and their layouts.
138
139
```typescript { .api }
140
interface GPUBindGroupDescriptor extends GPUObjectDescriptorBase {
141
/** Layout defining the bind group structure */
142
layout: GPUBindGroupLayout;
143
144
/** Array of resource bindings */
145
entries: Iterable<GPUBindGroupEntry>;
146
}
147
148
interface GPUBindGroupEntry {
149
/** Binding index matching shader */
150
binding: GPUIndex32;
151
152
/** Resource to bind */
153
resource: GPUBindingResource;
154
}
155
156
interface GPUBindGroupLayoutDescriptor extends GPUObjectDescriptorBase {
157
/** Array of binding layout entries */
158
entries: Iterable<GPUBindGroupLayoutEntry>;
159
}
160
161
interface GPUBindGroupLayoutEntry {
162
/** Binding index */
163
binding: GPUIndex32;
164
165
/** Shader stages that can access this binding */
166
visibility: GPUShaderStageFlags;
167
168
/** Buffer binding layout */
169
buffer?: GPUBufferBindingLayout;
170
171
/** Sampler binding layout */
172
sampler?: GPUSamplerBindingLayout;
173
174
/** Texture binding layout */
175
texture?: GPUTextureBindingLayout;
176
177
/** Storage texture binding layout */
178
storageTexture?: GPUStorageTextureBindingLayout;
179
180
/** External texture binding layout */
181
externalTexture?: GPUExternalTextureBindingLayout;
182
}
183
184
interface GPUBufferBindingLayout {
185
/** Buffer binding type (default: "uniform") */
186
type?: GPUBufferBindingType;
187
188
/** Whether binding has dynamic offset */
189
hasDynamicOffset?: boolean;
190
191
/** Minimum binding size in bytes */
192
minBindingSize?: GPUSize64;
193
}
194
195
interface GPUSamplerBindingLayout {
196
/** Sampler binding type (default: "filtering") */
197
type?: GPUSamplerBindingType;
198
}
199
200
interface GPUTextureBindingLayout {
201
/** Sample type (default: "float") */
202
sampleType?: GPUTextureSampleType;
203
204
/** View dimension (default: "2d") */
205
viewDimension?: GPUTextureViewDimension;
206
207
/** Whether texture is multisampled */
208
multisampled?: boolean;
209
}
210
211
interface GPUStorageTextureBindingLayout {
212
/** Storage access mode (default: "write-only") */
213
access?: GPUStorageTextureAccess;
214
215
/** Texture format */
216
format: GPUTextureFormat;
217
218
/** View dimension (default: "2d") */
219
viewDimension?: GPUTextureViewDimension;
220
}
221
222
interface GPUExternalTextureBindingLayout {}
223
```
224
225
### Pipeline Configuration
226
227
Base configuration for pipelines and their layouts.
228
229
```typescript { .api }
230
interface GPUPipelineLayoutDescriptor extends GPUObjectDescriptorBase {
231
/** Array of bind group layouts */
232
bindGroupLayouts: Iterable<GPUBindGroupLayout>;
233
}
234
235
interface GPUPipelineDescriptorBase extends GPUObjectDescriptorBase {
236
/** Pipeline layout or "auto" for automatic layout generation */
237
layout: GPUPipelineLayout | "auto";
238
}
239
240
interface GPUProgrammableStage {
241
/** Shader module containing the stage code */
242
module: GPUShaderModule;
243
244
/** Entry point function name (default: "main") */
245
entryPoint?: string;
246
247
/** Pipeline constants to specialize the shader */
248
constants?: Record<string, GPUPipelineConstantValue>;
249
}
250
```
251
252
### Render Pipeline Configuration
253
254
Complete render pipeline state configuration.
255
256
```typescript { .api }
257
interface GPURenderPipelineDescriptor extends GPUPipelineDescriptorBase {
258
/** Vertex stage configuration */
259
vertex: GPUVertexState;
260
261
/** Primitive assembly configuration */
262
primitive?: GPUPrimitiveState;
263
264
/** Depth/stencil state */
265
depthStencil?: GPUDepthStencilState;
266
267
/** Multisample state */
268
multisample?: GPUMultisampleState;
269
270
/** Fragment stage configuration */
271
fragment?: GPUFragmentState;
272
}
273
274
interface GPUVertexState extends GPUProgrammableStage {
275
/** Vertex buffer layout descriptions */
276
buffers?: Iterable<GPUVertexBufferLayout | null>;
277
}
278
279
interface GPUVertexBufferLayout {
280
/** Stride between vertices in bytes */
281
arrayStride: GPUSize64;
282
283
/** Step mode for vertex fetching (default: "vertex") */
284
stepMode?: GPUVertexStepMode;
285
286
/** Vertex attribute descriptions */
287
attributes: Iterable<GPUVertexAttribute>;
288
}
289
290
interface GPUVertexAttribute {
291
/** Vertex format */
292
format: GPUVertexFormat;
293
294
/** Byte offset within vertex */
295
offset: GPUSize64;
296
297
/** Shader location binding */
298
shaderLocation: GPUIndex32;
299
}
300
301
interface GPUPrimitiveState {
302
/** Primitive topology (default: "triangle-list") */
303
topology?: GPUPrimitiveTopology;
304
305
/** Strip index format for strip topologies */
306
stripIndexFormat?: GPUIndexFormat;
307
308
/** Front face winding (default: "ccw") */
309
frontFace?: GPUFrontFace;
310
311
/** Face culling mode (default: "none") */
312
cullMode?: GPUCullMode;
313
314
/** Whether to enable conservative rasterization */
315
unclippedDepth?: boolean;
316
}
317
318
interface GPUFragmentState extends GPUProgrammableStage {
319
/** Color target states */
320
targets: Iterable<GPUColorTargetState | null>;
321
}
322
323
interface GPUColorTargetState {
324
/** Color format */
325
format: GPUTextureFormat;
326
327
/** Blend state */
328
blend?: GPUBlendState;
329
330
/** Write mask (default: all channels) */
331
writeMask?: GPUColorWriteFlags;
332
}
333
334
interface GPUBlendState {
335
/** Color blend configuration */
336
color: GPUBlendComponent;
337
338
/** Alpha blend configuration */
339
alpha: GPUBlendComponent;
340
}
341
342
interface GPUBlendComponent {
343
/** Blend operation (default: "add") */
344
operation?: GPUBlendOperation;
345
346
/** Source factor (default: "one") */
347
srcFactor?: GPUBlendFactor;
348
349
/** Destination factor (default: "zero") */
350
dstFactor?: GPUBlendFactor;
351
}
352
353
interface GPUDepthStencilState {
354
/** Depth/stencil format */
355
format: GPUTextureFormat;
356
357
/** Whether depth writes are enabled (default: false) */
358
depthWriteEnabled?: boolean;
359
360
/** Depth comparison function (default: "always") */
361
depthCompare?: GPUCompareFunction;
362
363
/** Stencil front face state */
364
stencilFront?: GPUStencilFaceState;
365
366
/** Stencil back face state */
367
stencilBack?: GPUStencilFaceState;
368
369
/** Stencil read mask (default: 0xFFFFFFFF) */
370
stencilReadMask?: GPUStencilValue;
371
372
/** Stencil write mask (default: 0xFFFFFFFF) */
373
stencilWriteMask?: GPUStencilValue;
374
375
/** Depth bias constant (default: 0) */
376
depthBias?: GPUDepthBias;
377
378
/** Depth bias slope scale (default: 0) */
379
depthBiasSlopeScale?: number;
380
381
/** Depth bias clamp (default: 0) */
382
depthBiasClamp?: number;
383
}
384
385
interface GPUStencilFaceState {
386
/** Comparison function (default: "always") */
387
compare?: GPUCompareFunction;
388
389
/** Fail operation (default: "keep") */
390
failOp?: GPUStencilOperation;
391
392
/** Depth fail operation (default: "keep") */
393
depthFailOp?: GPUStencilOperation;
394
395
/** Pass operation (default: "keep") */
396
passOp?: GPUStencilOperation;
397
}
398
399
interface GPUMultisampleState {
400
/** Number of samples (default: 1) */
401
count?: GPUSize32;
402
403
/** Sample mask (default: 0xFFFFFFFF) */
404
mask?: GPUSampleMask;
405
406
/** Alpha to coverage enabled (default: false) */
407
alphaToCoverageEnabled?: boolean;
408
}
409
```
410
411
### Compute Pipeline Configuration
412
413
Configuration for compute pipelines.
414
415
```typescript { .api }
416
interface GPUComputePipelineDescriptor extends GPUPipelineDescriptorBase {
417
/** Compute stage configuration */
418
compute: GPUProgrammableStage;
419
}
420
```
421
422
### Shader Module Configuration
423
424
Configuration for shader compilation and hints.
425
426
```typescript { .api }
427
interface GPUShaderModuleDescriptor extends GPUObjectDescriptorBase {
428
/** WGSL shader source code */
429
code: string;
430
431
/** Optional compilation hints for optimization */
432
hints?: Record<string, GPUShaderModuleCompilationHint>;
433
}
434
435
interface GPUShaderModuleCompilationHint {
436
/** Entry point name */
437
entryPoint?: string;
438
439
/** Pipeline layout for optimization */
440
layout?: GPUPipelineLayout | "auto";
441
}
442
```
443
444
### Device Configuration
445
446
Configuration for device creation and queues.
447
448
```typescript { .api }
449
interface GPUDeviceDescriptor extends GPUObjectDescriptorBase {
450
/** Required features */
451
requiredFeatures?: Iterable<GPUFeatureName>;
452
453
/** Required limits */
454
requiredLimits?: Record<string, GPUSize64>;
455
456
/** Default queue configuration */
457
defaultQueue?: GPUQueueDescriptor;
458
}
459
460
interface GPUQueueDescriptor extends GPUObjectDescriptorBase {}
461
462
interface GPURequestAdapterOptions {
463
/** Power preference for adapter selection */
464
powerPreference?: GPUPowerPreference;
465
466
/** Force fallback adapter */
467
forceFallbackAdapter?: boolean;
468
}
469
```
470
471
### Canvas Configuration
472
473
Configuration for canvas contexts and rendering.
474
475
```typescript { .api }
476
interface GPUCanvasConfiguration {
477
/** Device to use for rendering */
478
device: GPUDevice;
479
480
/** Surface format */
481
format: GPUTextureFormat;
482
483
/** Surface usage flags (default: RENDER_ATTACHMENT) */
484
usage?: GPUTextureUsageFlags;
485
486
/** Color space (default: "srgb") */
487
colorSpace?: GPUCanvasColorSpace;
488
489
/** Tone mapping configuration */
490
toneMapping?: GPUCanvasToneMapping;
491
492
/** Alpha mode (default: "opaque") */
493
alphaMode?: GPUCanvasAlphaMode;
494
495
/** View formats that can be used */
496
viewFormats?: Iterable<GPUTextureFormat>;
497
}
498
499
interface GPUCanvasToneMapping {
500
/** Tone mapping mode (default: "standard") */
501
mode?: GPUCanvasToneMappingMode;
502
}
503
504
interface GPUCanvasConfigurationOut {
505
readonly device: GPUDevice;
506
readonly format: GPUTextureFormat;
507
readonly usage: GPUTextureUsageFlags;
508
readonly colorSpace: GPUCanvasColorSpace;
509
readonly toneMapping: GPUCanvasToneMapping;
510
readonly alphaMode: GPUCanvasAlphaMode;
511
readonly viewFormats: ReadonlyArray<GPUTextureFormat>;
512
}
513
```
514
515
### Query Configuration
516
517
Configuration for query sets.
518
519
```typescript { .api }
520
interface GPUQuerySetDescriptor extends GPUObjectDescriptorBase {
521
/** Type of queries in the set */
522
type: GPUQueryType;
523
524
/** Number of queries in the set */
525
count: GPUSize32;
526
}
527
```
528
529
### External Texture Configuration
530
531
Configuration for external textures from image sources.
532
533
```typescript { .api }
534
interface GPUExternalTextureDescriptor extends GPUObjectDescriptorBase {
535
/** External image source */
536
source: GPUCopyExternalImageSource;
537
538
/** Color space (default: "srgb") */
539
colorSpace?: GPUExternalTextureColorSpace;
540
}
541
```
542
543
### Command Encoder Configuration
544
545
Configuration for command recording.
546
547
```typescript { .api }
548
interface GPUCommandEncoderDescriptor extends GPUObjectDescriptorBase {}
549
550
interface GPUCommandBufferDescriptor extends GPUObjectDescriptorBase {}
551
552
interface GPURenderPassDescriptor extends GPUObjectDescriptorBase {
553
/** Color attachments */
554
colorAttachments: Iterable<GPURenderPassColorAttachment | null>;
555
556
/** Depth/stencil attachment */
557
depthStencilAttachment?: GPURenderPassDepthStencilAttachment;
558
559
/** Occlusion query set */
560
occlusionQuerySet?: GPUQuerySet;
561
562
/** Timestamp query writes */
563
timestampWrites?: GPURenderPassTimestampWrites;
564
565
/** Maximum number of draw commands */
566
maxDrawCount?: GPUSize64;
567
}
568
569
interface GPUComputePassDescriptor extends GPUObjectDescriptorBase {
570
/** Timestamp query writes */
571
timestampWrites?: GPUComputePassTimestampWrites;
572
}
573
```
574
575
## Usage Examples
576
577
### Buffer Configuration
578
579
```typescript
580
// Vertex buffer configuration
581
const vertexBufferDesc: GPUBufferDescriptor = {
582
size: vertexData.byteLength,
583
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
584
label: "Mesh Vertices"
585
};
586
const vertexBuffer = device.createBuffer(vertexBufferDesc);
587
588
// Uniform buffer with mapping
589
const uniformBufferDesc: GPUBufferDescriptor = {
590
size: 256, // 4x4 matrix + padding
591
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
592
mappedAtCreation: true,
593
label: "View-Projection Matrix"
594
};
595
const uniformBuffer = device.createBuffer(uniformBufferDesc);
596
597
// Storage buffer for compute
598
const storageBufferDesc: GPUBufferDescriptor = {
599
size: 1024 * 1024, // 1MB
600
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
601
label: "Particle Data"
602
};
603
const storageBuffer = device.createBuffer(storageBufferDesc);
604
```
605
606
### Texture Configuration
607
608
```typescript
609
// Color texture with mipmaps
610
const colorTextureDesc: GPUTextureDescriptor = {
611
size: { width: 1024, height: 1024 },
612
mipLevelCount: Math.floor(Math.log2(1024)) + 1, // Full mip chain
613
format: "rgba8unorm",
614
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
615
label: "Albedo Texture"
616
};
617
const colorTexture = device.createTexture(colorTextureDesc);
618
619
// Depth buffer
620
const depthTextureDesc: GPUTextureDescriptor = {
621
size: { width: 1920, height: 1080 },
622
format: "depth24plus-stencil8",
623
usage: GPUTextureUsage.RENDER_ATTACHMENT,
624
label: "Scene Depth Buffer"
625
};
626
const depthTexture = device.createTexture(depthTextureDesc);
627
628
// Multisampled render target
629
const msaaTextureDesc: GPUTextureDescriptor = {
630
size: { width: 1920, height: 1080 },
631
sampleCount: 4,
632
format: "bgra8unorm",
633
usage: GPUTextureUsage.RENDER_ATTACHMENT,
634
label: "MSAA Color Target"
635
};
636
const msaaTexture = device.createTexture(msaaTextureDesc);
637
638
// Cube map texture
639
const cubeTextureDesc: GPUTextureDescriptor = {
640
size: { width: 512, height: 512, depthOrArrayLayers: 6 },
641
format: "rgba16float",
642
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
643
label: "Environment Cube Map"
644
};
645
const cubeTexture = device.createTexture(cubeTextureDesc);
646
```
647
648
### Sampler Configuration
649
650
```typescript
651
// Linear filtering sampler
652
const linearSamplerDesc: GPUSamplerDescriptor = {
653
addressModeU: "repeat",
654
addressModeV: "repeat",
655
magFilter: "linear",
656
minFilter: "linear",
657
mipmapFilter: "linear",
658
label: "Linear Repeat Sampler"
659
};
660
const linearSampler = device.createSampler(linearSamplerDesc);
661
662
// Shadow comparison sampler
663
const shadowSamplerDesc: GPUSamplerDescriptor = {
664
addressModeU: "clamp-to-edge",
665
addressModeV: "clamp-to-edge",
666
magFilter: "linear",
667
minFilter: "linear",
668
compare: "less-equal",
669
label: "Shadow Sampler"
670
};
671
const shadowSampler = device.createSampler(shadowSamplerDesc);
672
673
// Anisotropic filtering sampler
674
const anisotropicSamplerDesc: GPUSamplerDescriptor = {
675
addressModeU: "repeat",
676
addressModeV: "repeat",
677
magFilter: "linear",
678
minFilter: "linear",
679
mipmapFilter: "linear",
680
maxAnisotropy: 16,
681
label: "Anisotropic Sampler"
682
};
683
const anisotropicSampler = device.createSampler(anisotropicSamplerDesc);
684
```
685
686
### Bind Group Layout Configuration
687
688
```typescript
689
// Material bind group layout
690
const materialLayoutDesc: GPUBindGroupLayoutDescriptor = {
691
entries: [
692
{
693
binding: 0,
694
visibility: GPUShaderStage.FRAGMENT,
695
buffer: { type: "uniform" }
696
},
697
{
698
binding: 1,
699
visibility: GPUShaderStage.FRAGMENT,
700
sampler: { type: "filtering" }
701
},
702
{
703
binding: 2,
704
visibility: GPUShaderStage.FRAGMENT,
705
texture: { sampleType: "float", viewDimension: "2d" }
706
},
707
{
708
binding: 3,
709
visibility: GPUShaderStage.FRAGMENT,
710
texture: { sampleType: "float", viewDimension: "2d" }
711
}
712
],
713
label: "Material Layout"
714
};
715
const materialLayout = device.createBindGroupLayout(materialLayoutDesc);
716
717
// Compute bind group layout
718
const computeLayoutDesc: GPUBindGroupLayoutDescriptor = {
719
entries: [
720
{
721
binding: 0,
722
visibility: GPUShaderStage.COMPUTE,
723
buffer: { type: "read-only-storage" }
724
},
725
{
726
binding: 1,
727
visibility: GPUShaderStage.COMPUTE,
728
buffer: { type: "storage" }
729
},
730
{
731
binding: 2,
732
visibility: GPUShaderStage.COMPUTE,
733
storageTexture: {
734
access: "write-only",
735
format: "rgba8unorm",
736
viewDimension: "2d"
737
}
738
}
739
],
740
label: "Compute Layout"
741
};
742
const computeLayout = device.createBindGroupLayout(computeLayoutDesc);
743
```
744
745
### Render Pipeline Configuration
746
747
```typescript
748
// Complete render pipeline configuration
749
const renderPipelineDesc: GPURenderPipelineDescriptor = {
750
layout: device.createPipelineLayout({
751
bindGroupLayouts: [sceneLayout, materialLayout]
752
}),
753
vertex: {
754
module: vertexShader,
755
entryPoint: "vs_main",
756
buffers: [
757
{
758
arrayStride: 44, // Position(12) + Normal(12) + Tangent(16) + UV(8)
759
attributes: [
760
{ format: "float32x3", offset: 0, shaderLocation: 0 }, // position
761
{ format: "float32x3", offset: 12, shaderLocation: 1 }, // normal
762
{ format: "float32x4", offset: 24, shaderLocation: 2 }, // tangent
763
{ format: "float32x2", offset: 40, shaderLocation: 3 } // uv
764
]
765
}
766
]
767
},
768
primitive: {
769
topology: "triangle-list",
770
cullMode: "back",
771
frontFace: "ccw"
772
},
773
depthStencil: {
774
format: "depth24plus-stencil8",
775
depthWriteEnabled: true,
776
depthCompare: "less",
777
stencilFront: {
778
compare: "always",
779
failOp: "keep",
780
depthFailOp: "keep",
781
passOp: "replace"
782
},
783
stencilBack: {
784
compare: "always",
785
failOp: "keep",
786
depthFailOp: "keep",
787
passOp: "replace"
788
}
789
},
790
multisample: {
791
count: 4,
792
alphaToCoverageEnabled: false
793
},
794
fragment: {
795
module: fragmentShader,
796
entryPoint: "fs_main",
797
targets: [
798
{
799
format: "bgra8unorm",
800
blend: {
801
color: {
802
srcFactor: "src-alpha",
803
dstFactor: "one-minus-src-alpha",
804
operation: "add"
805
},
806
alpha: {
807
srcFactor: "one",
808
dstFactor: "one-minus-src-alpha",
809
operation: "add"
810
}
811
},
812
writeMask: GPUColorWrite.ALL
813
}
814
]
815
},
816
label: "PBR Render Pipeline"
817
};
818
819
const renderPipeline = device.createRenderPipeline(renderPipelineDesc);
820
```
821
822
### Canvas Configuration
823
824
```typescript
825
// Configure canvas for high-quality rendering
826
const canvasConfig: GPUCanvasConfiguration = {
827
device,
828
format: navigator.gpu.getPreferredCanvasFormat(),
829
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
830
colorSpace: "display-p3", // Wide color gamut
831
alphaMode: "premultiplied",
832
toneMapping: { mode: "extended" }
833
};
834
835
context.configure(canvasConfig);
836
837
// Alternative configuration for maximum compatibility
838
const compatConfig: GPUCanvasConfiguration = {
839
device,
840
format: "bgra8unorm",
841
usage: GPUTextureUsage.RENDER_ATTACHMENT,
842
colorSpace: "srgb",
843
alphaMode: "opaque"
844
};
845
```
846
847
### Device Configuration
848
849
```typescript
850
// Request device with specific features and limits
851
const deviceDesc: GPUDeviceDescriptor = {
852
requiredFeatures: [
853
"depth-clip-control",
854
"timestamp-query",
855
"texture-compression-bc",
856
"indirect-first-instance"
857
],
858
requiredLimits: {
859
maxTextureDimension2D: 8192,
860
maxBufferSize: 1024 * 1024 * 1024, // 1GB
861
maxStorageBufferBindingSize: 128 * 1024 * 1024, // 128MB
862
maxUniformBufferBindingSize: 64 * 1024, // 64KB
863
maxBindGroups: 8,
864
maxDynamicUniformBuffersPerPipelineLayout: 8,
865
maxComputeWorkgroupSizeX: 1024,
866
maxComputeWorkgroupSizeY: 1024,
867
maxComputeWorkgroupSizeZ: 64
868
},
869
defaultQueue: {
870
label: "Main Queue"
871
},
872
label: "High Performance Device"
873
};
874
875
const device = await adapter.requestDevice(deviceDesc);
876
```
877
878
### Query Set Configuration
879
880
```typescript
881
// Timestamp query set for performance measurement
882
const timestampQueryDesc: GPUQuerySetDescriptor = {
883
type: "timestamp",
884
count: 16, // Enough for multiple passes
885
label: "Frame Timing Queries"
886
};
887
const timestampQueries = device.createQuerySet(timestampQueryDesc);
888
889
// Occlusion query set for visibility testing
890
const occlusionQueryDesc: GPUQuerySetDescriptor = {
891
type: "occlusion",
892
count: 100, // For many objects
893
label: "Occlusion Queries"
894
};
895
const occlusionQueries = device.createQuerySet(occlusionQueryDesc);
896
```