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
|
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css" />
</head>
<body>
<canvas width=500 height=500></canvas>
</body>
<script>
ok(
SpecialPowers.getBoolPref("dom.webgpu.enabled"),
"Pref should be enabled."
);
async function body() {
var triangleVertWGSL = `@vertex
fn main(
@builtin(vertex_index) VertexIndex : u32
) -> @builtin(position) vec4f {
var pos = array<vec2f, 3>(
vec2(0.0, 0.5),
vec2(-0.5, -0.5),
vec2(0.5, -0.5)
);
return vec4f(pos[VertexIndex], 0.0, 1.0);
}
`;
var redFragWGSL = `@fragment
fn main() -> @location(0) vec4f {
return vec4(1.0, 0.0, 0.0, 1.0);
}`;
const canvas = document.querySelector('canvas');
const adapter = await navigator.gpu?.requestAdapter({ });
const device = await adapter?.requestDevice();
const context = canvas.getContext('webgpu');
const devicePixelRatio = window.devicePixelRatio;
canvas.width = canvas.clientWidth * devicePixelRatio;
canvas.height = canvas.clientHeight * devicePixelRatio;
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device,
format: presentationFormat,
});
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {
module: device.createShaderModule({
code: triangleVertWGSL,
}),
},
fragment: {
module: device.createShaderModule({
code: redFragWGSL,
}),
targets: [
{
format: presentationFormat,
},
],
},
primitive: {
topology: 'triangle-list',
},
});
function frame() {
const textureView = context.getCurrentTexture().createView();
const renderPassDescriptor = {
colorAttachments: [
{
view: textureView,
clearValue: [0, 0, 0, 0], // Clear to transparent
loadOp: 'clear',
storeOp: 'store',
},
],
};
function make_cmd() {
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.draw(3);
passEncoder.end();
return commandEncoder.finish();
}
device.queue.submit([make_cmd(), make_cmd()]);
}
requestAnimationFrame(frame);
}
SimpleTest.waitForExplicitFinish();
body()
.catch(e => ok(false, "Unhandled exception " + e))
.finally(() => SimpleTest.finish());
</script>
</html>
|
