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
|
import createPatternDataURL from './create-pattern-data-url.js';
import { runRefTest } from './gpu_ref_test.js';
runRefTest(async t => {
const { patternSize, imageData: patternImageData } = createPatternDataURL();
document.querySelector('#dpr')!.textContent = `dpr: ${devicePixelRatio}`;
const device = t.device;
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
const module = device.createShaderModule({
code: `
@vertex fn vs(
@builtin(vertex_index) VertexIndex : u32
) -> @builtin(position) vec4<f32> {
var pos = array<vec2<f32>, 3>(
vec2(-1.0, 3.0),
vec2(-1.0,-1.0),
vec2( 3.0,-1.0)
);
return vec4(pos[VertexIndex], 0.0, 1.0);
}
@group(0) @binding(0) var pattern: texture_2d<f32>;
@fragment fn fs(
@builtin(position) Pos : vec4<f32>
) -> @location(0) vec4<f32> {
let patternSize = textureDimensions(pattern, 0);
let uPos = vec2u(Pos.xy) % patternSize;
return textureLoad(pattern, uPos, 0);
}
`,
});
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {
module,
entryPoint: 'vs',
},
fragment: {
module,
entryPoint: 'fs',
targets: [{ format: presentationFormat }],
},
});
const tex = device.createTexture({
size: [patternSize, patternSize, 1],
format: 'rgba8unorm',
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
});
device.queue.writeTexture(
{ texture: tex },
patternImageData.data,
{ bytesPerRow: patternSize * 4, rowsPerImage: 4 },
{ width: patternSize, height: patternSize }
);
const bindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [{ binding: 0, resource: tex.createView() }],
});
function setCanvasPattern(
canvas: HTMLCanvasElement,
devicePixelWidth: number,
devicePixelHeight: number
) {
canvas.width = devicePixelWidth;
canvas.height = devicePixelHeight;
const context = canvas.getContext('webgpu') as GPUCanvasContext;
context.configure({
device,
format: presentationFormat,
alphaMode: 'premultiplied',
});
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({
colorAttachments: [
{
view: context.getCurrentTexture().createView(),
clearValue: [0.0, 0.0, 0.0, 0.0],
loadOp: 'clear',
storeOp: 'store',
},
],
});
pass.setPipeline(pipeline);
pass.setBindGroup(0, bindGroup);
pass.draw(3);
pass.end();
device.queue.submit([encoder.finish()]);
}
/*
This test creates elements like this
<body>
<div class="outer">
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
...
</div>
</body>
Where the outer div is a flexbox centering the child canvases.
Each of the child canvases is set to a different width in percent.
The size of each canvas in device pixels is queried with ResizeObserver
and then each canvases' resolution is set to that size so that there should
be one pixel in each canvas for each device pixel.
Each canvas is filled with a pattern using putImageData.
In the reference the canvas elements are replaced with divs.
For the divs the same pattern is applied with CSS and its size
adjusted so the pattern should appear with one pixel in the pattern
corresponding to 1 device pixel.
The reference and this page should then match.
*/
const outerElem = document.querySelector('.outer')!;
let resolve: (value: unknown) => void;
const promise = new Promise(_resolve => (resolve = _resolve));
function setPatternsUsingSizeInfo(entries: ResizeObserverEntry[]) {
for (const entry of entries) {
setCanvasPattern(
entry.target as HTMLCanvasElement,
entry.devicePixelContentBoxSize[0].inlineSize,
entry.devicePixelContentBoxSize[0].blockSize
);
}
resolve(true);
}
const observer = new ResizeObserver(setPatternsUsingSizeInfo);
for (let percentSize = 7; percentSize < 100; percentSize += 13) {
const canvasElem = document.createElement('canvas');
canvasElem.style.width = `${percentSize}%`;
observer.observe(canvasElem, { box: 'device-pixel-content-box' });
outerElem.appendChild(canvasElem);
}
await promise;
});
|
