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
|
import { runRefTest } from './gpu_ref_test.js';
runRefTest(async t => {
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);
}
@fragment fn fs(
@builtin(position) Pos : vec4<f32>
) -> @location(0) vec4<f32> {
let black = vec4f(0, 0, 0, 1);
let white = vec4f(1, 1, 1, 1);
let iPos = vec4u(Pos);
let check = (iPos.x + iPos.y) & 1;
return mix(black, white, f32(check));
}
`,
});
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {
module,
entryPoint: 'vs',
},
fragment: {
module,
entryPoint: 'fs',
targets: [{ format: presentationFormat }],
},
});
function draw(selector: string, alphaMode: GPUCanvasAlphaMode) {
const canvas = document.querySelector(selector) as HTMLCanvasElement;
const context = canvas.getContext('webgpu') as GPUCanvasContext;
context.configure({
device,
format: presentationFormat,
alphaMode,
});
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.draw(3);
pass.end();
device.queue.submit([encoder.finish()]);
}
draw('#elem1', 'premultiplied');
draw('#elem2', 'premultiplied');
draw('#elem3', 'premultiplied');
draw('#elem4', 'opaque');
draw('#elem5', 'opaque');
draw('#elem6', 'opaque');
});
|
