-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtriangle_msaa.html
122 lines (111 loc) · 3.91 KB
/
triangle_msaa.html
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
<html>
<head>
<title>WebGPU triangle MSAA example</title>
<style>
body {
margin: 0;
background-color: #000;
color: #fff;
overscroll-behavior: none;
}
</style>
</head>
<body>
<script type="module">
import glslangModule from './js/glslang.js';
// @TODO: Detect WebGPU capability
const run = async () => {
const glslang = await glslangModule();
const vertexShaderCode = `#version 450
const vec2 pos[3] = vec2[3](
vec2(0.0f, 0.5f),
vec2(-0.5f, -0.5f),
vec2(0.5f, -0.5f)
);
void main() {
gl_Position = vec4(pos[gl_VertexIndex], 0.0, 1.0);
}
`;
const fragmentShaderCode = `#version 450
layout(location = 0) out vec4 outColor;
void main() {
outColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const context = canvas.getContext('gpupresent');
const format = 'bgra8unorm'
const swapChain = context.configureSwapChain({
device,
format
});
const sampleCount = 4;
const pipeline = device.createRenderPipeline({
layout: device.createPipelineLayout({bindGroupLayouts: []}),
vertexStage: {
module: device.createShaderModule({
code: glslang.compileGLSL(vertexShaderCode, 'vertex'),
source: vertexShaderCode,
transform: source => glslang.compileGLSL(source, 'vertex')
}),
entryPoint: 'main'
},
fragmentStage: {
module: device.createShaderModule({
code: glslang.compileGLSL(fragmentShaderCode, 'fragment'),
source: fragmentShaderCode,
transform: source => glslang.compileGLSL(source, 'fragment')
}),
entryPoint: 'main'
},
primitiveTopology: 'triangle-list',
colorStates: [{
format
}],
sampleCount
});
const texture = device.createTexture({
size: {
width: Math.floor(window.innerWidth * window.devicePixelRatio),
height: Math.floor(window.innerHeight * window.devicePixelRatio),
depth: 1
},
sampleCount,
format,
usage: GPUTextureUsage.OUTPUT_ATTACHMENT
});
const attachment = texture.createView();
const frame = () => {
const commandEncoder = device.createCommandEncoder({});
const renderPassDescriptor = {
colorAttachments: [{
attachment: attachment,
resolveTarget: swapChain.getCurrentTexture().createView(),
loadValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0}
}]
};
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.draw(3, 1, 0, 0);
passEncoder.endPass();
device.defaultQueue.submit([commandEncoder.finish()]);
};
const onResize = event => {
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = Math.floor(window.innerWidth * window.devicePixelRatio);
canvas.height = Math.floor(window.innerHeight * window.devicePixelRatio);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
};
window.addEventListener('resize', onResize, false);
onResize();
frame();
};
run();
</script>
</body>
</html>