forked from webgpu/webgpu-samples
-
Notifications
You must be signed in to change notification settings - Fork 27
/
helloTriangle.ts
120 lines (99 loc) · 2.84 KB
/
helloTriangle.ts
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
import glslangModule from '../glslang';
export const title = 'Hello Triangle';
export const description = 'Shows rendering a basic triangle.';
export async function init(canvas: HTMLCanvasElement, useWGSL: boolean) {
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const glslang = await glslangModule();
const context = canvas.getContext("gpupresent");
const swapChainFormat = "bgra8unorm";
const swapChain = context.configureSwapChain({
device,
format: swapChainFormat,
});
const pipeline = device.createRenderPipeline({
vertexStage: {
module: useWGSL
? device.createShaderModule({
code: wgslShaders.vertex,
})
: device.createShaderModule({
code: glslShaders.vertex,
transform: (glsl) => glslang.compileGLSL(glsl, "vertex"),
}),
entryPoint: "main",
},
fragmentStage: {
module: useWGSL
? device.createShaderModule({
code: wgslShaders.fragment,
})
: device.createShaderModule({
code: glslShaders.fragment,
transform: (glsl) => glslang.compileGLSL(glsl, "fragment"),
}),
entryPoint: "main",
},
primitiveTopology: "triangle-list",
colorStates: [
{
format: swapChainFormat,
},
],
});
function frame() {
const commandEncoder = device.createCommandEncoder();
const textureView = swapChain.getCurrentTexture().createView();
const renderPassDescriptor: GPURenderPassDescriptor = {
colorAttachments: [
{
attachment: textureView,
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()]);
}
return frame;
}
export const glslShaders = {
vertex: `#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);
}
`,
fragment: `#version 450
layout(location = 0) out vec4 outColor;
void main() {
outColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`,
};
export const wgslShaders = {
vertex: `
const pos : array<vec2<f32>, 3> = array<vec2<f32>, 3>(
vec2<f32>(0.0, 0.5),
vec2<f32>(-0.5, -0.5),
vec2<f32>(0.5, -0.5));
[[builtin(position)]] var<out> Position : vec4<f32>;
[[builtin(vertex_idx)]] var<in> VertexIndex : i32;
[[stage(vertex)]]
fn main() -> void {
Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
return;
}
`,
fragment: `
[[location(0)]] var<out> outColor : vec4<f32>;
[[stage(fragment)]]
fn main() -> void {
outColor = vec4<f32>(1.0, 0.0, 0.0, 1.0);
return;
}
`,
};