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
|
"use strict";
let Example = {
initialize: async function (canvas) {
async function render(shaders) {
if (!navigator.gpu) {
throw new Error("WebGPU not supported on this browser.");
}
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
throw new Error("No appropriate GPUAdapter found.");
}
const device = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: canvasFormat,
});
const vertexBufferLayout = {
arrayStride: 8,
attributes: [{
format: "float32x2",
offset: 0,
shaderLocation: 0,
}],
};
const pipeline = device.createRenderPipeline({
label: "Pipeline",
layout: "auto",
vertex: {
module: device.createShaderModule({
label: "Vertex shader module",
code: shaders.vertex
}),
entryPoint: "vertexMain",
buffers: [vertexBufferLayout]
},
fragment: {
module: device.createShaderModule({
label: "Fragment shader module",
code: shaders.fragment
}),
entryPoint: "fragmentMain",
targets: [{
format: canvasFormat
}]
}
});
const vertices = new Float32Array([
0.0, -0.8,
+0.8, +0.8,
-0.8, +0.8,
]);
const vertexBuffer = device.createBuffer({
label: "Triangle vertices",
size: vertices.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
const bufferOffset = 0;
device.queue.writeBuffer(vertexBuffer, bufferOffset, vertices);
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
loadOp: "clear",
clearValue: { r: 0, g: 0, b: 0, a: 1 },
storeOp: "store",
}]
});
pass.setPipeline(pipeline);
const vertexBufferSlot = 0;
pass.setVertexBuffer(vertexBufferSlot, vertexBuffer);
pass.draw(vertices.length / 2);
pass.end();
const commandBuffer = encoder.finish();
device.queue.submit([commandBuffer]);
}
render({
vertex: await fetch("shader.vertex.wgsl").then(r => r.text()),
fragment: await fetch("shader.fragment.wgsl").then(r => r.text()),
});
}
}
|
